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.
Related
I'm trying to get a fade toggle to work. When you click on (+) two it is supposed to show two links and change to (-) two and when you press again it closes those links and goes back to (+) two. Right now, I can't get anything to happen when you press on the toggle.
<div id="ending">
An everyday snapshot of
<div class="toggle"><span style="font-size:11px">(+) </span>two </div> sfsfs
</div>
<div class="content">
sfs & sfsf
</div>
$(document).ready(function() {
$(".content").hide();
$(".toggle").on("click", function() {
var txt = $(".content").is(':visible') ? '(+) two' : '(-) two';
$(".toggle").text(txt);
$(".toggle").toggleClass('active');
$(this).next('.content').slideToggle(450);
e.stopPropagation();
});
});
https://jsfiddle.net/Dar_T/b5tbfn5g/
1) You actually have to reference/include the jQuery library for jQuery functions to work.
2) You had an improper selector.
Rather than $(this).next('.content').slideToggle(450);
just use $('.content').slideToggle(450); or $(this).parent().next('.content').slideToggle(450);
The content div is not a sibling of the toggle div.. so next() isn't going to find it. But if you back up to the parent of the toggle div, then the content div is a sibling, so next() will find it.....
Depending on the rest of the markup, the selector may need to be further altered, but that's the main issue with the function overall.
Seems to work with the selector fixed and the jQuery library actually included.
$(document).ready(function() {
$(".content").hide();
$(".toggle").on("click", function() {
var txt = $(".content").is(':visible') ? '(+) two' : '(-) two';
$(".toggle").text(txt);
$(".toggle").toggleClass('active');
$(this).parent().next('.content').slideToggle(450);
e.stopPropagation();
});
});
Updated Fiddle
I am attempting to loop a hover effect such that an image dances to the four corners of the site (top left corner -> top right corner -> bottom right corner -> bottom leftcorner -> then back up to the top left corner)
The way I am doing this is by adding a class, hoverleft, right, down, up, etc. and removing the previous class. The issue I have is that the dynamically added classes are not recognized after the page loads. I have been trying to work with the .on() function but have been having difficulty. Not sure why and pretty sure I am just missing something simple.
Here is what I have, HTML then JS: fiddle here: http://jsfiddle.net/5w0nk6j9/4/
<div class="bodycontainer">
<div id="kim">
<div id="dance" class="dancingkim">
<div class="header">
<h2 class="introheader">Hover original</h2>
</div>
<img src="http://placehold.it/240x208" />
</div>
</div>
$('#kim').hover(function(){
$(".header h2").text("Hover text");
});
$('#kim').hover(function(){
$(".dancingkim").css("cursor", "pointer");
});
$('.dancingkim').hover(function(){
$(this).addClass("hoverleft");
$(this).removeClass("dancingkim");
});
$('#kim').on('hover', '.hoverleft', function() {
$('#dance').addClass("hoverdown");
$('#dance').removeClass("hoverleft");
});
In place of hover, try using mouseover or mouseenter or mouseleave.
$('#kim').on('mouseover', '.hoverleft', function() {
$('#dance').addClass("hoverdown");
$('#dance').removeClass("hoverleft");
});
From the JQuery source code, hover is not included in the event list that triggered leading to JQuery .on()
Dynamically generated elements are referenced by using .on() but it should be implemented on the document body. The javascript traverses the whole document and adds the property to it.
So, instead of using :
$('#kim').on('hover', '.hoverleft', function() {
$('#dance').addClass("hoverdown");
$('#dance').removeClass("hoverleft");
});
Try this:
$('body').on('mouseover', "#kim", function(){
$(this).next().addClass("hoverdown");
$(this).next().removeClass("hoverleft");
});
I have the following html code:
<div class="card">
<img src="test.jpg" />
<p class="alt-text">Some Text</p>
<p class="actions" style="display: none;">Some Buttons</p>
</div>
And the following JS code
$(".card").on("mouseover", function(){
var $t = $(this);
$t.find(".actions").toggle();
$t.find(".alt-text").toggle();
});
If I hover over the Card-Div, the text under the image should change from "Some Text" to "Some Buttons".
Ok, if I hover over the image, its working, but if I go some pixels down (to the paragraph), the hover event is triggered again and the text switches again.
My question is: Why is the hover event triggert again and how can I prevent this?
EDIT:
Ok, I am so stupid.
The problem was, that if I toggle the paragraph, the paragraph gets hidden. Now the div isn't that height anymore, so I leave the div for some microseconds. But afterwards the second paragraph is shown, and the cards-div height becomes the old height. So the hover event is triggered again.
Now we have an endless loop :D
You need to use mouseenter, mouseover is a bubbling event which will be fired when you change over from one descendant to another one.
$(".card").on("mouseenter", function(){
var $t = $(this);
$t.find(".actions").toggle();
$t.find(".alt-text").toggle();
});
Demo: Fiddle
If you want to switch back also then use the hover() method
$(".card").hover(function (e) {
var $t = $(this);
$t.find(".actions").toggle(e.type == 'mouseenter');
$t.find(".alt-text").toggle(e.type == 'mouseleave');
});
Demo: Fiddle
See this fiddle, you can see how the mouseover is getting triggered by the descendant elements
You can use hover event as shown below
$(function(){
$(".card").on("hover", function(){
var $t = $(this);
$t.find(".actions").toggle();
$t.find(".alt-text").toggle();
});
});
JSFiddle Demo
I searched around net and tried many things but scrollTop is scrolling randomly.
I want to scroll within a div when clicked on links.
My div:
<div id="test" style="height:400px; overflow-y: auto;">
<img src="basjhdba1.jpg" id="item_1">
//longtext here
<img src="basjhdba2.jpg" id="item_2">
//longtext here
<img src="basjhdba3.jpg" id="item_3">
//longtext here
</div>
Three links:
Item 1
Item 2
Item 3
The onclick method:
changeItemDisplay: function(a)
{
var target = "#item_"+a;
$("#dishesresults").stop().animate({scrollTop: ($(target).position().top)+"px"}, 800);
}
This is not working correctly, but they have some pattern there for scrolling. Even if I click one link twice consecutively then also it is moving every time.
Don't know what is causing this.
Your div is scrolling randomly, because you don't check its position.
You need to know number of pixels that are hidden from view above the scrollable area (scrollTop) and current position of the $('#test') relative to the document (offset).
As a side note: better idea is to use jQuery's .click() method instead of binding event handler with onclick event attribute, and this is why.
JSFiddle (used Bram Vanroy template)
Item 1
Item 2
Item 3
<script>
$(function () {
$('.changeItem').click(function (e) {
e.preventDefault();
var target = $(this).attr('href');
$('#test').stop().animate({
scrollTop: $('#test').scrollTop() - $('#test').offset().top + $(target).offset().top
}, 800);
});
});
</script>
I have following code:
HTML:
<div class="one">Content</div>
<div class="two">Content</div>
I want to hide my second div when mosueleave event happen from first div and also the mouse don't have over second div.
Algorithm:
if ((mouseleave from div.one) && (mouse not on div.two))
hide (div.two);
How can I implement this snippet using jquery? please help me.
You can set a flag on the .two div that keeps track of the mouseover state. Then when the mouse leaves .one you check for this state and if it exists you hide the div. Like so:
$(".two").live("mouseenter", function(){
$(this).data("hover", true);
}).live("mouseleave", function(){
$(this).removeData("hover");
});
$(".one").live("mouseleave", function(){
if( !$(".two").data("hover") ) $(".two").hide();
});
enclose both divs in another, say, div class='zero'. so you would have something in your $(document).ready() like
$('.zero').live('hover', function() {
$('.two').show();
});
$('.zero').live('blur', function() {
$('.two').hide();
});
note: you must style="display: none" for div class='two' by default