I have a list of <p class="results"> that jQuery is set to display a hidden <div> at the .hover() event:
<p class="results">item1</p>
<p class="results">item2</p>
<p class="results">item3</p>
...
<div id="hidden">My popup here</div>
...
<script>
$(".results").hover(function() {
$('#hidden').html(function() {
[...put html here...]
}).fadeIn(200);
}, function() {
$("#hidden").hide();
})
</script>
The problem is that (I assume) since I have a 200ms fade in if the user hovers from item to item quickly then leaves the <p> altogether, the second function to hide the <div> does not fire. I am pretty sure I need to add some code with the .stop() method somewhere in there, but not sure how to implement it. Any ideas?
You almost had it:
<p class="results">item1</p>
<p class="results">item2</p>
<p class="results">item3</p>
...
<div id="hidden">My popup here</div>
...
$(".results").hover(function() {
$('#hidden').html(function() {
[...put html here...]
}).fadeIn(200);
}, function() {
$("#hidden").stop().hide(); // <- important bit here
}
try:
<script>
$(".results").hover(function() {
$('#hidden').stop().html(function() {
[...put html here...]
}).fadeIn(200);
}, function() {
$("#hidden").stop().hide();
}
</script>
What about mouseenter, mouseleave?
http://jsfiddle.net/Yxv25/
$(".results").on('mouseenter',function() {
$('#hidden').fadeIn(200);
}).on('mouseout', function() {
$("#hidden").hide();
})
EDIT:
Or setting a timer, http://jsfiddle.net/Yxv25/1/
I was not quite sure which one you needed.
Related
I need to make a few buttons pop different menus, but I can't seem to make my JQuery call it just once. This is an almost exact copy of the sample code in w3, but for some reason whenever I click in any of the buttons both pop up one after the other.
HTML:
<p id="Chombas"> Chombas </p>
<p id="Buzos"> Buzos </p>
<script src="jquery-3.3.1.js">
</script>
<script src="calc2.js"></script>
JS:
$(document).ready("#Chombas").click(function() {
alert('CHOMBAS');
});
$(document).ready("#Buzos").click(function() {
alert('BUZOS');
});
Please help!
$(document).ready accepts a function as a parameter, not a selector to be chained. Wrap your script in only a single $(document).ready, and then attach listeners accordingly:
$(document).ready(() => {
$("#Chombas").click(function() {
alert('CHOMBAS');
});
$("#Buzos").click(function() {
alert('BUZOS');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="Chombas"> Chombas </p>
<p id="Buzos"> Buzos </p>
$(document).ready(function () {
$('#foo').click(function(e) {
alert('foo');
});
$('#bar').click(function(e) {
alert('bar');
});
})
Try replace with this.
$('#button-nav').on('click','p', function (evt) {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button-nav">
<p id="Chombas"> Chombas </p>
<p id="Buzos"> Buzos </p>
</div>
You can try this to avoid write duplicate code
I saw this post and I tried to replicate the code: Stop a gif animation onload, on mouseover start the activation. I can't seem to get it to work though. My goal is to swap the image with a gif on hover. Does someone know why the image isn't swapping?
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "images/portfolio/form.gif");
},
function() {
$(this).attr("src", "images/portfolio/form.jpg");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="large-12 medium-12 small-12 columns portfolio-pic animated slideInUp">
<div data-content="Project 1" class="image">
<a class="a-block" href="#">
<img id="imgAnimate" src="images/portfolio/form.jpg">
</a>
</div>
</div>
</div>
Here is a live link to my example: http://fosterinnovationculture.com/dcc/index.html
From what your page is saying jQuery is undefined. So either you are trying to execute jquery code before jquery is executed.
I executed this code on your site just to testing things out and it seems to be working
function mousein () {
$(this).attr("src", "images/portfolio/form.gif");
console.log('hello')
}
function mouseout () {
$(this).attr("src", "images/portfolio/form.jpg");
}
console.log($('#imgAnimate').hover(mousein, mouseout));
I did notice though that because of some styling issues the hover was never actually hitting the img it was actually hitting the .image:after css psuedo selector so you need to reorganize your html or change the way you select the element you want to switch the src of.
just to test in your html move the image outside of
<div class="image">image</div>
Yes its correct as told by #madalin ivascu, you need to add jquery at header and it will work.
Like this,
HTML
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "banana.gif");
},
function() {
$(this).attr("src", "banana.png");
});
});
</script>
</head>
<body>
/* include your html part here */
<a class="a-block" href="#">
<img id="imgAnimate" src="banana.png" alt="">
</a>
</body>
Try this, Instead of using hover, try that using mouseenter and mouseleave.
$(document).ready(function(){
$(".row").find('img').mouseenter(function(){
if($("#imgAnimate").attr('src','form.jpg')){
$("#imgAnimate").attr('src','form.gif');
}
$(this).mouseleave(function(){
if($("#imgAnimate").attr('src','form.gif')){
$("#imgAnimate").attr('src','form.jpg');
}
});
});
});
Umm guys i got stuck in Jquery when i was fiddling along with some animation The thing was i wanted to make a textbox appear and show the text when a button is highlighted like a gallery ummm ..... . Anyway i made halfthrough but the text is not displaying . so any help...
P.s the idea was to have a button/circle glow and a text to appear below it
like when one button/circle glows an empty space below shows the text associated with it.
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function slide()
{//slide start
$(".textHold").hide()
.delay(1000)
.queue(
function()
{//queue function start
$(".red").css(
{//css start
"background-color":"#000"
}//css end
);//css ();
$(this).dequeue();
}//queue function/\
);//queue();
$(".textHold").fadeIn(500);
$(".textr").fadeIn(500).fadeOut(5000).delay(500);
$(".textHold").fadeOut(500).delay(500);
$(".textHold")
.queue(
function ()
{
$(".red").css({"background-color":"#f00"});
$(this).dequeue();
}
)
.delay(500)
.queue(
function()
{
$(".blue").css({"background- color":"#000"});
$(this).dequeue();
}
)
.fadeIn(500);$(".text").fadeIn(500).delay(500).fadeOut(500).delay(500);
$(".textHold").fadeOut(500).delay(500);
$(".textHold").queue(
function()
{
$(".blue").css({"background-color":"#00f"});
$(this).dequeue();
}
);
}//slide() /\
setInterval(function(){slide();},500);
</script>
</head>
<body>
<div class="red">
</div>
<div class="blue">
</div>
<div class="textHold">
<span class="text">Hello blue</span>
<span class="textr">Hello Red</span>
</div>
</body>
It seems to me that the code to change the style for the button is under your control (not a third party code). In this case, you can trigger a JQuery custom event when button changes color. There would be a listener to this event which will according make the text appear.
See: http://www.sitepoint.com/jquery-custom-events/
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to show/hide a div on mouseover using jquery?
I have a div like this:
<div id="parent">
foo
<div id="child" style="display:none;">
hidden
</div>
</div>
I want to have the child div shown whenever someone moves their mouse over the parent div, and when he moves his mouse away, to hide the parent div.
However if I do this:
$("#parent").mouseover(toggle);
$("#parent").mouseout(toggle);
function toggle()
{
console.log('here');
$("#child").toggle();
}
Then both events seem to get called twice each time i move my mouse over the #parent div. How can I achieve what I want?
$("#parent").hover(
function(){
$("#child").show();
},
function(){
$("#child").hide();
}
)
How about add css?
#parent #child{display:none;}
#parent:hover #child{display:block;}
with
<div id="parent">
foo
<div id="child" >
hidden
</div>
</div>
You shouldn't use toggle in this case. If you always want to hide on mouseout and show on mouseover, then define them as such :)
$("#parent").mouseover(function() {
$("#child").fadeIn(); // or .show() for no fading
});
$("#parent").mouseout(function() {
$("#child").fadeOut(); // or .hide() for no fading
});
Don't use toggle function !!
Try something like this:
$("#parent").hover(function(){
$("#child").show();
}, function(){
$("#child").hide();
}
)
This should probably work!!
Shorter:
$("#parent").hover(function () {
$("#child").toggle();
});
Demo.
Note: You can subtitute toggle with fadeToggle or slideToggle.
You can try .hover() like this,
$('#divid').hover(
function(){
//mouseenter function
},
function(){
//mouseleave function
}
);
You should use something like this:
$("#parent").mouseover(function(){
$('#child').show();
});
$("#parent").mouseout(function(){
$('#child').hide();
});
jsFiddle example: http://jsfiddle.net/phcwW/
<div id="parent" onmouseover="callMouseOver()" onmouseout="callMouseOut()">
foo
<div id="child" style="display:none;">
hidden
</div>
</div>
Js Method:
function callMouseOver(){
document.getElementById("child").style.display = "inline";
}
function callMouseOut(){
document.getElementById("child").style.display = "none";
}
I am having problems with a jQuery slidedown and slideUp function. When clicking the button the div slides down to reveal more content - however when it slides down it goes half way down smoothly then it likes stutters - but when i click less info to take the div back up it goes up in a smooth transition. How can i make sure it slides down smoothly without no interruptions in the transition?
<script type="text/javascript">
$(document).ready(function () {
// $(".image-gallery ul li:gt(5)").hide(0);
$(".inner p:gt(2)").hide(0);
$('a.moreInfoLink').toggle(
function () {
$('.inner p:gt(2)').slideDown(1000);
$(this).text("Less info");
},
function () {
$('.inner p:gt(2)').slideUp(1000);
$(this).text("More info");
}
);
});
</script>
HTML/.NET Coding
<div class="slideContent">
<div class="inner">
<energy:TextPod ID="TextPod1" runat="server" CssClass="client-portfolio-intro" />
</div>
</div>
<div class="clear-me"></div>
<div class="btnMoreInfo">
<a class="moreInfoLink" href="javascript:;">More Information</a>
</div>
Not sure if a solution to your problem but just for a good practice, store your selections in variables and use them instead, that way jQuery wouldn't need to find elements every time toggle function is called:
<script type="text/javascript">
$(document).ready(function () {
// $(".image-gallery ul li:gt(5)").hide(0);
var content = $('.inner p:gt(2)'); // storing selection
content.hide(0);
$('a.moreInfoLink').toggle(
function () {
content.slideDown(1000);
$(this).text("Less info");
},
function () {
content.slideUp(1000);
$(this).text("More info");
}
);
});
</script>
The problem is one of performance - browsers can get bogged down when trying to animate multiple elements at a time, particularly if those elements cause the document to be 'reflowed'. Essentially, your selector $('.inner p:gt(2)') is causing all the <p> elements to be animated independently, and each one causes a document reflow at every point.
For a smooth transition, try animating a single containing element that wraps everything you want to be shown/hidden. I would use HTML something like:
<div class="slideContent">
<div class="inner">
<p>Something</p>
<p>Something</p>
<div class="fullInfo">
<p>Something</p>
<p>Something</p>
<p>Something</p>
</div>
</div>
</div>
<div class="btnMoreInfo">
<a class="moreInfoLink">More Information</a>
</div>
And JS like:
$(".inner .fullInfo").hide(0);
$('a.moreInfoLink').toggle(
function () {
$('.inner .fullInfo').slideDown(1000);
$(this).text("Less info");
},
function () {
$('.inner .fullInfo').slideUp(1000);
$(this).text("More info");
}
);
This way, the browser is only animating one element at a time - much faster!