fork me on github

Smooth Scroll Select Menu Jquery Plugin

This plugin was created in order to style select tags with extremely large amounts of options.

Features

  • Changes select and option tags to a ul with lis tied to a hidden input.
  • Scrolls page down to the top of select to allow the greatest number of options to show on page.
  • Adds scroll lis to the top and bottom of the list if the list is too big for the page.
  • Includes click to scroll and hover to scroll behaviors. Hover is the default.
  • Allows hover to scroll time to be adjusted.
  • Supports after select and after open callbacks.
  • Select classes and Id are transferred to new div wrapper.
  • Mouse wheel will scroll list.
  • Degrades gracefully when javascript is disabled.


Basic hover to scroll example


$('select.jq_hoverToScroll').jq_smoothScrollSelect();


Change hover scroll speed example


$('select.jq_changeScrollSpeed').jq_smoothScrollSelect({
	scrollTime: 80
});


Click to scroll example

$('select.jq_clickToScroll').jq_smoothScrollSelect({
	scrollEvent: 'click'
});


After open callback example

$('select.jq_afterOpenExample').jq_smoothScrollSelect({
	scrollTime: 200,
	afterOpen: function(wrapper){
		wrapper.find('li').each(function(index, element){
			var colors = ['red', 'white', 'blue']
			$(element).css('background-color', colors[index % 3]);
		})
	}
});


After select callback example

$('select.jq_afterSelectExample').jq_smoothScrollSelect({
	afterSelect: function(clicked_li){
		alert('You selected ' + clicked_li.html() + '!');
	}
});


Small select that doesn’t trigger scroll lis

$('select.jq_smallSelectExample').jq_smoothScrollSelect();


Requirements


Download

On GitHub: https://github.com/BrentW/smooth-scroll-select-menu


Thank You

blog comments powered by Disqus
Brent Wooden