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>
Related
I am making a div which would show on button click and hide on clicking again.I am using toggleClass function of jquery. The problem is I need animation while the div opens and closes. I have tried transition:1s, in all relevant classes and even on body, but in vain.
This is the fiddle: http://jsfiddle.net/9dq2p7dw/105/
Here is the code for my jquery:
$(document).ready(function(){
$(".view").click(function(){
$(".view-more").toggleClass("hide show", 500);
});
});
You can use .fadeToggle
$(document).ready(function(){
$(".view").click(function(){
$(".view-more").fadeToggle( "hide show", "linear" );
});
});
.hide{
display:none;
}
.show{
display:block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="view">View All</a>
<div class="view-more hide" >
<div class="col-md-6">
<h1>
asasasas
</h1>
</div>
<div class="col-md-6">
<h1>
sasasas
</h1>
</div>
</div>
Use transition: all 0.3s ease;
Refer CSS transitions
$(document).ready(function() {
$(".view").click(function() {
$(".view-more").toggleClass("hide show", 500);
});
});
.hide {
opacity: 0;
transition: all 1s ease;
}
.show {
opacity: 1;
transition: all 1s ease;
}
.view-more{
background-color:#F0C798;
padding:10px;
box-sizing:border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="view">View All</a>
<div class="view-more hide">
<div class="col-md-6">
<h1>
asasasas
</h1>
</div>
<div class="col-md-6">
<h1>
sasasas
</h1>
</div>
</div>
JS Fiddle Link
If all you wish to do is hide and show a div upon clicking a button, you can do so in simpler way.
$(".view").click(function(){
$(".view-more").toggle(function() {
$(this).animate({height: '200'});
}, function() {
$(this).animate({height: '100'});
});
});
When given a list of functions as arguments, the .toggle(fn1, fn2) method will alternate between the functions given starting with the first one. This automatically keeps track of the toggle state for you - you don't have to do that.
jQuery doc is here. There are multiple forms of .toggle() depending upon the arguments used so you don't always find the right one when searching the jQuery doc.
try this, You can't animate display, rather try this, may be this will help you
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggleClass demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
.col-md-6{
background:red;
}
</style>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<a class="view">View All</a>
<div class="view-more hide" >
<div class="col-md-6">
<h1>
asasasas
</h1>
</div>
<div class="col-md-6">
<h1>
sasasas
</h1>
</div>
</div>
<script>
$(document).ready(function(){
$(".view").click(function(){
$(".view-more").toggle(500);
});
});
</script>
</body>
</html>
I have a simple jQuery slide toggle but I want hit the div on start up but it is always showing
Here is a demo I build to show u what I mean.
Maybe you can see where I am going wrong
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel,#flip
{
padding:5px;
text-align:center;
background-color:Red;
border:solid 5px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">This div should always be hidden til clicked </div>
</body>
</html>
You need to hide the panel div
this should do it
#panel
{
padding:50px;
display:none;
}
Hope it helps
$(document).ready(function(){
//just need an initial run to close it first
$("#panel").slideDown();
//or if it was open to start use this instead
$("#panel").slideUp();
//rest the same
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
http://jsfiddle.net/b6rkb/18/
I want to have a fixed bar at the top of my page, that on hover shows a sub-bar. I want this sub-bar to push the rest of the page down when this happens.
CSS:
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
.page{
height:5000px;
}
.fixed{
position: fixed;
}
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").hover(function(){
$("#panel").stop().slideToggle("slow");
});
});
</script>
<body>
<div class="page">
<div class="fixed">
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</div>
<br><br><br>
sup
</div>
You should also give the margin to the page and put the position fixed div above the page.
Working Demo
Jquery
$(document).ready(function(){
$("#flip").hover(function(){
$("#panel").stop().slideToggle("slow");
$(".page").stop().animate({"margin-top":"120px"}, "slow")
}, function() {
$(".page").stop().animate({"margin-top":"0"}, "slow")
$("#panel").stop().slideToggle("slow");
});
});
I'm not sure about the slideToggle, Please comment if you feel this is wrong.
try this... (You can test this http://jsfiddle.net/b6rkb/28/)
<style> <!-- Add to style -->
#page{
height:200px;
display:none;
opacity: 0;
}
</style>
<script>
$(document).ready(function(){
$("#flip").hover(function(){
$("#panel").stop().slideToggle("slow");
$("#page").stop().slideToggle("slow"); //Add this line
});
});
</script>
<body><div class="page">
<div class="fixed">
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</div>
<br><br><br>
<div id="page"> <!-- Add this div -->
test
</div>
sup
</div></body>
I need a simple script that allows me to change the inner html of a p tag which in my case is an image to just plain text when I hover over it.
Example:
<div id="one">
<p><img src="events.png" alt="" /></p>
</div>
When i hover over the above p tag i want it to change to the text as seen below
<div id="one">
<p>Events</p>
</div>
You don't need to use javascript at all for this. This is handled very simply using css.
<div id="one">
<p>
<span>Events</span>
<img src="events.png" alt="" />
</p>
</div>
CSS:
#one p>span{ display:none; }
#one p:hover span{ display:inline; }
#one p:hover img{ display:none; }
Here's a fiddle of it in action: http://jsfiddle.net/CKpCk/
Try the following:
var html = $('#one p').html()
$('#one').hover(function(){
$('p', this).html('Events');
}, function() {
$('p', this).html(html);
})
Demo
Try this one:
<html>
<head>
<title>Try</title>
</head>
<script type="application/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#testHover").hover(function()
{
$("#testHover").html("Events");
});
});
</script>
<body>
<div id="one">
<p style="width:200px;"id="testHover"><img src="events.jpg" alt="" /></p>
</div>
</body>
</html>
I have this code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
.kat1 {
background-image:url(ikoniceKategorije/07.jpg);
width:30px;
height:30px;
float:left;
}
.kat1:hover {
background-image:url(ikoniceKategorije/07h.jpg);
}
// here I have a code for .kat2,kat2 ... styles
#div {
width:220px;
height:30px;
overflow:hidden;
}
</style>
<script>
$(function() {
$('#div div').click(function() {
var elem = $(this);
var style = elem.css('background-image');
if(/h\.jpg/.test(style)) {
elem.css('background-image', style.replace(/h\.jpg/, '.jpg'));
} else {
elem.css('background-image', style.replace(/\.jpg/, 'h.jpg'));
}
});
});
</script>
</head>
<body>
<div id="div">
<div class="kat1 changing"></div>
<div class="kat2 changing"></div>
<div class="kat3 changing"></div>
<div class="kat4 changing"></div>
<div class="kat5 changing"></div>
<div class="kat6 changing"></div>
<div class="kat7 changing"></div>
</div>
</body>
</html>
I have a problem - when I click once div change bacground color but when I click second time on same icon then I cant change div background...
demo www.pluspon.com/kategorije.html
Why do you want to have this functionality in JavaScript? An other option would be to use CSS classes to simplify the process:
$(function() {
$('#div div').click(function() {
$(this).toggleClass('active');
});
});
CSS:
.kat1 {
background-image:url(ikoniceKategorije/07.jpg);
width:30px;
height:30px;
float:left;
}
.kat1:hover,
.kat1.active {
background-image:url(ikoniceKategorije/07h.jpg);
}