Привязать спойлер к конкретному пользователю
Есть спойлер, который скрывает номер телефона. Как сделать, чтобы в течении какого-то времени посетитель сайта мог открыть его только один раз и спойлер в течении этого времени оставлся открытым для конкретного посетителя? Например, чтоб можно было открыть раз в сутки, а не после каждой перезагрузки страницы.
<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. |
Цитата:
|
Я о том если клиент зайдет повторно ЧЕРЕЗ ПОИСКОВИК, то чтоб его система восприняла как НОВОГО ПОЛЬЗОВАТЕЛЯ и ему пришлось кликнуть.
|
Pobedill,
function timeOver(index) {
if (~document.referrer.indexOf("вставьте нужное")) return false;
var time = 10000; //10сек заменить на 24 * 60 * 60 * 1000
return phoneStorage[index] && Date.now() < phoneStorage[index] + time
}
|
Сделал так:
$(function() {
var phoneStorage = localStorage.getItem("phoneStorage") || "{}";
phoneStorage = JSON.parse(phoneStorage);
function timeOver(index) {
if (~document.referrer.indexOf("google.com.ua")) return false;
if (~document.referrer.indexOf("yandex.ua")) return false;
var time = 300000; //запомнить пользователя на 5 мин.
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(600)
});
timeOver(index) && $(element).hide().next().slideDown(600)
})
});
Только осталась проблемка. Зашел с поисковика - кликнул - всё нормально. А потом обновил страницу и могу еще кликать. |
Цитата:
|
Получилось так, что когда заходишь на страничку с Гугла или Яндекса, то система вообще не запоминает пользователя, а надо чтоб запоминала после первого клика. Чтобы каждый раз заходя с поиска можно было кликнуть один раз.
|
Pobedill,
не может не запоминатся клик, но если в referrer сидит поисковик ... открытия не будет при заходе. меняйте логику тогда, выстраивайте другой алгоритм. |
Так при заходе с поисковика автоматического открытия спойлера и не надо. Как я и хотел, сейчас повторный вход на страницу с поиска воспринимается как новый. Но после клика то система должна его запомнить, а то так можно накрутить сотню кликов...
Как я думаю, нужно чтобы при заходе с поиска как бы очищались данные об этом пользователе в хранилище. И если кто захочет накрутить 100 кликов, ему придется 100 раз выйти в поисковик. Как-то так) Или я сейчас чушь несу? |
Pobedill,
не осилил, чего вы хотите |
Клиент зашел и открыл номер телефона. Я получил деньги за этот клик. Чтобы не было накруток кликов от злоумышленников, мне и нужен был этот скрипт. Но этот скрипт ограничивает повторные клики от клиентов которые пришли с поисковика. Поэтому мы добавили:
if (~document.referrer.indexOf("google.com.ua")) return false;
if (~document.referrer.indexOf("yandex.ua")) return false;
Но теперь открытая дорога для скликивания после каждой перезагрузки страницы. |
Pobedill,
так попробуйте
if (~document.referrer.indexOf("google.com.ua") && !phoneStorage[index]) return false;
if (~document.referrer.indexOf("yandex.ua") && !phoneStorage[index]) return false;
но лучше защита через сервер ... любой скрипт можно изменить на стороне клиента, как ему нужно будет. |
Зашел на сайт - открыл номер. Потом пошел в поиск - зашел на сайт, а номер открыт. То есть как нового пользователя не воспринял.
Если идей нет больше, то в любом случае спасибо за помощь. |
Цитата:
|
| Часовой пояс GMT +3, время: 08:29. |