DHTML Problem

Discussion in 'Javascript' started by Chris Leonard, Aug 24, 2003.

  1. 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>
    Chris Leonard, Aug 24, 2003
    #1
    1. Advertising

  2. "Chris Leonard" <> writes:

    > 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
    --
    Lasse Reichstein Nielsen -
    Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Aug 24, 2003
    #2
    1. Advertising

  3. 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
    Chris Leonard, Aug 25, 2003
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. MingChih Tsai

    A DHTML Problem !!

    MingChih Tsai, Mar 17, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    373
    bruce barker
    Mar 17, 2005
  2. John Smith
    Replies:
    5
    Views:
    55,900
    altamir
    Dec 18, 2003
  3. mark | r
    Replies:
    4
    Views:
    585
    Toby Inkster
    Sep 2, 2004
  4. sturkel
    Replies:
    1
    Views:
    439
    Bernhard Sturm
    Aug 22, 2007
  5. Steve
    Replies:
    1
    Views:
    271
    Richard Cornford
    Apr 9, 2005
Loading...

Share This Page