Can we invoke click function on div class using Javascript

I have imple开发者_JAVA百科mented colorbox functionality on a div class using

<script type="text/javascript">
$(document).ready(function(){
$(".exampleclass").colorbox({iframe:true, open:true, width:"50%", height:"50%"});
})
</script>

Now I want to know is it possible from Javascript to trigger an event which will dynamically open colorbox without me clicking on the div element.

See Jquery's trigger function

Jquery Trigger

You can call it like this:

$.colorbox({iframe:true, open:true, width:"50%", height:"50%"});

Edit: You may need to run this first:

$.colorbox.init();

Check http://api.jquery.com/trigger/

and http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/27e7c70e51ff8a99/98cea9cdf065a524

One of the jQuery Solution you can use

$('selector').trigger('click');

Which will exactly work like a normal click pro-grammatically.

Note for this you've to load jQuery in your page. which can be loaded from one of the CDN server.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Absolutely, Rahul, opening colorbox through the jquery click() function is easy. But first you'll need to change your docReady code to look more like this:

$(document).ready(function(){
        $("#example-id").click(function() {
            $(this).colorbox({iframe:true, open:true, width:"50%", height:"50%"})
        });
})

Notice here I have placed the code with the "open:true" option inside a click handler. You've probably already seen that having that option runnable right at docReady causes your colorbox to open when the page loads.

Now with the click handler ready, you can simply open the box with - well, a click, of course - but dynamically with this code:

$("#example-id").click();

Wherever you have this, your colorbox will open. So you could place it in an $.ajax() success or error handler or a $.load() completion handler. Also, I used a click handler, but if you don't need the click functionality, you could just as easily have placed the colorbox code in a standard function, then call the function whenever you need it.

By the way, I changed your exampleClass to example-id because having more than 1 element attached to the click handler will produce multiple calls to colorbox. This poses no problem if all classes open the same colorbox. If you are interested in seeing an example of the same class opening differing colorboxes, I can expand on this one (but right off I would start with simply embedding attributes into the tags and looking for them in the click handler).

One last note, colorbox is typically associated with an tag, which will have an href and a title. This is where colorbox will get the contents and caption from. You could simply add href and title tags to your . Html validators won't like the href in the div, though, so if that's important to you then you should just add it to the colorbox options:

$(this).colorbox({href: "http://stackoverflow.com", iframe:true, ... })

Additionally, the function called upon trigger will need to call ColorBox in the mode where it is not assigned to an element.

So the .trigger() method invokes a function that invoke colorbox as shown below.

$.colorbox()

This method allows you to call ColorBox without having to assign it to an element. Example: $.colorbox({href:'login.php'});

See more at the colorbox docs.