PDA

Click to See Complete Forum and Search --> : Needs to work in Netscape....

mawood
01-24-2003, 02:42 PM
I need to create a drop down that is not as wide as its contents. I have the below script so far which does just that - but only in IE. Might I be lucky enough to get a little help to get this same function to work in Netscape, please?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Artificial Drop Down menu</title>
<script>
function myClick(mySelect,fake,real){
t1=document.getElementById(fake);
t2=document.getElementById(real);
t1.options[0].text=mySelect.options[mySelect.selectedIndex].text;
t1.options[0].value=mySelect.options[mySelect.selectedIndex].value;
t2.style.visibility='hidden';
}
function myBlur(real){
t=document.getElementById(real);t.style.visibility='hidden';
}
</script>
</head>

<body>



<div id="real_1" style="position:relative; top:20px; visibility: hidden;"><div id="dummy" style="position:absolute;">
<select size="20" onClick="myClick(this,'fake_1','real_1')" onBlur="myBlur('real_1')">
<option>1
<option>2
<option>3
<option>4
<option>5555555555555555555555555555555555555555555555555555
<option>6
<option>7
<option>8
<option>9
<option>10

</select>
</div></div>


<select id="fake_1" onFocus="t=document.getElementById('real_1'); t.style.visibility='visible';body.focus();return false;">
<option>20
<option>20
</select>



</body>
</html>
mawood
01-24-2003, 04:43 PM
I do realize this code, however Netscape 4 still excedes NS6 at hits to my companys website. NS4 does not understand inline stylesheets. I also know about the form weakness NS4 has when it comes to new layers. If I can find a way to do what your inline stylesheet is doing in 4, that would suffice.
Nedals
01-24-2003, 05:20 PM
Might I be lucky enough to get a little help to get this same function to work in NetscapeAs far as I know, I don't think you can. You could, however, build a truncated option list in Javascript and put that into your <select> tag onLoad().

I know that can be done but don't have the code offhand. Perhaps someout there can help!
mawood
01-24-2003, 06:38 PM
Thank you Dave. I will try that on Monday morning when I get back to work. First time I've heard of the select tag having the width attribute that actually worked somewhere.
Jona
01-24-2003, 09:14 PM
HTML and CSS are so easy, really, that you do not actually have to know all of the attributes and properties to use them. If I forget how to make Italic text with styles, I just think, "OK, it's a font-style, so I should try, 'font-style:italic'!" And it works! If it doesn't, I always try the next-best thing, if font-style didn't work (but it does) I would try text-style, and then, text-decoration..
Jona
01-24-2003, 09:22 PM
You two were saying that you were amazed to find the Width attribute in a SELECT tag. I usually just test it to make sure. Not that anyone did anything wrong, and I'm definitely not saying that anyone is stupid or anything. I am simply saying that I always figure stuff out before going to another source. You always learn things better when you figure them out on your own.. that's why test are (?) so hard.
Nedals
01-24-2003, 11:53 PM
I think that NS4's SELECT element supports an HTML width attribute (in characters). So, try this:
<select ... width="20">
Tried it in NS4xx, but no joy!
mawood
01-25-2003, 09:42 AM
I think that you all are just plotting to try and force me to download Netscrape to my home PC. Well, you can't make me do it.....must...wait...till........Monday
mawood
01-27-2003, 08:32 AM
I still can't this unblessed code to work in NS4. ...help?
gil davis
01-27-2003, 08:48 AM
Do you have the page online somewhere? If so, post a link.

Looking at your first post, there appears to be many problems that would keep your page from working in NS 4:

1. NS 4 (and W3C reccommendations) require form elements to be within form tags.

2. NS 4 does not support "getElementById".

3. When you make an object "position: relative" or "position: absolute" in NS 4, you create a layer that has it's own document. You would find the form object (if you had a form tag) buried two layers deep - document.real_1.document.dummy.document.forms[formName] ...
mawood
01-27-2003, 09:04 AM
Below is what i've put together so far. I expect the functionality won't work in NS4 due to the dynamic/form issue NS4 has. However, I hope there is way to at least lock the width so that will not force the table wider. The forth menu has the NS4 detection.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My Drop Down Menu</title>




<script>
function mwDropit(mySelect,fake,real){
if (document.getElementById) {
t1=document.getElementById(fake);
t2=document.getElementById(real);
t1.options[0].text=mySelect.options[mySelect.selectedIndex].text;
t1.options[0].value=mySelect.options[mySelect.selectedIndex].value;
t2.style.visibility='hidden';
}

}
function mwBlur(real){
if (document.getElementById) {
t=document.getElementById(real);t.style.visibility='hidden';
}
}
</script>
</head>

<body>

<h3>Drop down width</h3>

<table bgcolor="#6AB5FF" width="550"><tr><td>Spacerspacerspacerspacerspacerspacer?:</td><td>
<form action="dropdown_width.html">






<!- Normal menu 1 ->


