I am working on a rotator using jquery ui and can get it to pause on hover with this:
$(document).ready(function(){
$("#rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#rotator").hover(
function() {
$("#rotator").tabs("rotate",0,true);
},
function() {
$("#rotator").tabs("rotate",5000,true);
}
);
});
This only problem is that it stops on the last item in the list and won't rotate through the first item unless I make it:
$(document).ready(function(){
$("#rotator > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#rotator").hover(
function() {
$("#rotator").tabs("rotate",0,true);
},
function() {
$("#rotator").tabs("rotate",5000,true);
}
);
});
but then the hover doesn't work.
Any ideas how to get it to cycle through the list and pause on hover?
For some reason I had a really old version of jquery and jquery ui. I updated to the version we are running on our site (1.7.2 and jquery ui 1.82). Could run the newest versions, but we have too many issues with legacy code.
guys!
I just commited an extension to make Pause on Hover for jQuery UI Tabs
jQuery UI Tabs Rotate: Pause on Hover
Enjoy it!
Related
I've a jquery dialog that contains a Kendo UI Grid.
$("#" + popupElementName).dialog({
modal: true,
open: function () {
//Kendo grid here ...
},
close: function (event, ui) {
$(this).dialog("destroy").remove();
}
});
If I click the X sign to close the dialog then open the popup again, I get 2 Kendo grids. I get as many grid as the number of times I closed and opened the jquery dialog.
After doing some researches, I've found out that I can initialize the dialog by using the command destroy. Unfortunately, it seems not to work. I'm still getting multiple grid.
Some posts have suggested to add remove. However, the problem with using remove is that the dialog doesn't work anymore because there is no more the div that's converted in dialog.
You should not initialize the grids on every open event.
var grid= $("#grid").data("kendoGrid");
if (!grid) {
//initalize if not already initialized
}
If not u should destroy kendo grids and clear the window on close and re-initialize the grids on every open
open: function () {
//Kendo grid here ...
},
close: function (event, ui) {
$("#grid").data("kendoGrid").destroy();
$(this).empty();
}
I am trying to do something similar to what this page is doing.
The only difference is that the jQuery UI dialog I use is modal.
I tried editing the script in the page to make the jQuery UI dialog modal.
$("#dialog-modal").dialog(
{
modal: true, // added this line to make dialog modal
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
maxHeight: 300,
initCallback: function()
{
this.code.set('<p>Lorem...</p>');
}
});
}
});
I then clicked on the insert link button(the 3rd button from the right in the toolbar). This shows another jQuery UI modal dialog with a form.
I noticed that I cannot get the focus of the text fields. I cannot type anything into them.
The code works fine if I don't make the the first dialog modal.
Any idea how to circumvent this?
I ran into the same problem. This behavior is a result of jQuery UI handling focusin.dialog event on the document, and putting the focus back to the last jQuery UI dialog in the stack (using selector ".ui-dialog:visible:last"). I solved the problem by calling this code right after my modal dialog was created:
setTimeout(function() {
$(document).unbind("focusin.dialog");
}, 100);
I used setTimeout, because jQuery UI also uses setTimeout to bind this event. I was able to fix it thanks to this answer: jQuery UI Focus Stealing. I also tried upgrading to jQuery UI 1.11.4 but that does not solve the problem.
I'm using jQuery BlockUI Plugin, and it pops up an image over the homepage. I want to be able to click outside of the image anywhere and be able to close it on smart phones.
I set this code, and it only works on Desktop, but NOT on Mobile:
$(document).ready(function() {
$('#demo9').click(function() {
$.blockUI();
$('.blockOverlay').attr('title','Click to unblock').click($.unblockUI);
});
});
Try binding the event with .on() in case there is a timing issue where the overlay does not exist yet:
$(".blockOverlay").on("click", function(){ $.unblockUI });
or
$(document).on("click", ".blockOverlay", function(){ $.unblockUI });
Also, does it make any difference if you use vclick instead of click?
Using touchstart with click works on Iphone, Kindle, Ipad
$('.blockOverlay').attr('title','Click to unblock').on('click touchstart',$.unblockUI);
how can focus on first input in active content when it changed ?
$( ".selector" ).accordion({
activate: function(event, ui) {
$(ui.newPanel).find("input:first").focus();
}
});
Originally answer was based on the jQuery Accordion Demo, but the API has changed in the meantime.
I'm working with JQuery UI control and I had a trouble with focusing the first input of my page. Here is the solution:
setTimeout(function () { $("#dvCreateItem").find("input:first").focus(); }, 1000);
I'm attempting to create a web page using the jQuery ui lib. My design uses a jQuery ui autocomplete on an input field at the top of a form. Immediately below this autocomplete input form are some jQuery sliders. The issue is that when the auto complete box populates the results are displayed behind the handle of the slider control. This comes from the way that jQuery builds the sliders which makes pieces of them have a z-index of 3. The z-index of the drop down portion of the jquery autocomplete control appears to always be set to 1. I tried increasing the z-index of the input element that is being auto completed but that doesn't seem effect the z-index of the element jquery creates for the autocomplete drop down. I also tried writing my own javascript to get the drop down menu element by class(it is a ul) and manually set it's z-index. This doesn't seem to work either. I'm assuming this means, somehow the jQuery code is overwriting the z-index change that I'm making. This isn't a browser bug as it is a problem on Firefox, Chrome, Safari and IE. It is a problem with the actual z-index jQuery gives the drop down box (UL element).
Does anyone have a solution to this problem? How does one generally go about fiddling with elements that jQuery automatically generates to build it's controls.
Using the open and close events to modify the z-index worked for me:
$( "#tags" ).autocomplete({
source: availableTags,
open: function(event, ui) { $(".ui-slider-handle").css("z-index", -1); },
close: function(event, ui) { $(".ui-slider-handle").css("z-index", 2); }
});
See a demo here.
According to http://bugs.jqueryui.com/ticket/5238, there seem to be 2 solutions for this.
"Changing the z-index to 3 seems to fix this completely."
You can do this on your css, you just need to add "!important" to override the value the library sets:
ul.ui-autocomplete {
z-index: 3 !important;
}
Or, "set position:relative on autocomplete input, so that .zIndex() can actually compute the z-index."
This is what I did to set the z-index for autocomplete:
$("#myInputId").autocomplete({
open: function () { $('.ui-autocomplete').css('z-index', 50); },
source: function (request, response) {
$.ajax({
url: "some url",
type: "POST",
dataType: "json",
data: { /* some code... */ },
success: function (data) { /* some code... */ }
})
}
});