468,301 Members | 1,487 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,301 developers. It's quick & easy.

How to trigger Javascript after link is followed?

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';toggl e('4')"></a>

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

Thanks!

Zachary Glazer

Jul 13 '06 #1
2 1916

zg*****@comcast.net wrote:
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';toggl e('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_a rray[loop],
"hidden");}}
function hideDiv(the_div, the_change)
{div_string="document.all."+the_div+".style";the_d iv=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_n ame+".style";disp_div=eval(disp_div_string);disp_d iv.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.

--
Patrick Reilly
1st Coy.
Colonel Seth Warner's Regiment

Jul 13 '06 #2
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

pe********************@gmail.com wrote:
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_a rray[loop],
"hidden");}}
function hideDiv(the_div, the_change)
{div_string="document.all."+the_div+".style";the_d iv=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_n ame+".style";disp_div=eval(disp_div_string);disp_d iv.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.

--
Patrick Reilly
1st Coy.
Colonel Seth Warner's Regiment
Jul 24 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by Andy Fish | last post: by
17 posts views Thread by Mike Gratee | last post: by
1 post views Thread by livin | last post: by
136 posts views Thread by Matt Kruse | last post: by
7 posts views Thread by LaughOutLoud | last post: by
reply views Thread by NPC403 | last post: by
reply views Thread by Teichintx | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.