JQuery event to trigger action when a div is made visible?

You could always add to the original . Show method so you don't have to trigger events every time you show something or if you need it to work with legacy code.

You could always add to the original . Show method so you don't have to trigger events every time you show something or if you need it to work with legacy code: jQuery(function($) { var _oldShow = $.fn. Show; $.fn.

Show = function(speed, oldCallback) { return $(this). Each(function() { var obj = $(this), newCallback = function() { if ($. IsFunction(oldCallback)) { oldCallback.

Apply(obj); } obj. Trigger('afterShow'); }; // you can trigger a before show if you want obj. Trigger('beforeShow'); // now use the old function to show the element passing the new callback _oldShow.

Apply(obj, speed, newCallback); }); } $('#test') . Bind('beforeShow', function() { alert('beforeShow'); }) . Bind('afterShow', function() { alert('afterShow'); }) .

Show(1000, function() { alert('in show callback'); }) .show(); }); This effectively lets you do something beforeShow and afterShow while still executing the normal behavior of the original .show() method. You could also create another method so you don't have to override the original .show() method.

1 This should be an accepted answer! Very useful. – Zlatev Apr 25 '10 at 14:33 1 +1 - Awesome... Thanks a lot!

– Shehi Feb 24 '11 at 17:49 EDIT: There is only one downside with this method: You will have to repeat the same "extension" for all methods that reveal the element: show(), slideDown() etc. Something more universal is required to solve this problem for once and all, since its impossible to have "ready" event for delegate() or live(). – Shehi Feb 24 '11 at 17:59 Good, the only problem is that fadeTo function does not work properly after implementing this function – Omid Amraei Nov 11 '11 at 10:56.

There is no native event you can hook into for this however you can trigger an event from your script after you have made the div visible using the . Trigger function e. G //declare event to run when div is visible function isVisible(){ //do something } //hookup the event $('#someDivId').

Bind('isVisible', isVisible); //show div and trigger custom event in callback when div is visible $('#someDivId'). Show('slow', function(){ $(this). Trigger('isVisible'); }).

2 My limitation here is that I don't necessarily have access to the code that show()'s my div. So I would not be able to actually call the trigger() method. – frankadelic Aug 4 '09 at 3:49 How on earth do you not have access to the js that is hiding one of the divs on your page?

– redsquare Aug 4 '09 at 6:34 The JS was provided by a development team outside my organization. It's also something of a "black box", so we don't want to modify that code if possible. It may be our only choice though.

– frankadelic Aug 4 '09 at 17:01 you can always stamp over their js functions with your own implementation. Sounds grim however! – redsquare Aug 4 '09 at 17:33 @redsquare: What if show() is called from multiple places other than the code block discussed above?

– conqenator Aug 4 '097 at 15:16.

Redsquare's solution is the logic answer. But as an in- theory solution you can code a function which is selecting the elements classed by . VisibilityCheck class (not all visible elements) and check their visibility property value; if true then do something.

Ok? Afterward the function should be performed periodically using the setInterval() function. As you know, you can stop the timer using clearTimeout() and the timer ID upon the function's successful call-out.

Function foo(){ $('. VisibilityCheck'). Each(function(){ if($(this).

Is(':visible')){ //do something } }); } //foo() window. SetInterval(foo, 100); Also you can do some performance improvements on this, but the solution is basically ignored to be used in action, I think.

1 not good form to use an implied func inside setTimeout/setInterval. Use setTimeout(foo, 100) – redsquare Aug 4 '09 at 0:01 agree. Is.Gd/21fcd – Sepehr Lajevardi Aug 4 '09 at 0:13.

If you want to trigger the event on all elements (and child elements) that are actually made visible, by $. Show, toggle, toggleClass, addClass, or removeClass: $. Each("show", "toggle", "toggleClass", "addClass", "removeClass", function(){ var _oldFn = $.

Fnthis; $. Fnthis = function(){ var hidden = this. Find(":hidden").

Add(this. Filter(":hidden")); var result = _oldFn. Apply(this, arguments); hidden.

Filter(":visible"). Each(function(){ $(this). TriggerHandler("show"); //No bubbling }); return result; } }); And now your element: $("#myLazyUl").

Bind("show", function(){ alert(this); }); You could add overrides to additional jQuery functions by adding them to the array at the top (like "attr").

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.