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 :
Code HTML :
<div class="body3">
<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>
</div>JAVASCRIPT
Code 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
Code :
/* 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;
}