I'm using jquery-ui selectmenu and have noticed if you leave the drop menu open and resize your window, the drop menu moves independently of the select.
Here's a fiddle with a totally stock usage:
http://jsfiddle.net/kirkbross/65q0fL5r/
The odd thing is that the example on the jqueryui site doesn't have this issue, even though it's the same code.
Is there an easy fix for this?
$(function() {
$( "#select" ).selectmenu();
});
Here is my quickfix: On window resize, close and re-open the selectmenu if it is currently open:
$(window).resize(function() {
$('.js-selectmenu').each(function() {
var open = $(this).next().attr('aria-expanded') == 'true';
if (open) {
$(this).selectmenu("close");
$(this).selectmenu("open");
}
});
});
I have the following setup:
$('.my-list').sortable({
handle: '.drag-handle',
start: function(event, ui ) {
//check to see if allow drag and drop
var should_disable = check-code-goes-here ;
if (should_disable) {
//how to disable
}
},
stop: function(event, ui ) {
}
});
When dragging a .drag-handle element, I need to check a condition to see if it is allowed to be dragged and dropped. If yes, go as normal. If not, I would like to disable the whole drag/drop operation. Note that I cannot determine whether a .drag-handle element should be draggable or not at page load, which is why I need to check at the time of each drag/drop operation.
Thanks and regards.
Check this JSFiddle link
http://jsfiddle.net/shuklendu/uacc7/17/
in that example a class 'fixed' added to item which don't want to drag and cancel property set to sortable by
$("#sortable").sortable({
cancel: ".fixed"
});
Currently I am using a Jquery ui autocomplete, and after someone selects an option from a Jquery ui autocomplete, I am removing the focus from the textbox.
I would like to add the following functionality -
When someone clicks into the textbox again, I would like to leave the option that was previously selected in the text box, but highlight it (as if the text was double clicked), and redisplay all the choices.
How can this be done?
CURRENT CODE -
$(function () {
var availableItems = ['item1', 'item2', 'item3'];
$("#myTextBox").autocomplete({
source: availableItems,
minLength: 0,
select: function(event, ui) {
$('#myTextBox').blur();
}
}).focus(function () {
$(this).autocomplete("search");
}); ;
});
Did you try to put
$(this).select();
in the focus function()?
Also try
$(this).autocomplete("search", "");
to enhance an empty search
I'm trying to integrate this plug-in into my site so I can swipe to delete. The problem however is that this plugin is triggered with a 'swiperight', the same swipe event is used to reveal my panel. I managed to separate the events using event.target.tagName. When it's a A(link), I want to activate the swipe to delete button and otherwise I want my panel to slide in.
With other words the pageinit event is triggered twice so the swipe to delete button starts to appear then the same event is triggered again. I want to somehow cancel one action but i can't make it work. I already tried:
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
I also tried to use some solutions given here but with no luck:
jQuery Mobile: document ready vs page events
A demo of my problem can be found snip and my current pageinit function is this:
$(document).on('pageinit', function() {
//Activate horizontal swipe after x px.
$.event.special.swipe.horizontalDistanceThreshold = 80;
$('div[data-role="content"]').on("swiperight", function(event) {
//If tagname is 'A' you probably want slide to delete not the panel
if(event.target.tagName != 'A') {
$.mobile.activePage.find("#menu").panel("open");
} else {
//Cancel swipe
event.stopImmediatePropagation();
}
});
//Swipe to delete
$("#swipe li").swiper( {
corners: false,
label: "Verwijder",
swipe: function(event, ui) {
alert('trigger');
},
click: function(event, ui) {
var $item = $(this);
//console.log($(this));
$item.fadeOut(250, function() {
$item.remove();
});
}
});
});
Fixed issue using the following plugin: TouchSwipe which has the ability to simple exclude elements from the events.
is there a way to manually open close the jquery ui tooltip? I just want it to react to a click event toggling on/off. You can unbind all mouse events and it will rebind them when calling .tooltip('open'), even though that should not initialize or set events imo, since if you try to run .tooltip('open') without initializing, it complains loudly about not being initialized.
jltwoo, can I suggest to use two different boolean switches to enable auto-open and auto-close? With this change your code will look like this:
(function( $ ) {
$.widget( "custom.tooltipX", $.ui.tooltip, {
options: {
autoShow: true,
autoHide: true
},
_create: function() {
this._super();
if(!this.options.autoShow){
this._off(this.element, "mouseover focusin");
}
},
_open: function( event, target, content ) {
this._superApply(arguments);
if(!this.options.autoHide){
this._off(target, "mouseleave focusout");
}
}
});
}( jQuery ) );
In this way, initializing the tooltip as:
$(someDOM).tooltipX({ autoHide:false });
it shows by itself when the mouse is over the element but you have to manually close it.
If you want to manually control both open and close actions, you can simply use:
$(someDOM).tooltipX({ autoShow:false, autoHide:false });
If you want to just unbind the events and woudn't like to make your own custom tooltip.
$("#some-id").tooltip(tooltip_settings)
.on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
});
$("#some-id").attr("title", "Message");
$("#some-id").tooltip("open");
mouseout blocks the tooltop disappearing by moving the mouse cursor
focusout blocks the tooltop disappearing by keyboard navigation
The tooltip have a disable option. Well i used it and here is the code:
$('a').tooltip({
disabled: true
}).click(function(){
if($(this).tooltip('option', 'disabled'))
$(this).tooltip('option', {disabled: false}).tooltip('open');
else
$(this).tooltip('option', {disabled: true}).tooltip('close');
}).hover(function(){
$(this).tooltip('option', {disabled: true}).tooltip('close');
}, function(){
$(this).tooltip('option', {disabled: true}).tooltip('close');
});
Related to my other comment, I looked into the original code and achieved manual open/close by extending the widget and adding a autoHide option with version JQuery-UI v1.10.3. Basically I just remove the mouse listeners that were added in _create and the internal _open call.
Edit: Separated autoHide and autoShow as two separate flags as suggested by #MscG
Demo Here:
http://jsfiddle.net/BfSz3/
(function( $ ) {
$.widget( "custom.tooltipX", $.ui.tooltip, {
options: {
autoHide:true,
autoShow: true
},
_create: function() {
this._super();
if(!this.options.autoShow){
this._off(this.element, "mouseover focusin");
}
},
_open: function( event, target, content ) {
this._superApply(arguments);
if(!this.options.autoHide){
this._off(target, "mouseleave focusout");
}
}
});
}( jQuery ) );
Now when you initialize you can set the tooltip to manually show or hide by setting autoHide : false:
$(someDOM).tooltipX({ autoHide:false });
And just directly perform standard open/close calls in your code as needed elsewhere
$(someDOM).tooltipX("open"); // displays tooltip
$(someDOM).tooltipX("close"); // closes tooltip
A simple hotfix, until I have the time to do official pull request, this will have to do.
Some compilation from other SO questions.
Example
Show tooltip on hint click, and hide tooltip on elsevere click
$(document).on('click', '.hint', function(){ //init new tooltip on click
$(this).tooltip({
position: { my: 'left+15 center', at: 'center right' },
show: false,
hide: false
}).tooltip('open'); // show new tooltip
}).on('click', function(event){ // click everywhere
if(!$(event.target).hasClass('hint'))
$(".hint").each(function(){
var $element = $(this);
if($element.data('ui-tooltip')) { // remove tooltip only from initialized elements
$element.tooltip('destroy');
}
})
});
$('.hint').on('mouseout focusout', function(event) { // prevent auto hide tooltip
event.stopImmediatePropagation();
});