buttons with no href, onclick etc

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?

@karunchadhary I can see you just registered, so welcome to the StackOverflow community :) If one of the answers answered your question, please mark it as the correct answer. — Tehnix, Jan 11 '12 at 10:08

Tehnix · Accepted Answer · 2012-01-11T09:49:27.597

5

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.

edited Jan 11 '12 at 09:49

answered Jan 11 '12 at 09:33

Tehnix

2,020
2
18
23

`.live()` is deprecated, you should use `.on()` (jQuery 1.7+) or `.delegate()` (prior to jQuery 1.7) instead. – Anthony Grist Jan 11 '12 at 09:37
how does it implement navigation between pictures with "left" - "right" arrows? – Andrzej Bobak Jan 11 '12 at 09:39
@AnthonyGrist thanks for pointing that out, hadn't read the documentation in awhile :) Edite my code to your suggestion. – Tehnix Jan 11 '12 at 09:42
It might be this as it's in most of the websites. Iv'e been putting off learning jquery. But I guess I have to start – karun chaudhary Jan 11 '12 at 09:42
@karunchaudhary jQuery is a wonderful and powerful tool, I would definitely recommend learning how to use it :) – Tehnix Jan 11 '12 at 09:45
@Chrules thanks, it will be quite helpful for me in the near future – Andrzej Bobak Jan 11 '12 at 12:45

ninjagecko · Answer 2 · 2012-01-11T09:35:42.447

0

With javascript, find the element and give it an onClick event handler. e.g.:

var myElement = document.body;  // or document.getElementById(...), etc.
myElement.onclick = function(event) {alert(event);}

This will avoid showing anything in the HTML, and is how the website you linked does it (there is no other way to define behavior... except maybe esoteric CSS).

edited Jan 11 '12 at 09:35

answered Jan 11 '12 at 09:30

ninjagecko

88,546
24
137
145

score 0 · Answer 3 · answered Jan 11 '12 at 09:33

0

You could try using the jQuery ui library - this can create buttons in the way you specify.

jQuery UI

answered Jan 11 '12 at 09:33

Davos555

1,974
15
23

score 0 · Answer 4 · answered Jan 11 '12 at 09:35

The event handlers are probably bound using a Javascript framework such as jQuery. They don't use the onclick property of the DOM element. See this jsFiddle for an example of binding a click event handler to a button with jQuery, then click the button to see the value of onclick for that button (displays as null in FF 9).

score 0 · Answer 5 · answered Jan 11 '12 at 09:36

0

With javascript. Here's an example:

<a id="uniqueId" href="#">Button</a>

<script>
    var button = document.getElementById('uniqueId');
    button.onclick = function(e) {
        alert("clicked!");
    }
</script>

answered Jan 11 '12 at 09:36

Arnold Zokas

8,306
6
50
76

The problem with this method is that I would still see the function when I run: `alert(document.getElementById('uniqueId').onclick)` – karun chaudhary Jan 11 '12 at 09:44

score 0 · Answer 6 · answered Jan 11 '12 at 09:42

0

the click functions may be initialized in js, for example, $("#nextBtn").click(function);

answered Jan 11 '12 at 09:42

ucdream

691
1
7
18

buttons with no href, onclick etc

6 Answers6

Linked