Question

Lately, I’ve been seeing a lot of sites that have clickable objects that don’t have any hrefs or onclicks in their html code. I also tried alerting their href, onclick, onmousedown, onmouseup attributes but it only says “undefined”. I do notice that there’s a lot of complicated javascript in these pages.

one site in particular baffles me:
http://www.sharenator.com/Boy_Teaches_His_Puppy_How_to_Eat/#/doggy_01_Boy_Teaches_His_Puppy_How_to_Eat-0.html

It’s actually pretty good. The buttons aren’t selectable as well. The ids of the buttons are nextBtn, nextBtn2, prevBtn and prevBtn2.

Anybody has any idea how to implement this?

Answer 1

You can use jQuery’s .click(callback) function (http://api.jquery.com/click/) or .delegate(selector, ‘click’, callback) (prior to jQuery 1.7) and .on(‘click’, selector, callback) (jQuery 1.7+) or .bind(‘click’, callback).

Thanks to Anthony Grist for pointing out that .live() is now deprecated 🙂

As so:

<button id="clickable">Click Me!!</button>

Then target the button with jQuery:

$("#clickable").click(function(){
    // Send user to this link
    location.href = "http://www.takemehere.com";
});

You can read more about this on the link I gave, and on jQuery’s homepage.

UPDATE

The actual page handles this with:

$('#prevBtn').mousedown (onBackward);

Which would onmousedown call:

function onBackward () {
    showImg (currentId - 1);
}

The use of arrow keys:

 $(document).keyup (function (event) {
    var activeElement = document.activeElement.tagName;
    if (activeElement == 'INPUT' || activeElement == 'TEXTAREA') return;
    //alert (window.location.pathname);

    if (event.keyCode == 39) onForward();
    else
    if (event.keyCode == 37) onBackward();
});

See http://www.sharenator.com/js/slideshow.js for the source code of the slideshow.