Develop Reference

Jquery mouseover and mouseleave

I have one problem about mouseover and mouseleave function.
In this DEMO page you can see there is a picture. When you hover over muse then you can see the hovercard. The hovercard inside have click to follow link. But you can not click that link because when you mouseleave on that link the hovercard to be closed. How can I solve this problem. Is anyone can help me ?
The Jquery code is here:
$(document).ready(function(){
function showProfileTooltip(e, id){
e.append($('.p-tooltip').css({
'top':'20',
'left':'80'
}).show());
//send id & get info from go_card.php
$.ajax({
url: 'go_card.php?uid='+id,
beforeSend: function(){
$('.p-tooltip').html('Yükleniyor..');
},
success: function(html){
$('.p-tooltip').html(html);
}
});
}
function hideProfileTooltip(){
$('.p-tooltip').hide();
}
$('.summary a').mouseover(function(e){
var id = $(this).attr('data-id');
showProfileTooltip($(this), id);
});
$('.summary').mouseleave(function(){
hideProfileTooltip();
});
});
and HTML code:
<div class="paylasilan-alani">
<div class="paylasan-profil-fotosu profile">
<div class="summary" id="summary1" data-id="7"><img src="http://www.designbolts.com/wp-content/uploads/2013/11/Frozen-Movie-poster-payoff-Wallpaper-HD1.jpg" width="64" height="64"/></div>
</div>
<div class="paylasilan">Some text here.</div>
</div>

The issue is the .mouseover() function which is triggering the ajax call over and over.
per the documentation for .mouseover():
This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the Inner element in this example, a mouseover event will be sent to that, then trickle up to Outer. This can trigger our bound mouseover handler at inopportune times. See the discussion for .mouseenter() for a useful alternative.
instead switch to .hover(). You can use a callback to handle the mouseleave() functionality too:
$('.summary a').hover(function(e){
var id = $(this).attr('data-id');
showProfileTooltip($(this), id);
}, function(){
hideProfileTooltip();
});
Also the plugin you are using which is adding inline styles to .summary and the class scroll-to-fixed-fixed is setting .summary to z-index:0. The z-index property is inherited by it's children and this is causing your pop up to sit behind other elements. I would either look through the plugin's JS file and remove this or override it in your CSS by adding:
.summary{
z-index: 1 !important;
}

JSBIN
function hideProfileTooltip(){
$('.p-tooltip').hide();
}
$('.summary a').mouseover(function(e){
var id = $(this).attr('data-id');
showProfileTooltip($(this), id);
});
$('.summary').mouseleave(function(){
hideProfileTooltip();
});
This is your issue code. To achieve your purpose. The key is the.p-tooltip doesn't disapper when trigger the function ummary.mouseleave if your cursor move to the .p-tooltip,but when your cursor move to other place. The .p-tooltip should be disappear.
So I create a JSBIN to simulate your issue. The jsbin simply simulates your problem. It's just a way with a HTML structure to fixed your issue. I believe there is another way to resolve it. But use this structure is a brief way to make it. So, I advise you should repaint your HTML, specially pay more attention the parent & child relation.
That's all.

You need to specify the mouseleave function inside the mouse enter function. This way, after focusing on the element, it hides if the user leaves the element.

Jquery toggle activating on multiple elements instead of the element specified

alrighty Ive got what I hope is a rather easy question today for people knowledgeable in jquery. I have an toggle that activates on clicking a specific element, in this case I have targeted my logo image with an id of #logobutton. it works wonderfully however theres a problem, the animation also activates whenever I click on any and all other links on the page and even some random div boxed (like my nav bg). please note im very new to this javaScript jazz so I may be missing something you would consider quite obvious. thanks for the help!
here is the fiddle with all relevant code http://jsfiddle.net/tRf36/1/
jquery:
!--jquery script, must be above all jquery elements-->
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<!--script for bg toggle-->
<script type="text/javascript">
$( document ).ready(function() {
$("#logobutton").click(function() {
$(".galbox").toggleClass("galbox-change");
});
});
</script>
<!--bg fade hide on load-->
<script>
$(document).ready(function(){
$("#gallerybox").fadeTo(3000, 0.00, function() {
$("#gallerybox").fadeTo(1000, 1.00);
});
});
</script>
hopefully someone can see if I have something targeted incorrectly or whatever is causing the issue of my generic rather than specific selection of clickable area to activate this bg animation.

My previous answer was completely off base, sorry for that. Looking at the jsfiddle that you posted it appears that you have the logo button like this <button ... /> the browser is then ignoring the /> and just wrapping everything in a button. So that means that both the gallery box and the nav bar are surrounded by the button that is activating the animation. Changing the button to be like this should fix it:
<button type="button" class="logo" id="logobutton" value=""></button>

close <button> tag properly using </button>
All elements below button are treated as children if you do not close properly.

Two aspects conspire to cause the effect:
You have nested your nav bar divs inside the #logobutton button.
Event bubbling causes events triggered on an embedded element to eventually reach the #logobutton button, being processed by the registered event handler.
A solution is to check for the triggering element of the click event:
$("#logobutton").click(function (eve) {
if ($(eve.target).attr("id") === "logobutton") {
$(".galbox").toggleClass("galbox-change");
}
});
You can test this modification with this fiddle.
You can learn more about event bubbling in particular and event processing in browsers following these links:
quirksmode (ppk)
MDN

Javascript Mouseover Event Acting Squirrely

