Scroolbarre sur menu select [Résolu]

Signaler
Messages postés
11
Date d'inscription
mercredi 10 octobre 2007
Statut
Membre
Dernière intervention
21 juillet 2010
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
Bonjour

Voila j'ai un petit probleme avec une liste de selection que j'ai personnalisé grâce a un code java trouvé sur le net. maintenant que j'ai réussi a donner forme a mon menu , je me rend compte que ayant un longue liste de proposition , j'ai besoin d'y intégrer un scrollbar . que je pourrais personnalisé aussi si possible . Mais j'ai beau essayer de copier du code qui pourrais correspondre rien y fait . je vous joint le code que j'ai pour l 'instant .Je n'y connais rien en Javascript . peut etre ai je pioché un code qui ne correspond pas a ma demande ? Merci de votre aide

HTML :

       
    
        <form action="#" method="post">
        <fieldset class="wrapper">

    
     
      <select id="something" name="something" tabindex="101" >
      <option selected="selected" value="0">Any District</option>
<option value="1660">Abbotstown</option>
<option value="1334">Adamstown</option>
<option value="2241">Applewood Village</option>
<option value="36">Arbour Hill</option>
<option value="410">Ard na Greine</option>
<option value="37">Artane</option>
<option value="198">Ashbourne</option>
<option value="536">Ashington</option>
<option value="669">Ashtown</option>
<option value="4036">Athgoe</option>
<option value="153123">Aylesbury</option>
<option value="97">Ayrefield</option>
<option value="153124">Ayrfield</option>
<option value="81">Baily</option>
<option value="39">Balbriggan</option>
<option value="1661">Baldonnel</option>
<option value="153125">Baldonnell</option>
<option value="38">Baldoyle</option>
<option value="1662">Balgaddy</option>
<option value="189">Balgriffin</option>
<option value="153126">Ballinascorney Upper</option>
<option value="82">Ballinteer</option>
<option value="83">Ballsbridge</option>
<option value="1651">Ballyboden</option>
<option value="405">Ballybough</option>
<option value="758">Ballyboughal</option>
<option value="126">Ballybrack</option>
<option value="89">Ballycoolin</option>
<option value="153127">Ballycorus</option>
<option value="153128">Ballycullen</option>
<!-- je m arrete la pour la liste je vais pas tout mettre -->



      </select>
      </fieldset>


</form>



JAVASCRIPT

// <![CDATA[
function selectReplacement(obj) {
    obj.className += ' replaced';
    var ul = document.createElement('ul');
    ul.className = 'selectReplacement';
    var opts = obj.options;
    var selectedOpt = (!obj.selectedIndex) ? 0 : obj.selectedIndex;
    for (var i = 0; i < opts.length; i++) {
        var li = document.createElement('li');
        var txt = document.createTextNode(opts[i].text);
        li.appendChild(txt);
        li.selIndex = i;
        li.selectID = obj.id;
        li.onclick = function () {
            selectMe(this);
        };
        if (i == selectedOpt) {
            li.className = 'selected';
            li.onclick = function () {
                this.parentNode.className += ' selectOpen';
                this.onclick = function () {
                    selectMe(this);
                };
            };
        }
        if (window.attachEvent) {
            li.onmouseover = function () {
                this.className += ' hover';
            };
            li.onmouseout = function () {
                this.className =
              this.className.replace(new RegExp(" hover\\b"), '');
            };
        }
        ul.appendChild(li);
    }
    obj.onfocus = function () {
        ul.className += ' selectFocused';
    };
    obj.onblur = function () {
        ul.className = 'selectReplacement';
    };
    obj.onchange = function () {
        var idx = this.selectedIndex;
        selectMe(ul.childNodes[idx]);
    };
    obj.onkeydown = function (event) {
        alert(event.keyCode);
        var idx = this.selectedIndex;
        this.prev = idx - 1;
        this.next = idx + 1;
        switch (event.keyCode) {
            // previous 
            case 37: // left
            case 38: // up
                if (this.prev >= 0) {
                    selectMe(ul.childNodes[this.prev]);
                }
                break;
            // next 
            case 39: // right
            case 40: // down
                if (this.next < ul.childNodes.length) {
                    selectMe(ul.childNodes[this.next]);
                }
                break;
            // goto the beginning of the list 
            case 33: // page up
            case 36: // home
                selectMe(ul.firstChild);
                break;
            // goto the end of the list 
            case 34: // page down
            case 35: // end
                selectMe(ul.lastChild);
                break;
        }
    };
    obj.parentNode.insertBefore(ul, obj);
}
function selectMe(obj) {
    var lis = obj.parentNode.getElementsByTagName('li');
    for (var i = 0; i < lis.length; i++) {
        if (lis[i] != obj) {
            lis[i].className = '';
            lis[i].onclick = function () {
                selectMe(this);
            };
        } else {
            setVal(obj.selectID, obj.selIndex);
            obj.className = 'selected';
            obj.parentNode.className =
            obj.parentNode.className.replace(new RegExp(" selectOpen\\b"), '');
            obj.onclick = function () {
                obj.parentNode.className += ' selectOpen';
                this.onclick = function () {
                    selectMe(this);
                };
            };
        }
    }
}
function setVal(objID, val) {
    var obj = document.getElementById(objID);
    obj.selectedIndex = val;
}
function setForm() {
    var s = document.getElementsByTagName('select');
    for (var i = 0; i < s.length; i++) {
        selectReplacement(s[i]);
    }
}
window.onload = function () {
    (document.all && !window.print) ? null : setForm();
};



