Привязать спойлер к конкретному пользователю
Есть спойлер, который скрывает номер телефона. Как сделать, чтобы в течении какого-то времени посетитель сайта мог открыть его только один раз и спойлер в течении этого времени оставлся открытым для конкретного посетителя? Например, чтоб можно было открыть раз в сутки, а не после каждой перезагрузки страницы.
<div class="phone" onclick="this.style.display='none'; javascript:setrate(0)">+380XX XXX XX XX</div> <div class="phone2">Номер<br /> Имя</div>
.phone2 {display: none;
background: #90421C;
color: #f6f6f6;
font: 20px Arial, sans-serif;
padding: 10px 10px 10px 10px;
border-radius: 6px;
margin-top: -10px;
text-align: center;
}
.phone {cursor: pointer;
background: #90421C;
color: #f6f6f6;
font: 18px Arial, sans-serif;
padding: 10px 10px 10px 10px;
border-radius: 6px;
text-align: center;
}
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.phone2').hide()
jQuery('.phone').click(function(){
jQuery(this).toggleClass("folded").toggleClass("unfolded").next().slideToggle()
})
})
</script>
|
Pobedill,
http://htmlbook.ru/html5/storage |
Запоминание клика на сутки
Pobedill,
в примере сохрание на 10 секунд, за это время нажать кнопку и запустить пример заново.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.phone2 {display: none;
background: #90421C;
color: #f6f6f6;
font: 20px Arial, sans-serif;
padding: 10px 10px 10px 10px;
border-radius: 6px;
margin-top: -10px;
text-align: center;
}
.phone {cursor: pointer;
background: #90421C;
color: #f6f6f6;
font: 18px Arial, sans-serif;
padding: 10px 10px 10px 10px;
border-radius: 6px;
text-align: center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function() {
var phoneStorage = localStorage.getItem("phoneStorage") || "{}";
phoneStorage = JSON.parse(phoneStorage);
function timeOver(index) {
var time = 10000; //10сек заменить на 24 * 60 * 60 * 1000
return phoneStorage[index] && Date.now() < phoneStorage[index] + time
}
$(".phone").each(function(index, element) {
$(element).click(function() {
phoneStorage[index] = Date.now();
localStorage.setItem("phoneStorage", JSON.stringify(phoneStorage));
$(element).hide().next().show()
});
timeOver(index) && $(element).hide().next().show()
})
});
</script>
</head>
<body>
<div class="phone">+380XX XXX XX XX</div>
<div class="phone2">Номер<br /> Имя</div>
<div class="phone">+380XX XXX XX XX</div>
<div class="phone2">Номер<br /> Имя</div>
<div class="phone">+380XX XXX XX XX</div>
<div class="phone2">Номер<br /> Имя</div>
</body>
</html>
|
рони,
а можно как-то сделать, чтобы при перезагрузке УЖЕ показывался второй блок, а не менялся на глазах? а также сделать по-плавнее само раскрытие? Так прокатит, если на месяц надо запомнить пользователя?
$(function() {
var phoneStorage = localStorage.getItem("phoneStorage") || "{}";
phoneStorage = JSON.parse(phoneStorage);
function timeOver(index) {
var time = 30*24*60*60*1000; //запомнить пользователя на месяц
return phoneStorage[index] && Date.now() < phoneStorage[index] + time
}
$(".phone").each(function(index, element) {
$(element).click(function() {
phoneStorage[index] = Date.now();
localStorage.setItem("phoneStorage", JSON.stringify(phoneStorage));
$(element).hide().next().show()
});
timeOver(index) && $(element).hide().next().show()
})
});
|
Цитата:
Цитата:
или $(element).hide().next().slideDown(1200) Цитата:
|
сделал так:
timeOver(index) && $(element).hide("fast").next().slideDown("fast")
Но это не то... Надо как-то подставить блок phone2 изначально в раскрытом виде |
Цитата:
|
Цитата:
Тут вариант такой, что лучше сразу показывать блок, либо на крайний случай, плавно его раскрывать, но когда быстро раскрывается, то оно не смотрится. |
Pobedill,
как вариант поставить этот скрипт сразу после блока с этими всеми кнопками в районе строки 355 или ниже, нужно смотреть
<script>
(function() {
var phoneStorage = localStorage.getItem("phoneStorage") || "{}";
phoneStorage = JSON.parse(phoneStorage);
function timeOver(index) {
var time = 10000; //10сек заменить на 24 * 60 * 60 * 1000
return phoneStorage[index] && Date.now() < phoneStorage[index] + time
}
$(".phone").each(function(index, element) {
$(element).click(function() {
phoneStorage[index] = Date.now();
localStorage.setItem("phoneStorage", JSON.stringify(phoneStorage));
$(element).hide().next().slideDown(1200)
});
timeOver(index) && $(element).hide(10).next().show(10)
})
}());
</script>
|
Ставил в разные места... Решил сделать плавно как при клике - смотрится нормально и все равно не успеют кликнуть))
Еще одна просьба. Можно ли сделать так, чтобы пользователя не запоминало, если он перешел с поисковых систем и чтоб ему пришлось кликнуть самому? Это было бы вообще круто. А именно google.com.ua и yandex.ua. |
| Часовой пояс GMT +3, время: 20:19. |