Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.06.2011, 09:49
Аспирант
Отправить личное сообщение для vyrtime Посмотреть профиль Найти все сообщения от vyrtime
 
Регистрация: 09.06.2011
Сообщений: 32

Вертикальный скроллинг скрипта accordion на jquery
Привет! Подскажите как реализовать следующее:
Имеется скрипт - аккордеон на jquery:
$(document).ready(function(){
$(".accordion p").hide();
  $(".accordion h3").click(function(){
    $(this).next("p").slideToggle("slow")
    .siblings("p:visible").slideUp("fast");
    $(this).toggleClass("active");
    $(this).siblings("h3").removeClass("active");
    });
});

И следующая html структура:
<div class="accordion">
  <h3>Заголовок 1</h3>
  <p>
  Много много тектса...
  </p>
  <h3>Заголовок 2</h3>
  <p>
  Много много тектса...
  </p>
  <h3>Заголовок 3</h3>
  <p>
  Много много тектса...
  </p>
</div>

Как реализовать скроллинг(желательно плавный) при клике на <h3> заголовки
Т.е. когда кликаем на заголовки окно должно переместиться до заголовка <h3>
Надеюсь, суть понятна?
Ответить с цитированием
  #2 (permalink)  
Старый 20.06.2011, 10:52
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,134

Сообщение от vyrtime
когда кликаем на заголовки окно должно переместиться до заголовка
Как вариант, меняй паддинг у accordion в зависимости от координат заголовка...
Ответить с цитированием
  #3 (permalink)  
Старый 20.06.2011, 12:25
Аспирант
Отправить личное сообщение для vyrtime Посмотреть профиль Найти все сообщения от vyrtime
 
Регистрация: 09.06.2011
Сообщений: 32

Видимо ты меня...или я тебя не совсем понял...нужно чтобы выполнялся вот такой механизм(клинуть тут) в аккордеоне при клике на заголовки...
я попытался всё это совместить и сделать вот так:
$(document).ready(function(){
  $("#accordion div").hide();
      $("#accordion h2").click(function(){
        $(this).next("div").slideToggle("slow")
        .siblings("div:visible").slideUp("fast");
        $(this).toggleClass("active");
        $(this).siblings("h2").removeClass("active");
      });
	});
	
	$(document).ready(function() {
      $("a.ancLinks").click(function () {
        elementClick = $(this).attr("href");
        destination = $(elementClick).offset().top;
        if($.browser.safari){
          $('body').animate( { scrollTop: destination }, 1100 );
        }else{
          $('html').animate( { scrollTop: destination }, 1100 );
        }
        return false;
      });
    });

<div id="accrodion">
<h2 id="sec1"><a href="#sec1" class="ancLinks">Заголовок 1</a></h2><div>Много много текста...</div>
<h2 id="sec2"><a href="#sec2" class="ancLinks">Заголовок 2</a></h2><div>Много много текста...</div>
<h2 id="sec3"><a href="#sec3" class="ancLinks">Заголовок 3</a></h2><div>Много много текста...</div>
</div>

