jQuery Quick Product Selection By Link

Question

This is going to be hard to explain but I'll try my best.

I have a page with 3 divs each containing information and an order button for each product. The visitor can click on a product image and it will basically hide all the divs and then show the one related to the image they have clicked on.

I have a sidebar which is running globally on all pages of the site which has "quick links" to each product. I want to know if there is a way that I can link these to the product page so that people can click them from any page of the site and it will open the product page with the product they have clicked on already selected and visible.

I presume it can be done through the use of #product1, #product2, etc on the end of the links to the product page but I'm not quite sure how it can be achieved. Has anyone got any ideas?

PS: On the product page the products are selected just by detecting an onclick on the product images and then hiding and displaying one singular DIV (not through the use of # link anchors).

Answer 1

You want to use anchors.

So you name an anchor inside the DIV.

<div id="product1">
<a name="product1">
</div>

Then you link to that with the '#' as you describe. Use the full path if you're linking from another page, just use #product1 if you're doing so from the same page.

<a href="/path/to/page/#product1">

Now the tricky bit as you've discovered is jQuery realising that you've requested an anchor when the page loads. This code does depend on a construct like above where the id of the div is the same name as the anchor. A small piece of sample code is here to invoke the show() method on the div with the same name as the anchor which was passed into the URI.

$(document).ready(function() {
    var uri = document.location.toString();
    if (uri.match("#")) {
        anchor = uri.split("#")[1];
        $('#' + anchor).show();
    }
});