Using Java Script to create DHTML Pages

Discussion in 'Javascript' started by Dafydd, Jan 1, 2004.

  1. Dafydd

    Dafydd Guest

    I have the following Script in my web page reduce to two pages.

    <script>
    function details()
    {
    document.getElementById('details').style.visibility='visible';
    document.getElementById('capabilities').style.visibility='hidden';
    }
    function capabilities()
    {
    document.getElementById('details').style.visibility='hidden';
    document.getElementById('capabilities').style.visibility='visible';
    }
    </script>

    With the following HTML code..

    <table id="Menu" border="1" width="100%">
    <tr>
    <td><a href="#" onclick="details()">Details</a></td>
    <td><a href="#" onclick="capabilities()">Capabilities</a></td>
    </tr>
    </table>

    <div id="details" style="position:absolute; visibility:visible;">
    <table border="0"><caption>DETAILS</caption>
    <tr><td>Name:</td><td>Enter name</td></tr>
    <tr><td>Email:</td><td><a
    href="mailto:">EmailName</a></td></tr>
    <tr><td>D.O.B:</td><td>Date of Birth</td></tr>
    </table>
    </div>

    <div id="capabilities" style="position:absolute; visibility:hidden;">
    <table border ="0"><caption>CAPABILITIES</caption>
    <tr><td>Java Script</td><tr>
    <tr><td>Java Script</td><tr>
    <tr><td>Langauges</td><tr>
    </table>
    </div>

    What I am trying to do is create a CV where you turn the pages without
    reloading the web page. I have successfully done this using the code
    above but the links don't work in Internet Explorer until I have gone
    through all the pages. Netscape and Opera Works Fine!

    The above consists of two pages for convience but my final site will
    be approx 6 to 7 pages long.

    Can anybody help get the links working on loading up 1st time without
    having to go through all the pages or is there a bug with IE?

    Many Thanks

    Dafydd
    Dafydd, Jan 1, 2004
    #1
    1. Advertising

  2. (Dafydd) writes:

    > I have the following Script in my web page reduce to two pages.


    Your HTML doesn't validate.

    > <td><a href="#" onclick="details()">Details</a></td>


    When I got to here, I guessed that the problem is that the page
    reloads when you click on the link. To avoid that, at least
    add ";return false;" to the onclick attribute value.

    The problem is that you are using a link (<a href=...>) for something
    that isn't linking to anything. That is not the best design. You
    should use a button, that is what they are there for: click for an
    effect, whereas links are meant to move you to a new resource.

    The misuse of a link becomes visible because you have no relevant
    information to put in the href. So you put some dummy information
    there, and because you don't return false from the handler, that
    dummy information is used.

    What you could do was to write
    <a href="#details" onclick="details()">Details</a>
    Then clicking would both make the details visible, and move the
    screen to the element with id="details". Then the link actually
    makes sense.

    (Now, let's see if my guess is correct :)

    > What I am trying to do is create a CV where you turn the pages without
    > reloading the web page. I have successfully done this using the code
    > above but the links don't work in Internet Explorer until I have gone
    > through all the pages.


    Hmm, no, that was not the problem I expected. I think. Damn! :)

    The link that "don't work" (not very precise description of the
    problem) in the example is the e-mail link, correct?

    It seems like the later (in the document) divs are overlaying it, even
    while hidden, so you can't click the link. One thing that works for me
    is to set the z-index of the first pane to 1. It only works for that
    one, though.

    Your code design doesn't scale very well. If you had ten panes, you
    would have ten functions with ten lines each, i.e., code size
    quadratic in the number of panes. That can be done shorter:
    ---
    <script type="text/javascript">
    var currentPane;
    function setVisible(paneId) {
    if (currentPane) {
    currentPane.style.visibility = "hidden";
    currentPane.style.zIndex = "";
    }
    currentPane = document.getElementById(paneId);
    currentPane.style.visibility = "visible";
    currentPane.style.zIndex = "1";
    }
    </script>
    ---
    and then make the links as:
    ---
    <a href="#details" onclick="setVisible('details');return false;">
    ---
    and initialize the currentPane when the page has loaded:
    ---
    <body onload="setVisible('details')">
    ...
    ---
    (code not tested)

    You still have the problem, that if Javascript is disabled, a lot of
    your page will not be accessible.

    > Can anybody help get the links working on loading up 1st time without
    > having to go through all the pages or is there a bug with IE?


    Yes and yes (I hope this works, and it definitly looks like a bug).

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Jan 1, 2004
    #2
    1. Advertising

  3. Dafydd wrote:
    > What I am trying to do is create a CV where you turn the pages without
    > reloading the web page. I have successfully done this using the code
    > above but the links don't work in Internet Explorer until I have gone
    > through all the pages. Netscape and Opera Works Fine!
    >

    .....
    >
    > Can anybody help get the links working on loading up 1st time without
    > having to go through all the pages or is there a bug with IE?
    >


    As Lasse has pointed out, you should assign a z-index and to fix your
    problem quikly, assigning it to the first div only will be sufficient:

    <div id="details" style="position:absolute;visibility:visible;z-index:+1">

    This way, all following divs will automatically get this div's z-index + 1.


    JW
    Janwillem Borleffs, Jan 1, 2004
    #3
  4. "Janwillem Borleffs" <> writes:

    > As Lasse has pointed out, you should assign a z-index and to fix your
    > problem quikly, assigning it to the first div only will be sufficient:


    > <div id="details" style="position:absolute;visibility:visible;z-index:+1">
    >
    > This way, all following divs will automatically get this div's z-index + 1.


    Nope. Setting the z-index of this div does nothing for the following
    divs (the value "+1" is equivalent to "1").

    If you have three panes, just setting z-index on "details" won't
    work. Switching to the second pane, you will see that its links still
    doesn't work, because they are being "overlayed" by the third pane.

    That is why I made sure to set the z-index of each element when it
    was displayed.

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Jan 1, 2004
    #4
  5. Lasse Reichstein Nielsen wrote:
    > Nope. Setting the z-index of this div does nothing for the following
    > divs (the value "+1" is equivalent to "1").
    >


    Not true, +1 means "the previous's div z-index PLUS 1"

    > If you have three panes, just setting z-index on "details" won't
    > work. Switching to the second pane, you will see that its links still
    > doesn't work, because they are being "overlayed" by the third pane.
    >


    I have tested it ant it worked like a charm...


    JW
    Janwillem Borleffs, Jan 1, 2004
    #5
  6. Janwillem Borleffs, Jan 1, 2004
    #6
  7. "Janwillem Borleffs" <> wrote in message
    news:3ff4a5e4$0$23703$...
    > Janwillem Borleffs wrote:
    > > I have tested it ant it worked like a charm...
    > >

    >
    > In case you don't believe me:
    > http://www.jwscripts.com/playground/test.php
    >
    >
    > JW
    >
    >
    >


    Nonsense,

    try

    <div
    style="z-index:3;background:red;position:absolute;left:10px;top:10px;width:3
    0px;height:30px"></div>

    <div
    style="z-index:+1;background:green;position:absolute;left:20px;top:20px;widt
    h:30px;height:30px"></div>

    <div
    style="z-index:+1;background:blue;position:absolute;left:30px;top:30px;width
    :30px;height:30px"></div>

    and compare to

    <div
    style="z-index:3;background:red;position:absolute;left:10px;top:10px;width:3
    0px;height:30px"></div>

    <div
    style="z-index:4;background:green;position:absolute;left:20px;top:20px;width
    :30px;height:30px"></div>

    <div
    style="z-index:5;background:blue;position:absolute;left:30px;top:30px;width:
    30px;height:30px"></div>

    If what you say is true these would be equivalent. Your browser will nodoubt
    show you otherwise (or it is seriously flawed).

    Silvio Bierman
    Silvio Bierman, Jan 1, 2004
    #7
  8. "Janwillem Borleffs" <> writes:

    > Lasse Reichstein Nielsen wrote:
    >> Nope. Setting the z-index of this div does nothing for the following
    >> divs (the value "+1" is equivalent to "1").


    > Not true, +1 means "the previous's div z-index PLUS 1"


    Not in CSS 2. I can't guarantee that some browser won't understand it
    as such, but the CSS 2 Recommendation (and CSS 2.1 Working Draft) says:

    'z-index'
    Value: auto | <integer> | inherit

    An <integer> value has an optional prefix sign, with plus being the
    default. That is, adding a prefix plus makes no difference. It makes
    no mention of the integer being relative to any other element's
    stacking level. It just sets the stacking level of this element in
    its stacking context to the value specified.

    Z-index:
    <URL:http://www.w3.org/TR/CSS2/visuren.html#z-index>
    Integer:
    <URL:http://www.w3.org/TR/CSS2/syndata.html#value-def-integer>

    Also, *no* CSS property refers to a *previous* div's properties. If
    anything, they refer to the values on surrounding (parent) elements,
    using the "inherit" keyword or using percentages of its parent's size,
    font-size, etc.

    > I have tested it ant it worked like a charm...


    My test failed.

    I took the example code given, added a third pane by copying the
    second and changing the id (adding a "2" at the end), changed one of
    the lines in each to a link, added a third function and a third case
    to the two existing functions, an extra link to call the third
    function, and put z-index:1 on the first div ("details").

    Then I loaded the page, clicked on the second link to activate the
    second pane, and the link in that pane wasn't active until I had
    activated the third pane once.

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Jan 2, 2004
    #8
  9. Janwillem Borleffs wrote:

    > <div id="details" style="position:absolute;visibility:visible;z-index:+1">
    >
    > This way, all following divs will automatically get this div's z-index +
    > 1.


    Not true. z-index:+1; is the same as z-index:1;

    See:
    <http://jigsaw.w3.org/css-validator/validator?text=div%7Bposition%3Aabsolute%3Bvisibility%3Avisible%3Bz-index%3A%2B1%7D&warning=1&profile=css2&usermedium=all>
    and <http://www.w3.org/TR/CSS2/visuren.html#z-index>

    --
    David Dorward <http://dorward.me.uk/>
    David Dorward, Jan 2, 2004
    #9
  10. "Janwillem Borleffs" <> writes:

    > Janwillem Borleffs wrote:
    >> I have tested it ant it worked like a charm...
    >>

    >
    > In case you don't believe me:
    > http://www.jwscripts.com/playground/test.php


    Ah, you still only have two panes. In that case it is sufficient to
    set z-index on the first. The problems appear when a pane is shown
    before one that is later in the document and has the same z-index.
    That requires three panes, as this example shows:
    <URL:http://www.infimum.dk/privat/threepanebug.html>
    I have added the third pane and given the first pane z-index:1.
    You can reproduce the problem by clicking "Capabilities" and
    then try using the links below.

    You can probably avoid the problem by setting decreasing z-indices
    on all the panes, but that soon gets annoying to maintain.

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Jan 2, 2004
    #10
  11. Silvio Bierman wrote:
    >> If what you say is true these would be equivalent. Your browser will

    > nodoubt show you otherwise (or it is seriously flawed).
    >


    I see your point, but when `+1` does equal `1`, what's the use of appending
    the plus sign or enabling it to be appended at all?


    JW
    Janwillem Borleffs, Jan 2, 2004
    #11
  12. "Janwillem Borleffs" <> wrote in message
    news:3ff4bcba$0$116$...
    > Silvio Bierman wrote:
    > >> If what you say is true these would be equivalent. Your browser will

    > > nodoubt show you otherwise (or it is seriously flawed).
    > >

    >
    > I see your point, but when `+1` does equal `1`, what's the use of

    appending
    > the plus sign or enabling it to be appended at all?
    >
    >
    > JW
    >
    >
    >


    The leading plus is simply a (superfluous) unary prefix operator with no
    other use than being the opposite of unary -. So +3 is the same as 3
    whatever the context.

    Silvio Bierman
    Silvio Bierman, Jan 2, 2004
    #12
  13. Silvio Bierman wrote:
    > The leading plus is simply a (superfluous) unary prefix operator with
    > no other use than being the opposite of unary -. So +3 is the same as
    > 3 whatever the context.
    >


    Thanks for the explanation, it seems that I have always interpreted that one
    incorrectly.


    JW
    Janwillem Borleffs, Jan 2, 2004
    #13
  14. Dafydd

    Dafydd Guest

    "Janwillem Borleffs" <> wrote in message news:<3ff4a5e4$0$23703$>...
    > Janwillem Borleffs wrote:
    > > I have tested it ant it worked like a charm...
    > >

    >
    > In case you don't believe me:
    > http://www.jwscripts.com/playground/test.php
    >
    >
    > JW


    I have used the z-index+1 and it has worked a treat. Thank you
    everybody for your help.

    Happy new Year

    Dafydd
    Dafydd, Jan 2, 2004
    #14
  15. Dafydd

    Dafydd Guest

    "Janwillem Borleffs" <> wrote in message news:<3ff4a5e4$0$23703$>...
    > Janwillem Borleffs wrote:
    > > I have tested it ant it worked like a charm...
    > >

    >
    > In case you don't believe me:
    > http://www.jwscripts.com/playground/test.php
    >
    >
    > JW


    Oh no :-( the links in the other pages still don't work. The one thing
    I have done is use the onLoad() in the body tag to load all the div
    layers in one go. This solve the problem but could lead the user to
    beleive they have visited all the pages as the links change color. The
    other problem could be the download time could be increased? I have
    broadband so I can't tell if it makes any difference

    I know I can use CSS to set vlink to the same color as link but the
    user can change the preferences to overide the CSS or so I am told.

    Best Wishes Dafydd Eveleigh
    Dafydd, Jan 2, 2004
    #15
    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. maflu
    Replies:
    5
    Views:
    444
    Adrienne
    Oct 16, 2003
  2. vvega

    Dhtml script

    vvega, Oct 9, 2004, in forum: HTML
    Replies:
    21
    Views:
    1,025
  3. Terry

    DHTML-based Pop-Up Window Script?

    Terry, Feb 7, 2005, in forum: Javascript
    Replies:
    6
    Views:
    115
    Matthew Lock
    Feb 15, 2005
  4. Steve
    Replies:
    1
    Views:
    271
    Richard Cornford
    Apr 9, 2005
  5. Shan
    Replies:
    0
    Views:
    113
Loading...

Share This Page