Floating window

[mclazyj]

I came across a website that had a floating window everytime you
hovered over a particular link. I was wondering how this worked. I
saw it on Nero's website also, before they revamped their site.
Anyway, to get a look at the effect, go to the following link,
http://www.ed2klinks.com/index1.php and hover over one of the
selections.


Thanks,

Joe

 

[Hywel Jenkins]

I came across a website that had a floating window everytime you
hovered over a particular link. I was wondering how this worked. I
saw it on Nero's website also, before they revamped their site.
Anyway, to get a look at the effect, go to the following link,
http://www.ed2klinks.com/index1.php and hover over one of the
selections.

It's all in the source code. If that's too complex for you at the
moment try http://www.bosrup.com/web/overlib/

 

[Orson]

It's all in the source code. If that's too complex for you at the
moment try http://www.bosrup.com/web/overlib/

overlib is great but trying to understand
http://www.ed2klinks.com/index1.php the relevant mouseover code is in lines
like this:
onmouseover="dif(1, '13087','<table >........ table>')"

I have searched for but cannot find anything about dif( ).
Can you explain it or point me to an explanation?
Thanks
Orson

 

[rf]

overlib is great but trying to understand
http://www.ed2klinks.com/index1.php the relevant mouseover code is in lines
like this:
onmouseover="dif(1, '13087','<table >........ table>')"

I have searched for but cannot find anything about dif( ).
Can you explain it or point me to an explanation?

They are doing it all with a hidden absolutely positioned div called
overDiv. The dif() function causes all that HTML in the last parameter to be
inserted into the div with a
document.getElementById("overDiv").innerHTML = txt
(in a function called layerWrite, whatever a layer is, IIRC it is something
Netscape3 invented and then dropped six months later).
The div is then made visible.

Then there is some mouse move stuff to make the div follow the mouse around.

Finally there is an onMouseOut handler to make the div hidden again.

The javascript lives here:
view-source:http://www.ed2klinks.com/includes/myjs.js

Look at only as an educational exercise only, it's not very good code. There
is lots of browser sniffing involved where there should be functionality
checking. Rather bloated for what it does too. Such skulduggery can be now
done quite nicely with a couple of lines of CSS

Cheers
Richard.

 

[George Self]

They are doing it all with a hidden absolutely positioned div called
overDiv. The dif() function causes all that HTML in the last parameter to
be inserted into the div with a
document.getElementById("overDiv").innerHTML = txt
(in a function called layerWrite, whatever a layer is, IIRC it is
something Netscape3 invented and then dropped six months later).
The div is then made visible.

Hmmm. I believe that innerHTML (along with innerText, outerHTML, and
outerText) are all Microsoft-specific and are not part of the W3C Document
Object Model. You would need to use a standards-compliant method of
changing text in an object in order to be cross-browser capable. You may
want to start your search for information on this topic at: http:/
www.mozilla.org/docs/web-developer/upgrade_2.html.

Then there is some mouse move stuff to make the div follow the mouse
around.

Finally there is an onMouseOut handler to make the div hidden again.

The javascript lives here:
view-source:http://www.ed2klinks.com/includes/myjs.js

Look at only as an educational exercise only, it's not very good code.
There is lots of browser sniffing involved where there should be
functionality checking. Rather bloated for what it does too. Such
skulduggery can be now done quite nicely with a couple of lines of CSS

Cheers
Richard.

--George

 

[Toby A Inkster]

Hmmm. I believe that innerHTML (along with innerText, outerHTML, and
outerText) are all Microsoft-specific and are not part of the W3C Document
Object Model.

They are, but ironically they have better cross-browser support than most
of the DOM-compliant alternatives :-(

Maybe do a test like:

if (document.getElementById('myelement').innerHTML) {
// do stuff in an IE fashion
} else {
// do stuff in a DOM fashion
}

Dupication, yuk. But if you want something that will work in
DOM-compatible browsers *and* most existing browsers, this seems the best
way to do it.

Of course, what I'd normally do is to do it the DOM way and let other
browsers go to hell. If your page is well-written it will degrade well
when JavaScript doesn't work.