For jqueryUI's tabs, I'm familiar w/ adding a function to the show event, as described in this question. However, is there a way to add a function when a tab is unloaded or loses focus? I see there is a hide function, but my function doesn't get called when I click away from a tab (to another tab).
Here is my code:
$("#myTabs").tabs({
selected: tab,
show:
function (event, ui) {
//some code that works
},
hide:
function(event, ui) {
//some code that never gets called
}
});
Instead of trying to accomplish something during the hide function, I added a custom function in my "select". You can read more about it on this other question.
Jquery Tabs showing a confirmation before activate
Related
$('#ac').autocomplete({
source: '/url',
appendTo: $('#ac').closest('.popupWindow'),
select: function (event, ui) {
// do stuff
}
});
in IE9 first time everything works fine, but when i type text is second time, elements don`t reacts on clicks
error appears only when using appendTo option
solve it: on one of parent elements was click event handler with e.stopPropagation()
I am using a jQuery dialog and I would like to add some functionality to the close button in the upper right and corner of the dialog frame. Can I accomplish this by simply adding a close function to the dialog without it affecting the cancel button contained within the dialog? Meaning the cancel button obviously closes the dialog and performs its own function but the close button in the dialog frame needs to do something else. Hopefully I have explained that clearly enough.
If you are using the buttons options within the dialog, and one of them is Cancel, then yes. You can obviously create your own function for the Cancel button and then a seperate one with the close event. Just to be safe, you'll probably want to include preventDefault() in the function for your Cancel button.
$('#dialog').dialog({
buttons: {
"Ok" : function() {
//perform whatever
},
"Cancel" : function(e) {
e.preventDefault();
//perform whatever
},
close: function() {
// perform special CLOSE function
}
});
Actually I used this method below to accomplish this. It seems to work just fine so I don't know if there are any drawbacks with going this way. Here is the code:
$("#dialog").dialog({
...dialog code goes here...
}).bind('dialogclose', function(event, ui) {
... dialog close code goes here...
});
I suppose the answer above is better as it is clearer and cleaner implementation.
I am using jQuery tabs, each tab has variable heights.
When I select a tab I need to refresh the content in a div to accomodate the window scroll appearing/disappearing.
Looking at the API documentation for the tabs plugin there is load event and a select event. I cannot seem to find any other events I can plug into.
The load event works fine but when selecting a tab that is already loaded the select event fires before the content is displayed.
$("#tabs").tabs({
cache: false,
select: function (e, ui) {
// running the event here will not work as it runs before the content is diplayed
},
load: function (event, ui){
// running it here works ok as it fires the event after the content is displayed
}
});
I need the event to fire after the content is displayed.
Is there an event I can plug into for this particular behaviour?
The JqueryUI 1.8 API documentation describes the show and select events.
If show doesn't work, then perhaps configuring a timer in the select handler to refresh the div a few milliseconds later will do the trick.
So, I am using jQuery Mobile and I'd like to animate individual elements on a page change both before and after the change. I set transitions to "none" in jQuery moblie then try to add class to css3 animate individual elements. It works on pagechange, so when you go to a new page the transition on the elements appears, but pagebeforechange happens to quickly and the animation is lost. Is there a way to make the pagebeforechange function wait until the animation is done then go on to the next page? preventDefault(); stops the page from changing at all. I need like a call back or deferred obj or something? If I call changepage in pagebeforechange after the animation is done...the function runs recursively :(
transitions: function(){
$(document).bind( "pagebeforechange", function( e, data ) {
$('.search_words li').addClass('animated flipInX');
});
$(document).bind( "pagechange", function( e, data ) {
$('.search_words li').addClass('animated flipInX');
});
},
Thanks in advance!
you could try pageshow instead of pagebeforechange. Beaucse pageshow is fired before the pagechange event
I have the following bit of jquery:
http://jsfiddle.net/tad604/Ck2qk/10/
I want the foo div's click handler to not fire, when you click and drag. I've tried doing all sorts of things inside the stop/start events of the drag (event.stopPropagation() etc) all to no avail. The click handler is fired after the drag event regardless.
It's annoying, but the only fix is to remove the event on drag start and put it back on drag stop. Try this:
$(".foo").click(function(){
alert("blah");
});
$(".bar").draggable({
stop: function(event) { setTimeout(function() {
$(".foo").click(function(){
alert("blah");
}); }, 100)},
start: function(event) { $('.foo').unbind('click'); }
});
Now there is still the problem that your click events are probably a bit more complicated than this, and you probably don't want to have to rewrite them. You can save the events for later using jquery data like this:
var events = $('#test').data("events");
Alternatively, you can use jquery live function to attach the click event so the event will only ever be binded to an element that matches that selector. That means if you change the class while dragging, so that it no longer matches that selector, it would no longer have that click event. Something like this might work:
$(".bar .foo").live('click', function(){
alert("blah");
});
$(".bar").draggable({
stop: function(event) { setTimeout(function() {
$(".draggableBar").removeClass('draggableBar').addClass('bar');
}, 100)},
start: function(event) { $(this).removeClass('bar').addClass('draggableBar'); }
});
You'd also have to update the css so draggablebar gets the same style as bar.