I'm adapting an example found here on StackOverflow for replacing the "select" component on IE7 that does not support some nice CSS layout.The example lacks a scrollbar, so I added a div with a fixed size so the scrollbars would appear and the component would be almost complete.My problems:1 - On IE7 (IE9 compatibility mode) the scrollbars do not appear. Any fix for this?2 - How do I do to the "div" to just be positioned on that location but stay in front of the other components, instead of occupying its full size?My code/html on jsfiddle:http://jsfiddle.net/mbarni/nTYWA/(run it as "no wrap (head)") Inline code/html:\[code\]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <style type="text/css"> body { font: 80% 'Quicksand-Regular', Verdana, Geneva, sans-serif; } select { display: block; margin: 0 0 10px; width: 300px; } select.replaced { width: 1px; position: absolute; left: -999em; } ul.selectReplacement { background: #10194B; margin: 0 0 10px; padding: 0; height: 1.65em; width: 300px; position: relative; z-index: 1000; } ul.selectFocused { background: #10194B; } ul.selectReplacement li { background: #09C; color: #fff; cursor: pointer; display: none; font-size: 11px; line-height: 1.7em; list-style: none; margin: 0; padding: 1px 12px; width: 276px; } ul.selectOpen li { display: block; } ul.selectReplacement li.selected { background: #10194B; border-bottom: 1px solid #fff; color: #fff; display: block; } ul.selectOpen li.selected { background: #10194B; border: 0; display: block; } ul.selectOpen li:hover, ul.selectOpen li.hover, ul.selectOpen li.selected:hover { background: #10194B; color: #fff; } div.scroll { overflow-y: auto; overflow-x: hidden; height: 100px; width: 300px; } </style> <script type="text/javascript"> function selectReplacement(obj) { obj.className += ' replaced'; var ul = document.createElement('ul'); ul.className = 'selectReplacement'; var div = document.createElement('div'); div.className = 'scroll'; div.appendChild(ul); 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.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(div,obj); } function selectMe(obj) { var lis = obj.parentNode.getElementsByTagName('li'); for (var i=0; i<lis.length; i++) { if (lis != obj) { lis.className=''; lis.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); } } window.onload = function() { (document.all && !window.print) ? null : setForm(); }; </script></head><body> <select id="unidade"> <option value="http://stackoverflow.com/questions/13820371/001">TEST 1</option> <option selected value="http://stackoverflow.com/questions/13820371/002">TEST 2</option> <option value="http://stackoverflow.com/questions/13820371/003">TEST 3</option> <option value="http://stackoverflow.com/questions/13820371/004">TEST 4</option> <option value="http://stackoverflow.com/questions/13820371/005">TEST 5</option> <option value="http://stackoverflow.com/questions/13820371/006">TEST 6</option> <option value="http://stackoverflow.com/questions/13820371/007">TEST 7</option> <option value="http://stackoverflow.com/questions/13820371/008">TEST 8</option> </select></body></html>\[/code\]
IE7 + JavaScript appendChild = Scrollbar bug
- Thread starter Cichacz
- Start date