Hi all,

I have one more question about the Selectyze plugin I really hope somebody can help me with.

For more info about the Selectyze: https://github.com/alpixel/Selectyze

The standard HTML selectbox <select> shows the expanded options-list below the selectbox as default and above the selectbox when there is not enough space to show it below.

Selectyze selectbox only shows the option-list below the selectbox and this sometimes results in a option-list "outside" the broswer window.

Example:

1. http://demos.myjqueryplugins.com/selectyze/
2. Scroll so one of the demo-boxes is just above the bottom edge of the browser
3. Click on the selectbox
4. Notice that its impossible to click any option without scrolling down


What I wounder is if there is any way to make the selectyze option-list have two positions just like the regular HTML selectbox, so when there is not space enough for it to expand below the checkbox then it will expand above it insteed.

I have tried some solutions with CSS but I cant figure out how to make this work. I hope somebody here maybe have a good solution.


Selectbox
Code:
<select name="selectbox" class="selectyze">
    <option>- -</option>
    <option value="value1" selected="selected">Value 1</option>
    <option value="value2">Value 2</option>
</select>[
Plugin script
Code:
    $(document).ready(function(){
        // simple Selectyze call
        $(".selectyze").Selectyze();
        // call with options
        $(".selectyze").Selectyze({
            theme:'css3',
            effectOpen:'fade',
            effectClose:'slide'
        });
    });

jQuery
Code:
/************************************************************************
*************************************************************************
@Name :       	Selectyze - jQuery Plugin
@Revison :    	1.1
@Date : 		25/01/2011
@Author:     	Mickael SURREL - ALPIXEL Agency - (www.myjqueryplugins.com - www.alpixel.fr) 
@License :		 Open Source - MIT License : http://www.opensource.org/licenses/mit-license.php
 
**************************************************************************
*************************************************************************/
(function($) {
	$.fn.Selectyze = function(opt) {
		var defaults = {
			theme:'css3',
			effectOpen : 'slide',
			effectClose : 'slide'
		}; 

		if(this.length)
		return this.each(function() {

			/** vars **/
			var 
				opts = $.extend(defaults, opt),
				$this = $(this),
				optionselected = $this.find('option').filter(':selected'),
				DivSelect = $('<div>', {'class' : 'DivSelectyze '+opts.theme+''}),
				UlSelect = $('<ul>',{'class':'UlSelectize'}),
				liHtml = '';

			zIndex = 9999;

			/** DOM construction && manipulation **/
			constructList($this);
			$this.hide();
			$this.after(DivSelect);
			DivSelect.html('<a href="#" rel="'+optionselected.val()+'" class="selectyzeValue">'+optionselected.text()+'</a>');

			UlSelect.appendTo(DivSelect).html(liHtml);
			$('.DivSelectyze').each(function(i,el){
				$(this).css('z-index',zIndex);
				zIndex -= 10;
			});

			/** Actions **/
			n=false;
			DivSelect.mouseenter(function() {n =false;}).mouseleave(function() {n = true;});

			DivSelect.find('a.selectyzeValue').click(function(e){
				e.preventDefault();
				closeList($('ul.UlSelectize').not($(this).next()));
				openList($(this).next('ul.UlSelectize'));
			});

			UlSelect.find('a').click(function(e){
				e.preventDefault();
				DivSelect.find('a.selectyzeValue').text($(this).text());
				$this.val($(this).attr('rel'));           
				$this.trigger('change');         
				closeList($this.next().find('.UlSelectize'));
			});

			$(document).click(function(e){if(n) closeList($('.UlSelectize').not(':hidden'));});

			/** Construct HTML list ul/li **/
			function constructList(el){
				/** Creat list content **/
				if(el.has('optgroup').length)
				{
					el.find('optgroup').each(function(i,el){
						liHtml += '<li><span class="optgroupTitle">'+$(this).attr('label')+'</span><ul>';
						$(this).children().each(function(i,el){
							liHtml += '<li><a rel="'+$(this).val()+'" href="#">'+$(this).text()+'</a></li>';
						});
						liHtml += '</ul></li>';
					});
				}
				else
				{
					el.find('option').each(function(i,el){
						liHtml += '<li><a rel="'+$(this).val()+'" href="#">'+$(this).text()+'</a></li>';
					});
				}
			}

			/** Effect Open list **/
			function openList(el) {
				switch (opts.effectOpen) {
					case 'slide' :
						if(!el.is(':hidden')) el.stop(true,true).slideUp('fast');	
						else el.stop(true,true).slideDown('fast');	
					break;
					case 'fade':
						if(!el.is(':hidden')) el.stop(true,true).fadeOut('fast');	
						else el.stop(true,true).fadeIn('fast');	
					break;
					default :
						if(!el.is(':hidden')) el.stop(true,true).hide();	
						else el.stop(true,true).show();	
				}
			}

			/** Effect Close list **/
			function closeList(el) {
				switch (opts.effectClose) {
					case 'slide' :
						el.stop(true,true).slideUp('fast');
					break;
					case 'fade':
						el.stop(true,true).fadeOut('fast');
					break;
					default :
						el.hide();	
				}
			}

		});
	}
})(jQuery);
CSS
Code:
/************************************************************************
*************************************************************************
@Name :       	Selectyze - jQuery Plugin CSS
@Revison :    	1.0
@Date : 		19/12/2011
@Author:     	Mickael SURREL - ALPIXEL Agency - (www.myjqueryplugins.com - www.alpixel.fr) 
@License :		 Open Source - MIT License : http://www.opensource.org/licenses/mit-license.php
 
**************************************************************************
*************************************************************************/

/***************************/
/** Common to every theme **/
/***************************/
.DivSelectyze {
	position:relative;
	width:253px;
	float:left;
	margin-top:15px;
}

.DivSelectyze .selectyzeValue {
	position:relative;
	z-index:10;
	display:block;
	text-decoration:none;
}

.DivSelectyze ul {list-style:none;}
.DivSelectyze .UlSelectize {
	position:absolute;
	z-index:9999;
	display:none;
}

.DivSelectyze li a {
	display:block;
	text-decoration:none;
}

.optgroupTitle {
	display:block;
}
/*******************************/
/** END COMMON TO EVERY THEME **/
/*******************************/
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/




/*----------------------------------
 You can add your own theme below !!
 To add your theme, be sure to have 5 CSS elements :
 
 .your_theme .selectyzeValue {} 		-> Appearance of your select element
 .your_theme .UlSelectize {} 			-> Appearance of the dropdown list
 .your_theme li a {} 					-> Appearance of the items into the dropdown list
 .your_theme li a:hover {} 				-> items on hover
 .your_theme .optgroupTitle {} 			-> Appearance of the optgroup label !! only if you have <optgroup> element into your list 
 
 
 that's all ! \o/
----------------------------------*/



	/*****************/
	/** SKYPE THEME **/
	/*****************/
	.skype .selectyzeValue {
		font:18px/45px Arial;
		color:#2a98c1;
		width:254px;
		height:45px;
		background:url('bg_skype.png') no-repeat;
		padding-left:15px
	}

	.skype .UlSelectize {
		top:39px;
		left:6px;
		width:239px;
		border:1px solid #00aff0;
		background-color:#f7f8ff
	}

	.skype li a {
		height:28px;
		font:14px/30px Arial;
		background-color:transparent;
		color:#2a98c1;
		border-top:1px solid #84d8f8;
		padding-left:10px
	}

	.skype li a:hover {
		color:#fff;
		background-color:#2a98c1;/** gradient bgcolors */
		background-image: -webkit-gradient(linear, left top, left bottom, from(#84d8f8), to(#0ab2f1)); /* Saf4+, Chrome */
		background-image: -webkit-linear-gradient(top, #84d8f8, #0ab2f1); /* Chrome 10+, Saf5.1+, iOS 5+ */
		background-image:    -moz-linear-gradient(top, #84d8f8, #0ab2f1); /* FF3.6 */
		background-image:     -ms-linear-gradient(top, #84d8f8, #0ab2f1); /* IE10 */
		background-image:      -o-linear-gradient(top, #84d8f8, #0ab2f1); /* Opera 11.10+ */
		background-image:         linear-gradient(top, #84d8f8, #0ab2f1)
	}

	.skype .optgroupTitle {
		margin-top:15px;
		font-size:16px;
		padding-left:10px;
		background-color:#0fb1ef;
		color:#fff;
	}