I have a small hover script and it works like that:
When i hover on a link it is fade the relevant div.
Now, i tried to create a second link and configure it to display the second div and i have succeeded, but, when i hover them fast one-after-one it display BOTH faded Divs and stay stuck a while (with 2 divs display instead of 1) until the first div returns.
I want to display only one div at a time when i hover even if i hover fast between links.
Here is the code:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script>
<style>
#bank {display:none;}
</style>
<div>Show bank div and hide fancy div</div>
<div>Show back and hid fancy div</div><br>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
$('#btn').hover(function(e){
$('#fancy').fadeOut('slow', function(){
$('#bank').fadeIn('slow');
});
});
$('#btn-bk').hover(function(e){
$('#bank').fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
});
});
/]]>
</script>
See it in action: https://jsfiddle.net/rami7250/1jLtxdr7/
$('#btn').hover(function(e){
$('#fancy').stop(true, true).fadeOut('slow', function(){
//--------^ Add 'stop(true, true)'
$('#bank').fadeIn('slow');
});
});
$('#btn-bk').hover(function(e){
$('#bank').stop(true, true).fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
});
});
By adding stop(true, true) you can start current animation immediately and your previous animations will be removed from queue. Read More
Example Fiddle
this prevent 2 div shown at the same time
$('#btn').hover(function(e){
$('#fancy').stop().hide();
$('#bank').fadeIn('slow');
});
$('#btn-bk').hover(function(e){
$('#bank').stop().hide();
$('#fancy').fadeIn('slow');
});
#bank {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Show bank div and hide fancy div</div>
<div>Show back and hid fancy div</div><br>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>
you can use a flag to return function if it's already running:
var flag;
$('#btn').hover(function(e){
if (flag)return;
flag = true;
$('#fancy').fadeOut('slow', function(){
$('#bank').fadeIn('slow');
flag = false;
});
});
$('#btn-bk').hover(function(e){
if (flag)return;
flag = true;
$('#bank').fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
flag = false;
});
});
fiddle
This is because if you hover over an animation while another is in progress it doesn't stop the current animation. You can force this to happen by using the stop() function for each call.
$('#btn').hover(function(e){
$('#fancy').stop().fadeOut('slow', function(){
$('#bank').fadeIn('slow');
});
});
$('#btn-bk').hover(function(e){
$('#bank').stop().fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
});
});
See my fiddle: https://jsfiddle.net/1jLtxdr7/2/
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script>
<style>
#bank {display:none;}
</style>
</head>
<body>
<div>Show bank div and hide fancy div</div>
<BR>
<BR>
<div>Show back and hid fancy div</div><br>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>
<script type="text/javascript">
$(window).load(function(){
$('#btn').hover(function(e){
$('#fancy').fadeOut(40, function(){
$('#bank').fadeIn('slow');
});
});
$('#btn-bk').hover(function(e){
$('#bank').fadeOut(40, function(){
$('#fancy').fadeIn('slow');
});
});
});
</script>
<body>
</html>
Try is one . you can give decimal numbers to fix speed of fadeIn function
Try This one
$('#btn').hover(
function(e){
$('#bank').show();
},
function(e){
$('#fancy, #bank').hide();
}
);
$('#btn-bk').hover(
function(e){
$('#fancy').show();
},
function(e){
$('#fancy, #bank').hide()
}
);
Try this:
$('.toggle_text').hover(function(e){
var text = $(this).attr("data-info");
var text_to_show = $("#"+text).html();
$('#show_div').fadeOut('slow', function(){
$('#show_div').html(text_to_show).fadeIn('slow');
});
});
#bank {display:none;}
.hide {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div>Show bank div and hide fancy div</div>
<div>Show back and hid fancy div</div><br>
<div id="show_bank" class="hide">Bank Div</div>
<div id="show_fancy" class="hide">Fancy Div</div>
<div id="show_div"></div>
Fiddle Link
Hope this helps.
Related
Hey I can hide my divs but my problem is if I reload my page I always see the hidden div for one second.
Do someone know how to fix that?
To tackle this kind of issue, you need to have the <div> with an attribute hidden or something in the inline. Then you need to hide it with JS and the remove the inline thing.
$(function () {
$(".hide").hide().removeClass("hide");
});
.hide {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hide">I am not shown</div>
Method 2: Using hidden attribute.
$(function () {
$(".hide").hide().removeAttr("hidden");
});
.hide {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div hidden>I am not shown</div>
Method 3: Using hidden attribute and .prop().
$(function () {
$(".hide").hide().prop("hidden", false);
});
.hide {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div hidden>I am not shown</div>
In the CSS that you apply to your div, add:
display:none;
So the div will be loaded but invisible. When you need to you it, you can do as you are doing now
Just add hidden attribute to your div and it should fix your problem then remove it by javascript when you want to show it
$(document).ready(function() {
$('#myDiv').hide();
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="myDiv"><p>hello</p></div>
</body>
Yes you can create the div by javascript.
var div = document.createElement("Div");
var text = document.createTextNode("this is my Div")
div.appendChild(text);
document.body.appendChild(div);
<body>
</body>
What I want to do is, when I click on button then one div should disappear and another should appear and if i click on the same button one more time, then first one should appear and second one should disappear. This would go until I click on the button.
What I tried:
JavaScript:
function change_image(){
var flag = true;
if(flag){
document.getElementById('speaker_main_div_with_rounded_image').style.display="none";
document.getElementById('speaker_main_div_with_square_image').style.display="block";
flag = false;
} else {
document.getElementById('speaker_main_div_with_rounded_image').style.display="block";
document.getElementById('speaker_main_div_with_square_image').style.display="none";
flag = true;
}
}
HTML:
<input type="button" value="Click Here to get another image" onClick="change_image(this)">
Any help would be grateful.
Thank You.
Your flag variable is local, and its value is always the same when function is called. Initialize it with:
var flag = document.getElementById('speaker_main_div_with_rounded_image').style.display !== 'none';
This is my solution using jQuery Library .
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").toggle();
$("#div2").toggle();
});
});
</script>
<style>
.hide{
display:none;
}
</style>
</head>
<body>
<button type="button" id="btn1">Toggle</button>
<div id ="div1">
I am div 1
</div>
<div id ="div2" class="hide">
I am div 2
</div>
</body>
</html>
I have a div with id="mybutton" and a hidden div with id="mydiv" like in the code below :
<head>
<script>
$(document).ready(function(){
$("#mybutton").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
</script>
</head>
<body>
<div id="mybutton">Show</div>
<div id="mydiv" style="display:none;">Hidden thing..</div>
</body>
I want "mydiv" to appear even if mouse is over "mydiv"(after hovering at mybutton).
Write CSS
#mydiv{
display:none;
/* visibility:hidden; */
}
#mybutton:hover + #mydiv,#mydiv:hover{
display:block;
/* visibility:visible; */
}
Demo
You can also use visibility:visible; and visibility:hidden; instead of display property
Give a common parent to them and connect the hover to it.
html:
<div id="parent">
<div id="mybutton">Show</div>
<div id="mydiv">Hidden thing..</div>
</div>
css:
#mydiv {
display: none;
}
Jq:
$(document).ready(function(){
$("#parent").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
JSfiddle: http://jsfiddle.net/f2W9b/
$(document).ready(function(){
$("#mybutton").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
Wrap it inside div:
<div id="container">
<div id="mybutton">Show</div>
<div id="mydiv">Hidden thing..</div>
</div>
And listen for mouseenter event on the container div.
Wrap your button in a container, like so:
<span id="hoverarea">
<div id="mybutton">Show</div>
<div id="mydiv" style="display: none;">Hidden thing..</div>
</span>
<script>
$(document).ready(function(){
$("#hoverarea").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
</script>
http://jsfiddle.net/n4B5b/1/
In the fadeout() portion of your function, can you check if the mouse is currently hovering over the #mydiv div? If so (such as adding a class on hover to the #mydiv), check it and don't fadeout.
<head>
<script>
$(document).ready(function(){
$("#mybutton").hover(function(){
$("#mydiv").fadeIn();
}, function(){
if (!$("#mydiv").hasClass('hovering') {
$("#mydiv").fadeOut();
}
});
$("#mydiv").hover(function(){
$("#mydiv").addClass('hovering');
}, function (){
$("#mydiv").removeClass('hovering');
});
});
</script>
</head>
<body>
<div id="mybutton">Show</div>
<div id="mydiv" style="display:none;">Hidden thing..</div>
</body>
I have simple jquery show and hide, but i need a little help i have this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
And CSS
.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}
Adn simple Html
Show
<div class="slidingDiv">
Fill this space with really interesting content. hide</div>
What i need is when someone click on SHOW, the element will open, but, i want when someone clik on SHOW to change SHOW to HIDE when DIV element is opened, and when someone click on HIDE, again to change to SHOW, and the problem is that i am going to have a many hidden elements, how to do that?
example i will have many slidingDIV on page, but i wnat to open just that that is connected to that a href
Change:
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
To:
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
if($(this).text() == "Show" ? $(this).text("Hide") : $(this).text("Show"));
});
Update for your edited question:
To change just the div that is relevant, go with this this code (gets the next .slidingDiv to the clicked href):
$('.show_hide').click(function(){
$(this).next(".slidingDiv").slideToggle();
if($(this).text() == "Show" ? $(this).text("Hide") : $(this).text("Show"));
});
You can see this working here: http://jsfiddle.net/EYnhk/
try this....
$(document).ready(function(){
$(".slidingDiv").hide();
$('.show_hide').click(function(){
if( $(this).html()=="Show"){
$(this).html("Hide");
}
else{
$(this).html("Show");
}
$(".slidingDiv").slideToggle();
});
});
Here
you can use:
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").Toggle();
if ($('.show_hide').text() == "Show"){
$('.show_hide').text('hide');
}else {
$('.show_hide').text('Show');
}
});
});
</script>
How do I make HTML button disappear on click, then reappear after 2 seconds? I found some ways of doing this but I need it to work with the code I already have. How can I accomplish this?
<script language="JavaScript">
function enableTorch(milliSeconds) {
ipwajax('enabletorch');
window.setTimeout("ipwajax('disabletorch');",milliSeconds);
}
</script>
<input type="button" style="font: bold 20px Arial" onclick="enableTorch(1500);" value="LED ON">
<!--
$("p").hide()
Demonstrates the jQuery hide() method, hiding all <p> elements.
-->
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("button").hide();
$("button").show(2000);/*2 sec time*/
});
});
</script>
</head>
<body>
<button>Click me</button>
</body>
</html>
this one will hide the button and reshow in 2 sec
$(document).ready(function(){
$("button").click(function(){
$(this).hide().show(2000);
});
});
Check this
function enableTorch(milliSeconds) {
ipwajax('enabletorch');
document.getElementById('torch').style.display="none";
setTimeout(function(){ipwajax('disabletorch');document.getElementById('torch').style.display='inline'}, milliSeconds);
}
<input type="button" id = "torch" style="font: bold 20px Arial" onclick="enableTorch(1500);" value="LED ON">
Here you go http://jsfiddle.net/4eCrQ/
$('.first').on('click', function() {
$('.second').hide();
setTimeout(function() {
$('.second').show();
}, 2000);
});