Getting Scrollable 1.2.1 working. A checklist. Created May 17, 2010

thank you for sharing!

I wanted to have variable height divs for my vertical scrollable. I spent about 12 hours trying to figure it out. Here's what I came up with if anyone else wants to accomplish the same thing:

<script> 

// execute your scripts when DOM is ready. this is a good habit
$(function() {		
	
	// Initialize Scrollable 
	$(".scrollable").scrollable({
		vertical: true
		,mousewheel: false 
	});
	
	//Initialize Variables
	var api = $(".scrollable").data("scrollable"); // get handle to scrollable API
	var currentIndex = api.getIndex();
	var moduleHeight = 0;
	var elementId = '';
	var startIndex = 0;
	var todayIndex = $('div.show_module.today').attr('id').replace(/item_/, '');

	//Run functions on initial page load
	goToToday();
	setHeight();
	
	
	//Event based functions
	$('a.down').bind("click", function(event){
		$(".scrollable").scrollable().move(1,0);
		setHeight();
		return false;				 
	});//End $('a.down').bind("click", function(event){
	
	$('a.up').bind("click", function(event){
		$(".scrollable").scrollable().move(-1,0);
		setHeight();
		return false;	
	});
	
	//Function definitions
	function setHeight() {
		currentIndex = api.getIndex();
		//get height of each visible module and set height on div.vertical accordingly
		for (var i = currentIndex; i <= currentIndex+4; i++) {
			$('div#item_'+ i).each(function(i) {
				moduleHeight += $(this).outerHeight();	
				elementId = $(this).attr('id').replace(/item_/, '');
				//Round corners when item gets to top
				if($(this).hasClass('today') && currentIndex == elementId) {
					$(this).addClass('active_module');
				}
				else {
					$(this).removeClass('active_module');
				}
				//Fix 1px browser variance with outer height
				if(todayIndex > currentIndex && (todayIndex - currentIndex) > 3) {
					$('div#item_'+todayIndex).removeClass('today');
				}
				else {
					$('div#item_'+todayIndex).addClass('today');
				}
			});	//End Function
		}//End for loop
		$('div.vertical').height(moduleHeight-15);
		moduleHeight = 0;
	}
	
	function goToToday() {
		startIndex = $('div.today').attr('id').replace(/item_/, '');
		startIndex -= 2; //Gets the item before today and makes today the second item in the list
		api.seekTo(startIndex, 0);
	}
});

If you want to see the code in context, here's the page I used it on:http://soundrezn.com/calendar-show-info/. Note: you'll need to generate ids for each div (i.e. item_1, item_2 etc). There's some extra stuff in the code related to my site specifically, but it shouldn't be too hard to figure out how to apply this code to another application.

Not really sure if this the right place to report the bugs for scrollable. Just let me know if I need to post this somewhere else.

Please take a look at this demo.

I'm using version 1.2.2 and seems like I couldn't use the prev/next options anymore. If I use prevPage and nextPage classes for the forward/backward arrows and set prev: prevPage the arrows won't do anything. This used to work with 1.1.2. I had to use prev/next classes for the arrows to work with 1.2.2.

Also, if you scroll on the thumbs/or click the right arrows until there's no slide left, there will be an empty space. This didn't happen with 1.1.2.

Hope I made myself clear, english's my nth language :)