How to move div to top and remove? - javascript

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>

Related

Divs incorrect placement after showing in intervals (fiddle included)

I am having problems with my JavaScript code. I am implementing a card game where I click a button and 13 cards are supposed to show up in intervals.
$("button").click(function() {
let i = 0;
setInterval(function() {
if(i == 4) clearInterval();
$(".block").eq(i).css({visibility:"visible"});
$(".block").eq(i).html("TEXT" + i);
i++;
},100);
});
.block {
display: inline-block;
width: 100px;
height: 140px;
border: 2px solid;
visibility: hidden;
}
button {
position: absolute;
top: 170px;
left: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<button id="button">Generate!</button>
</body>
</html>
As seen above, I use the setInterval() function to display them with 100ms intervals, all the divs do what I tell them to do but they first appear quite below where I want them to be. How can I make it so that they appear in the correct places directly?
Thanks in advance!
Add vertical-align: top; to your inline elements
$("button").click(function() {
let i = 0;
setInterval(function() {
if(i == 4) clearInterval();
$(".block").eq(i).css({visibility:"visible"});
$(".block").eq(i).html("TEXT" + i);
i++;
},100);
});
.block {
display: inline-block;
width: 100px;
height: 140px;
border: 2px solid;
visibility: hidden;
vertical-align: top;
}
button {
position: absolute;
top: 170px;
left: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<button id="button">Generate!</button>
</body>
</html>
Setting the blocks to display: none and then adding display: inline-block is a way of getting around the problem, but doesn't fix the problem itself.
The main issue is the vertical-align property set on the block class. By default, this is set to baseline. Before your button is clicked, all your divs are lined up in a row, invisible, with their baseline set to the bottom of the div. However, when the button is clicked, not only do your blocks become visible, but more crucially, you add some text inside the div. This changes the baseline, making it the bottom of the text within the div instead. However, because of vertical-align: baseline, the baselines of all the divs in the row try to align. The baseline of the visible divs with text has to align with the baseline of the invisible divs with no text. But their baselines are now different, so the only way they can all sit in a straight line on their baselines would be if the divs with text are pushed down.
I've simplified your snippets to show you what I mean. I've made the divs visible, removed the button, and instead, have manually added some text into your divs in html. As you can see, for the divs with text, the bottom of the text aligns with the bottom of the div without text.
body {
background: white;
}
.block {
display: inline-block;
width: 100px;
height: 140px;
border: 2px solid;
}
<html>
<body>
<div class="block">TEXT</div>
<div class="block">TEXT</div>
<div class="block"></div>
<div class="block">TEXT</div>
</body>
</html>
The reason why changing the blocks to display: none in the beginning, and then displaying them one by one works is because in this case, there is never a point when textless divs and divs with text are present in the DOM at the same time, so there is never a mismatch of baselines. The divs enter the DOM with text in them, and so their baselines always match up. However, this doesn't entirely fix the issue. If the text in the divs were of different lengths, for instance, the bottom of the multiline text would match up with the bottom of the single-line text, resulting in misalignment once again.
Example:
body {
background: white;
}
.block {
display: inline-block;
width: 100px;
height: 140px;
border: 2px solid;
}
<html>
<body>
<div class="block">text</div>
<div class="block">text</div>
<div class="block">very long text which takes up more than one line</div>
<div class="block">text</div>
</body>
</html>
So the proper fix for this would be to add vertical-align: top to the block class, to make sure that our alignment doesn't jump all over the place in response to the changing baseline.
You can set your .block element to display: none; instead of visibility: hidden; and change your script into this:
$("button").click(function() {
let i = 0;
setInterval(function() {
if(i == 4) clearInterval();
$(".block").eq(i).css({display:"inline-block"});
$(".block").eq(i).html("TEXT" + i);
i++;
},100);
});
Fiddle
You can put a wrapper div around the .block elements.
<html>
<body>
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<button id="button">Generate!</button>
</body>
</html>
And then the CSS:
.container {
display: flex;
}
.block {
/* display: inline-block; */
width: 100px;
height: 140px;
border: 2px solid;
visibility: hidden;
margin-left: 15px;
}
I added a margin-left to all the .block elements, but you can of course set them with the flex display or however you want.
Here is a working fiddle.
You could set the height to 0 then set it in the interval function.
$("button").click(function() {
let i = 0;
setInterval(function() {
if(i == 4) clearInterval();
$(".block").eq(i).css({visibility:"visible", height: "140px"});
$(".block").eq(i).html("TEXT" + i);
i++;
},100);
});
With this css:
.block {
display: inline-block;
width: 100px;
height: 0;
border: 2px solid;
visibility: hidden;
}
button {
position: absolute;
top: 170px;
left: 50px;
}

On hover slide image left (jQuery) and back if no hover

First, thanks for reading my question. I'm trying to make grid of 3 images that slide over each other when a user hovers over it. I've seen this on many websites but I don't know what this effect/plugin is called. So I made a image and a fiddle of what I'm trying to accomplish.
The start:
3 images positioned horizontally. The first image is almost completely visible except for some tab-like bars on the right. When you would hover over the second image it will slide to the left leaving only a small (again) tab-like bar on the right. The same goes for the third image. See this image I've made.
If a user doesn't hover any of the images it just goes back to the default of showing the first image and the second and third image in tab-like state.
I've also made a fiddle here to show the way the images should be animated.
But as you can see this is not perfect. Does anyone here have a snippet I could use because my jQuery skills are not there yet. But I think this (should) could be accomplished easier and with less code I think? And even maybe more elegantly.
Thanks for the (long) read...
This is simple example ;]
$('li').hover(function() {
$(this).addClass('active');
}, function(){
$(this).removeClass('active');
})
li {
width: 0;
padding: 15px;
float: right;
height: 300px;
overflow: hidden;
cursor: pointer;
color: #fff;
}
li:nth-child(1) {
background: red;
}
li:nth-child(2) {
background: green;
}
li:nth-child(3) {
background: blue;
}
li.active {
width: 400px;
transition: all 1s;
}
ul {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>
Try zAccordian jquery plugin. https://natearmagost.github.io/zaccordion/index.html
So I changed your example a bit:
What I did was:
Changed positions to relative and set overflow hidden to .wrapper
$(document).ready(function(){
$(".img-1").hover(function(){
$('.img-2').stop().animate({'left': '160px'}, 500);
$('.img-3').stop().animate({'left': '180px'}, 500);
}, function(){
$('.img-2').stop().animate({'left': '160px'}, 500);
$('.img-3').stop().animate({'left': '180px'}, 500);
});
$(".img-2").hover(function(){
$('.img-2').stop().animate({'left': '20px'}, 500);
}, function(){
$('.img-2').stop().animate({'left': '160px'}, 500);
});
$(".img-3").hover(function(){
$('.img-2').stop().animate({'left': '20px'}, 500);
$('.img-3').stop().animate({'left': '40px'}, 500);
}, function(){
$('.img-3').stop().animate({'left': '180px'}, 500);
$('.img-2').stop().animate({'left': '160px'}, 500);
});
});
.img-1 {position:relative;top:0px; background-color:red; width: 200px; Height: 50px;}
.img-2 {position:relative;top:-50px;left:160px; background-color: #1F6; width: 200px; Height: 50px;}
.img-3 {position:relative;top:-100px;left:180px; background-color: #0FF; width: 200px; Height: 50px;}
.wrapper {
border: black 1px solid;
width: 200px;
Height: 50px;
position:relative;
overflow: hidden;
top:0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="img-1">
</div>
<div class="img-2">
</div>
<div class="img-3">
</div>
</div>
You can do this completely with CSS, no need for javascript.
The example below manipulates the z-index when a div is hovered. The only tricky one is the hover of 'image-3'. The z-index of 'image-2' needs to be changed also to ensure it is on top of 'image-1'.
Therefore, in the HTML 'image-2' is placed after 'image-3'. Than in CSS 'image-2' can be addressed as a sibling.
[class^="img"] {
position: absolute;
top: 0;
left: 0;
}
.img-1 {
z-index: 3;
}
.img-1 img {
border: 6px solid #FF0;
}
.img-2 {
left: 20px;
z-index: 2;
}
.img-2 img {
border: 6px solid #F00;
}
.img-3 {
left: 40px;
z-index: 1;
}
.img-3 img {
border: 6px solid #F60;
}
div[class^="img"]:hover {
z-index: 5;
}
.img-3:hover+.img-2 {
z-index: 4;
}
<div class="wrapper">
<div class="img-1">
<img src="//placehold.it/200x50&text='image-1'" alt="">
</div>
<div class="img-3">
<img src="//placehold.it/200x50&text='image-3'" alt="">
</div>
<div class="img-2">
<img src="//placehold.it/200x50&text='image-2'" alt="">
</div>
</div>

Slide in div with fixed header

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;
}

Jquery slideup slidedown unexpected behavior

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>

Simple javascript animation

I'm creating a navigation with a sliding bar/box that follows the mouse. I manage to animate the box I'm having trouble to move the box to follow the mouse. ex. if the mouse is in nav1 the box would slide to nav1 from wherever nav the box is currently place.
I made a example jsfiddle: http://jsfiddle.net/5Wrcr/
HTML
<div id="nav" style="margin: 0 auto; width: 500px; background: red;">
<div id="nav1"></div>
<div id="nav2"></div>
<div id="nav3"></div>
<div id="nav4"></div>
<div id="movers"></div>
</div>
CSS
#nav1, #nav2, #nav3, #nav4 {
width: 98px;
height: 48px;
border: thin solid black;
float: left;
}
#movers {
width: 100px;
height: 50px;
background: blue;
display: none;
position: absolute;
opacity: 0.3;
}
#nav:hover > #movers {
display: block;
}
JS
$(document).ready(function(){
$("#nav").hover(function(){
$('#movers').stop().animate({'margin-left': '300px'}, 500);
});
});
I don't know what animation showing that code. But if you want to use margin left animation then you can use:
$(document).ready(function()
{
$('#nav').hover(function()
{
$('#movers').animate({
margin-left: '300px'
});
});
});
not tested but should work...
Try this DEMO
$(document).ready(function(){
$("#nav div").hover(function(){
var a =$(this).position();
$('#movers').stop().animate({'margin-left': (a.left-29)+'px'},500);
});
});
Try this.
$("#nav div").hover(function(){
$('#movers').stop().animate({
'left': $(this).offset().left
}, 500);
});
UPDATED FIDDLE

Categories

Resources