dynamic drop-down menu

[scaredemz]

hi,
so i'm creating a dynamic drop-down menu. the menu and the text show up
fine in IE but only the drop-down shows in Firefox without the menu
text. Below is the fxn code. help pls.

function DropDownHelper( menuArray, top, left, height)
{
var currItem = new String();
var item;
var idStr;
for(var i = 0; i < menuArray.lengt h; i++)
{
currItem = menuArray[i];
currItemArr = currItem.split( ";");

item = document.create Element("div");
idStr = "dropDownMenuId " + i;

ExistingMenuIte mIds[i] = idStr;

item.setAttribu te('id', idStr);
item.style.visi bility = "visible";
item.style.top = top;
item.style.font Family = "Arial";
item.style.font Size = "13pt";
item.style.colo r = "white";
item.style.font Weight = "bold";
item.style.posi tion = "absolute";
item.style.heig ht = height;
item.style.left = left;
item.style.widt h = "200px";
item.style.back groundColor = "red";
item.style.colo r = "white";
item.style.curs or = "hand";

item.innerHTML = "<p onclick = \"GoTo('" + currItemArr[1] + "')\">" +
currItemArr[0] + "</p>";
document.body.a ppendChild(item );
var newtop = GetIntFromPrope rty(top) + height;
top = newtop + "px";
}
}

[web.dev]

sc*******@gmail .com wrote:

hi,
so i'm creating a dynamic drop-down menu. the menu and the text show up
fine in IE but only the drop-down shows in Firefox without the menu
text. Below is the fxn code. help pls.
You have given us a function that you use. It would also be helpful to
see how you're calling this function, that is, the values that are
being passed in. Otherwise, the code that you've shown is perfectly
valid.

item.setAttribu te('id', idStr);
Just to be consistent with your portion of the code, you can also set
the id as follows:

item.id = idStr;
item.style.visi bility = "visible";
item.style.top = top;
item.style.font Family = "Arial";
item.style.font Size = "13pt";
item.style.colo r = "white";
item.style.font Weight = "bold";
item.style.posi tion = "absolute";
item.style.widt h = "200px";
item.style.back groundColor = "red";
item.style.colo r = "white";
item.style.curs or = "hand";
See all that above you wrote? You can easily put that into a
stylesheet and just refer to it by classname. It just saves you the
trouble of having to programmaticall y do it everytime. Plus it helps
separate presentation from logic.

item.className = "styleName" ;
item.innerHTML = "<p onclick = \"GoTo('" + currItemArr[1] + "')\">" +
currItemArr[0] + "</p>"; From the problem you described, this seems to be the place where you're

placing the text. You should check to see that there is indeed a value
in currItemArr[0]. Though you do say it works in IE, the code you've
given doesn't show how you're obtaining the value for menuArray. So it
may not work in FF like you said.

[Thomas 'PointedEars' Lahn]

sc*******@gmail .com wrote:

so i'm creating a dynamic drop-down menu. the menu and the text show up
fine in IE but only the drop-down shows in Firefox without the menu
text. Below is the fxn code. help pls.

