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="details()">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="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 :)
[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(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.
[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/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
