Нужна помощь jQueryUI | Вертикальный скроллер

Здравствуйте, уважаемые JS-спецы и веб-технологи.

Я зашел в тупик, не могу реализовать задачу с определенными условиями:
1) Есть верстка которая слоями делится на:
- левую колонку
- среднюю колонку
- правую колонку
- подвал

у всех у них свойство position:fixed
все размеры на сайте указаны в процентах

2) Для правой колонки необходимо реализовать вертикальный слайдер, я делаю с помощью jQuery UI, адаптирую пример ссылка
В указанном примере - JS считает количество слоев внутри слайдера с margin-left и по нему получает длину, у меня тоже самое только для margin-top.

Никак не могу заставить его вообще появиться на странице.

3) Для центральной колонки нужно сделать горизонтальный слайдер - вроде все просто - взять из примера, но тут я столкнулся с тем, что не понимаю как создать два разных объекта слайдера...

Буду очень признателен за помощь

Вот код HTML:

		<div id="timeline">

			<div class="scroll-pane ui-widget ui-widget-header ui-corner-all">

				<div class="scroll-content">

					<div class="scroll-content-item ui-widget-header">1984</div>

					<div class="scroll-content-item ui-widget-header">1984</div>

					<div class="scroll-content-item ui-widget-header">1984</div>

					<div class="scroll-content-item ui-widget-header">1984</div>

					<div class="scroll-content-item ui-widget-header">1984</div>

				</div>

				<div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">

					<div class="scroll-bar"></div>

				</div>

			</div>

		</div>

Вот CSS:

/* TIMELINE - RIGHT PART OF THE SITE */

/* ==========================================================================

   Slider classes

   ========================================================================== */

#timeline {

	position: fixed;

	right: 0;

	height: 100%;

	width: 15.625%;

	background-color: transparent;

}


.scroll-pane {

	background: url('../images/line.png') 95% 0% repeat-y transparent;

	position: fixed; 

	top : 0;

	right: 3.645%;

	height: 100%;

	width: 15.625%;

	text-align: right;

	padding-right: 30px;  	

}


.scroll-content {

	height: 98%;

}


.scroll-content-item {

	height: 32px;

	font-family: 'Optima', 'Belleza', 'Lucida Sans Unicode', 'Lucida Grande',

		sans-serif;

	font-size: 30px;

	font-style: italic;

	text-shadow: -1px -1px #9b9889, 1px 1px #8B7373;

	margin-top: 10px;

	padding: 0 0 0 0;

	color: #993d3d;

}


* html .scroll-content-item {

	display: inline;

} /* IE6 float double margin bug */

.scroll-bar-wrap {

	padding: 0 4px 0 2px;

	margin: 0 -1px -1px -1px;

}


.scroll-bar-wrap .ui-slider {

	border: 0;

	height: 2em;

	margin: auto 0;

}


.scroll-bar-wrap .ui-handle-helper-parent {

	position: relative;

	width: 100%;

	height: 100%;

	margin: 0 auto;

}


.scroll-bar-wrap .ui-slider-handle {

	position: absolute;

	left: 130px;

	width: 100%;

	height: 100%;

}


.scroll-bar-wrap .ui-slider-handle .ui-icon {

	position: relative;

	top: 40px;

	right: -30px;

	display: block;

	background: url('../images/bullet-timeline.png') no-repeat center center transparent;

	width: 24px;	

	height: 21px;

	float: right;

}

JS

// Avoid `console` errors in browsers that lack a console.

(function() {

	var method;

	var noop = function() {

	};

	var methods = ;

	var length = methods.length;

	var console = (window.console = window.console || {});


	while (length--) {

		method = methods;


		// Only stub undefined methods.

		if (!console) {

			console = noop;

		}

	}

}());


// Place any jQuery/helper plugins in here.


// jQuery fadeIn

// for parameters&values list visit ссылка

// start


$(function() {

	$("#bodyFadeIn").fadeIn('5000', 'swing');

});

// end


//jQuery lightBox

//start

$(function() {

	$('a.lightbox').lightBox();

});

//end


// jQueryUI vertical TimeLine slider

$(function() {

	// scrollpane parts

	var scrollPane = $(".scroll-pane"), scrollContent = $(".scroll-content");


	// build slider

	var scrollbar = $(".scroll-bar").slider(

			{

				slide : function(event, ui) {

					if (scrollContent.height() > scrollPane.height()) {

						scrollContent.css("margin-top", Math.round(ui.value

								/ 100

								* (scrollPane.height() - scrollContent.height()))

								+ "px");

					} else {

						scrollContent.css("margin-top", 0);

					}

				}

			});


	// setting vertical orientation

	$(".scroll-bar").slider("option", "orientation", "vertical");


	// append icon to handle

	var handleHelper = scrollbar.find(".ui-slider-handle").mousedown(

			function() {

				scrollbar.height(handleHelper.height());

			}).mouseup(function() {

		scrollbar.height("100%");

	}).append("<span class='ui-icon ui-icon-grip-dotted-vertical'></span>")

			.wrap("<div class='ui-handle-helper-parent'></div>").parent();


	// change overflow to hidden now that slider handles the scrolling

	scrollPane.css("overflow", "hidden");


	// size scrollbar and handle proportionally to scroll distance

	function sizeScrollbar() {

		var remainder = scrollContent.height() - scrollPane.height();

		var proportion = remainder / scrollContent.height();

		var handleSize = scrollPane.height() - (proportion * scrollPane.height());

		scrollbar.find(".ui-slider-handle").css({

			height : handleSize,

			"margin-top" : -handleSize / 2

		});

		handleHelper.height("").height(scrollbar.height() - handleSize);

	}


	// reset slider value based on scroll content position

	function resetValue() {

		var remainder = scrollPane.height() - scrollContent.height();

		var leftVal = scrollContent.css("margin-top") === "auto" ? 0

				: parseInt(scrollContent.css("margin-top"));

		var percentage = Math.round(leftVal / remainder * 100);

		scrollbar.slider("value", percentage);

	}


	// if the slider is 100% and window gets larger, reveal content

	function reflowContent() {

		var showing = scrollContent.height()

				+ parseInt(scrollContent.css("margin-top"), 10);

		var gap = scrollPane.height() - showing;

		if (gap > 0) {

			scrollContent.css("margin-top", parseInt(scrollContent

					.css("margin-top"), 10)

					+ gap);

		}

	}


	// change handle position on window resize

	$(window).resize(function() {

		resetValue();

		sizeScrollbar();

		//reflowContent();

	});

	// init scrollbar size

	setTimeout(sizeScrollbar, 10);// safari wants a timeout

});

tuls, не поймите меня неправильно. Вы предлагаете желающим проанализировать в общей сложности 802 строки и обнаружить ошибку?

Цитата ("frig"):

tuls, не поймите меня неправильно. Вы предлагаете желающим проанализировать в общей сложности 802 строки и обнаружить ошибку?

Вы правильно все говорите - сам когда постил, подумал что больше похоже на проект, чем на вопрос. Надеюсь на чудо

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

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

Пользуйтесь ссылка

Вот облом, сайт как раз лежит

Я думаю в проектах вам помогут быстрее