Develop Reference

difficulties with div following cursor

I'm trying to show a tooltip whenever the person hovers over an image, I've also made the tooltip follow the mouse, and the tooltip will disappear whenever the person leaves the area where the image is located. This works fine and all, but when I move the cursor to the right when the tooltip is following it, it'll start flickering. I know that the cause of this is because the cursor is leaving the image area and entering the tooltip area for a little amount of time. Got no idea how to fix this. Have a look at my code:
HTML:
<img id="mainImage" src="https://i1.wp.com/historiek.net/wp-content/uploads-phistor1/2015/09/Het-nieuw-logo-van-Google-e1441130561430.jpg?fit=663%2C282&ssl=1">
<div id="toolTip">This is the logo of google</div>
JS:
$('#mainImage').hover (
$('#mainImage').on('mousemove', function(e) {
$('#toolTip').css({
'left' : e.pageX,
'top' : e.pageY,
'display' : 'block'
});
}),
$('#mainImage').on('mouseout', function() {
$('#toolTip').css('display', 'none');
})
);
Thanks in advance.

In your CSS for this page, set pointer-events: none on your tooltip:
#toolTip {
pointer-events: none;
}
This will cause click and hover events to be ignored, so the tooltip will no longer steal the hover event from the element underneath it.

How to prevent jquery hover effect from activating on and off hover

I'm using blast.js and my hover effect triggers when you move the mouse over the element and when you move it out of the element. I want it to behave like a normal hover effect. I know that the hover effect usually is set up like:
$('h1').hover(function(){
//code here
}, function(){
//code here
});
but I'm not sure what I would put in the second function when using blast.js, to prevent it from happening twice.
I have a fiddle, but I don't know how to make blast work on the fiddle.
DEMO
$(function() {
$('h1').hover(function() {
// Blasts the title
var chars = $('h1').blast({
delimiter: 'word'
});
// Animation character per character
chars.each(function(i) {
// Initialization of the position
$(this).css({
position: 'relative',
left: 0
}).delay(i * 45).animate({
left: '50px'
}, 300).delay(200).animate({
left: 0
}, 300);
});
});
});

You can use .mouseover() for when the cursor enters the object and .mouseout() for when the cursor leaves the object.
These are JQuery functions based on HTML events. There are also other events like mouseenter and mouseleave, you can find them in W3Schools.

You should add param to your function:
$('h1').hover(function(e) { ... });
and call inside of the body:
e.preventDefault();

how to get JQeasy Slide panels to not overlap?

I am using jquery slide found here: http://web.archive.org/web/20150227082803/http://www.jqeasy.com/jquery-slide-panel-plugin
The problem I am having is that if you have multiple triggers and panels the panels will overlap each other rather then leave the panel and open the new panel.
Now I am using the "clickOutsideToClose: true" function which does work but not if you click another tab directly. Here is the script in use:
<script>
$('#panel1').slidePanel({
triggerName: '#trigger1',
position: 'fixed',
triggerTopPos: '0px',
panelTopPos: '0px',
panelOpacity: 1,
clickOutsideToClose: true
});
$('#panel2').slidePanel({
triggerName: '#trigger2',
position: 'fixed',
triggerTopPos: '55px',
panelTopPos: '0px',
panelOpacity: 1,
clickOutsideToClose: true
});
</script>
The code is being used here in the top left corner so you can test and see what I mean: http://w11.zetaboards.com/SWGTest/index/
Basically I just want it so the panel's don't overlay each other and when you click on another trigger and one is already active the already active one will close and the new one will open.
Any help would be much appreciated.
Thanks,
Dylan

The Problem is z-index.
Both z-index are 100.
Keep like this if click on panel1, the panel1 z-index to be 105 and panel2 z-index to be 100. If click on panel2, the panel2 z-index to be 105 and panel1 z-index to be 100.

JQuery animate firing late in Chrome

I have an image sprite which, on mouseenter, changes the background position and moves text over. On mouse leave, the background position and text both move to the left to display the original image. The text is a seperate element which comes from the right to sit over the image once the position has changed.
The mouseenter part works perfectly, with the image and text both scrolling to the left at the same time, but on mouseleave, however in chrome (and what appears to be only chrome), the text will move first, then the image will follow later, the image animation is firing much later than the text.
I've read a few issues with .animate() in chrome, but none of the issues seem to be related to this.
Is there anything obviously wrong with this? Or is there simply a better way of doing it
//animation on mouse enter
$("#featuredImage").mouseenter(function(){
$(this).animate({ backgroundPositionX:"100%" });
$("#featuredText").show("slide", { direction: "right" });
});
//animation on mouse leave
$("#featuredImage").mouseleave(function(){
$(this).animate({ backgroundPositionX:"0%" });
$("#featuredText").hide("slide", { direction: "right" });
});

Try hover see If this helps :
$("#featuredImage").hover(function(){
$(this).animate({ backgroundPositionX:"100%"});
$("#featuredText").show("slide" ,{ direction: "right"});
},function(){
$(this).animate({ backgroundPositionX:"0%" });
$("#featuredText").hide("slide",{ direction: "right" });
}
);

Element animates (slides) in and pushes element across

I have a div panel that is sliding out on click.
I have a title in the center of the page and what I'm looking for is when the panel slides out, it pushes the title along with it when it hits it, and when it clicks back it pulls the title back to the original position.
Is this possible?
I'm using Ajaxify which I've added the slide in/out transition to so unsure how useful it is, but here's an example:
transition_in = function () {
if (!r(".panel-slide .close").length) {
r(".panel-slide").animate({
marginLeft: "20%"
}, 1e3, "easeInOutCubic")
}
};