DHTML Problem

[Chris Leonard]

Hi.

I've copied some code from a book which will enable me to make a layer
around a page, my aim is to do something a little more complex but this I
thought would get me started.

Anyway, I've run into a problem before I even start! The script works OK, it
runs the image in from the left hand side quite nicely, great. Problem I
have it always scrolls up to the top of the page, when the link I click
maybe 2 or 3 screens below (does that make sence?). I thought if I was to
add a name attribute to the link I could get the co-ordinates of this and
the screen will not reposition.

I tried this and I've come unstuck! I need to get the name of the link into
the slide function ..... can some bright spark out there help me out please,
I'm just no JavaScript expert!

TIA.

Chris


<SCRIPT language="JavaScript">
var layername, xgoal, ygoal, xhop, yhop, delay=5;

function checkDHTML() {
if ((parseInt(navigator.appVersion)>=4) &&
((navigator.appName !="Netscape" &&
navigator.appVersion.indexOf("X11") == 1) ||
(navigator.appName != "Microsoft Internet Explorer" &&
navigator.appVersion.indexOf("Macintosh") == -1)))
{ return 1}
else
{ document.location="nodhtml.htm"; return 0 }
}

function makeName(layerID) {
if (navigator.appName=="Netscape")
{ refname = eval("document." + layerID) }
else
{ refname = eval("document.all." + layerID + ".style") }
return refname
}

function slide() {
if ((parseInt(layername.left) != xgoal) ||
(parseInt(layername.top) != ygoal))
{
layername.left = parseInt(layername.left) + xhop;
layername.top = parseInt(layername.top) + yhop;
window.setTimeout("slide()", delay)
}
}

</SCRIPT>

HTML Part.

<DIV ID='picture0' STYLE='position: absolute; left: -500px; top: 10px;
width: 300; z-index: 1'>
<img src='pics/114974744.gif'>
</DIV>
<A name="link0" href="#" onClick="layername=makeName('picture0'); yhop=0;
ygoal=10; xhop=40; xgoal=100; slide()">
Click me</A>

 

[Lasse Reichstein Nielsen]

I've copied some code from a book which will enable me to make a layer
around a page, my aim is to do something a little more complex but this I
thought would get me started.

Books are dangerous. A lot of them aren't worth the paper they are
printed on. I fear you might have one of those.

Problem I have it always scrolls up to the top of the page, when the
link I click maybe 2 or 3 screens below (does that make sence?).

It sounds like a classical problem

You have a link of the form:
<a href="#" onclick="some javascript">
When you click it, the javascript is executed, and then you jump to the
top of the document. If you look at the address line, you will notice that
a "#" has been added to the address. That is because the browser follows
the link to "#", which brings it back to the same page, only at the top.

To avoid that the browser follows the link, the onclick handler must
return false:
<a href="" onclick="some javascript;return false">
(the "#" isn't needed, the empty string is a legal URL).


Now some comments on the actual code. Muhahahahah!

<SCRIPT language="JavaScript">

<script type="text/javascript">

The type attribute is mandatory, and the language attribute is
deprecated, in HTML 4.

function checkDHTML() {
if ((parseInt(navigator.appVersion)>=4) &&
((navigator.appName !="Netscape" &&
navigator.appVersion.indexOf("X11") == 1) ||

^ should be -1, right?
Otherwise it won't match MS IE on Windows, which is probably not
what you want.

(navigator.appName != "Microsoft Internet Explorer" &&
navigator.appVersion.indexOf("Macintosh") == -1)))
{ return 1}
else
{ document.location="nodhtml.htm"; return 0 }

window.location.href="nodhtml.htm";

document.location isn't universally supported (i.e., it might fail
for exactly those browsers that you don't think have DHTML either).
No need to return after having dropped the entire page for a new one.

}

No DHTML unless:

-The version is 4+. Bad idea. A new browser that came out today would
be version 1.0 (although it would probably have to claim to be version
5+ to avoid problems with scripts like this). Only ever use the
appVersion for anything if you know the browser type (e.g., appName).

-It is not a non-Netscape on non-Unix(X11 actually) or non-Microsoft
IE on a non-macintosh.

Or more clearly: Not Netscape on Macintosh or IE on X11 (if the "1"
should have been a "-1"). That is probably still not what you wanted,
since it includes Netscape on Windows and any non-Netscape and non-IE
browser.

Luckily this function isn't used.

function makeName(layerID) {
if (navigator.appName=="Netscape")
{ refname = eval("document." + layerID) }

refname = document[layerID];

You definitly never need to use the eval function just to read the
value of a property or variable.
You probably never need to use the eval function at all.

Not all versions Mozilla (if any) will have the "layer" as a property
of the document object. I bet this code was created for Netscape 4,
and doesn't know that Mozilla reports navigator.appName=="Netscape".

In Mozilla (and derivatives like Netscape 7) and other modern browsers,
you access the "layer" as
refname = document.getElementById(layerID);

else
{ refname = eval("document.all." + layerID + ".style") }

refname = document.all[layerID].style;

return refname
}

function slide() {
if ((parseInt(layername.left) != xgoal) ||
(parseInt(layername.top) != ygoal))

The "left" and "top" properties are only present in IE and Netscape 4.
Most modern browser have the properties "offsetLeft" and "offsetTop"
which can only be read, not written. You use CSS to change position.

Don't trust your books too much, they can be bad for you.
At least realize that what they teach is very specific to IE and
Netscape 4, and shouldn't be used in modern pages.

Don't be discouraged, it takes some time to learn which books to trust
and which not to.
/L

 

[Chris Leonard]

Thanks very much.

Not really the answer I was looking for !!

Oh well, perhaps you're right, I should have started off myself and not used
the damn book, which to be fair is out dated but it's all I have and is a
good reference .......... well, was a good reference in 2000 !!

Chris