|
|||||||
| JavaScript JavaScript (not Java) Discussion and technical support, including AJAX and frameworks (JQuery, MooTools, Prototype...) |
 |
|
|
Thread Tools | Rate Thread | Display Modes |
|
#1
07-29-2010, 02:33 PM
|
|||
|
|||
|
<Option> Problem in IE but not FF/Chrome. Javascript?
Hi again all, back with another hopefully easy question to fix.
Please check this out in Internet explorer: http://www.lindesigns.us/rma/rmaonline.html I googled for the answer, but could not come up with a good response in terms of my own script on how to make the return code fields EXPAND to full length when pressed like they do in firefox and chrome. Does anyone have a quick fix for this? It's all dynamically loaded except for the first 10 fields (Which i might as well take out anyway), so I'm thinking I have to put something in the javascript somewhere, just no idea what. Thanks a lot! -pcitech 
|
|
#2
07-29-2010, 03:46 PM
|
||||
|
||||
|
Not sure what the problem is the list is 33 long and has a scroll bar - is the scroll bar the problem? The width is too small to see the characters.
Is there a parameter/attribute that will specify the length of the expanded list? I use Firebug in FireFox. That usually shows the parameter that you can change, but I usually live with the length an adjust the width. You could adjust the width dynamically - surely - with an onMouseOver and back again with an onMouseOut (I would guess) While changing the selection the width of the operative field would be the only important one.
|
|
#3
07-29-2010, 03:54 PM
|
|||
|
|||
|
The problem in IE8 is that when you click on the "return code" option box it doesnt expand to show all the names of the big list being displayed, seen here:
http://img819.imageshack.us/img819/6918/ie8fix.jpg I'm trying to figure out in I.E. how to fix that problem. Firefox & Chrome have no problems with it at all. thanks
|
|
#4
07-30-2010, 04:08 AM
|
||||
|
||||
|
I don't see how it will work in FF and Chrome, as long as there isa JavaScript error at the line:
Code:
table.tBodies[0].appendChild(tr);
|
|
#5
07-30-2010, 05:18 AM
|
||||
|
||||
|
IE8 doesn't allow a fixed with dropdown to overflow and display the full text in the options.
You could add an onfocus to change the width to auto, then change it back onblur.
__________________
At least 98% of internet users' DNA is identical to that of chimpanzees
|
|
#6
07-30-2010, 04:02 PM
|
|||
|
|||
|
Quote:
What I want (if I wasn't clear above), is for if they are using IE - it would load the onfocus method, and if they are using Firefox - it would not. etc. & Thanks Kor, ill check it out. How did you come up that that was an error? Is there a good program you recommend for that?
|
|
#7
07-31-2010, 01:33 AM
|
||||
|
||||
|
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script defer type="text/javascript">
var sel = document.getElementsByTagName('select');
for(var i=0; len=sel.length, i<len; i++) {
sel[i].attachEvent('onfocus', new Function('sel['+i+'].style.width="auto";') );
sel[i].attachEvent('onblur', new Function('sel['+i+'].style.width="5em";') );
}
</script>
<style type="text/css">
* {margin:0;padding:0;}
select {width:5em;}
</style>
</head>
<body>
<select name="sendit">
<option value="1">foo</option>
<option value="2">bar</option>
<option value="3">antidisestablishmentarianism</option>
</select>
</body>
</html>
__________________
At least 98% of internet users' DNA is identical to that of chimpanzees
|
|
#8
07-31-2010, 08:30 AM
|
||||
|
||||
|
Another version
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">
window.onload=function() {
if(document.attachEvent) {
var sel = document.getElementsByTagName('select');
for(var i=0; len=sel.length, i<len; i++) {
sel[i].onclick = function(){this.blur(); replaceSelect(this);};
}
}
};
function replaceSelect(sel){
if(document.getElementById('fakeselect')) {
var fakeselect = document.getElementById('fakeselect');
fakeselect.parentNode.removeChild(fakeselect);
}
var pos = findPos(sel);
var container = document.createElement("div");
container.id = 'fakeselect';
container.style.cssText = 'top:'+(pos[1]+sel.offsetHeight)+'px;left:'+pos[0]+'px;';
for(var i=0; len=sel.length, i<len; i++) {
var p = document.createElement("p");
p.appendChild(document.createTextNode(sel.options[i].firstChild.data));
p.index = i;
container.appendChild(p);
p.onclick = function(){sel.selectedIndex=this.index; this.parentNode.parentNode.removeChild(this.parentNode);};
container.onmouseleave = function(){this.parentNode.removeChild(this);};
}
document.body.appendChild(container);
}
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curleft,curtop];
}
}
</script>
<style type="text/css">
* {margin:0;padding:0;}
select {width:5em;}
#fakeselect {border:1px solid; position:absolute; cursor:pointer;}
#fakeselect p:hover {color:#fff; background-color:#09f;}
</style>
</head>
<body>
<div>
<select name="select1">
<option value="1">foo</option>
<option value="2">bar</option>
<option value="3">antidisestablishmentarianism</option>
</select>
<select name="select2">
<option value="1">foo</option>
<option value="2">bar</option>
<option value="3">antidisestablishmentarianism</option>
</select>
<select name="select3">
<option value="1">foo</option>
<option value="2">bar</option>
<option value="3">antidisestablishmentarianism</option>
</select>
</div>
</body>
</html>
__________________
At least 98% of internet users' DNA is identical to that of chimpanzees
|
|
| Bookmarks |
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Thread Tools | |
| Display Modes | Rate This Thread |
|
|
Linear Mode
