Форум

ksa · #11 (**permalink**) 25.02.2015, 13:54

Сообщение от tk.stas

Как сделать так чтоб позиция сохранялась при закрытии и открытии браузера. То есть дошел до 3 закрыл, и открыл на 3.

Это возможно сделать только в пределах одного компа... Если запустишь на другом - откроет первую или ту, на какой остановились именно на этом компе...
Использовать локальное хранилище или по старинке - куки.

tk.stas · #12 (**permalink**) 25.02.2015, 17:32

Так и надо чтоб на одном компе было.
Подскажите как забить положение в локальное хранилище, и затем считать его. Я просто только начинаю изучать. Пока не могу понять.

ksa · #13 (**permalink**) 25.02.2015, 19:32

Сообщение от tk.stas

как забить положение в локальное хранилище, и затем считать его

Дык!

tk.stas · #14 (**permalink**) 05.03.2015, 22:19

Все никак не получается запомнить позицию в локальное хранилище, и затем открыть ее.
Может кто-нибудь поможет написать такой код на данном примере, а то все никак не получается.

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

BFAll,
для версии 1.6

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>selectable demo</title>
  <script src="http://code.jquery.com/jquery-1.6.js"></script>
  <style>
    p{ display: none; }
    .selected {  display: block;  }
  </style>
  <script>
   $(document).ready(function()
     {
       var p = $("p");
       p.first().addClass("selected");
            $(document).delegate( ".next, .prev", "click", function(event)
         {
           event.preventDefault();
           var selected = $(".selected");
           selected.removeClass("selected");
           if($(this).hasClass("next") ) {
             selected = selected.next('p').size()? selected.next():p.first() ;
           }
           else {
             selected = selected.prev('p').size()? selected.prev():p.last();
           }
           selected.addClass("selected");
         }
       )
     }
   );
  </script>
</head>

<body>
  <a href="" class="prev">prev</a> <a href="" class="next">next</a>
  <p>1</p><p>2</p><p>3</p>
</body>
</html>

рони · #15 (**permalink**) 05.03.2015, 22:40

tk.stas,

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>selectable demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <style>
    p{ display: none; }
    .selected {  display: block;  }
  </style>
  <script>
   $(document).ready(function()
     {
       var p = $("p"), i = localStorage.getItem("indx")||0;
       p.eq(i).addClass("selected");
            $(document).on("click", ".next, .prev",  function(event)
         {
           event.preventDefault();
           var selected = $(".selected");
           selected.removeClass("selected");
           if($(this).hasClass("next") ) {
             selected = selected.next('p').size()? selected.next():p.first() ;
           }
           else {
             selected = selected.prev('p').size()? selected.prev():p.last();
           }
           selected.addClass("selected");
           i = p.index(selected);
           localStorage.setItem("indx", i);
         }
       )
     }
   );
  </script>
</head>

<body>
  <a href="" class="prev">prev</a> <a href="" class="next">next</a>
  <p>1</p><p>2</p><p>3</p>
</body>
</html>

Sasha2000 · #16 (**permalink**) 16.08.2015, 21:02

А на чистом js данный скрипт не поможите сделать?

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

tk.stas,

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>selectable demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <style>
    p{ display: none; }
    .selected {  display: block;  }
  </style>
  <script>
   $(document).ready(function()
     {
       var p = $("p"), i = localStorage.getItem("indx")||0;
       p.eq(i).addClass("selected");
            $(document).on("click", ".next, .prev",  function(event)
         {
           event.preventDefault();
           var selected = $(".selected");
           selected.removeClass("selected");
           if($(this).hasClass("next") ) {
             selected = selected.next('p').size()? selected.next():p.first() ;
           }
           else {
             selected = selected.prev('p').size()? selected.prev():p.last();
           }
           selected.addClass("selected");
           i = p.index(selected);
           localStorage.setItem("indx", i);
         }
       )
     }
   );
  </script>
</head>

