So, there are some events in my app that changes layout on my page (re-position of the elements)...
mostly is done by bootstrap collapsing and fading (tabs, collapsibles, accordions)...
I would like to fire an
event whenever a change is about to happen and another when the change is done..
right now I came out with something like that
$('.collapse').on("shown hidden", function(){
jQuery(myAPP).trigger("layoutchanged");
});
$('.collapse').on("show hide", function(){
jQuery(myAPP).trigger("layoutchanging");
});
and then...
jQuery(myAPP).on("layoutchanging", function(e){
log("Start changing");
});
jQuery(myAPP).on("layoutchanged", function(e){
log("Layout changed");
});
it works for collapse and accordions OK.
but on tabs, where the markup is like this:
<ul class="nav nav-tabs can_deactivate">
<li><a href="#tab_1" data-toggle="tab">Open Tab 1</a></li>
<li><a href="#tab_2" data-toggle="tab">Open Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="tab_1">
Lorem ipsum
</div>
<div class="tab-pane fade" id="tab_2">
Lorem ipsum
</div>
</div>
Works only on show, but not on hide... what can I do?
JS FIDDLE: http://jsfiddle.net/KL7Af/
