I am looking to build a tooltip that allows the user to click links within that tooltip to allow them to navigate to various sections of the site. My problem is that the tooltip disappears when I leave the a with my mouse? what I want is for the tool tip to disappear if I change to a new a or click close on the tooltip, my jquery is as below currently,
$(document).ready(function() {
/*
* Rollover jobwall logo and show job tooltip
*/
$('ul#jobs li a').mouseenter(function(){
var $this = $(this);
$this.addClass('active');
$.ajax({
type: 'POST',
url: '/jobwall/job_tooltip',
data: 'employer_id='+$(this).attr('rel'),
success:function(html) {
//alert($this);
$this.tooltip({ effect: 'slide'});
}
});
}).mouseleave(function(){
$(this).removeClass
$('#tooltip').remove();
});
});
How can I make it so that the tooltip appears on mouse enter of an a button only disappear when the user closes it through clicking a close button, or moving to a new a allowing the user to actually enter the tooltip without it disappearing.
I would look at hoverintent instead of mouseenter and mouseleave.
On the mouse leave event, you need to check to see if the mouse is located in the tooltip. If not, you can close it.
Moving $('#tooltip').remove(); to the top of the mouseenter function should do the trick. This will not remove the tooltip when the mouse leaves and will remove it if it exists when a new a is entered.
This assumes that 1) you already have a close function and 2) $('.active').append(html); creates #tooltip.
As commented by Chris though, this may be frustrating for users.
Related
I have this code for toggling menus on my site. It will open a menu on click, close others open when you click another and close them all if you click outside.
The issue is, I'm now using this for my search bar to appear too, but if you click inside the search box it vanishes - woops. Would it be possible to amend the hiding code to detect if the user wasn't clicking inside a specific area of the code?
// navbar toggle menu
$(document).on('click', ".toggle-nav > a", function(event) {
event.preventDefault();
event.stopPropagation();
var $toggle = $(this).closest('.toggle-nav').children('.toggle-content');
if ($toggle.hasClass('toggle-active'))
{
$($toggle).removeClass('toggle-active');
}
else
{
$(".toggle-content").removeClass('toggle-active');
$($toggle).addClass('toggle-active');
}
});
// hide the toggle-nav if you click outside of it
$(document).on("click", function ()
{
$(".toggle-content").removeClass('toggle-active');
});
Instead of using click, this uses mouseup. If the target is, for example #search-bar, it won't remove toggle-active from toggle-content elements.
$(document).mouseup(function(e) {
if (!$(e.target).is('#search-bar')) {
$(".toggle-content").removeClass('toggle-active');
}
});
You can see it in action with this jsFiddle.
Hopefully this helps.
So this is what i want, take a look jsfiddle for example, I want 3 boxes and when you hover over them another box appears that goes away when you hover away from that box or main box but not when your mouse is in between them the empty space.
Once you click the new box the box remains there until:
user clicks anywhere else.
or an close text is clicked
http://jsfiddle.net/T5QHn/4/ Updated
var menu = $('.menu'), body = $('body');
menu.children('.box').hide();
body.click(hideIt);
menu.hover(showIt,hideIt);
menu.click(keepIt);
function showIt() {
$(this).children('.box').stop().fadeIn();
}
function keepIt() {
//something efficent and not illogical..
}
function hideIt() {
//i have a feeling this depends on keepIt and insn't just inverse of showIt
$(this).children('.box').stop().fadeOut();
}
use mouseenter and mouseleave on the parent, instead of hover.
Apply the click to hide all boxes to the body, then, on the containers put a click handler with event.stopPropagation
Updated fiddle: http://jsfiddle.net/moagrius/fsPd3/1/
I'd like to disable the click + drag on a link
When you press your left click of the mouse on a link in a web page, and your drag this one, you can move the link and, by example open a new tab with. I'd like to disable this on my page, javascript or css.
On the website 500px, they disabled it:
http://500px.com/photo/31922503
By example on this photo, you can click the link (the photo), but it's not possible to drag the link. It's also good to avoid the drag and drop of pictures.
So if I disable the link, I need to not disable the container.
I disable the link stopping dragstart on them (Thanks to "KevinIsNowOnline"):
$('div#multislides').on('dragstart', 'a', function () {
return false;
});
But, I need to drag/swipe the container! So I'm looking for a solution to do that.
Without links, works:
http://jsfiddle.net/Ff3Ts/
With links, doesn't work:
http://jsfiddle.net/Mfmfz/
On examples, you are able to drag/swipe the container when there is no link, but it's not working with links.
Any idea?
Thanks.
Hi I have checked the site you posted an was able to observe what you want to achieve.
Please see code below:
document.getElementById('notClickable').ondragstart = function() { return false; };
//upon start of drag of the selected image, it immediately returns false, or cancels the event.
Check out this jsFiddle Link for more information.
I have a jQuery dropdown menu on the same page as a jQuery search box. When the user hovers over an image, the menu appears and then they move away it disappears.
I want to make it so the dropdown menu doesn't appear when the user hovers over the image when they are searching. How can I do this?
I hope you can understand what I'm trying to describe.
My code is;
$("#l").hover(function(){
$("#l ul").show();
},function(){
$("#l ul").hide();
});
$("form").submit(function(event){
event.preventDefault();
if($("#s").val().length>0){
$.ajax({
type:"GET",
url:"/"+t+".php?q="+q,
dataType:"html",
success:function(c){
by searching do you mean when the form is submitted? Anyway, you can unbind the hover by
$("#l").unbind('mouseenter').unbind('mouseleave')
I am using JQuery to make a 'Read More' button. When someone clicks onthe button a popup appears. This popup is actually a hidden div that appears. My problem is that while I click the button I want the div to appear from the button and when I click the cross mark on the popup it sould go back to the same button where it originated from but the result that I am getting is, when I click on the button the div appears from it whereas when I click cross it goes to the 'read more' button which I clicked the first. Please help me fix this. I guess there is a small glitch in my code. I have it on fiddle http://jsfiddle.net/shivkumarganesh/qLEbD/
Check this fiddle: http://jsfiddle.net/6uLF7/
The problem was with the local scope of the variables that store the target left and top offsets.
CHANGES
Added 2 declarations at the top:
var readMoreInfoTop = 0;
var readMoreInfoLeft = 0;
Removed var keyword from the top and left assignments inside the click handler
readMoreInfoTop = readMoreOffset.top + 10;
readMoreInfoLeft = readMoreOffset.left + 10;
Each time you open a button, you are adding another listener to the close button. You could unbind the close listener before rebinding it eg. http://jsfiddle.net/qLEbD/54/
or better yet...
bind the close listener once (outside the button click function) and store the left position on button click eg.
//doc ready...
function() {
var leftPosition;
$('.button').click(function() {
//animate popup to open
leftPosition = $(this).offset.left;
});
$('#close').click(function() {
//animate popup to close using leftPosition
});
}();