CODEWITHSUNDEEP
javascriptjquery
Proud Member
Proud Member

Reputation: 40496

How to make those dynamic anchor links with jQuery?

I've recently discovered a website which does something really cool! Example:

Is this possible using jQuery? How would I scan for that anchor, and how would I call a function when the link is clicked without causing the link to follow some URL? I'm an objective-c dude and don't know anything about JS... hope my question isn't too dumb for you.

Upvotes: 0

Views: 1809

Answers (3)

ScottE
ScottE

Reputation: 21630

with this markup:

<div id="images">
    <div id="catImage">some cat image here</div>
    <div id="dogImage" style="display:none;">some dog image here</div>
</div>
<div id="anchors">
    <a href="#cat">catImage anchor</a>
    <a href="#dog">dogImage anchor</a>
</div>

and with this js (assuming jquery 1.4.x)

    $(function () {

        $("#anchors a").click(function () {
            // send the index of the anchor to the function
            fadeImage($(this).index());
        });

        var hash = window.location.hash;
        if (hash) {

            var elementId = "#" + hash.substring(1) + 'Image';
            var $div = $(elementId);

            // check if this element exists, and if so, send that index to the function
            if ($div.length) {
                fadeImage($div.index());
            }

        }

    });

    function fadeImage(index) {
        $("#images div:eq(" + index + ")").fadeIn().siblings().fadeOut();
    }

And to explain what's going on here:

I'm using the jquery index() function to get the index of the element relative to its siblings. I then pass that index to the fadeImage function, which finds the same index div and fades it in. By using chaining, I then look to the siblings of that div to fade them out. This is useful if you have more than 2 divs to fade out here.

For the anchor/hash usage, I just find the div with the matching id and get its index, and pass it to the same function.

jQuery docs can explain the various methods much better than I can.

Upvotes: 2

Felix Kling
Felix Kling

Reputation: 816472

Update: Oh I forgot, obviously you should read a tutorial about jQuery if you want to use it.

You can get and set the hash of the URL via window.location.hash, e.g.

alert(window.location.hash);
//and 
window.location.hash = 'test'

You should read about events in order to fully understand how it works. The event object provides a preventDefault() method, which is exactly doing what it says (preventing the default behavior).

E.g. with jQuery:

$('a').click(function(e) {
    //Do something..
    // prevent to follow the link
    e.preventDefault();
});

Upvotes: 1

zod
zod

Reputation: 12417

Using location.href you can get the full URL in javascript.

you can substring or string replace your domain name and rest will be your parameter dog or cat.

When you have the parameter .

jquery functions like show(); hide (); to show cat and hide dog.

By adding or removing style also you can change images

.add() is there

addClass removeClass is there

http://mattwhite.me/11tmr.nsf/D6Plinks/MWHE-695L9Z

http://rockmanx.wordpress.com/2008/10/03/get-url-parameters-using-javascript/

http://api.jquery.com/show/

http://api.jquery.com/addClass/

Upvotes: 1

Related Questions