Html link to new url and fire js function

Steve Brook

Steve Brook

Steve Brook

Associate
Joined
15 Feb 2011
Posts
11
Hi
I have a link on a page that I use to direct the browser to another page no problem. However it is not just a URL link but also you could say a named anchor link since I want this particular link to open the relavent page and also display a div that is previously set to display:none and opened via a js function.
Does anyone know the right code to acheive this?

On another page i already acheive a similar thing but instead of firing a js function to display the div, I am using a named anchor within scrolling divs (jquery effect) to open the desired page and slide accross the desired div eg:
Code: 
<a href="nextpage.html" onclick="location ='nextpage.html#div2'" class="panel">philosophy</a>
I have tried all kinds of combinations for the hidden div but cannot trigger the js when the browser moves to the other page.
If theres another way to move to the next page and change the style of the div to display:inline, or whatever I dont mind.
Any help will be much appreciated.
THANKS
 
If I've understood correctly, you want a link on page1.html to go to page2.html and depending on the hash value passed, display a hidden div?

If so, try this:

page1.html
Code: 
<a href="page2.html#divone">first link</a><br />
<a href="page2.html#divtwo">second link</a>

page2.html
Code: 
<head>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $(function() {
      var fragment = window.location.hash;
      if (fragment != "") {
        $(fragment).css("display","block");
        // Now you've got the reference to the div, you could also use fadeIn, or slideDown etc.
      }
    });
  </script>
</head>

<body>
  <div id="divone" style="display: none;">This is the first div</div>
  <div id="divtwo" style="display: none;">This is the seconddiv</div>
</body>
 
Thanks for that Spunkey. I tried it and played around with it but its just not firing the js function. I think you understood right. I want the hidden div to open up (i.e. display:block)as soon as the browser moves to the url pointed in the a href.
In your code I can't see where the function references the div to be opened/unhidden.
I'm not familiar with the "window.location" code so I guess the .hash bit also picks up whatever div follows the hash in the href line?? A named anchor in effect...is that right?
Still ...sadly I can't get it to trigger the function and display the div.
Isn't there a way to call the js function from the href line?
 
I've just tested it here and it seems to work ok.

Have you included jquery.js? I just added it to my example to show that you'll need to include it.

If you change the '<script type="text/javascript" src="jquery.js"></script>' line to the below, it'll use the version of jQ hosted by google and should start working.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Steve Brook said:
In your code I can't see where the function references the div to be opened/unhidden.
I'm not familiar with the "window.location" code so I guess the .hash bit also picks up whatever div follows the hash in the href line?? A named anchor in effect...is that right?
Click to expand...
the window.location.hash line picks up whatever is put in the fragment of the url (this is the bit after the #). It then uses this to find a div using a jQuery id selector, which handily enough also uses the #.

All you have to do to make this work is make sure the id of the div you want to display matches the # fragment of the URL.
 
Last edited:
Thanks again.
Your explanation is very clear and useful ...THANKS for being that way.
However I still cant make it work.
I am using jquery for other functions so it IS already included but I am using
jquery-1.3.2.min.js .However I have tried the jquery version you suggest and still no joy.
I have checked and checked again but seem to have copied your code exactly.
Forgive my ignorance but I'm bothered by the $(function() part of your code. Don't we need to give the function a name and make a call to its name ??
Really appreciate your time and help here.
 
$(function(){ }); is the same as doing $(document).ready(function(){ });

function(){} is just used in the place of an argument that is expected to be a function.

It would help if you should show us your page where you're having troubles. Or even better, a test case you've setup to test this.
 
HEY HEY!
I have it working now !! I guess you could put it down to just being a newbie !!
Since i got it working it seems to work okay in all sorts of combinations now.
I think my first error was to place the js in an external file but for some other reason it didn't work so then I placed it inline but placed in page1 (where the link is) instead of inline in page2 (where the hidden div is) So moving the js to page2 got it working. I then realised that I COULD place the script in an external file and can also work it with my version of jquery (i.e. -1.3.2.min.js).
It also works with this line of code which is close to what I had in the begining:
Code: 
<a href="websites.html" onclick="location ='websites.html#portfolio'" class="panel">portfolio</a>
What I'd like you to know is that I have learned some more about the use of "hash" thanks to Spunkeys posting and just want to say a BIG THANKS to both of you for taking the time and interest. Its great that you are willing to share your knowledge and help the lesser experienced. MANY THANKS !
 
Glad to have helped :)

Just for reference you don't need the onclick handler in your a tag - just the below will work fine:

Code: 
<a href="websites.html#portfolio" class="panel">portfolio</a>

Also, to get an email notification you need to subscribe to the thread. Up at the top right there is a 'Thread tools' button - click that, then click subscribe to thread.
 
You must log in or register to reply here.
Back
Top Bottom