Форум

Pobedill · #1 (**permalink**) 12.03.2016, 19:21

Есть спойлер, который скрывает номер телефона. Как сделать, чтобы в течении какого-то времени посетитель сайта мог открыть его только один раз и спойлер в течении этого времени оставлся открытым для конкретного посетителя? Например, чтоб можно было открыть раз в сутки, а не после каждой перезагрузки страницы.

<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>

destus · #2 (**permalink**) 12.03.2016, 19:29

Pobedill,
http://htmlbook.ru/html5/storage

рони · #3 (**permalink**) 21.03.2016, 22:45

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>

Pobedill · #4 (**permalink**) 22.03.2016, 00:33

рони,
а можно как-то сделать, чтобы при перезагрузке УЖЕ показывался второй блок, а не менялся на глазах?
а также сделать по-плавнее само раскрытие?

Так прокатит, если на месяц надо запомнить пользователя?

$(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()
    })
});

рони · #5 (**permalink**) 22.03.2016, 01:03

Сообщение от Pobedill

Так прокатит, если на месяц надо запомнить пользователя?

да

Сообщение от Pobedill

по-плавнее само раскрытие?

$(element).hide().next().show(1200)
или
$(element).hide().next().slideDown(1200)

Сообщение от Pobedill

чтобы при перезагрузке УЖЕ показывался второй блок

timeOver(index) && $(element).hide("fast").next().show("fast")

Pobedill · #6 (**permalink**) 22.03.2016, 01:51

сделал так:

timeOver(index) && $(element).hide("fast").next().slideDown("fast")

Но это не то... Надо как-то подставить блок phone2 изначально в раскрытом виде

рони · #7 (**permalink**) 22.03.2016, 02:04

Сообщение от Pobedill

сделал так:

а зачем? почему не show? в этом месте

Pobedill · #8 (**permalink**) 22.03.2016, 11:51

Сообщение от рони

а зачем? почему не show? в этом месте

а show тоже раскрывает, но слева направо... а так вроде как от центра.
Тут вариант такой, что лучше сразу показывать блок, либо на крайний случай, плавно его раскрывать, но когда быстро раскрывается, то оно не смотрится.

рони · #9 (**permalink**) 22.03.2016, 12:01

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>

Pobedill · #10 (**permalink**) 22.03.2016, 12:48

Ставил в разные места... Решил сделать плавно как при клике - смотрится нормально и все равно не успеют кликнуть))

Еще одна просьба. Можно ли сделать так, чтобы пользователя не запоминало, если он перешел с поисковых систем и чтоб ему пришлось кликнуть самому? Это было бы вообще круто.
А именно google.com.ua и yandex.ua.

Форум

Справочник

Discord чат

Курсы javascript