javascript anchor- access to id on another html page

Question

Hi,

i have two html pages, when you click on something on the first html, it will go to the second one. what i want to do is to show text according to what you clicked on the first html. different texts are wrapped with different ids. here's how i wrote:

<a href="secondpage.html#one"></a>
<a href="secondpage.html#two"></a>
<a href="secondpage.html#three"></a>

i'm expecting to see two.html load the text with id "one", but it doesn't work, does anyone know what I did wrong? Thanks.

here's the code on second page

<ul id="menu" class="aaa">
    <li><a id="one" href="#">one</a></li>
    <li><a id="two" href="#">two</a></li>
    <li><a id="three" href="#">three</a></li>
</ul>

and i have a js file to modify each id

$("one").observe('click', function() {
    $('Pic').writeAttribute('src',"picone.jpg");
    $('Bio').update("texthere!");
});

same for two and three.

right now if I click on a button on the first page, it will always show the text and pic for "one", no matter which button i click.

but i want to see the pic and text for "two" if i click on it.

thanks.

Answer 1

When you say "different ids" how are you setting up your anchors on the 2nd page? The anchor on the 2nd page should look like this:

<a name='one'></a>

Put this right above the text that you want to mark on the 2nd page.

Answer 2

the #blastuffbla is not an ID but the location hash. You can acces it by using:

self.document.location.hash

which would return #hash, if you would only want hash you would use:

self.document.location.hash.substring(1)

Hope this helps

Answer 3

Do you want to scroll the page to the positon of the id "one"? Maybe the content of the page is too small that you cant scroll there. I mean sometimes the browser cant move the element marked with the id to the top of the canvas and looks like it doenst scrolled there. Try to include enough space after the element to make it scrollable to the top of the browser.

Hope that helps.

Answer 4

What you want to do is simulate a click on your anchor when the page loads. Since you're using jQuery, the simplest approach (but far form best) would be the following:

$(window).observe('domready', function () {
    $(location.hash).click();
});

attach ondomready-event to window. Fetch element with id=one (with jQuery this would be '#one', same as your location.hash would be, very handy in this case), trigger a click on it.

You might need to replace $(location.hash).click(); with $(location.hash).get(0).click() since jQuery tend to return arrays of jQuery-objects.

But a better solution in your case would be to have an event-handler that you can trigger manually, thus circumvent the need of firing events, aswell as drop the anchors and put onclick directly on your li's.

And furthermore, why do you load a second page when all you seem to want to do is to show/hide content dynamically? Do it on the same page...

Answer 5

tags do not have id's but names to handle the anchors in Urls, you will still need the ID to manage them in JS though. So your list should be:

<ul id="menu" class="aaa">
<li><a id="one" name="one" href="#">one</a></li>
<li><a id="two" name="two" href="#">two</a></li>
<li><a id="three" name="three" href="#">three</a></li></ul>

Your javascript seemed correct though.