<body>
  <a href="" class="prev">prev</a> <a href="" class="next">next</a>
  <p>1</p><p>2</p><p>3</p>
</body>
</html>

рони · #17 (**permalink**) 16.08.2015, 21:49

Sasha2000,
а сами начать код?

EmperioAf · #18 (**permalink**) 16.08.2015, 22:23

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

А на чистом js данный скрипт не поможите сделать?

пройдёмся по коду, что надо заменить:
1) addClass, removeClass и hasClass заменяются соответственно на classList.add, classList.remove и classList.contains
Подробнее про classList тут:
https://developer.mozilla.org/ru/doc...ment/classList
2)$ можно заменить на document.querySelectorAll или на document.querySelector (если в дальнейшем на то, что мы выбираем селектором, пытаются повесить обработчик события)
$(document).ready(function(){
//code
}

можно заменить на window.onload = function(){
//code
}
3) p.eq(i) можно заменить на p[i]
4)$(document).on("click", ".next, .prev", function(event){//code});
очень условно можно заменить на document.querySelector('.next, .prev').addEventListener('click', function(event){//code}, false);
5)$(this) можно заменить на event.target
ну и т.д. в общем то по каждой функции идёте на:
https://api.jquery.com
и изучаете, что она делает и ищете в учебнике как можно это сделать на нативном JS
А вообще проще в теге head прописать:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

и не думать больше в дальнейшем как переписать с JQuery на JS

tk.stas · #19 (**permalink**) 25.08.2015, 12:08

Я использую данный скрипт в приложении на андройд, и почему-то именно в версии 4.3 происходит вылет при нажатии кнопок листания.

Получается не ахти. Зависаю уже на p[i], а что делать с

if(event.target.classList.contains("next") ) {
             selected = selected.next('p').size()? selected.next():p.first() ;
           }
           else {
             selected = selected.prev('p').size()? selected.prev():p.last();
           }

вообще не пойму.

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>selectable demo</title>
  <style>
    p{ display: none; }
    .selected {  display: block;  }
  </style>
  <script>
   window.onload = function(){
       var p = document.querySelector("p"), i = localStorage.getItem("indx");
        p[i].classList.add("selected");
     document.querySelector('.next, .prev').addEventListener('click', function(event){
       event.preventDefault();
           var selected = document.querySelector(".selected");
           selected.classList.remove("selected");
           if(event.target.classList.contains("next") ) {
             selected = selected.next('p').size()? selected.next():p.first() ;
           }
           else {
             selected = selected.prev('p').size()? selected.prev():p.last();
           }
           selected.classList.add("selected");
           i = p.index(selected);
           localStorage.setItem("indx", i);
     }, false);
}
  </script>
</head>

<body>
  <a href="" class="prev">prev</a> <a href="" class="next">next</a>
  <p>1</p><p>2</p><p>3</p>
</body>
</html>

Буду благодарен за помощь

рони · #20 (**permalink**) 25.08.2015, 13:00

tk.stas,

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>selectable demo</title>
  <style>
    p{ display: none; }
    .selected {  display: block;  }
  </style>
  <script>
   window.onload = function(){
       var p = document.querySelectorAll("p"), i = +localStorage.getItem("indx")||0;
        p[i].classList.add("selected");
     document.querySelector('.next').addEventListener('click', function(event){
          event.preventDefault();
            p[i].classList.remove("selected");
            i = ++i%p.length;
            p[i].classList.add("selected");
            localStorage.setItem("indx", i);
     }, false);
     document.querySelector('.prev').addEventListener('click', function(event){
          event.preventDefault();
            p[i].classList.remove("selected");
            i--;
            i < 0 && (i = p.length-1);
             p[i].classList.add("selected");
            localStorage.setItem("indx", i);
     }, false);
}
  </script>
</head>

<body>
  <a href="" class="prev">prev</a> <a href="" class="next">next</a>
  <p>1</p><p>2</p><p>3</p>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript