I'm using nested jQuery UI tabs as shown here http://jsfiddle.net/VvFyM/1/
I'm trying to bind to the tabsselect event separately for both the outside tabs and the nested tabs. Problem is, whenever the nested tab's tabsselect event is triggered, it seems that either:
The outside tab's tabsselect handler catches it as well, or
The outside tab's select event is also triggered (hence it is caught).
Which is it?
Then, is there a way to trigger and bind the 2 events separately?
So, instead of
$("#tabs").bind("tabsselect", function(ev, ui){
console.log("Tab selected");
})
I want to do something like
$("#tabs").bind("/*tabsselect outside tabs only*/", function(ev, ui){
console.log("Tab selected");
})
and
$("#tabs").bind("/*tabsselect inside tabs only*/", function(ev, ui){
console.log("Tab selected");
})
Instead of binding the select function after initialization bind it while you initialize the tabs and that solves the problem. I updated your fiddle to show this: http://jsfiddle.net/R5sSh/
Additionally, you can remove the ui-tabs-selected and ui-tabs-active classes, then you can use $('#tabscontainer').tabs( "select", hashOrIndex );
Related
http://klaussongs.com/
I have this table on my site that when you hover over the tabs, it changes it. But I want to make it so it works on click I tried defining that on my code by saying:
$("#tabs").tabs();
But it is not overriding the jquery UI CDNed file main event which is mouseover. I can see on console under eventlistener that it has a mouseover listener attached to it, how do I override that to work on click. I also tried this, but it didn't work:
$("#tabs").tabs({
event: "click"
});
I try to show context menu jstree on hover event with using api context menu plugin, but it doesn't work. Have you any idea how to do this?
I had to implement the same thing. Here's what I ended up doing:
var $treeView = "myTreeList";
$treeView.jstree({
/* options */
})
.on('loaded.jstree', function() {
$(".myTreeList a").hover(
function(){
$treeView.jstree("show_contextmenu", $(this));
}
);
})
I just hooked up a hover event to every anchor in the tree when the loaded event fired (don't try to use the li elements or the event on a child will fire along with all it's ancestors). You could also use "on" instead of just hover and you wouldn't need to do this in the loaded event handler but that's what worked for me.
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
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 am working on drag and drop tool using jQuery UI's sortable widget.
I'd like to add a message into an empty div where something can be dragged into, like: "drag here". I'd like to remove this message as soon as something is in that div. There will be times when the page loads with something already in that div, so it can't be only on action, but onload needs to check it too.
How do I go about it?
Here's my code:
$("#divFrom, #divTo").sortable({
connectWith: '.connectedSortable'
}).disableSelection();
You should be able to set up a draggable, and droppable and tap into droppable's drop event handler, which is fired when an item is dropped:
$("#target").droppable({
drop: function() {
// Empty the droppable div:
$(".message").remove();
}
});
Demo here: http://jsfiddle.net/andrewwhitaker/rUgJF/2/
As for doing something similar on load, if you provided your markup it would make providing a solution a little easier (is there a specific element inside the droppable div that you could check for?)
Hope that helps.