Jquery tabslideout plugin and want to determine when divs are inserted and exited

Question

I am working with jquery tabslideout plugin. It works fine, but I want to detect when the tabslideout plugin slides back and forth. if I could detect, then I can call another procedure. no idea comes to my mind to determine how to grab when a tabslideout div is inserted and exited. so please guide me. thanks

here is my code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script> <script type="text/javascript"> $(function(){ $('.slide-out-div').tabSlideOut({ tabHandle: '.handle', //class of the element that will become your tab pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab //Optionally can be set using css imageHeight: '122px', //height of tab image //Optionally can be set using css imageWidth: '40px', //width of tab image //Optionally can be set using css tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left speed: 300, //speed of animation action: 'click', //options: 'click' or 'hover', action to trigger animation topPos: '200px', //position from the top/ use if tabLocation is left or right leftPos: '20px', //position from left/ use if tabLocation is bottom or top fixedPosition: false //options: true makes it stick(fixed position) on scroll }); }); </script> <style type="text/css"> .slide-out-div { padding: 20px; width: 250px; background: #ccc; border: 1px solid #29216d; } </style> <div class="slide-out-div"> <a class="handle" href="http://link-for-non-js-users.html">Content</a> <h3>Contact me</h3> <p>Thanks for checking out my jQuery plugin, I hope you find this useful. </p> <p>This can be a form to submit feedback, or contact info</p> </div> 

Answer 1

The plugin cannot tell you that this happened, but I changed the plugin so that you do it.

My change in the plugin was to add a callback function (you can specify one of the parameters) to start after the animation is complete.

Here is an example

The only change is to provide a function to call when it enters or exits. So

 $(function(){ $('.slide-out-div').tabSlideOut({ tabHandle: '.handle', //class of the element that will become your tab pathToTabImage: 'http://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css imageHeight: '122px', //height of tab image //Optionally can be set using css imageWidth: '40px', //width of tab image //Optionally can be set using css tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left speed: 300, //speed of animation action: 'click', //options: 'click' or 'hover', action to trigger animation topPos: '200px', //position from the top/ use if tabLocation is left or right leftPos: '20px', //position from left/ use if tabLocation is bottom or top fixedPosition: false, //options: true makes it stick(fixed position) on scroll onSlideOut: function() { alert('Opened'); }, onSlideIn: function() { alert('Closed'); } }); }); 

Note that you will need to use version I changed to JsFiddle.

Hope this helps

UPDATE

Op requested more information about my changes to the plugin.

First, I added that I added two new properties to the default settings, which were empty functions.

 onSlideOut: function() {}, onSlideIn: function() {} 

Then I put this value in the callback of the animation method in the code.

 //Square Bracket for emphasis only obj.animate({top:'-' + properties.containerHeight}, settings.speed,[settings.onSlideIn]).removeClass('open'); obj.animate({top:'-3px'}, settings.speed,[settings.onSlideOut]).addClass('open'); 

The user can then provide his own implementation of the method to override the default value.

If you need more hooks to handle the code, you might consider shooting and listening to user events instead of using callbacks.