After user hits last tab of a form in jQuery UI's accordion how do you get the next div to open and current one to close with the focus on the next input in-line?
Also I am looking for the reverse. If use types shift tab to go in the opposite direction then I am searching for a way to implement the reverse behavior as well. I.e. close the existing accordion div and open up the next accordion div in line and go to the last input in the div and set focus to it.
You need to bind the Tab key press, on the last input field of a form, to the accordion function to activate the next section:
$('#firstform input:text').last().on('keydown', function(e) {
if (e.which == 9) {
if (!e.shiftKey) {
var active = $( "#accordion" ).accordion( "option", "active" );
$("#accordion").accordion( "option", "active", active + 1 );
}
}
});
You also need to activate the first input box of the next form, using the activate event of the accordion:
$( "#accordion" ).accordion({
activate: function( event, ui ) {
$("#secondform input:text").first().focus();
}
});
The procedure is similar for the reverse case, as you can see in the fiddle.
Related
I'm having a DDL inside a popup but whenever I close the popup and reopen it, it keeps its last selected option. What I'm trying to do is to call the popupafterclose event and set the DDL to its initial option, but it does not seem to work..
$("#popup").on("popupafterclose", function (event) {
$('#ddl1').find('option:first').attr('selected', 'selected');
});
The initial option of the DDL is a disabled hidden selected option.
What's the problem here?
You just need to refresh the selectmenu widget as well:
$("#popup").on( "popupafterclose", function( event, ui ) {
$('#ddl1').find('option:first').prop('selected', 'selected');
$('#ddl1').selectmenu("refresh", true);
});
DEMO
$('#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()
On a web page, I want to display a small div with text in it that is cut off and displayed with ellipses and when there is a mouse-over it should expand to a larger size such that all the text is visible. I then want to be able to use jqueryui drag and drop to move the text box onto a grid. When it is being dragged and placed, I want it to be the small size again.
I have attempted to do this like so:
Mouseover function:
$(function() {
$( ".ui-widget-content" ).mouseover(function(){
$(this).css("width", "200px");
$(this).css("height", "200px");
}).mouseout(function(){
$(this).css("width", "100px");
$(this).css("height", "40px");
})
})
Draggable function:
$(function() {
$( ".ui-widget-content" ).draggable({ snap: "td.chart:not(:first-child)", snapMode: "inner", revert: "invalid", snapTolerance: 40, stack: ".ui-widget-content",
drag: function( event, ui ) {
$(this).css("width", "100px");
$(this).css("height", "40px");
}
});
});
Droppable function:
$(function() {
$( "td.chart:not(:first-child)" ).droppable({
accept: ".ui-widget-content",
drop: function( event, ui ) {
$("#" + ui.draggable.attr("id") ).css("background-color","#D7F970");
}
});
});
Div that is getting dragged and dropped:
Lorem Ipsum
I thought that by using the above, when someone went to drag the div, first the mouse over would be triggered, enlargening the div, then the dragstart would shrink it and it would be fine. However, I am placing it on a table (see selector "td.chart:not(:first-child)" in droppable function), and while it works for the first three rows of the table, the div no longer snaps and gets dropped on the fourth and fifth rows. This problem does not occur if I remove the mouse-over function. Anyone understand what is going on here?
It would maybe help to take a look at your html.
It's just a hunch but maybe it's only a matter of the size of your draggable being too big and being over more than one droppable item.
I would advise trying to change the tolerance of your droppable element to see if it helps :
$( ".selector" ).droppable({ tolerance: "pointer" });
jQuery Documentation states :
Tolerance specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values:
fit: draggable overlaps the droppable entirely
intersect: draggable overlaps the droppable at least 50%
pointer: mouse pointer overlaps the droppable
touch: draggable overlaps the droppable any amount
I currently user jquery ui to create a dialog window that is hidden on page load. The user opens the dialog by clicking a button. Once open, the dialog has several tabs (created with jquery ui tabs), each one displaying a form that a user might need access to. The actual forms are loaded using ajaxOptions.
Is there a way to stop jquery from preloading my first ui tab on page load? Instead, I want the content of the first tab loaded only when the user clicks the button to open the dialog.
$( "#pref_tabs" ).tabs({
ajaxOptions: {
success: function(xhr, status, index, anchor) {
//function to handle successful loading
},
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this form. We'll try to fix this as soon as possible. ");
},
}
});
Add an additional option to your tabs options to make no tabs selected by default.
$(sel).tabs({
selected: -1,
ajaxOptions: {...
});
I need a function which will get the text of the currently selected tab. I can get the selected tab using events, but I need to get the text even if the selected event is not yet thrown.
Here's my event script,
$( "#tabs" ).bind( "tabsselect", function(event, ui) {
_textOfTab=$(ui.tab).text();
});
How can I just query the tabs for the currently selected one?
The <li> of the selected tab will have a ui-tabs-selected class on it, you can use that to find the active tab.
$("#tabs ul.ui-tabs-nav li.ui-tabs-selected").text()
You can test it out here.