Окно приветствия
Всем привет, нужна помощь по написанию одного скрипта.
Когда человек, вошел на сайт, нужно подгрузить раньше всего, окно приветствия. Его код: Код:
<div class="hello">Я так полагаю что нужно запомнить что сайт показал один раз окно в кеш или куки, а после того как человек вышел, и грубо говоря в течении минуты не заходил на сайт, очистить эти куки или кеш. И так по кругу. Кто поможет готов отблагодарить финансово. |
Какой язык на back-end'е?
|
php. Сайт на wp.
|
На JS делайте, если не знаете структуру модулей CMS.
|
Цитата:
|
Nexus, сделает, у меня работы и так ... :) В WP нужно только соблюсти правила подключения пользовательских js-скриптов.
|
Цитата:
|
Цитата:
|
Цитата:
Как вариант...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
(function(){
// Указать лимит по времени задержки в часах
var limit=0.01;
var hours=1000*60*60;
var date = localStorage.getItem('date');
if (date==null) {
append();
} else {
date=new Date(date);
date=(new Date()-date)/hours;
if (date>limit) {
append();
};
};
function append() {
var html;
html='<div class="hello">';
html+='<div class="hellotext">';
html+='<div align="center" class="logo">';
html+='<img src="/logo.png" alt="" />';
html+='Добро пожаловать!';
html+='</div>';
html+='</div>';
html+='</div>';
$('body').append(html);
var date=new Date();
localStorage.setItem('date',date);
};
})();
});
</script>
</head>
<body>
</body>
</html>
|
<div class="hello" style="display:none" id="welcome-window">
<div class="hellotext">
<div align="center" class="logo">
<img src="/logo.png" alt="" />
Добро пожаловать!
</div>
</div>
</div>
<script>
(function(){
const timestamp=new Date().getTime();//miliseconds
const maxInactivePeriod=2;//hours
const cookieName='welcome_window';
let lastVisit;
try{
lastVisit=+(localStorage.getItem('lastVisit')||timestamp);
localStorage.setItem('lastVisit',timestamp);
}catch(e){
lastVisit=timestamp;
console.error(e);
};
if(
lastVisit+maxInactivePeriod*3600*1000>timestamp &&
document.cookie.indexOf(cookieName)>=0
)
return;
const win=document.getElementById('welcome-window');
if(!win)
return;
win.style.display='block';
document.cookie='name='+cookieName+'; path=/;';
})();
</script>
|
<div class="hello" style="display:none" id="welcome-window">
<div class="hellotext">
<div align="center" class="logo">
<img src="/logo.png" alt="" />
Добро пожаловать!
</div>
</div>
</div>
<script>
(function(){
var win = document.getElementById("welcome-window");
if(win && "visited" in sessionStorage === false) {
win.style.display = "block";
sessionStorage.visited = true;
}
})();
</script>
|
Malleys,
:) :thanks: |
Если как у Malleys, если открыть в другом табе, приветствие будут отображено в каждом табе... и чтобы от этого избавиться надо завязываться на сессию php, или делать финт ушами ) через service workers + localStorage на стороне клиента... но можно и так, если не платить денег %)
|
SuperZen,
спасибо за уточнение! |
рони, не за что, в общем сессия php живет до закрытия браузера, sessionStorage живет до закрытия таба... надо хранить кол-во открытых табов, те при загрузке в localStorage сделать tab + 1, при закрытии таба делать tab -1, и если tab = 0 или пусто, то показываем приветствие... но тут появляется другая проблема, с точки перфекционизма, что будет если закрыть браузер, и потом его открыть, что показывать в открытых табах... только в одном табе показывать приветствие или во всех... задача из серии сделать "Remember Me" на "Login" странице, на стороне клиента... :)
|
Цитата:
|
Цитата:
Для сайта без регистрации/привязки к человеку это идеальное решение, а так оно должно показываться в зависимости от активности пользователя, т. е. посмотрел на компьютере, ему показали приветствие, потом решил смотреть на телефоне, ему приветствие уже не показывается, т. к. пару минут назад его приветствовали на компьютере. UPD Цитата:
Цитата:
<div class="hello" style="display:none" id="welcome-window">
<div class="hellotext">
<div align="center" class="logo">
<img src="/logo.png" alt="" />
Добро пожаловать!
</div>
</div>
</div>
<script>
(function(){
var win = document.getElementById("welcome-window");
if(
win && "visited" in sessionStorage === false &&
new URL(document.referrer, "file:///").host !== location.host
) {
win.style.display = "block";
sessionStorage.visited = true;
}
})();
</script>
<a href="?test">Link</a>
|
Ну теперь бабосов точно не увидим... :D
|
| Часовой пояс GMT +3, время: 14:51. |