DHTML help (simplified version)

[IanKelley]

Didn't have a lot of luck when I asked for help with the full code... So try this:

function hoverInfo(soup,fiveManTent) {
soup.style.display = 'none';
fiveManTent.style.display = 'block';
}

The variables are the ID names of two DIVs.

This code works in IE but not in NS or Opera. I have tried using browser detection to make it work by doing this:

if (ns6) document.getElementById('soup').style.display='none';

I get a variable not defined error in NS both ways. See the url in my profile for a test version of the page.

Thanks for any help,

Ian

[BlobFisk]

Hey Ian,

Every layer is rendering in NS4.74, ie the drop down hidden layers are there from day 1.

It works fine in IE5.5.

In NS6 and Opera 6.01 the area's where you tell me to hover my mouse over I get nothing.

I'm still of the mindset (and this is the point I made to you in reply to your original post [webmasterworld.com] on this topic) that using a mouseover command on the <div> is causing this lack of action in these browsers. IE may be able to interpret this and start displaying the drop down <div>'s but NS6/Opera are saying "No <a> tag - no mouseover events".

I could be wrong, but my gut is saying that this is where the problem is (especailly as I get no javascript errors reported - just no action at all).

[joshie76]

I think it's probably to do with the way you're referencing the objects when you pass them in to the function. Are you retrieving the objects, passing them as variables or strings?

If you don't already do this (i haven't had time to go through your previous thread) you might want to try passing them in like so:

hoverInfo(document.getElementById('soup'),document.getElementById('fiveManTent'))

In IE when you give an element an ID it is declared in the global namespace of the document so <div id="myDiv"> can be scripted to using myDiv.style.display = 'none';

NN6 doesn't do this so you have to hunt out your element object using document.getElementById('myDiv').style.display = 'none'.

Opera (6) also puts the elements ID in the global namespace but Opera doesn't support you changing the display of an element through scripting (it's Opera's almost total lack of DOM scripting support that makes me an outsider here at WebmasterWorld - I don't like it). Opera can switch the visibility of an element though - but watch out: visibility doesn't recalculate the document flow (this is fine if everything is absolutely positioned - in fact using visibiliy is more efficient than display because the document flow remains unaffected).

the document.getElementById Method works in all three browsers so I tend to use it in all cases.

Whilst I'm mentioning performance it's worth mentioning that if you are going to use document.getElementById(elmid) on the same ID a number of times, you are better to cache the object yourself in a variable:

document.getElementById('myDiv').style.top = 10px; 
document.getElementById('myDiv').style.left = 10px; 
document.getElementById('myDiv').style.display = 'block';

would be better written

var myDivElm = document.getElementById('myDiv'); 
myDivElm.style.top = 10px; 
myDivElm.style.left = 10px; 
myDivElm.style.display = 'block';

Better stop now... I went on a bit there didn't I?

[IanKelley]

Thanks both for the ideas... I'm thinking that neither of you actually read my post(s), however. ;-)

Blob... Thanks for the info about NS 4.74. I had assumed that's how it would display but hadn't tested it yet.

I have tried using <a href> tags for the mouseovers. It doesn't make a difference. I mentioned that in response to your other post.

You're not getting JS errors in IE but, as I mentioned, there are errors in NS. If you want to see what I mean, run the javascript console. Note that I get the same errors when trying browser detection workarounds.

Joshie... From my post you responded to:
> if (ns6) document.getElementById('soup').style.display='none';

So, yes, I have already tried it. ;-) Unless you're saying that it would make a difference to put the above in the call instead of in the function? I will try that.

One thing... the reason I was using if statements to run the getElement code only for NS6 is that if I simply add it then the code stops working in IE!

About visibility/display. I'm using display instead of visibility for various reasons. Once I get the basics working I'll be using server side scripting to serve different versions of the page to Opera, older browsers and browsers with JS turned off.

EDIT: Hey, tried putting the getElement in the call instead of in the function and it works.

I'm assuming this means that the getElementById method does not accept variables? In other words 'soup' is not actually the ID of an element but a variable containing the ID element passed to the function?

That would explain why the following doesn't work at all in any browser:
document.getElementById('soup').style.display = 'none';

If this is the case then it kinda makes ya wonder what they're thinking.

Anyway, thanks :-)

[IanKelley]

While I've got this thread open... I am having yet another problem with browser compatibility on the same site... Netscape is behaving inconsistently on mouseovers... in fact it seems to have something to do with how fast you move the mouse. Makes no sense to me at all.

If anyone has a minute, feel free to take a look at <my profile site> in both Netscape and IE (IE is how it's supposed to work). I'm completely at a loss.

Thanks much,

Ian

(edited by: tedster at 3:16 am (utc) on April 17, 2002)

[joshie76]

"I'm thinking that neither of you actually read my post(s), however."

Sorry, I didn't have time to go through your other post and the above one didn't make sense to me so I had a guess.

"I'm assuming this means that the getElementById method does not accept variables? In other words 'soup' is not actually the ID of an element but a variable containing the ID element passed to the function?"

I'm afraid I still don't understand how your code is interacting with your hoverInfo function...

The following are both correct methods

document.getElementById('soup').style.display = 'none';

OR

var myElm = 'soup' 
document.getElementById(myElm).style.display = 'none';

OR

var myElm = document.getElementById('soup') 
myElm.style.display = 'none'

and so on...

You can pass a string ('soup') or a string variable (myString [ = 'soup']) into the getElementById method.

[IanKelley]

You're doing it again Joshie :-)

Like I said, already got that part working... I was passing element ID's to the function and then using the getElement method to access the elements using the variables that the function assigned to the strings passed.

Apparently you can not pass a variable to the getElement method. Try it, your middle example will not work, not even in IE. Or so it would seem as I tried getting to to work that way for about 2 hours.

This leaves the poignant question... Who creates a dynamic, bandwidth limited, scripting language and then includes methods that can't except variables and therefore require extra coding? ;-)

[IanKelley]

Alright... figured the second problem out...

Turns out it's a bug in Netscape... NS does not always register a onmouseout event. You have to work around it by catching events that it misses and then taking care of it yourself.

The question is whether or not it's worth the time to do it. It would take less time to write a PHP script to tell netscape users that they accidentally downloaded software designed specifically not to work :-)

[BlobFisk]

It would take less time to write a PHP script to tell netscape users that they accidentally downloaded software designed specifically not to work :-)

I have similar thoughts at least 32 times a day...

[joshie76]

Ian, sorry if it seems I keep missing your drift, I was trying to address your point about the getElementById() method. You ain't missing off the 'Id' part of the method call are you?

Apparently you can not pass a variable to the getElement method. Try it, your middle example will not work, not even in IE. Or so it would seem as I tried getting to to work that way for about 2 hours.

That method works in IE4+, NN6+ and Opera 6 (Opera 6 - if you use visibility instead of display) - you must be doing something wrong. I often use it to grab lots of elements using concatenation in the method call:

<script type="text/javascript"> 
function hideGroup(elmId, elmCount) 
{ 
for (var i=0; i < elmCount; i++) 
{ 
 document.getElementById(elmId+i).style.display = 'none'; 
} 
} 
</script>

[IanKelley]

Nope... I'm not missing the Id part. Hehe

I've made it work using variables but only by using numerical variables added to a static ID name (like your example).

I guess I could be doing something wrong but after trying dozens of permutations and not getting it to work, I doubt it. Especially considering that the function instantly stated working when I added the getElementBYID ;-) to the call.

Go figure.