I am trying to repeatedly move a div to the right using requestAnimationFrame and Jquery's animate(). However, my div seems to stutter instead of continuously move. How come it keeps starting and stopping?
Here is a JSfiddle of my implementation
If you want to just see my code here is the html:
<body>
<div id="back">
<div id="myDiv">
</div>
</div>
</body>
The css:
#myDiv {
height: 50px;
width: 50px;
background-color: black;
position: absolute;
}
#back {
height: 200px;
width: 200px;
background-color: teal;
}
And the javascript:
function updateFrame(){
$("#myDiv").animate({left: '+=25px'}, function(){
window.requestAnimationFrame(updateFrame);
});
}
updateFrame();
Try this:
function updateFrame(){
$("#myDiv").animate({left: '+=1px'}, 10, function(){
window.requestAnimationFrame(updateFrame);
});
}
updateFrame();
use left: 1px instead of 25px then use animate speed.
jsFiddle
Related
I'm trying to use JQuery UI's slide animation to toggle a div.
When a link is clicked, the div slide in the page from the right (as seen in this fiddle).
$("#toggle").click(function(event) {
event.stopPropagation();
$("#slider").toggle("slide", {
direction: "right"
}, 300);
});
#toggle {
font-weight: bolder;
cursor: pointer;
}
#slider {
z-index: 100;
display: none;
position: absolute;
right: 0;
top: 50px;
width: 300px;
height: 200px;
padding: 20px;
background: #DDD;
border: 1px solid #000;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous">
</script>
</head>
<body>
<div id="toggle">
click me to slide
</div>
<div id="slider">
Slidin' in & Slidin' out
</div>
</body>
</html>
The problem I have is this scrollbar that appears during the animation, I don't want it to be displayed, like in JQuery UI's website, they don't have this scrollbar issue and I don't know how they did it.
I would like to avoid wrapping #slider into another container if possible, and I can't set his parent to overflow: hidden neither at the moment.
Is there a simple way to fix this ?
The easiest solution is to set overflow: hidden on the body element. However, since you said that you can't do that, an alternative solution would be to animate the width of the element in order to make it appear like it is sliding in. In reality the width of the element is just increasing/decreasing from 0 and it is animated to make it look like it is sliding.
In jQuery you would do this with the .animate() method and you would set the value of width property to 'toggle'.
$("#toggle").click(function(event){
event.stopPropagation();
$("#slider").animate({
width: 'toggle'
}, 200);
});
In addition, you can also prevent the text from wrapping with white-space: nowrap.
See the full example below:
$("#toggle").click(function(event){
event.stopPropagation();
$("#slider").animate({
width: 'toggle'
}, 200);
});
#toggle {
font-weight: bolder;
cursor: pointer;
}
#slider {
white-space: nowrap;
z-index: 100;
position: absolute;
right: 0;
top: 50px;
width: 300px;
height: 200px;
padding: 20px;
background: #DDD;
border: 1px solid #000;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="toggle">
click me to slide
</div>
<div id="slider">
Slidin' in & Slidin' out
</div>
</body>
</html>
I am trying to create a push animation, where one element 'pushes' the other. Something like this:
I finally got it implemented, thanks to this answer. But now I have another problem. I want #slider, leftBox, and rightBox to have a height based on its content. I don't want to set a fixed height to it.
If I remove their heights, and because their heights will be based on its content, I cannot assign a fixed margin-top to #buttons, so I will also have to remove margin for #buttons. Now that I had to remove all that, the #slider is hidden.
Also, I don't want #buttons in #wrapper, I want it in its own div places elsewhere.
How can I have a push animation like the above GIF, with the height being dynamic?
JSFiddle
$(document).ready(function() {
"use strict";
$('#leftBtn').click(function() {
$('#slider').animate({
left: '-400px'
});
});
$('#rightBtn').click(function() {
$('#slider').animate({
left: '0px'
});
});
});
#wrapper {
width: 400px;
background-color: chocolate;
margin: auto;
overflow: hidden;
position: relative;
}
#leftBox,
#rightBox {
width: 400px;
display: inline-block;
position: absolute;
}
#rightBox {
left: 400px;
}
#slider {
position: absolute;
width: 800px;
}
#buttons {
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="slider">
<div id="leftBox" style="background-color: cornflowerblue;">Hello
</div>
<div id="rightBox" style="background-color: darkkhaki;">Bye Bye
<br/>See you
</div>
</div>
</div>
<div id="buttons">
<div id="leftBtn" style="background-color: yellowgreen;">Click Me
</div>
<div id="rightBtn" style="background-color: yellow;">No, Click Me!</div>
</div>
I'm pretty sure i managed to get what you want.
I have two JSFiddles for you, the first one is supported by all (decent) browsers, while the second one probably fits what you want better but is only supported in all browsers except for internet explorer.
The first one:
http://jsfiddle.net/Ljmxe5cx/
#leftBox,
#rightBox {
width: 400px;
float: left;
}
#slider {
width: 800px;
}
The boxes do not fill the container completely height-wise but as i said this should have wider support.
The second one: http://jsfiddle.net/hr8nzde8/
#leftBox,
#rightBox {
width: 400px;
}
#slider {
width: 800px;
display:flex;
}
The boxes do fill the containers completely in this version, this should also just generally cause less trouble if you decide to change some CSS for the boxes themselves
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 have two divs. I want the left div to hide and show automatically according to the window size, i.e. I want it to be responsive.
On the other hand, I want to hide/show the left div manually if necessary. I added a black separator in the middle. When the separator is clicked the left div hides and the right div takes the whole width.
Until now, everything is ok.
BUT. When I hide/show the left div manually, it ceases to react to the responsive code.
Please check this JSFiddle and lend me some help.
Thank you very much.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.div1 {
background-color: #ffee99;
width: 300px;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.separator {
border-left: 3px solid #000000;
border-right: 3px solid #000000;
width: 0px;
height: 100%;
position: absolute;
top: 0px;
left: 300px;
z-index: 100;
}
.div2 {
background-color: #99eeff;
width: calc(100% - 300px);
height: 100%;
position: absolute;
top: 0px;
left: 300px;
}
#media screen and (max-width: 500px) {
.div {
display: none;
}
.separator {
left: 0px;
}
.div2 {
width: 100%;
left: 0;
}
}
</style>
<script>
$(function() {
function hideLeftDiv() {
$('.div1').hide();
$('.div2').css('width', '100%').css('left', 0);
$('.separator').css('left', '0px');
}
function showLeftDiv() {
$('.div1').show();
$('.div2').css('width', 'calc(100% - 300px)').css('left', '300px');
$('.separator').css('left', '300px');
}
$('.separator').click(function() {
$('.div1').is(":visible") ? hideLeftDiv() : showLeftDiv();
});
});
</script>
</head>
<body>
<div class="div1"></div>
<div class="separator"></div>
<div class="div2"></div>
</body>
</html>
Have a play with having two classes for identifying whether something is hidden or not i.e. desktop and mobile. You can then check whether its actually hidden with is(':hidden') and respond accordingly.
Check this fiddle for a quick demo http://fiddle.jshell.net/tmx3p6ts/31/
Read this: getbootstrap.com/css/#grid You can use the grid system to make a page like you have, but when the screen is getting to small, you can getbootstrap.com/css/#responsive-utilities use this link to know when to hide things.
So to help you maybe a step in the right direction:
<div class="container">
<div class="col-sm-4 hidden-xs">
This is the left div.
</div>
<div class="col-sm-8 col-sm-12">
This is the left div.
</div>
</div>
Something like this should work. Check out this fiddle: Fiddle with bootstrap
You can adjust the classes to any style you want.
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