I found a lot of similar questions but could not find the answer which could solve my problem.
I have a div with id 'first'. All I want is slidedown another div with id 'second' over the first one when mouse is on div 'one' and slideup div 'second' when the mouse is out of that div.
The code below works well but it has some problems.
1) when the mose is in - it slides twice.
2) when the second div is down and I move mouse over the div, it slides again
Could you please help me to get the result I want.
html
<div>
<div id="zero"><div>
<div id="my_hover">
<div id="second"></div>
<div id="first"></div>
</div>
<div id="third"></div>
</div>
js
$(document).ready(function(){
$("#first").mouseenter(function(){
$("#second").stop().slideDown("slow");
});
$("#first").mouseout(function(){
$("#second").slideUp("slow");
});
});
The easiest way is to add pointer-events: none; to the #second div CSS and position it above the #first div.
pointer-events: none; In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.(...)
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
Reference
$(document).ready(function(){
var slide = $("#second");
$("#first").hover(function(){
slide.stop().slideDown("slow");
},function(){
slide.slideUp("slow");
});
});
#first {
width: 100px;
height: 100px;
background:red;
}
#second {
position: absolute;
display: none;
width: 100px;
height: 100px;
background:blue;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="second">Second</div>
<div id="first">First</div>
Another way is to insert these two elements inside another element and use hover for that element instead of div #first. This way, the whole area is sensitive:
$(document).ready(function(){
var slide = $("#second");
$(".my-hover").hover(function(){
slide.stop().slideDown("slow");
},function(){
slide.slideUp("slow");
});
//for demo:
$('.btn').click(function(){
alert('it works!');
});
});
#first {
width: 100px;
height: 100px;
background:red;
}
#second {
position: absolute;
display: none;
width: 100px;
height: 100px;
background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=my-hover>
<div id="second"><button class=btn>BUTTON</button></div>
<div id="first">First</div>
</div>
I have tried your code and it's working well:
$(document).ready(function(){
$("#first").mouseenter(function(){
$("#second").stop().slideDown("slow");
});
$("#first").mouseout(function(){
$("#second").slideUp("slow");
});
});
See Example:
http://jsfiddle.net/dwxxpabq/
Okay here you go :
var $second=$("#second");
$("#first").hover(function(){
$second.stop().slideDown("slow");
},function(){
$second.stop().slideUp("slow");
});
div{
width: 100px;
height: 100px;
background: green;
margin-right: 10px;
float: left ;
position: absolute;
top:0;
left:0;
}
#second{
display: none;
background: yellow;
pointer-events : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">1</div>
<div id="second">2</div>
You can put the second div as a child of first div and by using relative/absolute positioning you can achieve what you want.
$(document).ready(function() {
var slide = $("#second");
$("#first").hover(function() {
slide.stop().slideDown("slow");
}, function() {
slide.slideUp("slow");
});
});
#first {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#second {
position: absolute;
top: 0;
left: 0;
display: none;
width: 100px;
height: 100px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">First
<div id="second">Second
<button>click me</button>
</div>
</div>
Related
I have a problem with jQuery, I made a button to open/close the menu and it's work. But I want to allow the click of anywhere on the body to close the menu. So when we click outside the .burger I want to close the menu.
So I made this:
edit : this is my all code for menu
var count = 0;
function menu(){
$('.burger').click(function(){
if (count==0) {
$('.navigation').css({'display':'block', 'opacity':'1'});
count=1;
}else{
$('.navigation').css({'display':'none', 'opacity':'0'});
count=0;
}
});
}
menu();
if(count == 1){
$("body *:not(.burger)").click(function(event){
$('.navigation').css({'display':'none', 'opacity':'0'});
count=0;
});
}
But when I click on .burger, it shows the alert.
Like this, my menu appear and desappear when i click on .burger, but nothing work when I click outside of .burger
You're selecting all body tags that don't match div.burger. This will simply select the body tag (As it doesn't match div.burger).
To match all elements in body, that don't have the tag .burger, Try this instead:
$("body *:not(.burger)").click(function(){alert('ok');
$('.nav').css({"display":"none"});
});
Likewise, if you want to match ONLY DIVS that don't have the class .burger, use div:not(.burger) (You shouldn't even need body here, as a div should not appear outside of the <body> tag):
$("body *:not(.burger)").click(function(){
alert('matched body *:not(.burger)');
});
$("div:not(.burger)").click(function(){
alert('matched div:not(.burger)');
});
div
{
width: 50px;
height: 50px;
float: left;
background-color: orange;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="burger">Burger</div>
<div>Not a burger</div>
Instead of putting a binding on everything that is not the burger, I would use a delegate event binding that filters out events that bubble up.
$('.burger').on('click', function(e){
e.stopPropagation();
$('#menu').toggleClass('hide');
});
$(document.body).on('click', ':not(.burger)', function(e){
$('#menu').addClass('hide');
});
.burger {
display: inline-block;
background-color:lightblue;
}
.hide {
opacity: 0;
}
body {
background-color: gray;
min-width: 1920px;
min-height: 1080px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="burger">Burger icon</div>
<ul id="menu" class="hide">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
With function .not() you can accomplish that.
$(".body *").not("div.burger").click(function(){
$('.nav').css({"display":"none"});
});
.burger {
width: 200px;
height: 200px;
background-color: rgba(255,255,255, 1);
position: absolute;
top: 25px;
left: 30px;
z-index: 9999;
}
.body {
width: 100%;
height: 100%;
}
.nav {
width: 100%;
height: 100%;
background-color: rgba(0,0,0, .2);
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
<div class='burger'>
Burger div (Click and nothing happend)
</div>
<br><br><br>
<div class="nav">
Click this overlay div to hide it!
</div>
</div>
Hope it helps!
So I have 2 divs children of a display block parent. I would like to make div #2 (green) be on top of div #1 (red). With "on top" I'm not talking about z-index, I'm talking about literally being on top of the other. And then I was wondering if there could be a way to make div #2 slideDown()
As far as I tested, jQuery slideDown() or slideUp() works differently.
In the demo I made, when I run
$('.item-1').slideUp();
The item 2 is sliding up instead of item 1, why is that? I'm getting confused.
Any hints would be appreciated,
Thanks in advance.
window.slide = function() {
$('.item-1').slideUp();
}
.items-container {
height: 400px;
width: 240px;
background-color: #c3c3c3;
display: block;
/* overflow: hidden; */
}
.item {
height: 100%;
width: 240px;
position: relative;
font-size: 30px;
text-align: center;
vertical-alignment: middle;
}
.item-1 {
background-color: red;
}
.item-2 {
float: left;
position: relative;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="slide()">
Click me!
</button>
<div class="items-container">
<div class="item item-1">
1
</div>
<div class="item item-2">
2
</div>
</div>
jQuery's slideUp() and slideDown() methods animate the height of the matched elements, not position as you seemed to want: http://api.jquery.com/slideUp/.
What you seem to want is to translate the div it so that it moves on top of the first one.
http://www.w3schools.com/css/css3_2dtransforms.asp
window.slideUp = function() {
$('.item-2').addClass('slideUp');
}
window.slideDown = function() {
$('.item-2').removeClass('slideUp');
}
.items-container {
height: 100px;
width: 240px;
background-color: #c3c3c3;
display: block;
/* overflow: hidden; */
}
.item {
height: 100%;
width: 240px;
position: relative;
font-size: 30px;
text-align: center;
vertical-alignment: middle;
}
.item-1 {
background-color: red;
}
.item-2 {
position: relative;
transition: transform linear 1s;
background-color: green;
}
.slideUp
{
transform: translate(0,-100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="slideUp()">
SlideUp!
</button>
<button onclick="slideDown()">
SlideDown!
</button>
<div class="items-container">
<div class="item item-1">
1
</div>
<div class="item item-2">
2
</div>
</div>
.slideUp() works by changing the height of the element. As that element gets shorter, following elements will move up the page.
As seen in the documentation:
The .slideUp() method animates the height of the matched elements. This causes lower parts of the page to slide up, appearing to conceal the items.
In your fiddle, item1 slides up as expected and as defined by the doc :
Description: Hide the matched elements with a sliding motion.
So your div slides up and disappears, and item2 doesn't "move", just fills the space in the DOM after item1 has been hidden.
I'm wanting to create a div panel with a link which when clicked slides a panel in from the right, I have this working fine but I want to have the clickable link pushed out with the div panel and it's this I cannot figure out although i'm guessing it's really simple.
The html I have is:
<div class="quick-contact">
<div class="slide-toggle">Slide Toggle</div>
<div class="box">
<div class="box-inner">
content goes here
</div>
</div>
</div>
the css is this:
quick-contact {
background: #ccc;
float:right;
}
.box{
float:right;
overflow: hidden;
background: #f0e68c;
display: none;
}
.slide-toggle {
float: right;
position: relative;
right: 0;
}
/* Add padding and border to inner content for better animation effect */
.box-inner{
width: 400px;
padding: 10px;
border: 1px solid #a29415;
}
and the jquery is:
// use this docu ready //
jQuery(function($) {
$(".slide-toggle").click(function(){
$(".box").animate({
width: "toggle"
});
});
}); // end
I can get the panel to slide when I click the link but the clickable link just sits above the panel when it slides in, I need it to slide out with the panel, I need it to work like this http://www.sanwebe.com/assets/floating-contact-form/ The reason i'm not using that example is because I need to slidein panel to slide in the header div and not the body div like this example does.
Just place your <div class="slide-toggle">...</div> after <div class="box">...</div> (because you are using float: "right";). Make it look like this:
<div class="quick-contact">
<div class="box">
<div class="box-inner">
content goes here
</div>
</div>
<div class="slide-toggle">
Slide Toggle
</div>
</div>
Working example: http://codepen.io/anon/pen/GoPPPE
Here's a working example: https://jsfiddle.net/ruo8r7o8/2/
Essentially, what you want to do is:
Lose the float .. it complicates calculations
Animate the whole box, not just one part
Javascript action:
$(function(){
$('.slide-toggle').click(function(){
$('.quick-contact').animate({
right: $('.quick-contact').css('right') == '0px' ? "100px": "0px"
})
});
});
CSS action:
.quick-contact {
position: absolute;
right: 0;
}
.slide-toggle {
position: relative;
background-color: red;
}
.box {
position: absolute;
right: -100px;
width: 100px;
background-color: green;
}
I have two block inside container and under them button. I need, when I click on the button, then the first div slowly moves up and removed. I tried so:
HTML:
<div class="container">
<div class="block"></div>
<div class="block"></div>
</div>
<button class="move">Click</button>
CSS:
.container {
border: 2px solid blue;
display: inline-block
}
.block {
width: 100px;
height: 100px;
background: red;
margin: 5px;
}
.move {
display: block
}
jQuery:
$(document).ready(function() {
$('.move').click(function() {
$('.block:first-child').animate({scrollTop: '-100px'}, 1000, function() {
$(this).remove();
});
});
});
But when I click on the button, then first .block just removed. I need to first move it up. How to fix it?
JSFiddle
You're animating the scrollTop of the element which will not have the effect you want. You can animate the height instead. However there is also the slideUp() function which will do this for you. Try this:
$('.move').click(function() {
$('.block:first-child').slideUp(function() {
$(this).remove();
});
});
Example fiddle
If you have to do it without resizing the block, you can set overflow: hidden on the container, then animate the margin-top of the block itself.
Example fiddle
Add position: relative to element. top property works on positioned elements that is position is anything other than static. position: relative suits in this case.
$(document).ready(function() {
$('.move').click(function() {
$('.block:first-child').animate({
top: '-100px'
}, 1000, function() {
$(this).remove();
});
});
});
.container {
border: 2px solid blue;
display: inline-block
}
.block {
width: 100px;
height: 100px;
background: red;
margin: 5px;
position: relative
}
.move {
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="block"></div>
<div class="block"></div>
</div>
<button class="move">Click</button>
I want to reveal a hidden div when a hyperlink (with an anchor on the hidden div) is clicked. My research has led me to believe that using .switchClass is the way to go, but for the life of me I haven't been able to get it to work. Here's what I've got:
HTML
<!-- link -->
<div id="rightnest">
<p>
You likely have a few questions, and maybe some of them can
<br>be answered
<a href="#questions" class="smoothScroll">
<ins>here</ins>
</a>.
</p>
</div>
<!-- hidden div that should gain .centernest on click -->
<div class="hide">
<p> a lot of text</p>
</div>
CSS
.hide {
height: 400px;
left: 200px;
padding-top: 10px;
position: absolute;
top: 5px;
vertical-align: top;
visibility: hidden;
width: 700px;
}
.centernest {
height: 400px;
left: 200px;
padding-top: 10px;
position: absolute;
top: 5px;
vertical-align: top;
visibility: visible;
width: 700px;
}
there's .hide p, .hide h1, hide p a:link as well – all with visibility:hidden; (same for the .centernest class)
JavaScipt
$(function() {
$("<ins>here</ins>").click(function(){
$(".hide").switchClass("hide", "centernest", 100);
return false;
});
});
Try this:-
$(function() {
$(".smoothScroll").click(function(){
$(".hide").css( "visibility", "visible" );
});
});
Fiddle
Call the click event with the hyperlink class.
$(function() {
$(".smoothScroll").click(function(){
$(".hide").switchClass("hide", "centernest", 100);
return false;
});
});