I'm trying to show a div container with child elements and just have the top portion of the container shown until the mouse moves over it and then show the entire container with the child elements with the content. This sorta works like I'm wanting it to, but the problem is that if you move the mouse over any of the child elements the entire main container slides back up and then slides back down again. I'm trying to make it so that the entire container slides down on MouseOver and stays down until MouseOut when it should slide back up.
<div onmouseover="$('#id_content').slideDown('fast', function(){ $(this).css('display', 'block'); $(this).css('visibility', 'visible'); });"
onmouseout="$('#id_content').slideUp('fast', function(){ $(this).css('display', 'none'); $(this).css('visibility', 'hidden'); });">
Title
<BR>
mm/dd/yyyy hh:mm - hh:mm
<div id="id_content" style="visibility: hidden; display: none;">
Description
<BR>
Content
</div>
<span class="commands"> <!-- Goes in the top right hand corner of the main container -->
<span class="delete" onclick="delete_entry('record_id')">X</span>
</span>
</div>

jQuery has a function for that : hover.
It also would allow you to avoid inlining the event handlers :
<script>
$('#a').hover(function(){
$('#id_content').slideDown('fast', function(){ $(this).css('display', 'block'); $(this).css('visibility', 'visible'); });
}, function(){
$('#id_content').slideUp('fast', function(){ $(this).css('display', 'none'); $(this).css('visibility', 'hidden'); });
});
</script>
Demonstration

It looks like you are using JQuery anyway, so don't use onmouseover events.
Use the JQuery hover method instead: http://api.jquery.com/hover/
It allows you to provide a function when the mouse enters and object and when a mouse leaves an object.
Whilst youre at it I'd replace the onclick event with JQuerys .click() method. http://api.jquery.com/click/

You want mouseenter and mouseleave. They are combined by jQuery in hover.
In JavaScript you can detect when an onmouseout is an onmouseleave or whether you're just mousing over a child element. Check if event.relatedTarget is a child element.

How to perform: onClick Javascript, hide a div with transition effect

This is a question that is related to a previous question of another member which can be found here.
This is the Javascript function to hide a div (which is an answer to the other member's question):
function hide(obj) {
var el = document.getElementById(obj);
el.style.display = 'none';
}
The HTML is:
<div id='hideme'>
Warning: These are new products
<a href='#' class='close_notification' title='Click to Close'>
<img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="hide('hideme')" />
</a>
</div>
My followup question to this is: how can I add a cool effect of transition? The result will be the div 'hideme' would close slowly. Is there a work around for this?
Thanks so much everyone! It would be highly appreciated!
Note: I'm a noob with Javascript. 0-0

$("#"+el).fadeOut(500);//el must be the id of the element

If you're using jQuery
function hide() {
$(this).parent().fadeOut();
}
As this is triggered by an event the 'this' variable will be set to the element from which it came, as you want the parent element to vanish when it's clicked this will do the trick
EDIT: For this to work you may have to play with your HTML and how many $(this).parent().parent()... you need but this would be the best way to go about it, then you don't need to pass the ID around
EDIT 2: So .parent() selects the element containing the selected element, so in this case $(this) refers to the button that was clicked as that's where the click event came from.
So $(this).parent() refers to the container element, in this case the a element and therefore the $(this).parent().parent() refers to the div element which you want to hide.
So you could give the image a class of 'closable' then do the following
$('.closable').click(function() {
$(this).parent().parent().fadeOut();
}
This means whenever you click something with the class closable it will go up the DOM tree two elements to (with .parent().parent()) and then fade it out.
This will allow you to remove the on click event from the image, you just need to put the handler above in the jQuery document.ready function which looks like:
$(document).ready(function() {
//Click function here
});

A popular choice for this would be JQuery UI's effect method.
With this, you can write some very simple Javascript to hide your div in a stylish manner, for example:
function hide(obj) {
$(obj).effect("scale");
}
EDIT:
Here's an example jsFiddle

Use jQuery to do transition effects:
$(function(){
$("a.close_notification").click(function(e){
e.preventDefault();
// stop other animations and hide, 500 milliseconds
// you can use the function fadeOut for that too
$("#hideme").stop().hide(500);
});
});

Do I have to duplicate this function? - jQuery

I'm using this function to create an transparent overlay of information over the current div for a web-based mobile app.
Background: using jQTouch, so I have separate divs, not individual pages loading new.
$(document).ready(function() {
$('.infoBtn').click(function() {
$('#overlay').toggleFade(400);
return false;
});
});
Understanding that JS will run sequentially when i click the button on the first div the function works fine. When I go to the next div if I click the same button nothing "happens" when this div is displayed, but if i go back to the first div it has actually triggered it on this page.
So I logically duplicated the function and changed the CSS selector names and it works for both.
But do I have to do this for each use? Is there a way to use the same selectors, but load the different content in each variation?

Would something like this work? I'm assuming what you want is for different buttons to call toggleFade on different overlay divs.
function makeOverlayHandler(selector) {
return function() {
$(selector).toggleFade(400);
return false;
}
}
$('button selector').click(makeOverlayHandler('#overlay1'));
$('another button selector').click(makeOverlayHandler('#overlay2'));
You could also change makeOverlayHandler's selector parameter to a jQuery object instead of a selector and call it like this: makeOverlayHandler($('#overlay1')).

This best way to do this is to make it all relative, so say you have markup like this:
<div class="container">
<div class="overlay">Overlay content</div>
<button class="infoBtn">Click to show overlay</button>
</div>
Then you can find the overlay for this button realtively, like this:
$(function() { //equivalent to $(document).ready(function() {
$('.infoBtn').click(function() {
$(this).closest('.container').find('.overlay').toggleFade(400);
return false;
});
});
You can optimize this further, e.g. .children('.overlay') if the overlay is always a direct child of container. This goes from the current button (this), finds the .container it's in using .closest() and then finds the .overlay inside of it using .find(). With this approach you have one small bit of code to handle all your bindings, much easier to maintain :)