472,805 Members | 996 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,805 software developers and data experts.

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 2123

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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: VK | last post by:
09/30/03 Phil Powell posted his "Radio buttons do not appear checked" question. This question led to a long discussion about the naming rules applying to variables, objects, methods and properties...
6
by: Andy Fish | last post by:
Hi, I want to use an anchor tag to invoke some javascript and I've read that it's bad form to use <a href="javascript:foo()"> I've read endless usenet posts and hint sites on the net, they all...
17
by: Mike Gratee | last post by:
Is it possible to use JavaScript to cause the browser to click a link on a page and have the browser act exactly like the user had clicked on the link directly? In other words, I need to...
2
by: kj | last post by:
How does one trigger an event programmatically? I'm interested in how to do this in both the "Level 0" event model as well as in the DOM Level 2 event model. Thanks! kj -- NOTE: In my...
1
by: livin | last post by:
I use a web page that brings up a table with a series of links that look like this... <a href="javascript:GetAgent('MA142')"> these links open pages that look like this......
136
by: Matt Kruse | last post by:
http://www.JavascriptToolbox.com/bestpractices/ I started writing this up as a guide for some people who were looking for general tips on how to do things the 'right way' with Javascript. Their...
6
by: b. hotting | last post by:
Hi, I don't see why this won't work, it are 3 links, the last one (a get) does work, but the first 2 won't. i would like to use a post, through hidden input types any idea? thanks for your...
7
by: LaughOutLoud | last post by:
Hi. Does anyone knows that how to retrieve variable on a link from javascript. e.g., here I have a link <a href="http://www.domain.com/index.html?id=1111" onClick="getid();">click me</a> <div...
5
by: mesut | last post by:
Hi there, how are you colleagues? I try to set a linkaddress in code behind for a <asp:hyperlinkserver control. but I think I have some syntax problem. I don't know how to fix it. What's...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 2 August 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: erikbower65 | last post by:
Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...
0
by: kcodez | last post by:
As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Sept 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Taofi | last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...
5
by: DJRhino | last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
0
by: lllomh | last post by:
How does React native implement an English player?
0
by: Mushico | last post by:
How to calculate date of retirement from date of birth

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.