<select name="firstnormalmenu">
<option value="1">Please Select One:</option>
<option value="1">A Normal Menu</option>
<option value="2">to show this is</option>
<option value="3">not effected by</option>
<option value="4">the drop down</option>
<option value="5">bug in MSIE.</option>
</select>
<br>






<!- Magic menu 2 for IE(NS6) browser ->



<div id="real_1" style="position:relative; top:20px; left:-170px; visibility: hidden;"><div id="dummy" style="position:absolute;">
<select size="5" onClick="mwDropit(this,'fake_1','real_1')" onBlur="mwBlur('real_1')">
<option>Please Select One:
<option value="b">2 This is a dynamic menu. Its not really here. Yes, it holds its value for proper form submission.
<option value="c">3
<option value="d">4
<option value="e">55555555555555555555555555555555555555555555555555
<option value="f">6
<option value="g">7
<option value="h">8
<option>9
<option>10

</select>
</div></div>


<select id="fake_1" SELECTED style="width:141px;" onFocus="t=document.getElementById('real_1'); t.style.visibility='visible';body.focus();return false;" name="seconddynamicmenu">
<option>Please Select One:
</select>
<br>






<!- Normal menu 3 ->



<select name="thirdnormalmenu">
<option value="1">Please Select One:</option>
<option value="2">A Normal Menu</option>
<option value="3">xxxx</option>
<option value="4">ccccccccc</option>
</select>
<br>







<!- Magic menu 4 with controller for Netscape4 - for pages viewed by all browsers ->


<script>

if (document.getElementById) {

document.write("<div id=real_2 style=\"position:relative; top:20px; top:20px; left:-170px; visibility: hidden;\"><div id=\"dummy\" style=\"position:absolute;\"> ");
document.write("<select size=\"14\" onClick=\"mwDropit(this,'fake_2','real_2')\" onBlur=\"mwBlur('real_2')\"> ");
document.write("<option>Please Select One:");
document.write("<option>1 This is a Dynamic Menu. I am either the smartest hillbilly or I am just making this sentence long.");
document.write("<option>2 This one set to show more rows.");
document.write("<option>3");
document.write("<option> 5555555555555555555555555555555555555(What happened to 4?)");
document.write("<option>6 ");
document.write("<option>7 ");
document.write("<option>8 ");
document.write("<option>9 ");
document.write("<option>10 ");
document.write("<option>11");
document.write("<option>12");
document.write("<option>13");
document.write("<option>14");
document.write("<option>15");
document.write("<option>16");
document.write("<option>17");
document.write("<option>18");
document.write("<option>19");
document.write("<option>20");
document.write("<option>21");
document.write("<option>22");
document.write("<option>23");
document.write("</select> ");
document.write("</div></div> ");
document.write("");
document.write("<select id=\"fake_2\" SELECTED style=\"width:300px;\" onFocus=\"t=document.getElementById('real_2'); t.style.visibility='visible';body.focus();return false;\" name=\"fourthdynamicmenu\">");
document.write("<option>Please Select One:");
document.write("</select> ");
document.write("");

} else {

document.write("<select id=fake_2 name=fourthdynamicmenu>");
document.write("<option>Please Select One:");
document.write("<option>1 This is a Dynamic Menu. I am either the smartest hillbilly or I am just making this sentence long.");
document.write("<option>2 This one set to show more rows.");
document.write("<option>3");
document.write("<option> 5555555555555555555555555555555555555(What happened to 4?)");
document.write("<option>6 ");
document.write("<option>7 ");
document.write("<option>8 ");
document.write("<option>9 ");
document.write("<option>10 ");
document.write("<option>11");
document.write("<option>12");
document.write("<option>13");
document.write("<option>14");
document.write("<option>15");
document.write("<option>16");
document.write("<option>17");
document.write("<option>18");
document.write("<option>19");
document.write("<option>20");
document.write("<option>21");
document.write("<option>22");
document.write("<option>23");
document.write("</select> ");

}


</script>







<br><br>
<input type="submit">

</form>
</td></tr></table>
</body>
</html>
gil davis
01-27-2003, 09:26 AM
Oh, yeah, BTW (continuing from my previous post):

4. NS 4 will not allow you to put part of a form inside a layer (or positioned div). The whole form must be in the layer (see note 3 about documents).
mawood
01-27-2003, 11:31 AM
Yes, I realize those notes. I've had to create dynamic forms that work in Netscape. I am just hoping one of two things might be achievable here:

1, that a script is possible to just display the contents when they are called.

0r 2, to force truncating if contents exceed the width set.
gil davis
01-27-2003, 11:50 AM
The easiest thing to do would be to rewrite the form when it needs to change.

I still don't understand why you want to truncate the select box. Are you trying to hide something?

If you originally make a small width select box and then add an option that has a lot of text, NS 4 cannot resize the box, and the width stays small. Is that any help? Did you know that you can use JavaScript to make a new option?
mawood
01-27-2003, 01:46 PM
I can go with re-writing. The reason for this is a couple drop downs get its content from our database via JSP. Sometimes, a content line will be very long, forcing the drop down to grow in width, exceeding 550 width limit and even spawning the left/right scroll bar.

Thank for the help.