Using Java Script to create DHTML Pages

[Dafydd]

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

<script>
function details()
{
document.getEle mentById('detai ls').style.visi bility='visible ';
document.getEle mentById('capab ilities').style .visibility='hi dden';
}
function capabilities()
{
document.getEle mentById('detai ls').style.visi bility='hidden' ;
document.getEle mentById('capab ilities').style .visibility='vi sible';
}
</script>

With the following HTML code..

<table id="Menu" border="1" width="100%">
<tr>
<td><a href="#" onclick="detail s()">Details</a></td>
<td><a href="#" onclick="capabi lities()">Capab ilities</a></td>
</tr>
</table>

<div id="details" style="position :absolute; visibility:visi ble;">
<table border="0"><cap tion>DETAILS</caption>
<tr><td>Name: </td><td>Enter name</td></tr>
<tr><td>Email :</td><td><a
href="mailto:an yname@anydomain .com">EmailName </a></td></tr>
<tr><td>D.O.B :</td><td>Date of Birth</td></tr>
</table>
</div>

<div id="capabilitie s" style="position :absolute; visibility:hidd en;">
<table border ="0"><caption>C APABILITIES</caption>
<tr><td>Java Script</td><tr>
<tr><td>Java Script</td><tr>
<tr><td>Langaug es</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

[Lasse Reichstein Nielsen]

Re: Using Java Script to create DHTML Pages

dafydd.eveleigh @ntlworld.com (Dafydd) writes:
[color=blue]
> I have the following Script in my web page reduce to two pages.[/color]

Your HTML doesn't validate.
[color=blue]
> <td><a href="#" onclick="detail s()">Details</a></td>[/color]

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="detail s()">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 :)
[color=blue]
> 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.[/color]

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(pane Id) {
if (currentPane) {
currentPane.sty le.visibility = "hidden";
currentPane.sty le.zIndex = "";
}
currentPane = document.getEle mentById(paneId );
currentPane.sty le.visibility = "visible";
currentPane.sty le.zIndex = "1";
}
</script>
---
and then make the links as:
---
<a href="#details" onclick="setVis ible('details') ;return false;">
---
and initialize the currentPane when the page has loaded:
---
<body onload="setVisi ble('details')" >
...
---
(code not tested)

You still have the problem, that if Javascript is disabled, a lot of
your page will not be accessible.
[color=blue]
> 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?[/color]

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

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Janwillem Borleffs]

Re: Using Java Script to create DHTML Pages

Dafydd wrote:[color=blue]
> 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!
>[/color]
.....[color=blue]
>
> 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?
>[/color]

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;visib ility:visible;z-index:+1">

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


JW

[Lasse Reichstein Nielsen]

Re: Using Java Script to create DHTML Pages

"Janwillem Borleffs" <jw@jwscripts.c om> writes:
[color=blue]
> 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:[/color]
[color=blue]
> <div id="details" style="position :absolute;visib ility:visible;z-index:+1">
>
> This way, all following divs will automatically get this div's z-index + 1.[/color]

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 - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Janwillem Borleffs]

Re: Using Java Script to create DHTML Pages

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

Not true, +1 means "the previous's div z-index PLUS 1"
[color=blue]
> 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.
>[/color]

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


JW

[Janwillem Borleffs]

Re: Using Java Script to create DHTML Pages

Janwillem Borleffs wrote:[color=blue]
> I have tested it ant it worked like a charm...
>[/color]

In case you don't believe me:

http://www.jwscripts.com/playground/test.php

JW

[Silvio Bierman]

Re: Using Java Script to create DHTML Pages


"Janwillem Borleffs" <jw@jwscripts.c om> wrote in message
news:3ff4a5e4$0 $23703$1b62eedf @news.wanadoo.n l...[color=blue]
> Janwillem Borleffs wrote:[color=green]
> > I have tested it ant it worked like a charm...
> >[/color]
>
> In case you don't believe me:
> http://www.jwscripts.com/playground/test.php
>
>
> JW
>
>
>[/color]

Nonsense,

try

<div
style="z-index:3;backgro und:red;positio n:absolute;left :10px;top:10px; width:3
0px;height:30px "></div>

<div
style="z-index:+1;backgr ound:green;posi tion:absolute;l eft:20px;top:20 px;widt
h:30px;height:3 0px"></div>

<div
style="z-index:+1;backgr ound:blue;posit ion:absolute;le ft:30px;top:30p x;width
:30px;height:30 px"></div>