CSS

/* CSS menu deroulant */
 body3 {
    font: 10px "Lucida Sans";
    text-align: center;
    left: 10px;
    position: relative;
    z-index: 1001;
    font-weight: bolder;
    color: #000000;
}
fieldset {
    margin: 1em 0;
    padding: 10px;
    width: 226px;
    height: 20px;
}
fieldset.wrapper {
    border: 0;
    margin: 0;
    padding: 0;
    width: 226px;
}
   
    legend {
    color: #9e0000;
    font-size: 12px;
    font-weight: bold;
    font-family: "Levenim MT";
}
    label {
      display: block;
      font-weight: bold;
      color: #9e0000;
    }
    select {
    display: block;
    margin: 0 0 10px;
    width: 226px;
}
    select.replaced {
      width: 1px;
      position: absolute;
      left: -999em;
    }
    ul.selectReplacement {
    background: url('../images/top3.jpg') no-repeat left top;
    margin: 0 0 0px 0;
    padding: 0;
    height: 20px;
    width: 226px;
    position: relative;
    z-index: 1000;
}
ul.selectFocused {
    background-image: url('../images/top2-focus.jpg');
    background-repeat: no-repeat;
}
    ul.selectReplacement li {
    color: #000000;
    cursor: pointer;
    display: none;
    font-size: 12px;
    list-style: none;
    width: 226px;
    position: relative;
    z-index: 1000;
    height: 20px;
    background-image: url('../images/barreneutre.png');
    background-repeat: no-repeat;
    font-family: "Myriad Pro";
    font-weight: bold;
    text-align: center;
}
    ul.selectOpen li {
      display: block;
    }
    ul.selectReplacement li.selected {
    background: url(bottom.gif) bottom left no-repeat;
    border-bottom: 1px solid #fff;
    color: #fff;
    display: block;
}
ul.selectOpen li.selected {
    display: block;
    width: 226px;
    background-image: url('../images/barrepleine.png');
    background-repeat: no-repeat;
}
ul.selectOpen li:hover,
    ul.selectOpen li.hover,
    ul.selectOpen li.selected:hover {
    color: #fff;
    background-image: url('../images/barrepleine.png');
    background-repeat: no-repeat;
}

3 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
Bonjour,
pas tout lu le code, je dirais à priori mets ta liste dans une DIV scrollable

;O)
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
Bonjour,
Impeccable, penses à mettre en réponse acceptée !, cela peut en aider d'autres...

;O)
Messages postés
11
Date d'inscription
mercredi 10 octobre 2007
Statut
Membre
Dernière intervention
21 juillet 2010

Merci bcp , sa marche maintenant