simulating a click on a <a>-element in javascript

Question

for a website, i am using the jQuery supzersized gallery script: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html

As you can see in the demo, in the bottom right corner there is an little arrow button that toggles a thumbnail bar. There is no option in the config files to automatically blend this in when opening the site.

So i guess i have to simulate a click on that button (the button is the tray-button, see HTML). I tried something like this:

<script>
$(function() {
    $('#tray-button').click();
});
</script>

However, this doesnt seem to work in any browsers i tested.

Any idea?

$('#tray-button').click(); only triggers any click event attached on that element. I think you are trying to open the href by saying $('#tray-button').click();!!! Bind a click event for that element first then try triggering it. — user405398
– user405398, Commented Sep 1, 2011 at 11:55

xmm.dev · Accepted Answer · 2012-11-21 08:31:58Z

5

$('#tray-arrow').click(function() {
 // prepare an action here, maybe say goodbye.
 //
 // if #tray-arrow is button or link <a href=...>
 // you can allow or disallow going to the link:
 // return true; // accept action
 // return false; // disallow 
});

$('#tray-arrow').trigger('click'); // this is a simulation of click

answered Nov 21, 2012 at 8:31

xmm.dev

4601 gold badge5 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Artemix Over a year ago

Welcome to StackOverflow! It is usually better to explain your code in text and not in code comments.

Prasanth · Accepted Answer · 2011-09-14 06:22:55Z

2

Try this

$("#tray-arrow").live("click", function () {
               // do something

            });

answered Sep 14, 2011 at 6:22

Prasanth

3,03934 silver badges44 bronze badges

Comments

Benjamin Crouzier · Accepted Answer · 2011-09-01 12:30:40Z

I assume that you want to popup the thumbnail bar #thump-tray on page load.

Here's a way to do it:

locate the file supersized.shutter.js and find this code:

// Thumbnail Tray Toggle
$(vars.tray_button).toggle(function(){
    $(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 );
    if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");
    return false;
}, function() {
    $(vars.thumb_tray).stop().animate({bottom : -$(vars.thumb_tray).height(), avoidTransforms : true}, 300 );
    if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");
    return false;
});

After it, add:

$(vars.tray_button).click();

Dont forget in your page (demo.html in the plugin), to change

<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>

to

<script type="text/javascript" src="theme/supersized.shutter.js"></script>

user750158 · Accepted Answer · 2011-09-01 12:45:09Z

1

instead of using

$(function(){
 //jquery magic magic
});

you culd try this witch will work your jquery magic after the full page is loaded (images etc)

$(window).load(function () {
  // jquery magic
});

and to simulate a click you culd use // shuld be the same as $('#tray-arrow').click();

$('#tray-arrow').trigger('click',function(){ })

example:

$(window).load(function () {
  $('#tray-arrow').trigger('click',function(){ 
      alert('just been clicked!'); 
  })
});

answered Sep 1, 2011 at 12:45

user750158

1635 bronze badges

3 Comments

voigtan Over a year ago

$(function() {}); is the same as $(window).load(function (){});

user750158 Over a year ago

Well not really the $(window).load(function (){}); is active once the full page is loaded, ( all img etc). See more here:link

voigtan Over a year ago

Thats true, but thats not important to wait for images to load, the DOM is there and the event is bound on the DOM not the image data.

Benjamin Crouzier · Accepted Answer · 2011-09-01 10:50:33Z

0

try

<script>
$(function() {
    $('#tray-arrow').click();
});
</script>

Make sure that this code is after your carousel is initialized.

edited Sep 1, 2011 at 10:50

answered Sep 1, 2011 at 10:43

Benjamin Crouzier

42.2k48 gold badges179 silver badges240 bronze badges

1 Comment

Key Over a year ago

Nope, not working! I tried to see what happens (with Firebug) when this thing is clicked (what function in JS is called) but i cant seem to figure it out?

Geekfish · Accepted Answer · 2011-09-01 11:07:27Z

0

This looks like it's a problem of timing the trigger. The plugin also loads on document load, so maybe when you try to bind the event listener the element is not created yet. Maybe you need to add the listener in something like the theme._init function http://buildinternet.com/project/supersized/docs.html#theme-init or somewhere similar.

answered Sep 1, 2011 at 11:07

Geekfish

2,34424 silver badges28 bronze badges

Comments

Saeed Neamati · Accepted Answer · 2011-09-01 12:33:54Z

0

A problem might be that your plugin detects whether the click has been initiated by a user (real mouse click), or through code (by using $('#id').click() method). If so, it's natural that you can't get any result from clicking the anchor element through code.

Check the source code of your plugin.

answered Sep 1, 2011 at 12:33

Saeed Neamati

35.9k42 gold badges140 silver badges192 bronze badges

Collectives™ on Stack Overflow

simulating a click on a <a>-element in javascript

7 Answers 7

1 Comment

Comments

Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related