How to trigger Javascript after link is followed?

[zglazer]

Hi -- I'm working on a website that uses Javascript and CSS to show or
hide portions of text on each page. There's a sort of table of contents
at the top of each page, and rather than using anchor links, my client
wanted the selected item from the table of contents to trigger both the
showing of its corresponding text, and the hiding of the text
corresponding to the other items in the table of contents. I wrote the
following code to accomplish that (it may be a little bloated; I'm
relatively new to this):

function toggle(itemNumber){
/* THIS FUNCTION IS FOR ALL PAGES EXCEPT THE INDEX.HTML PAGE. IT
CALCULATES HOW MANY "DL" TAGS EXIST IN THE PAGE, MAKES VISIBLE THE ONE
THE USER CLICKED ON, AND HIDES ALL THE OTHERS. */
if (document.getElementsByTagName){
for (i=1; i<=document.getElementsByTagName("dl").length; i++){
if (i != itemNumber){
document.getElementById("item_" + i).style.display = "none"
}
else{
document.getElementById("item_" + itemNumber).style.display =
"block"
}
}
return false
}
else{return true}
}

The showing and hiding works fine, as long as you stay on the same
page, but I'm running into difficulty when I need to let users link
from one page on the site directly to one of those hidden text blocks
on another page.

Is there a way to embed a javascript command in a link, so that it
executes the command once the link has been followed and the other page
has loaded? I've tried links on the order of:

<a href="javascript:location.href='events.html';toggle('4')"></a>

....but nothing seems to work. Any hints? If more information is
needed, please let me know.

Thanks!

Zachary Glazer

 

[pegasusflightresources]

Hi -- I'm working on a website that uses Javascript and CSS to show or
hide portions of text on each page. There's a sort of table of contents
at the top of each page, and rather than using anchor links, my client
wanted the selected item from the table of contents to trigger both the
showing of its corresponding text, and the hiding of the text
corresponding to the other items in the table of contents. I wrote the
following code to accomplish that (it may be a little bloated; I'm
relatively new to this):

function toggle(itemNumber){
/* THIS FUNCTION IS FOR ALL PAGES EXCEPT THE INDEX.HTML PAGE. IT
CALCULATES HOW MANY "DL" TAGS EXIST IN THE PAGE, MAKES VISIBLE THE ONE
THE USER CLICKED ON, AND HIDES ALL THE OTHERS. */
if (document.getElementsByTagName){
for (i=1; i<=document.getElementsByTagName("dl").length; i++){
if (i != itemNumber){
document.getElementById("item_" + i).style.display = "none"
}
else{
document.getElementById("item_" + itemNumber).style.display =
"block"
}
}
return false
}
else{return true}
}

The showing and hiding works fine, as long as you stay on the same
page, but I'm running into difficulty when I need to let users link
from one page on the site directly to one of those hidden text blocks
on another page.

Is there a way to embed a javascript command in a link, so that it
executes the command once the link has been followed and the other page
has loaded? I've tried links on the order of:

<a href="javascript:location.href='events.html';toggle('4')"></a>

...but nothing seems to work. Any hints? If more information is
needed, please let me know.

Thanks!

Zachary Glazer

Dear sir,
You can easily just use divs, and use their property of visibility to
make them hidden or visible. I used buttons rather than links, but
both are easily used in a way like this:
<a href="http://www.somepage.com/"
onClick="hideDivs();showDiv(div_one);return false;">Div One</a>

<script type="text/javascript">
var the_div
var div_array=new Array("div_one","div_two","div_three","div_four")
function hideDivs()
{for(var loop=0;loop<div_array.length;loop++){hideDiv(div_array[loop],
"hidden");}}
function hideDiv(the_div, the_change)
{div_string="document.all."+the_div+".style";the_div=eval(div_string);the_div.visibility=the_change;}
function showDiv(the_div_name)
{var disp_div_string;var
disp_div;disp_div_string="document.all."+the_div_name+".style";disp_div=eval(disp_div_string);disp_div.visibility="visible";}
</script>

With a script like this, you will dynamically display each div, which
can contain HTML content within it, when the client wants it. I'm sure
someone can make this script much shorter, but this is my version of
it. Instead of having a table, you can have the actual content of the
HTML page change with the click of a link, although the link will stay
there (hopefully). In my case, I mistakenly put a script of this sort
into a framed page, so the Search Engines will not index it until I get
it out of frames. I therefore am planning to put it into a table,
having one row, and two columns. One column for the navigation
buttons, and the other for the content. I hope that this is what you
were asking for.

I have the honor to remain your most humble and Ob't Sv't in our war
against the King.

 

[zglazer]

Thanks for your response. I actually ended up figuring out that using
cookies solves this problem, and it works now! I do appreciate you
taking the time to answer...

Thanks again,
Zachary Glazer