Myślę nad jakimś przewijaniem, np. coś takiego, jak jest w menu start, gdy lista się nie mieści na ekranie.
Tutaj kod js i CSS:
Kod
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.onkeypress = obj.onchange;
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 getElementsByClassName(cn){
var arr = new Array();
var els = document.getElementsByTagName("*");
var exp= new RegExp("^(.* )?"+cn+"( .*)?$", "g");
for (var i = 0; i < els.length; i++ ){
if (exp.test(els[i].className)){
arr.push(els[i]);
}
}
return arr;
}
function setForm() {
var s = getElementsByClassName('select_gielda');
for (var i=0; i<s.length; i++) {
selectReplacement(s[i]);
}
}
window.onload = function() {
(document.all && !window.print) ? null : setForm();
};
<!-- i CSS -->
#sort_gielda select {
display: block;
margin: 0 10px 10px 0;
width: 107px;
float: left;
}
#sort_gielda select.replaced {
width: 1px;
position: absolute;
left: -999em;
}
ul.selectReplacement {
background-color: #ddd;
border: 2px solid #404040;
margin: 0 10px 10px 0;
padding: 0;
height: 21px;
width: 107px;
position: relative;
z-index: 1000;
float: left;
}
ul.selectFocused {
background-color: #ddd;
}
ul.selectReplacement li {
background: url(images/gielda/v.gif) center right no-repeat;
background-color: #ddd;
color: #404040;
cursor: pointer;
display: none;
font-size: 11px;
line-height: 1.7em;
list-style: none;
margin: 0;
padding: 1px 12px;
width: 83px;
}
ul.selectOpen li {
background-image: none;
display: block;
}
ul.selectReplacement li.selected {
background-color: #ddd;
color: #404040;
display: block;
}
ul.selectOpen li.selected {
background-color: #404040;
color: #ddd;
border: 0;
display: block;
}
ul.selectOpen li:hover,
ul.selectOpen li.hover,
ul.selectOpen li.selected:hover {
background-color: #404040;
color: #ddd;
}
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.onkeypress = obj.onchange;
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 getElementsByClassName(cn){
var arr = new Array();
var els = document.getElementsByTagName("*");
var exp= new RegExp("^(.* )?"+cn+"( .*)?$", "g");
for (var i = 0; i < els.length; i++ ){
if (exp.test(els[i].className)){
arr.push(els[i]);
}
}
return arr;
}
function setForm() {
var s = getElementsByClassName('select_gielda');
for (var i=0; i<s.length; i++) {
selectReplacement(s[i]);
}
}
window.onload = function() {
(document.all && !window.print) ? null : setForm();
};
<!-- i CSS -->
#sort_gielda select {
display: block;
margin: 0 10px 10px 0;
width: 107px;
float: left;
}
#sort_gielda select.replaced {
width: 1px;
position: absolute;
left: -999em;
}
ul.selectReplacement {
background-color: #ddd;
border: 2px solid #404040;
margin: 0 10px 10px 0;
padding: 0;
height: 21px;
width: 107px;
position: relative;
z-index: 1000;
float: left;
}
ul.selectFocused {
background-color: #ddd;
}
ul.selectReplacement li {
background: url(images/gielda/v.gif) center right no-repeat;
background-color: #ddd;
color: #404040;
cursor: pointer;
display: none;
font-size: 11px;
line-height: 1.7em;
list-style: none;
margin: 0;
padding: 1px 12px;
width: 83px;
}
ul.selectOpen li {
background-image: none;
display: block;
}
ul.selectReplacement li.selected {
background-color: #ddd;
color: #404040;
display: block;
}
ul.selectOpen li.selected {
background-color: #404040;
color: #ddd;
border: 0;
display: block;
}
ul.selectOpen li:hover,
ul.selectOpen li.hover,
ul.selectOpen li.selected:hover {
background-color: #404040;
color: #ddd;
}
jak się za to zabrać?
pzdr