Solved

jQuery's Stylish-Select plugin doesn't work on elements created after page load

Posted on 2010-09-18
9
2,244 Views
Last Modified: 2012-05-10
I've been striving to use Stylish Select Box with elements created after page load without success. In order to understand the issue, you'll need to re-produce it first. I know the following might seem a bit annoying but please continue reading if if you have 5 minutes of spare time.

Alternatively, you may obtain a completed example here to see the issue directly.

First, you'll need a <select> element. Now bind jquery.stylish-select.js to your <select> element using something like $('select').sSelect(); after that the script hides the <select> element and creates a set of DIVs underneath it. Now your page should look like this :

<select style="display:none;">
    <option>1</option>
    <option>2</option>
</select>
<div class=newListSelected>
    <!-- Some other stuff(not important). -->
</div>

Open in new window


Now add another <select> element to the same page with something like $('body').append('<select><option>1</option><option>2</option></select>')¿ and use $(.newListSelected).remove(); to delete the DIVs it created for the pervious ` option. Hope I'm sill clear enough.

After that you should have the following on the page :

<select style="display:none;">
    <option>1</option>
    <option>2</option>
</select>
<select>
    <option>1</option>
    <option>2</option>
</select>

Open in new window


Last, just call $('select').sSelect(); once more. It should create DIVs under both of your <select> elements. Now here's the problem, The first select box represented by the DIVs doesn't behave properly.

Alternatively, you may obtain a completed example here to see the issue directly.

Normally when you choose an option from the select box represented by the DIVs, it should update the original <select> element's selectedIndex (DOM property) to the corresponding index of the chosen option(0 for first option, 1 for the second.. etc). But if you look closely you'll see its changing selectedIndex value to -1 for any option.

As I'm really new to Javascript I really have no idea why its behaving like this. What I could only probably think of would be due to the first element being binded to $('select').sSelect; twice, thus causing DOM problems.
0
Comment
Question by:Chiehkai
  • 6
  • 3
9 Comments
 
LVL 16

Expert Comment

by:Steve Krile
ID: 33716461
There is quite a lot going on in your question here.  Can we narrow things down a bit?

I'm not sure what your issue is.  I have several concerns about the approach you seem to be taking.

1.  The plugin you are trying to use doesn't look very well supported (no *working* example page)
2.  Out of the box, the sample does not look good in FF (ok in IE)
3.  Dynamically binding plugins after dom insertion is doable, but I try to avoid it if at all possible.


My $0.02 - I've played with a lot of different variations of this problem (here's one that I took the furthest:  http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx)  and always come back to one simple truth:  the Select is such a special item on a page that replacing it with other swapping techniques often leads to far more problems than the aesthetic benefit.

I guess what I'm saying is the problem you are having is likely only the tip of the iceberg.  
0
 

Author Comment

by:Chiehkai
ID: 33716729
1. The demo link was working few days ago, not sure why it isn't anymore.

2. Well, it works for me in all major browsers(Latest IE, FF, Opera, Chomre & Safari).

3. Yes I was thinking about that too, using "Live Query" plugin to do dynamically binding. However I think that would just make things even more complicated.

The like you provided basically does the same thing, haven't tried that though. Were you able to reproduce my issue?
0
 
LVL 16

Expert Comment

by:Steve Krile
ID: 33716780
I was not able to reproduce your issues because I didn't have a very good model to work from (demo pages down  !).  Could you post a working example the demonstrates your problem rather than posting what you page looks like at each step?
0
 

Author Comment

by:Chiehkai
ID: 33716800
Sure, but I really cant post the link to the public. Would you mind adding your email in your profile signature for a few minutes and I'll drop an email there?

Thanks.
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 16

Expert Comment

by:Steve Krile
ID: 33717017
Actually, I was hoping you could post a raw version here of just the important bits.  I find doing that often helps to focus the question.  For instance:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>Select</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
		/*
		Stylish Select 0.4.1 - $ plugin to replace a select drop down box with a stylable unordered list
		http://github.com/sko77sun/Stylish-Select

		Requires: jQuery 1.3 or newer

		Contributions from Justin Beasley: http://www.harvest.org/ & Anatoly Ressin: http://www.artazor.lv/

		Dual licensed under the MIT and GPL licenses.

		*/
		(function(a){a("html").addClass("stylish-select");Array.prototype.indexOf=function(c,d){for(var b=(d||0);b<this.length;b++){if(this[b]==c){return b}}};a.fn.extend({getSetSSValue:function(b){if(b){a(this).val(b).change();return this}else{return a(this).find(":selected").val()}},resetSS:function(){var b=a(this).data("ssOpts");$this=a(this);$this.next().remove();$this.unbind(".sSelect").sSelect(b)}});a.fn.sSelect=function(b){return this.each(function(){var i={defaultText:"Please select",animationSpeed:0,ddMaxHeight:"",containerClass:""};var l=a.extend(i,b),e=a(this),j=a('<div class="selectedTxt"></div>'),r=a('<div class="newListSelected '+l.containerClass+'"></div>'),z=a('<ul class="newList" style="visibility:hidden;"></ul>'),t=-1,d=-1,m=[],w=false,v=false,x;a(this).data("ssOpts",b);r.insertAfter(e);r.attr("tabindex",e.attr("tabindex")||"0");j.prependTo(r);z.appendTo(r);e.hide();j.data("ssReRender",!j.is(":visible"));if(e.children("optgroup").length==0){e.children().each(function(B){var C=a(this).html();var A=a(this).val();m.push(C.charAt(0).toLowerCase());if(a(this).attr("selected")==true){l.defaultText=C;d=B}z.append(a('<li><a href="JavaScript:void(0);">'+C+"</a></li>").data("key",A))});x=z.children().children()}else{e.children("optgroup").each(function(){var A=a(this).attr("label"),C=a('<li class="newListOptionTitle">'+A+"</li>");C.appendTo(z);var B=a("<ul></ul>");B.appendTo(C);a(this).children().each(function(){++t;var E=a(this).html();var D=a(this).val();m.push(E.charAt(0).toLowerCase());if(a(this).attr("selected")==true){l.defaultText=E;d=t}B.append(a('<li><a href="JavaScript:void(0);">'+E+"</a></li>").data("key",D))})});x=z.find("ul li a")}var o=z.height(),n=r.height(),y=x.length;if(d!=-1){h(d,true)}else{j.text(l.defaultText)}function p(){var B=r.offset().top,A=jQuery(window).height(),C=jQuery(window).scrollTop();if(o>parseInt(l.ddMaxHeight)){o=parseInt(l.ddMaxHeight)}B=B-C;if(B+o>=A){z.css({top:"-"+o+"px",height:o});e.onTop=true}else{z.css({top:n+"px",height:o});e.onTop=false}}p();a(window).bind("resize.sSelect scroll.sSelect",p);function s(){r.css("position","relative")}function c(){r.css("position","static")}j.bind("click.sSelect",function(A){A.stopPropagation();if(a(this).data("ssReRender")){o=z.height("").height();n=r.height();a(this).data("ssReRender",false);p()}a(".newList").not(a(this).next()).hide().parent().css("position","static").removeClass("newListSelFocus");z.toggle();s();x.eq(d).focus()});x.bind("click.sSelect",function(B){var A=a(B.target);d=x.index(A);v=true;h(d);z.hide();r.css("position","static")});x.bind("mouseenter.sSelect",function(B){var A=a(B.target);A.addClass("newListHover")}).bind("mouseleave.sSelect",function(B){var A=a(B.target);A.removeClass("newListHover")});function h(A,E){x.removeClass("hiLite").eq(A).addClass("hiLite");if(z.is(":visible")){x.eq(A).focus()}var D=x.eq(A).html();var C=x.eq(A).parent().data("key");if(E==true){e.val(C);j.text(D);return false}try{e.val(C)}catch(B){e[0].selectedIndex=A}e.change();j.text(D)}e.bind("change.sSelect",function(A){$targetInput=a(A.target);if(v==true){v=false;return false}$currentOpt=$targetInput.find(":selected");d=$targetInput.find("option").index($currentOpt);h(d,true)});function q(A){a(A).unbind("keydown.sSelect").bind("keydown.sSelect",function(D){var C=D.which;v=true;switch(C){case 40:case 39:u();return false;break;case 38:case 37:k();return false;break;case 33:case 36:g();return false;break;case 34:case 35:f();return false;break;case 13:case 27:z.hide();c();return false;break}keyPressed=String.fromCharCode(C).toLowerCase();var B=m.indexOf(keyPressed);if(typeof B!="undefined"){++d;d=m.indexOf(keyPressed,d);if(d==-1||d==null||w!=keyPressed){d=m.indexOf(keyPressed)}h(d);w=keyPressed;return false}})}function u(){if(d<(y-1)){++d;h(d)}}function k(){if(d>0){--d;h(d)}}function g(){d=0;h(d)}function f(){d=y-1;h(d)}r.bind("click.sSelect",function(A){A.stopPropagation();q(this)});r.bind("focus.sSelect",function(){a(this).addClass("newListSelFocus");q(this)});r.bind("blur.sSelect",function(){a(this).removeClass("newListSelFocus")});a(document).bind("click.sSelect",function(){r.removeClass("newListSelFocus");z.hide();c()});j.bind("mouseenter.sSelect",function(B){var A=a(B.target);A.parent().addClass("newListSelHover")}).bind("mouseleave.sSelect",function(B){var A=a(B.target);A.parent().removeClass("newListSelHover")});z.css({left:"0",display:"none",visibility:"visible"})})}})(jQuery);
	</script>
	<style>
		/*
		Stylish Select 0.4.1 - $ plugin to replace a select drop down box with a stylable unordered list
		http://scottdarby.com/

		Copyright (c) 2009 Scott Darby

		Requires: jQuery 1.3 or newer

		Dual licensed under the MIT and GPL licenses.

		*/


		/*==================================
		Hide lists on page load
		====================================*/

		.stylish-select ul.newList {left:-9999px;}

		/*==================================
		red curvy example
		====================================*/
		ul.newList, ul.newList li * {margin:0; padding:0;overflow:none;}
		ul.newList a {color: #000; text-decoration:none; display:block;}
		ul.newList {margin:0; padding:0; list-style:none; color:#000; width:290px; background:#fff; position:absolute;  border:1px solid #ccc; top:22px; left:0; overflow:auto; z-index:9999;}
		.newListSelected {width:285px; color:#000; height:19px; padding:3px 0 0 6px; float:left; background:url(select-bg.png) no-repeat;}
		.newListSelected span {width:284px; display:block;}
		ul.newList li a {padding:3px 8px; display: block;}
		ul.newList li a:focus {-moz-outline-style: none;}
		.selectedTxt {width:258px; overflow:hidden; height:16px; padding:0 23px 0 0;}
		.hiLite {background:#650101!important; color:#fff!important;}
		.hiLite a {background:#650101!important; color:#fff!important;}
		.newListHover {background:#ccc!important; color:#000!important; cursor:default;}
		.newListSelHover, .newListSelFocus {background-position:0 -22px; cursor:default;}
		.newListOptionTitle {font-weight:bold;}
		.newListOptionTitle ul {margin:3px 0 0;}
		.newListOptionTitle li {font-weight:normal; border-left:1px solid #ccc;}


	</style>

</head>
<body>

	<select id="select1">
		<option>1</option>
		<option>2</option>
	</select>


	<select id="select2">
		<option>1</option>
		<option>2</option>
	</select>



	<script type="text/javascript">
		$(document).ready(function(){
			$("#select1,#select2").sSelect();
		})
	</script>

</body>



</html>

Open in new window

0
 

Author Comment

by:Chiehkai
ID: 33717961
Alright, the following example should be able to reproduce the issue easily.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>Select</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://www.andresvidal.com/labs/jquery/relCopy.jquery.js"></script>
	<script>
		/*
		Stylish Select 0.4.1 - $ plugin to replace a select drop down box with a stylable unordered list
		http://github.com/sko77sun/Stylish-Select

		Requires: jQuery 1.3 or newer

		Contributions from Justin Beasley: http://www.harvest.org/ & Anatoly Ressin: http://www.artazor.lv/

		Dual licensed under the MIT and GPL licenses.

		*/
		(function(a){a("html").addClass("stylish-select");Array.prototype.indexOf=function(c,d){for(var b=(d||0);b<this.length;b++){if(this[b]==c){return b}}};a.fn.extend({getSetSSValue:function(b){if(b){a(this).val(b).change();return this}else{return a(this).find(":selected").val()}},resetSS:function(){var b=a(this).data("ssOpts");$this=a(this);$this.next().remove();$this.unbind(".sSelect").sSelect(b)}});a.fn.sSelect=function(b){return this.each(function(){var i={defaultText:"Please select",animationSpeed:0,ddMaxHeight:"",containerClass:""};var l=a.extend(i,b),e=a(this),j=a('<div class="selectedTxt"></div>'),r=a('<div class="newListSelected '+l.containerClass+'"></div>'),z=a('<ul class="newList" style="visibility:hidden;"></ul>'),t=-1,d=-1,m=[],w=false,v=false,x;a(this).data("ssOpts",b);r.insertAfter(e);r.attr("tabindex",e.attr("tabindex")||"0");j.prependTo(r);z.appendTo(r);e.hide();j.data("ssReRender",!j.is(":visible"));if(e.children("optgroup").length==0){e.children().each(function(B){var C=a(this).html();var A=a(this).val();m.push(C.charAt(0).toLowerCase());if(a(this).attr("selected")==true){l.defaultText=C;d=B}z.append(a('<li><a href="JavaScript:void(0);">'+C+"</a></li>").data("key",A))});x=z.children().children()}else{e.children("optgroup").each(function(){var A=a(this).attr("label"),C=a('<li class="newListOptionTitle">'+A+"</li>");C.appendTo(z);var B=a("<ul></ul>");B.appendTo(C);a(this).children().each(function(){++t;var E=a(this).html();var D=a(this).val();m.push(E.charAt(0).toLowerCase());if(a(this).attr("selected")==true){l.defaultText=E;d=t}B.append(a('<li><a href="JavaScript:void(0);">'+E+"</a></li>").data("key",D))})});x=z.find("ul li a")}var o=z.height(),n=r.height(),y=x.length;if(d!=-1){h(d,true)}else{j.text(l.defaultText)}function p(){var B=r.offset().top,A=jQuery(window).height(),C=jQuery(window).scrollTop();if(o>parseInt(l.ddMaxHeight)){o=parseInt(l.ddMaxHeight)}B=B-C;if(B+o>=A){z.css({top:"-"+o+"px",height:o});e.onTop=true}else{z.css({top:n+"px",height:o});e.onTop=false}}p();a(window).bind("resize.sSelect scroll.sSelect",p);function s(){r.css("position","relative")}function c(){r.css("position","static")}j.bind("click.sSelect",function(A){A.stopPropagation();if(a(this).data("ssReRender")){o=z.height("").height();n=r.height();a(this).data("ssReRender",false);p()}a(".newList").not(a(this).next()).hide().parent().css("position","static").removeClass("newListSelFocus");z.toggle();s();x.eq(d).focus()});x.bind("click.sSelect",function(B){var A=a(B.target);d=x.index(A);v=true;h(d);z.hide();r.css("position","static")});x.bind("mouseenter.sSelect",function(B){var A=a(B.target);A.addClass("newListHover")}).bind("mouseleave.sSelect",function(B){var A=a(B.target);A.removeClass("newListHover")});function h(A,E){x.removeClass("hiLite").eq(A).addClass("hiLite");if(z.is(":visible")){x.eq(A).focus()}var D=x.eq(A).html();var C=x.eq(A).parent().data("key");if(E==true){e.val(C);j.text(D);return false}try{e.val(C)}catch(B){e[0].selectedIndex=A}e.change();j.text(D)}e.bind("change.sSelect",function(A){$targetInput=a(A.target);if(v==true){v=false;return false}$currentOpt=$targetInput.find(":selected");d=$targetInput.find("option").index($currentOpt);h(d,true)});function q(A){a(A).unbind("keydown.sSelect").bind("keydown.sSelect",function(D){var C=D.which;v=true;switch(C){case 40:case 39:u();return false;break;case 38:case 37:k();return false;break;case 33:case 36:g();return false;break;case 34:case 35:f();return false;break;case 13:case 27:z.hide();c();return false;break}keyPressed=String.fromCharCode(C).toLowerCase();var B=m.indexOf(keyPressed);if(typeof B!="undefined"){++d;d=m.indexOf(keyPressed,d);if(d==-1||d==null||w!=keyPressed){d=m.indexOf(keyPressed)}h(d);w=keyPressed;return false}})}function u(){if(d<(y-1)){++d;h(d)}}function k(){if(d>0){--d;h(d)}}function g(){d=0;h(d)}function f(){d=y-1;h(d)}r.bind("click.sSelect",function(A){A.stopPropagation();q(this)});r.bind("focus.sSelect",function(){a(this).addClass("newListSelFocus");q(this)});r.bind("blur.sSelect",function(){a(this).removeClass("newListSelFocus")});a(document).bind("click.sSelect",function(){r.removeClass("newListSelFocus");z.hide();c()});j.bind("mouseenter.sSelect",function(B){var A=a(B.target);A.parent().addClass("newListSelHover")}).bind("mouseleave.sSelect",function(B){var A=a(B.target);A.parent().removeClass("newListSelHover")});z.css({left:"0",display:"none",visibility:"visible"})})}})(jQuery);
	</script>
	<style>
		/*
		Stylish Select 0.4.1 - $ plugin to replace a select drop down box with a stylable unordered list
		http://scottdarby.com/

		Copyright (c) 2009 Scott Darby

		Requires: jQuery 1.3 or newer

		Dual licensed under the MIT and GPL licenses.

		*/


		/*==================================
		Hide lists on page load
		====================================*/

		.stylish-select ul.newList {left:-9999px;}

		/*==================================
		red curvy example
		====================================*/
		ul.newList, ul.newList li * {margin:0; padding:0;overflow:none;}
		ul.newList a {color: #000; text-decoration:none; display:block;}
		ul.newList {margin:0; padding:0; list-style:none; color:#000; width:290px; background:#fff; position:absolute;  border:1px solid #ccc; top:22px; left:0; overflow:auto; z-index:9999;}
		.newListSelected {width:285px; color:#000; height:19px; padding:3px 0 0 6px; float:left; background:url(select-bg.png) no-repeat;}
		.newListSelected span {width:284px; display:block;}
		ul.newList li a {padding:3px 8px; display: block;}
		ul.newList li a:focus {-moz-outline-style: none;}
		.selectedTxt {width:258px; overflow:hidden; height:16px; padding:0 23px 0 0;}
		.hiLite {background:#650101!important; color:#fff!important;}
		.hiLite a {background:#650101!important; color:#fff!important;}
		.newListHover {background:#ccc!important; color:#000!important; cursor:default;}
		.newListSelHover, .newListSelFocus {background-position:0 -22px; cursor:default;}
		.newListOptionTitle {font-weight:bold;}
		.newListOptionTitle ul {margin:3px 0 0;}
		.newListOptionTitle li {font-weight:normal; border-left:1px solid #ccc;}


	</style>

</head>
<body>

	<a href="#" class="apply" rel=".default">Add</a>

	<div class="default">
	<select>
		<option>1</option>
		<option>2</option>
	</select>
	<br><br>
	</div>
	
	<script type="text/javascript">
		$(document).ready(function(){
			$('select').sSelect();
			
			var newSelectID = 0;
			
			$('.apply').relCopy({excludeSelector: ".newListSelected"}).click(function() {
				
				newSelectID = newSelectID + 1;
				alert(newSelectID);
				var NewSelect = $('.copy'+newSelectID).find('select');
				NewSelect.sSelect();
			
			});
		})
	</script>

</body>



</html>

Open in new window

0
 
LVL 16

Expert Comment

by:Steve Krile
ID: 33718439
OK, I have a working model for you.  What I've done is abstracted the adding part of your code into a function (addSelect()).  That will be run when the page first loads, then every subsequent time the Add link is clicked.  This allows you to control WHEN the sSelect() logic is wired up.


I also took out the relCopy library.  Using $.append() (built-in jquery method) seemed sufficient.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>Select</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
		/*
		Stylish Select 0.4.1 - $ plugin to replace a select drop down box with a stylable unordered list
		http://github.com/sko77sun/Stylish-Select

		Requires: jQuery 1.3 or newer

		Contributions from Justin Beasley: http://www.harvest.org/ & Anatoly Ressin: http://www.artazor.lv/

		Dual licensed under the MIT and GPL licenses.

		*/
		(function(a){a("html").addClass("stylish-select");Array.prototype.indexOf=function(c,d){for(var b=(d||0);b<this.length;b++){if(this[b]==c){return b}}};a.fn.extend({getSetSSValue:function(b){if(b){a(this).val(b).change();return this}else{return a(this).find(":selected").val()}},resetSS:function(){var b=a(this).data("ssOpts");$this=a(this);$this.next().remove();$this.unbind(".sSelect").sSelect(b)}});a.fn.sSelect=function(b){return this.each(function(){var i={defaultText:"Please select",animationSpeed:0,ddMaxHeight:"",containerClass:""};var l=a.extend(i,b),e=a(this),j=a('<div class="selectedTxt"></div>'),r=a('<div class="newListSelected '+l.containerClass+'"></div>'),z=a('<ul class="newList" style="visibility:hidden;"></ul>'),t=-1,d=-1,m=[],w=false,v=false,x;a(this).data("ssOpts",b);r.insertAfter(e);r.attr("tabindex",e.attr("tabindex")||"0");j.prependTo(r);z.appendTo(r);e.hide();j.data("ssReRender",!j.is(":visible"));if(e.children("optgroup").length==0){e.children().each(function(B){var C=a(this).html();var A=a(this).val();m.push(C.charAt(0).toLowerCase());if(a(this).attr("selected")==true){l.defaultText=C;d=B}z.append(a('<li><a href="JavaScript:void(0);">'+C+"</a></li>").data("key",A))});x=z.children().children()}else{e.children("optgroup").each(function(){var A=a(this).attr("label"),C=a('<li class="newListOptionTitle">'+A+"</li>");C.appendTo(z);var B=a("<ul></ul>");B.appendTo(C);a(this).children().each(function(){++t;var E=a(this).html();var D=a(this).val();m.push(E.charAt(0).toLowerCase());if(a(this).attr("selected")==true){l.defaultText=E;d=t}B.append(a('<li><a href="JavaScript:void(0);">'+E+"</a></li>").data("key",D))})});x=z.find("ul li a")}var o=z.height(),n=r.height(),y=x.length;if(d!=-1){h(d,true)}else{j.text(l.defaultText)}function p(){var B=r.offset().top,A=jQuery(window).height(),C=jQuery(window).scrollTop();if(o>parseInt(l.ddMaxHeight)){o=parseInt(l.ddMaxHeight)}B=B-C;if(B+o>=A){z.css({top:"-"+o+"px",height:o});e.onTop=true}else{z.css({top:n+"px",height:o});e.onTop=false}}p();a(window).bind("resize.sSelect scroll.sSelect",p);function s(){r.css("position","relative")}function c(){r.css("position","static")}j.bind("click.sSelect",function(A){A.stopPropagation();if(a(this).data("ssReRender")){o=z.height("").height();n=r.height();a(this).data("ssReRender",false);p()}a(".newList").not(a(this).next()).hide().parent().css("position","static").removeClass("newListSelFocus");z.toggle();s();x.eq(d).focus()});x.bind("click.sSelect",function(B){var A=a(B.target);d=x.index(A);v=true;h(d);z.hide();r.css("position","static")});x.bind("mouseenter.sSelect",function(B){var A=a(B.target);A.addClass("newListHover")}).bind("mouseleave.sSelect",function(B){var A=a(B.target);A.removeClass("newListHover")});function h(A,E){x.removeClass("hiLite").eq(A).addClass("hiLite");if(z.is(":visible")){x.eq(A).focus()}var D=x.eq(A).html();var C=x.eq(A).parent().data("key");if(E==true){e.val(C);j.text(D);return false}try{e.val(C)}catch(B){e[0].selectedIndex=A}e.change();j.text(D)}e.bind("change.sSelect",function(A){$targetInput=a(A.target);if(v==true){v=false;return false}$currentOpt=$targetInput.find(":selected");d=$targetInput.find("option").index($currentOpt);h(d,true)});function q(A){a(A).unbind("keydown.sSelect").bind("keydown.sSelect",function(D){var C=D.which;v=true;switch(C){case 40:case 39:u();return false;break;case 38:case 37:k();return false;break;case 33:case 36:g();return false;break;case 34:case 35:f();return false;break;case 13:case 27:z.hide();c();return false;break}keyPressed=String.fromCharCode(C).toLowerCase();var B=m.indexOf(keyPressed);if(typeof B!="undefined"){++d;d=m.indexOf(keyPressed,d);if(d==-1||d==null||w!=keyPressed){d=m.indexOf(keyPressed)}h(d);w=keyPressed;return false}})}function u(){if(d<(y-1)){++d;h(d)}}function k(){if(d>0){--d;h(d)}}function g(){d=0;h(d)}function f(){d=y-1;h(d)}r.bind("click.sSelect",function(A){A.stopPropagation();q(this)});r.bind("focus.sSelect",function(){a(this).addClass("newListSelFocus");q(this)});r.bind("blur.sSelect",function(){a(this).removeClass("newListSelFocus")});a(document).bind("click.sSelect",function(){r.removeClass("newListSelFocus");z.hide();c()});j.bind("mouseenter.sSelect",function(B){var A=a(B.target);A.parent().addClass("newListSelHover")}).bind("mouseleave.sSelect",function(B){var A=a(B.target);A.parent().removeClass("newListSelHover")});z.css({left:"0",display:"none",visibility:"visible"})})}})(jQuery);
	</script>
	<style>
		/*
		Stylish Select 0.4.1 - $ plugin to replace a select drop down box with a stylable unordered list
		http://scottdarby.com/

		Copyright (c) 2009 Scott Darby

		Requires: jQuery 1.3 or newer

		Dual licensed under the MIT and GPL licenses.

		*/


		/*==================================
		Hide lists on page load
		====================================*/

		.stylish-select ul.newList {left:-9999px;}

		/*==================================
		red curvy example
		====================================*/
		ul.newList, ul.newList li * {margin:0; padding:0;overflow:none;}
		ul.newList a {color: #000; text-decoration:none; display:block;}
		ul.newList {margin:0; padding:0; list-style:none; color:#000; width:290px; background:#fff; position:absolute;  border:1px solid #ccc; top:22px; left:0; overflow:auto; z-index:9999;}
		.newListSelected {width:285px; color:#000; height:19px; padding:3px 0 0 6px; float:left; background:url(select-bg.png) no-repeat;}
		.newListSelected span {width:284px; display:block;}
		ul.newList li a {padding:3px 8px; display: block;}
		ul.newList li a:focus {-moz-outline-style: none;}
		.selectedTxt {width:258px; overflow:hidden; height:16px; padding:0 23px 0 0;}
		.hiLite {background:#650101!important; color:#fff!important;}
		.hiLite a {background:#650101!important; color:#fff!important;}
		.newListHover {background:#ccc!important; color:#000!important; cursor:default;}
		.newListSelHover, .newListSelFocus {background-position:0 -22px; cursor:default;}
		.newListOptionTitle {font-weight:bold;}
		.newListOptionTitle ul {margin:3px 0 0;}
		.newListOptionTitle li {font-weight:normal; border-left:1px solid #ccc;}


	</style>

</head>
<body>

	<a href="#" class="apply">Add</a>

	<div class="default">



	<br><br>
	</div>

	<script type="text/javascript">
		//base ID value
		var selectID = 0


		//when document is ready
		$(document).ready(function(){

			//run the addSelect for the first time putting the "original" select in place
			addSelect()

			//add the addSelect handler to the click even of our link
			$('.apply').click(function() {
				addSelect();
			});
		})

		function addSelect() {

			//create a select object setting the ID value to something unique
			var $sel = $("<select id=\"sel" + selectID + "\" />");

			//append the options of our select
			$sel.append("<option>1</option>");
			$sel.append("<option>2</option>");
			$sel.append("<option>3</option>");

			//add the select to the DOM (with a few link breaks)
			$("div.default").append($sel).append("<br/><br/>");

			//wire up the sSelect() behavior AFTER it has been inserted into the DOM
			$($sel).sSelect()

			//increment the select ID counter (so we don't have duplicated ID's
			selectID = selectID + 1;

		}
	</script>

</body>



</html>

Open in new window

0
 
LVL 16

Accepted Solution

by:
Steve Krile earned 500 total points
ID: 33718458
And just so you can see what I was talking about earlier for FF rendering, I get overflow scroll handles when I click on an item.
sSelect.png
0
 
LVL 16

Expert Comment

by:Steve Krile
ID: 33718469
However, if you add this style rule, the overflow goes away in FF:


ul.newList li {padding:2px;}
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Read about why website design really matters in today's demanding market.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now