Но у меня ничего не вышло, вернее плавные переходы работают, но текст ниже заголовка(который в div'ах) не раскрывается, т.е. аккордеон перестает работать. Подозреваю что из за return false в скрипте плавных переходов, поскольку если убрать эту строчку то аккордеон работает а переходы уже нет как быть?
Ответить с цитированием
  #4 (permalink)  
Старый 21.06.2011, 13:37
Интересующийся
Отправить личное сообщение для vpisklov Посмотреть профиль Найти все сообщения от vpisklov
 
Регистрация: 04.10.2010
Сообщений: 18

$(document).ready(function() {
      $("a.ancLinks").click(function () {
        elementClick = $(this).attr("href");
        destination = $(elementClick).offset().top;

       $(this).parent().next("div").slideToggle("slow")
	        .siblings("div:visible").slideUp("fast");
	        $(this).parent().toggleClass("active");
	        $(this).parent().siblings("h2").removeClass("active");

        if($.browser.safari){
          $('body').animate( { scrollTop: destination }, 1100 );
        }
        else{
          $('html').animate( { scrollTop: destination }, 1100 );
        }

        return false;
      });
});


попробуйте так...
если синтаксисом все правильно то должно работать...

Смысл такой: вы кликаете по ссылке получаете "якорь" и его положение сверху относительно окна браузера. далее выбираем родителя ссылки, переключаем класс, показываем следующий div, все остальные прячем и с остальных h2 убираем класс. ну и конечно-же прокручиваем страницу
Ответить с цитированием
  #5 (permalink)  
Старый 21.06.2011, 14:01
Аспирант
Отправить личное сообщение для vyrtime Посмотреть профиль Найти все сообщения от vyrtime
 
Регистрация: 09.06.2011
Сообщений: 32

спасибо, попробовал, но, к сожалению, не работает...
Ответить с цитированием
  #6 (permalink)  
Старый 21.06.2011, 14:02
Интересующийся
Отправить личное сообщение для vpisklov Посмотреть профиль Найти все сообщения от vpisklov
 
Регистрация: 04.10.2010
Сообщений: 18

хм...сейчас бубен возьму
Ответить с цитированием
  #7 (permalink)  
Старый 21.06.2011, 14:08
Интересующийся
Отправить личное сообщение для vpisklov Посмотреть профиль Найти все сообщения от vpisklov
 
Регистрация: 04.10.2010
Сообщений: 18

а что, собственно не работает? я потестил в фф 3.6.17 и ие7. у меня работает. может я что-то не понял?
Ответить с цитированием
  #8 (permalink)  
Старый 22.06.2011, 06:55
Аспирант
Отправить личное сообщение для vyrtime Посмотреть профиль Найти все сообщения от vyrtime
 
Регистрация: 09.06.2011
Сообщений: 32

при загрузке страницы все div'ы, в которых текст(под заголовками) - раскрыты(а у меня были скрыты), сама гармошка работает, но прокрутка страницы(при клике на заголовки) до заголовков не работает
Ответить с цитированием
  #9 (permalink)  
Старый 22.06.2011, 10:32
Интересующийся
Отправить личное сообщение для vpisklov Посмотреть профиль Найти все сообщения от vpisklov
 
Регистрация: 04.10.2010
Сообщений: 18

1. Что бы все дивы были скрыты, дайте им через css свойство display: none;
2. для того, что бы отработала прокрутка необходимо, что бы у вас на странице отобразился скроллинг(т.е контентная часть была больше по высоте, чем окно), иначе браузер не сможет прокрутить то, чего нету
для теста попробуйте добавить много строк в ваши дивы
Ответить с цитированием
  #10 (permalink)  
Старый 22.06.2011, 12:22
Аспирант
Отправить личное сообщение для vyrtime Посмотреть профиль Найти все сообщения от vyrtime
 
Регистрация: 09.06.2011
Сообщений: 32

добавил много строк текста, но всё равно не работает прокрутка - при клике на заголовки ничего не происходит...
вот код js и структура html:
$(document).ready(function() {
      $("a.ancLinks").click(function () {
        elementClick = $(this).attr("href");
        destination = $(elementClick).offset().top;

     $(this).parent().next("div").slideToggle("slow")
       .siblings("div:visible").slideUp("fast");
       $(this).parent().toggleClass("active");
       $(this).parent().siblings("h2").removeClass("active");

       if($.browser.safari){
          $('body').animate( { scrollTop: destination }, 1100 );
        }
        else{
          $('html').animate( { scrollTop: destination }, 1100 );
        }

        return false;
      });
});

<div id="accrodion">
<h2 id="sec1"><a href="#sec1" class="ancLinks">Заголовок 1</a></h2>
<div style="display: none;">
Тут много строк текста
</div>
<h2 id="sec2"><a href="#sec2" class="ancLinks">Заголовок 2</a></h2>
<div style="display: none;">
Тут много строк текста
</div>
<h2 id="sec3"><a href="#sec3" class="ancLinks">Заголовок 3</a></h2>
<div style="display: none;">
Тут много строк текста
</div>
</div>

возможно у меня какая-то ошибка, может вы покажете как у вас получилось...
не совсем понял про скроллинг - получается он у нас отсутствует и не будет работать если все div'ы скрыты?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с Accordion jquery Vitaly jQuery 8 17.07.2014 17:14
jQuery accordion все закладки закрыты BoB jQuery 9 22.03.2013 15:27
Переделка скрипта меню на JQuery Bangoo jQuery 1 10.01.2011 13:50
как реализовать на jQuery скроллинг фоток sensor jQuery 8 31.05.2010 18:51
Jquery accordion, переделка скрипта. BassEast jQuery 0 26.02.2010 10:57