Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Using Java Script to create DHTML Pages

Reply
Thread Tools

Using Java Script to create DHTML Pages

 
 
Dafydd
Guest
Posts: n/a
 
      01-01-2004
I have the following Script in my web page reduce to two pages.

<script>
function details()
{
document.getElementById('details').style.visibilit y='visible';
document.getElementById('capabilities').style.visi bility='hidden';
}
function capabilities()
{
document.getElementById('details').style.visibilit y='hidden';
document.getElementById('capabilities').style.visi bility='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="(E-Mail Removed)">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
 
Reply With Quote
 
 
 
 
Lasse Reichstein Nielsen
Guest
Posts: n/a
 
      01-01-2004
http://www.velocityreviews.com/forums/(E-Mail Removed) (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 - (E-Mail Removed)
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
 
Reply With Quote
 
 
 
 
Janwillem Borleffs
Guest
Posts: n/a
 
      01-01-2004
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



 
Reply With Quote
 
Lasse Reichstein Nielsen
Guest
Posts: n/a
 
      01-01-2004
"Janwillem Borleffs" <(E-Mail Removed)> 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 - (E-Mail Removed)
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
 
Reply With Quote
 
Janwillem Borleffs
Guest
Posts: n/a
 
      01-01-2004
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



 
Reply With Quote
 
Janwillem Borleffs
Guest
Posts: n/a
 
      01-01-2004
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



 
Reply With Quote
 
Silvio Bierman
Guest
Posts: n/a
 
      01-01-2004

"Janwillem Borleffs" <(E-Mail Removed)> wrote in message
news:3ff4a5e4$0$23703$(E-Mail Removed)...
> 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:2 0px;top:20px;widt
h:30px;height:30px"></div>

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

<div
style="z-index:5;background:blue;position:absolute;left:30p x;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


 
Reply With Quote
 
Lasse Reichstein Nielsen
Guest
Posts: n/a
 
      01-02-2004
"Janwillem Borleffs" <(E-Mail Removed)> 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 - (E-Mail Removed)
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
 
Reply With Quote
 
David Dorward
Guest
Posts: n/a
 
      01-02-2004
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%3Bvisibil ity%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/>
 
Reply With Quote
 
Lasse Reichstein Nielsen
Guest
Posts: n/a
 
      01-02-2004
"Janwillem Borleffs" <(E-Mail Removed)> 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 - (E-Mail Removed)
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
how to create dhtml popup window with drag and drop Shan Javascript 0 12-05-2007 02:51 PM
Do any DHTML books cover contemporary DHTML? Steve Javascript 1 04-09-2005 04:16 PM
DHTML-based Pop-Up Window Script? Terry Javascript 6 02-15-2005 07:16 AM
Dhtml script vvega HTML 21 10-11-2004 10:06 PM
Software to Create DHTML Drop Down Menu maflu HTML 5 10-16-2003 10:03 PM



Advertisments