Доброе время суток, есть вопрос касательно данной темы.
1. Есть на странице вкладки Страница 1, Страница 2, Страница 3, при клике на ссылку срабатывает скрипт slider.js и происходит плавная прокрутка контента.
![[Изображение: tid_347_html_img.png]](http://usefulscript.ru/forum/uploads/tid_347_html_img.png)
На изображении имеются ссылки Страница 1, Страница 2, Страница 3 вверху и внизу, так вот при клике на любую из верхних ссылок все работает корректно, т.е. если кликнуть на ссылку
Страница 2, то появится другой контент и Страница 2 станет активной, что логично. На изображении ниже:
![[Изображение: tid_347_html_page 2.png]](http://usefulscript.ru/forum/uploads/tid_347_html_page 2.png)
видно, что страница 2 после клика по
верхней вкладке активна и контент отображается согласно странице, а вот нижняя вкладка без изменений, т.е. нужно чтобы по клику верхней или нижней вкладки контент появлялся согласно данной вкладке и были активны как верхняя, так и нижняя вкладки, что логично.
Если кликнуть по
нижней вкладке Страница 2, то вкладка становится активной, но контент появляется для Страницы 3
![[Изображение: tid_347_html_page 2_bottom.png]](http://usefulscript.ru/forum/uploads/tid_347_html_page 2_bottom.png)
Если имеются только верхние вкладки, то работает все правильно, а вот при добавлении нижних вкладок вот такой косяк... + не работает высота для конкретной страницы с разным по высоте контентом, т.е. высота страницы 1 = высота страницы 2 = высота страницы 3.
Для верхних вкладок все работает нормально, так как в скрипте добавлены строчки, чтобы высота равнялась высоте конкретного контента.
Данный момент хотел бы реализовать, если например контента много будет и пользователь находится в нижней его части, то ему будет удобно перейти к другому контенту по нижним вкладкам.
2. html код:
Код:
<div id="slider">
<ul class="nav">
<li><a href="#" class="selected">Страница 1</a></li>
<li><a href="#">Страница 2</a></li>
<li><a class="last "href="#">Страница 3</a></li>
</ul>
<div class="scroll">
<div class="content">
>
<div class="panel">
<h2>Страница 1</h2>
<ol> <!-- page 1 -->
<li><a href="">Страница 1</a></li>
<li><a href="">Страница 1</a></li>
<li><a href="">Страница 1</a></li>
<li><a href="">Страница 1</a></li>
<li><a href="">Страница 1</a></li>
<li><a href="">Страница 1</a></li>
<li><a href="">Страница 1</a></li>
</ol>
</div>
<div class="panel">
<h2>Страница 2</h2>
<ol> <!-- page 1 -->
<li><a href="">Страница 2</a></li>
<li><a href="">Страница 2</a></li>
<li><a href="">Страница 2</a></li>
<li><a href="">Страница 2</a></li>
<li><a href="">Страница 2</a></li>
<li><a href="">Страница 2</a></li>
<li><a href="">Страница 2</a></li>
</ol>
</div>
<div class="panel">
<h2>Страница 3</h2>
<ul> <!-- page 1 -->
<li><a href="">Страница 3</a></li>
<li><a href="">Страница 3</a></li>
<li><a href="">Страница 3</a></li>
<li><a href="">Страница 3</a></li>
<li><a href="">Страница 3</a></li>
<li><a href="">Страница 3</a></li>
<li><a href="">Страница 3</a></li>
</ul>
</div>
</div> <!-- content ends -->
</div> <!-- scroll ends -->
<ul class="nav">
<li><a href="#" class="selected">Страница 1</a></li>
<li><a href="#">Страница 2</a></li>
<li><a class="last "href="#">Страница 3</a></li>
</ul>
</div> <!-- slider ends -->
3. И сам скрипт slider.js:
Код:
$(document).ready(function () {
var $panels = $('#slider .content > div');
var $container = $('#slider .content');
// if false, we'll float all the panels left and fix the width
var horizontal = true;
// float the panels left if we're going horizontal
if (horizontal) {
$panels.css({
'float' : 'left',
'position' : 'relative' // IE fix to ensure overflow is hidden
});
// calculate a new width for the container (so it holds all panels)
$container.css('width', $panels[0].offsetWidth * $panels.length);
}
var $scroll = $('#slider .scroll').css('overflow', 'hidden');
// apply left + right buttons
$scroll
.before('')
.after('');
// height of nav selection
heights=[];
$('#slider .content > div').each(function(index){heights.push($(this).height());});
$('#slider .nav').find('a').click( function(e){
$('.scroll').height(heights[$('#slider .nav').find('a').index(e.target)]);
});
// handle nav selection
function selectNav() {
$(this)
.parents('ul:first')
.find('a')
.removeClass('selected')
.end()
.end()
.addClass('selected');
}
$('#slider .nav').find('a').click(selectNav);
// go find the nav link that has this target and select the nav
function trigger(data) {
var el = $('#slider .nav').find('a[href$="' + data.id + '"]').get(0);
selectNav.call(el);
}
if (window.location.hash) {
trigger({ id : window.location.hash.substr(1) });
} else {
$('ul.nav a:first').click();
}
// offset
var offset = parseInt((horizontal ?
$container.css('paddingTop') :
$container.css('paddingLeft'))
|| 0) * -1;
var scrollOptions = {
target: $scroll, // the element that has the overflow
// can be a selector which will be relative to the target
items: $panels,
nav: '.nav a',
// selectors are NOT relative to document, i.e. make sure they're unique
prev: 'img.left',
next: 'img.right',
// allow the scroll effect to run both directions
axis: 'xy',
onAfter: trigger, // final callback
offset: offset,
// duration of the sliding effect
duration: 500,
easing: 'swing'
};
$('#slider').serialScroll(scrollOptions);
$.localScroll(scrollOptions);
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);
});
Полагаю, вся проблема в slider.js (к которому подключается еще и serialscroll.js, но добавлять его не стал, так как в плане плавного появления все работает) для которого я и пытался самостоятельно реализовать данный момент, но пока не выходит, работает коряво.
Заранее благодарен.
P.S.: Сделал тестовую страницу, где наглядно можно посмотреть, как все работает. Со стилями не стал заморачиваться, оставил только те которые нужны, да и чтобы легче можно было смотреть код.
slider.rar (Размер: 39.21 Кб / Загрузок: 1)
Видно явно, как работает перемотка для верхних вкладок и для нижних.
Поиск
Пользователи
Календарь
Справка
/
Плавная перемотка контента на странице
!![[Изображение: tid_347_rewind.gif]](http://usefulscript.ru/forum/uploads/tid_347_rewind.gif)
.![[Изображение: tid_347_rewind_2.gif]](http://usefulscript.ru/forum/uploads/tid_347_rewind_2.gif)
, высота меняется, правда для первых двух вкладок одинаковая высота, а для третьей вкладки (страница 3) немного меньше (около 10~15px), пробую пока средствами css сделать, чтобы от контента на странице были одинаковые отступы снизу, пока получается как-то коряво, но разберемся.