11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

voila j'ai fait quelques recherche sur alsacréation pour styler la balise select. J'ai vue que c'était impossible via le CSS. J'ai donc trouvé un petit script Jquery sur le net très sympa qui me donne l'effet que je souhaite mais j'ai un petit souci ....

J'ai un page avec un formulaire d'inscription vers le bas de page il y a mes balises de type <select></select> le problème est que quand j'arrive sur la page au lien d'être tout en haut ma page est tout en bas comme si j'avais fait un scroll j'ai essayer de regarder dans le fichier JS mais je trouve pas de quoi ça peut venir.

Le problème est présent que quand le script et sur la page

Voila le code source :

/*
Stylish Select 0.4.1 - $ plugin to replace a select drop down box with a stylable unordered list
 http://scottdarby.com/
 

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($){

    //add class of js to html tag
    $('html').addClass('stylish-select');

    //create cross-browser indexOf
    Array.prototype.indexOf = function (obj, start) {
        for (var i = (start || 0); i < this.length; i++) {
            if (this[i] == obj) {
                return i;
            }
        }
    }
	
    //utility methods
    $.fn.extend({
        getSetSSValue: function(value){
            if (value){
                //set value and trigger change event
                $(this).val(value).change();
                return this;
            } else {
                return $(this).find(':selected').val();
            }
        },
        //added by Justin Beasley
        resetSS: function(){
            var oldOpts = $(this).data('ssOpts');
            $this = $(this);
            $this.next().remove();
            //unbind all events and redraw
            $this.unbind().sSelect(oldOpts);
        }
    });

    $.fn.sSelect = function(options) {
	
        return this.each(function(){
			
            var defaults = {
                defaultText: 'Please select',
                animationSpeed: 0, //set speed of dropdown
                ddMaxHeight: '' //set css max-height value of dropdown
            };

            //initial variables
            var opts = $.extend(defaults, options),
            $input = $(this),
            $containerDivText = $('<div class="selectedTxt"></div>'),
            $containerDiv = $('<div class="newListSelected" tabindex="0"></div>'),
            $newUl = $('<ul class="newList"></ul>'),
            itemIndex = -1,
            currentIndex = -1,
            keys = [],
            prevKey = false,
            prevented = false,
            $newLi;

            //added by Justin Beasley
            $(this).data('ssOpts',options);
			
            //build new list
            $containerDiv.insertAfter($input);
            $containerDivText.prependTo($containerDiv);
            $newUl.appendTo($containerDiv);
            $input.hide();

            //test for optgroup
            if ($input.children('optgroup').length == 0){
                $input.children().each(function(i){
                    var option = $(this).text();
                    var key = $(this).val();

                    //add first letter of each word to array
                    keys.push(option.charAt(0).toLowerCase());
                    if ($(this).attr('selected') == true){
                        opts.defaultText = option;
                        currentIndex = i;
                    }
                    $newUl.append($('<li><a href="JavaScript:void(0);">'+option+'</a></li>').data('key', key));

                });
                //cache list items object
                $newLi = $newUl.children().children();
				
            } else { //optgroup
                $input.children('optgroup').each(function(){
				
                    var optionTitle = $(this).attr('label'),
                    $optGroup = $('<li class="newListOptionTitle">'+optionTitle+'</li>');
						
                    $optGroup.appendTo($newUl);

                    var $optGroupList = $('<ul></ul>');

                    $optGroupList.appendTo($optGroup);

                    $(this).children().each(function(){
                        ++itemIndex;
                        var option = $(this).text();
                        var key = $(this).val();
                        //add first letter of each word to array
                        keys.push(option.charAt(0).toLowerCase());
                        if ($(this).attr('selected') == true){
                            opts.defaultText = option;
                            currentIndex = itemIndex;
                        }
                        $optGroupList.append($('<li><a href="JavaScript:void(0);">'+option+'</a></li>').data('key',key));
                    })
                });
                //cache list items object
                $newLi = $newUl.find('ul li a');
            }
			
            //get heights of new elements for use later
            var newUlHeight = $newUl.height(),
            containerHeight = $containerDiv.height(),
            newLiLength = $newLi.length;
		
            //check if a value is selected
            if (currentIndex != -1){
                navigateList(currentIndex, true);
            } else {
                //set placeholder text
                $containerDivText.text(opts.defaultText);
            }

            //decide if to place the new list above or below the drop-down
            function newUlPos(){
                var containerPosY = $containerDiv.offset().top,
                docHeight = jQuery(window).height(),
                scrollTop = jQuery(window).scrollTop();
                //if height of list is greater then max height, set list height to max height value
                if (newUlHeight > parseInt(opts.ddMaxHeight)) {
                    newUlHeight = parseInt(opts.ddMaxHeight);
                }

                containerPosY = containerPosY-scrollTop;
                if (containerPosY+newUlHeight >= docHeight){
                    $newUl.css({
                        top: '-'+newUlHeight+'px',
                        height: newUlHeight
                    });
                    $input.onTop = true;
                } else {
                    $newUl.css({
                        top: containerHeight+'px',
                        height: newUlHeight
                    });
                    $input.onTop = false;
                }
            }

            //run function on page load
            newUlPos();
			
            //run function on browser window resize
            $(window).resize(function(){
                newUlPos();
            });
			
            $(window).scroll(function(){
                newUlPos();
            });

            //positioning
            function positionFix(){
                $containerDiv.css('position','relative');
            }

            function positionHideFix(){
                $containerDiv.css('position','static');
            }
			
            $containerDivText.click(function(event){

                event.stopPropagation();

                //hide all menus apart from this one
                $('.newList').not($(this).next()).hide().parent().removeClass('newListSelFocus');

                //show/hide this menu
                $newUl.toggle();
                positionFix();
                //scroll list to selected item
                $newLi.eq(currentIndex).focus();


            });

            $newLi.click(function(e){
                
                var $clickedLi = $(e.target);

                //update counter
                currentIndex = $newLi.index($clickedLi);
				
                //remove all hilites, then add hilite to selected item
                prevented = true;
                navigateList(currentIndex);
                $newUl.hide();
                $containerDiv.css('position','static');//ie

            });
			
            $newLi.hover(
                function(e) {
                    var $hoveredLi = $(e.target);
                    $hoveredLi.addClass('newListHover');
                },
                function(e) {
                    var $hoveredLi = $(e.target);
                    $hoveredLi.removeClass('newListHover');
                }
                );

            function navigateList(currentIndex, init){
                $newLi.removeClass('hiLite')
                .eq(currentIndex)
                .addClass('hiLite');

                if ($newUl.is(':visible')){
                    $newLi.eq(currentIndex).focus();
                }

                var text = $newLi.eq(currentIndex).text();
                var val = $newLi.eq(currentIndex).parent().data('key');
                
                //page load
                if (init == true){
                    $input.val(val);
                    $containerDivText.text(text);
                    return false;
                }
                
                $input.val(val)
                $input.change();
                $containerDivText.text(text);
            };

            $input.change(function(event){
                $targetInput = $(event.target);
                //stop change function from firing
                if (prevented == true){
                    prevented = false;
                    return false;
                }
                $currentOpt = $targetInput.find(':selected');
                
                currentIndex = $targetInput.find('option').index($currentOpt);
                currentIndex = $targetInput.find('option').index($currentOpt);


                navigateList(currentIndex, true);
            }
            );
			
            //handle up and down keys
            function keyPress(element) {
                //when keys are pressed
                element.onkeydown = function(e){
                    var keycode;
                    if (e == null) { //ie
                        keycode = event.keyCode;
                    } else { //everything else
                        keycode = e.which;
                    }

                    //prevent change function from firing
                    prevented = true;

                    switch(keycode)
                    {
                        case 40: //down
                        case 39: //right
                            incrementList();
                            return false;
                            break;
                        case 38: //up
                        case 37: //left
                            decrementList();
                            return false;
                            break;
                        case 33: //page up
                        case 36: //home
                            gotoFirst();
                            return false;
                            break;
                        case 34: //page down
                        case 35: //end
                            gotoLast();
                            return false;
                            break;
                        case 13:
                        case 27:
                            $newUl.hide();
                            positionHideFix();
                            return false;
                            break;
                    }

                    //check for keyboard shortcuts
                    keyPressed = String.fromCharCode(keycode).toLowerCase();
                    
                    var currentKeyIndex = keys.indexOf(keyPressed);

                    if (typeof currentKeyIndex != 'undefined') { //if key code found in array
                        ++currentIndex;
                        currentIndex = keys.indexOf(keyPressed, currentIndex); //search array from current index
                        if (currentIndex == -1 || currentIndex == null || prevKey != keyPressed) currentIndex = keys.indexOf(keyPressed); //if no entry was found or new key pressed search from start of array

                        
                        navigateList(currentIndex);
                        //store last key pressed
                        prevKey = keyPressed;
                        return false;
                    }
                }
            }

            function incrementList(){
                if (currentIndex < (newLiLength-1)) {
                    ++currentIndex;
                    navigateList(currentIndex);
                }
            }

            function decrementList(){
                if (currentIndex > 0) {
                    --currentIndex;
                    navigateList(currentIndex);
                }
            }

            function gotoFirst(){
                currentIndex = 0;
                navigateList(currentIndex);
            }
			
            function gotoLast(){
                currentIndex = newLiLength-1;
                navigateList(currentIndex);
            }

            $containerDiv.click(function(){
                keyPress(this);
            });

            $containerDiv.focus(function(){
                $(this).addClass('newListSelFocus');
                keyPress(this);
            });

            $containerDiv.blur(function(){
                $(this).removeClass('newListSelFocus');
            });
			
            //hide list on blur
            $('body').click(function(){
                $containerDiv.removeClass('newListSelFocus');
                $newUl.hide();
                positionHideFix();
            });
			
            //add classes on hover
            $containerDivText.hover(function(e) {
                var $hoveredTxt = $(e.target);
                $hoveredTxt.parent().addClass('newListSelHover');
            },
            function(e) {
                var $hoveredTxt = $(e.target);
                $hoveredTxt.parent().removeClass('newListSelHover');
            }
            );

            //reset left property and hide
            $newUl.css('left','0').hide();
			
        });
	  
    };

})(jQuery);


Si quelqu'un aurait une idée !!

Merci d'avance[/i]
Modifié par Viva25 (27 Mar 2010 - 09:23)
Bonjour je me retourne vers vous car je penser avoir résolu mon problème mais selon la t'aille de l'écran j'ai toujours le même souci quelqu'un aurait une idée ?
Modifié par Viva25 (27 Mar 2010 - 09:24)