and compare to

<div
style="z-index:3;backgro und:red;positio n:absolute;left :10px;top:10px; width:3
0px;height:30px "></div>

<div
style="z-index:4;backgro und:green;posit ion:absolute;le ft:20px;top:20p x;width
:30px;height:30 px"></div>

<div
style="z-index:5;backgro und:blue;positi on:absolute;lef t:30px;top:30px ;width:
30px;height:30p x"></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

[Lasse Reichstein Nielsen]

Re: Using Java Script to create DHTML Pages

"Janwillem Borleffs" <jw@jwscripts.c om> writes:
[color=blue]
> Lasse Reichstein Nielsen wrote:[color=green]
>> Nope. Setting the z-index of this div does nothing for the following
>> divs (the value "+1" is equivalent to "1").[/color][/color]
[color=blue]
> Not true, +1 means "the previous's div z-index PLUS 1"[/color]

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#va lue-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.
[color=blue]
> I have tested it ant it worked like a charm...[/color]

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 - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Lasse Reichstein Nielsen]

Re: Using Java Script to create DHTML Pages

"Janwillem Borleffs" <jw@jwscripts.c om> writes:
[color=blue]
> Janwillem Borleffs wrote:[color=green]
>> I have tested it ant it worked like a charm...
>>[/color]
>
> In case you don't believe me:
> http://www.jwscripts.com/playground/test.php[/color]

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.ht ml>
I have added the third pane and given the first pane z-index:1.
You can reproduce the problem by clicking "Capabiliti es" 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 - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[David Dorward]

Re: Using Java Script to create DHTML Pages

Janwillem Borleffs wrote:
[color=blue]
> <div id="details" style="position :absolute;visib ility:visible;z-index:+1">
>
> This way, all following divs will automatically get this div's z-index +
> 1.[/color]

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

See:
<http://jigsaw.w3.org/css-validator/validator?text= div%7Bposition% 3Aabsolute%3Bvi sibility%3Avisi ble%3Bz-index%3A%2B1%7D &warning=1&prof ile=css2&userme dium=all>
and <http://www.w3.org/TR/CSS2/visuren.html#z-index>

--
David Dorward <http://dorward.me.uk/>

[Janwillem Borleffs]

Re: Using Java Script to create DHTML Pages

Silvio Bierman wrote:[color=blue][color=green]
>> If what you say is true these would be equivalent. Your browser will[/color]
> nodoubt show you otherwise (or it is seriously flawed).
>[/color]

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

[Silvio Bierman]

Re: Using Java Script to create DHTML Pages


"Janwillem Borleffs" <jw@jwscripts.c om> wrote in message
news:3ff4bcba$0 $116$3b62cedd@n ews.wanadoo.nl. ..[color=blue]
> Silvio Bierman wrote:[color=green][color=darkred]
> >> If what you say is true these would be equivalent. Your browser will[/color]
> > nodoubt show you otherwise (or it is seriously flawed).
> >[/color]
>
> I see your point, but when `+1` does equal `1`, what's the use of[/color]
appending[color=blue]
> the plus sign or enabling it to be appended at all?
>
>
> JW
>
>
>[/color]

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

[Janwillem Borleffs]

Re: Using Java Script to create DHTML Pages

Silvio Bierman wrote:[color=blue]
> 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.
>[/color]

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


JW

[Dafydd]

Re: Using Java Script to create DHTML Pages

"Janwillem Borleffs" <jw@jwscripts.c om> wrote in message news:<3ff4a5e4$ 0$23703$1b62eed f@news.wanadoo. nl>...[color=blue]
> Janwillem Borleffs wrote:[color=green]
> > I have tested it ant it worked like a charm...
> >[/color]
>
> In case you don't believe me:
> http://www.jwscripts.com/playground/test.php
>
>
> JW[/color]

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

Happy new Year

Dafydd

[Dafydd]

Re: Using Java Script to create DHTML Pages

"Janwillem Borleffs" <jw@jwscripts.c om> wrote in message news:<3ff4a5e4$ 0$23703$1b62eed f@news.wanadoo. nl>...[color=blue]
> Janwillem Borleffs wrote:[color=green]
> > I have tested it ant it worked like a charm...
> >[/color]
>
> In case you don't believe me:
> http://www.jwscripts.com/playground/test.php
>
>
> JW[/color]

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