tags:

views:

35

answers:

2

Hi,

I am trying to link from one part of the page to another using a href links.

 <div id="something">
    <div class="toolbar">
        <h1>Product information</h1>
        <a class="button back" href="#">Back</a>
        <a class="button slideup" href="#product">+</a>
    </div>
    <div>
        <a href="#product" rel="external"><img class="content" src="Dress1.jpg" title="Pic1"/></a>
    </div>
</div>

<div id="product">
    <div class="toolbar">
        <h1>Product</h1>
        <a class="button back" href="#">Back</a>
    </div>
    <div>
        <img class="content" src="Dress2.jpg" title="Pic1"/>
    </div>
</div>

when i click on the picture Dress1 in #something it should go to #product and stay there until instructed otherwise. unfortunately straight away its going back to #something

Does anyone know whats wrong?

What it does: I'm using JQTouch (hence the animations -button slide up etc) and all I want is that one image appears on the screen (something part of the page) and once its clicked the product part of the page appears.

Thanks! C.

Btw im using Safari!

A: 

You need to add a named anchor to the page where you want the link to go to.

link:

<a href="#product">link to product</a>

place on page it links to:

<a name="product"></a>
Dan Iveson
name is deprecated. i used id="product"
C.
`#` references will point to anything with a matching `id` attribute. It doesn't need to be an `<a>` element. Also, while it will probably work as you've described (browsers are forgiving), the `name` attribute is reserved for form fields.
banzaimonkey
thanks for the heads up guys :)
Dan Iveson
+1  A: 

Maybe a stupid question but are you sure the page is long enough to facilitate jumping to #product? Try adding a bunch of white space at the top of the page and then see if clicking the link moves #product to the top of the page.

Ollie Edwards