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

for a website, i am using the jQuery supzersized gallery script: http://buildinternet.com/project/supersized/slidesho开发者_如何学JAVAw/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-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

Try this

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

            });

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>

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!'); 
  })
});

try

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

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

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.

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.