The problem I'm facing is on this page here: http://opportunityfinance.net/test/default.aspx?id=6566
Basically, when you mouse over the images, sometimes the tooltip doesn't go away. How can I be sure that all tooltips are hidden before showing the next tooltip (when they mouse over another image)??
Here's the code I am using:
$(document).tooltip({
track: true,
show: {
effect: "puff",
delay: 250
},
hide: {
effect: "explode",
delay: 0
}
});
Quite frankly, the track: true doesn't seem to work initially either, you have to move your mouse over the image to get it tracked to the mouse.
I have my HTML code set up like so (for each image on the page):
<div style="display: inline-block; cursor: pointer;" class="images" title="Click to Download {FileName}"><img src="{image path}" /></div>
Any help would be greatly appreciated.
Related
I'm looking to add a nicer effect to a jQuery Content slider which uses tabs.
At the moment it uses 'opacity' which is really ugly.
Here is my code;
$('#featured').tabs({
fx:{
opacity: "toggle"
}
}).tabs('rotate', 5000, true);
Check out http://www.jsfiddle.net/cxNj8/4/
Is it possible to add a nicer fade like 'fade' in jQuery cycle?
(note: I've added the cycle library to the jsfiddle example)
jQuery UI tabs doesn't seem to support "crossfading", only "fade out" then "fade in" with a blank gap between them.
However, you might try the Flowplayer jQuery plugin which has an example of doing cross-fading tabs in a slideshow that is similar to your example:
http://flowplayer.org/tools/tabs/slideshow.html
$('#featured').tabs({
fx:{
height: "toggle",
opacity: 'toggle',
duration: 600
}
}).tabs('rotate', 5000, true);
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... */ }
})
}
});
I'm using the jquery ui dialog for a modal popup dialog. It's working great in Firefox/Chrome but terrible in ie6.
Problem:
When I show the dialog in ie6, the browser window grows and automatically scrolls down to the bottom. The height increase and automatic scroll-down is equal to the height of the jquery dialog.
I can scroll up and then use the dialog as normal, but the behavior where it grows the window and drops is maddeningly unacceptable.
Here is how I'm launching the window:
<div id="dialogWindow"></div>
...
$(document).ready(function() {
var $dialog = $("#dialogWindow").dialog({
autoOpen: false,
modal: true,
minWidth: 560,
width: 560,
resizable: "true",
position: "top"
});
$('.addButton').click(function(e) {
e.preventDefault();
$('#dialogWindow').load('http://myurl');
$dialog.dialog('open');
});
});
I am already using the bgiframe plugin for jquery which is key for ie6 overlay issues. But this seems unrelated to that. Has anyone seen this before and found a work around?
I've seen this behavior before and it is usually caused by the overlay. When you use the {modal: true} option an overlay is created and rendered with bgiframe support if the plug-in is loaded.
First off, try turning {modal: false} and see if you aren't getting page blow-out then we know it's the overlay.
there are a few things to check if that is the culprit;
check that the styles for the overlay are loading correctly, you'll need to include the jquery-ui dialog.css
try experimenting with position: and float: styles
try moving your dialog markup just above the < / body> tag, allowing the modal overlay to escape correctly.
I had a similar problem at one point.
$('.addButton').click(function(e) {
e.preventDefault();
$('#dialogWindow').load('http://myurl');
var y = window.pageYOffset;
var x = window.pageXOffset
$dialog.dialog('open');
window.scrollTo(x, y); // horizontal and vertical scroll targets
});
What the above should do is grab your current scroll coordinates and saves them. Once the dialog opens you then scroll back to the prior position in memory. Should be near instant and unseen by the user.
I am trying to make a div that slides out nicely when you mouse over a "trigger". It is appearing in full, then quickly disappearing and sliding out again. I can't seem to figure out the reason for this behavior.
If needed I can put a sample up in a bit.
Test case is up here. This is happening on all major browsers except IE6.
HTML:
<div class='wrap'>
<div id='navtitle'>
NAV>>
</div>
<div id='nav'>
<div id='navlist' class='rounded curvyRedraw'>
<div class='top'><div></div></div>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Singles</a></li>
<li><a href='#'>Supplies</a></li>
<li><a href='#'>Cart</a></li>
</ul>
</div>
</div>
</div>
Javascript:
$(document).ready(function (){
$('#navlist').hide();
$('#navtitle').bind("mouseenter", function(){
$('#navlist').show('slide');
});
$('#nav').bind("mouseleave", function(){
$('#navlist').hide('slide');
});
I think some of the problems are due to the focus changing as the div slides out, resulting in the handlers being invoked as focus changes, though I could be wrong on this. It might be because of how jQuery handles cross browser mouse events (not all browsers have the same events so jQuery might be approximating them). I was able to get it to "mostly" work by applying the mouse event handlers to handle a single event and using callbacks to make sure that only one is live at any given time so there is no switching back and forth between them. Note I had to give explicit direction/speed for hide or it simply disappeared. Not sure why, though it might have something to do with how my example is set up and the div simply disappearing once the left edge of the list elements are off the page.
$(function() {
$('#navlist').hide();
$('#navtitle').one('mouseenter', showOnEnter);
});
function showOnEnter() {
$('#navlist').show('slide', function() {
$('#nav').one('mouseleave', function() {
$('#navlist').hide('slide', { direction: 'left' }, 1000, function() {
$('#navtitle').one('mouseenter',showOnEnter);
});
});
});
}
It would help to see an example. The first thing that sticks out is the >>. Any change when you remove them? It shouldn't be an issue (< is more of a problem for browsers), but figured I'd ask.
I have a jQuery UI dialog which hosts a number of buttons.
I would like to have keyboard control (tab-navigation) on these buttons, so on the open event handler for the dialog, I set the first button to focused.
I can visibly see this works, and also verify it using document.activeElement, but the focus is then stolen and something else gets focus.
By this time, I don't know how I'm supposed to see what has focus as I don't have any further hooks.
Has anyone else noticed a similar problem?
In case you're interested, my code is this (amended to add Focus as described below)
in doc.ready - note I've also added jQuery Buttons to it - but they don't seem to respond to keyboard events AT ALL - but that's a separate question.
$("#dialogSearchType").dialog
(
{
bgiframe: true,
height: 180,
width: 350,
modal: true,
autoOpen: false,
show: 'drop',
hide: 'fold',
buttons: { "Street": function() { HandleSearchStreetClick(); $(this).dialog("close"); },
"Property": function() { HandleSearchPropertyClick(); $(this).dialog("close"); }
},
focus: function(event, ui) { $("#btnSearchTypeProperty").focus(); }
}
);
<div id="dialogSearchType" class="searchDialog" style="width: 280px; display: none" title="Search For..." onkeyup="HandleSearchTypeDialogKeyUp(event)">
<span>What would you like to search for?</span>
<br />
<input type="button" tabindex="1" id="btnSearchTypeStreet" class="button" value="Street" onclick="HandleDialogSearchStreetClick()" />
<input type="button" tabindex="2" id="btnSearchTypeProperty" class="button" value="Property" />
</div>
As you can see I've tried adding event handlers along the way, but nothing happens!
Try using the focus event handler instead of the open event handler and see if that helps. I think it's probably more correct since, unless the dialog is modal, you probably want the default button to get focus each time the dialog gets focus anyway, not just when it opens. If that doesn't work, then I'd suggest you add the code to your question.
Okay, I see what the problem was.
The dialog is set as Modal.
jQuery will be intercepting the keyboard events at the document level, and cancelling them.
I think that sucks, so am trying a workaround to destroy this event handler and add my own.
PS If anyone knows how to do this off the top of their head, let me know!
Here you can find an interesting solution that worked for us
jQuery UI Focus Stealing