function DropDownHelper( menuArray, top, left, height)
{
var currItem = new String();
That is nonsense. JavaScript is not Java. You do not have to create
a String object in order to store string values in a variable.
var item;
var idStr;
for(var i = 0; i < menuArray.lengt h; i++)
for (var i = 0, len = menuArray.lengt h; i < len; i++)
{
currItem = menuArray[i];
Here you are overwriting the reference that you retrieved at the top.
currItemArr = currItem.split( ";");

item = document.create Element("div");
idStr = "dropDownMenuId " + i;

ExistingMenuIte mIds[i] = idStr;
Unless `ExistingMenuIt emIds' is intended to be a constructor function, its
identifier should be changed so that it's first letter is lowercase. That
is not a question of syntax, but of code style.
item.setAttribu te('id', idStr);
setAttribute() has too many flawed implementations to be considered a viable
DOM method on the Web. And it is not necessary, HTMLDivElements have an
`id' attribute that is exposed as an `id' property in DOM implementations .

item.id = idStr;
item.style.visi bility = "visible";
You should make sure that there is a `style' property before you try to
access properties that are properties of a supposed-to-be CSS2Properties
object.
item.style.top = top;
Whether that is viable depends on what you pass as value for `top'.
item.style.font Family = "Arial";
The font-family property value should be a comma-separated list of font
family names, ending with that of a _generic_ one, here "sans-serif".
item.style.font Size = "13pt";
`pt' is a unit suited for printouts, not for the screen. Use `%' or `em'.
[...]
item.style.heig ht = height;
item.style.left = left;
See above.
[...]
item.style.curs or = "hand";
"hand" is not a Valid value for the `cursor' property in CSS(2), and will
not work in Gecko-based browsers. The standards compliant equivalent for
this IE-proprietary value is `pointer'.
item.innerHTML = "<p onclick = \"GoTo('" + currItemArr[1] + "')\">" +
currItemArr[0] + "</p>";
`innerHTML' is a proprietary property that is supported in many browsers,
but not in all, and is still not standards compliant and therefore
error-prone.

Additionally, you are abusing the p(aragraph) element as control. Use an
`input' element instead; if you do not like it's style, use CSS to change
that.
document.body.a ppendChild(item );
Care to test methods before you call them?

<URL:http://pointedears.de/scripts/test/whatami>
var newtop = GetIntFromPrope rty(top) + height;
top = newtop + "px";

GetIntFromPrope rty(top) can probably be replaced easily by
parseInt(top, 10).

Are you aware that this menu will not work in client-side script or the
required DOM support is not present?

BTW: Do not use tabs but use spaces for indenting code, especially when
posting to the newsgroup. Every system and user agent has its own
interpretation of the Tab character.
HTH

PointedEars

[RobG]

sc*******@gmail .com wrote:

hi,
so i'm creating a dynamic drop-down menu. the menu and the text show up
fine in IE but only the drop-down shows in Firefox without the menu
text. Below is the fxn code. help pls.

function DropDownHelper( menuArray, top, left, height)
{
var currItem = new String();
Please don't use tabs in posted code. Use 2 or 4 spaces for indents and
wrap lines manually at about 70 characters.

There is no need for a string object, you can initialise it as a string
using:

var currItem = '';

var item;
var idStr;
for(var i = 0; i < menuArray.lengt h; i++)
{
currItem = menuArray[i];
currItemArr = currItem.split( ";");
This will create currItemArr as a global variable, is that neccessary?

var currItemArr = currItem.split( ";");


item = document.create Element("div");
You should test for support before using DOM features:

if (document.creat eElement) {
document.create Element('div');
// ...

idStr = "dropDownMenuId " + i;

ExistingMenuIte mIds[i] = idStr;
Where was ExistingMenuIte mIds declared? Is it a global variable?


item.setAttribu te('id', idStr);
Simpler to use:

item.id = idStr;

item.style.visi bility = "visible";
You should test for support for style objects, using a class is much
simpler. Div's are visibile by defalut, there is not need to set them
as visible unless you have previously set it to hidden.

if (item.style){
item.style.visi bility = 'visible';

item.style.top = top;
Where was 'top' defined? What is its value?

item.style.font Family = "Arial";
item.style.font Size = "13pt";
Font sizes should be set using proportional units - em, en, etc.

item.style.colo r = "white";
item.style.font Weight = "bold";
item.style.posi tion = "absolute";
item.style.heig ht = height;
item.style.left = left;
Where are 'height' and 'left' defined?

item.style.widt h = "200px";
item.style.back groundColor = "red";
item.style.colo r = "white";
That's the second time you've set the color attribute.

item.style.curs or = "hand";
'hand' is not a valid CSS value for the the cursor, use 'pointer'
(though I think some older versions of IE may require 'hand').


item.innerHTML = "<p onclick = \"GoTo('" + currItemArr[1] + "')\">" +
currItemArr[0] + "</p>";
You've used DOM for everything else, why not here too? It's a much
safer way of adding the onclick:

var oP = document.create Element('p');
oP.appendChild( document.create TextNode(currIt emArr[0]));
oP.onclick = function(){GoTo (currItemArr[1])};



document.body.a ppendChild(item );
var newtop = GetIntFromPrope rty(top) + height;
What does 'GetIntFromProp erty()' do? Presumably it trims 'px' from the
value of 'top'. Why not set top as an integer and concatenate 'px' when
you set the style property?

Where you declare your other variables, add:

var newtop = 0;
Presumably you want to set the div's 'top' attribute as:

item.style.top = newtop + 'px';
And here:

newtop += top;

top = newtop + "px";
}
}

I can't test the code because you haven't given sufficient information.
There are thousands of drop-down menus out there, many based on CSS
that use very little JavaScript, some use none. Quite a few are offered
completely unencumbered.

Why not just use one of those? There are quite a few offered here:

<URL:http://www.alistapart. com/topics/code/css/>

--
Rob