I would like to make a div move from it's current position to the right(left: 1000px) using transitions? How can I do that and trigger it using Javascript?
Check the following fiddle
JS
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
What have you tried?
Here's a simple example using vanilla js:
var box = document.getElementById("box");
box.addEventListener("click", moveBox);
function moveBox() {
box.classList.add("move");
}
#box {
background-color:blue;
height:150px;
width:150px;
left:0;
transition:left .33s ease;
position:relative;
}
#box.move {
left:500px;
}
<div id="box">
</div>
and here is is on jsfiddle: https://jsfiddle.net/cx7n88s0/
To use left, you need to set a position of relative or absolute.
Use transition on the main id or class
Related
I have 2 Divs, side by side. By default, only the left one shows, and it centered in the page content horizontally. But when the user click's a button on the first div, it would slide to the left, and show the other div.
I already have the visibilty setup. But The problem is, I need my js to detect that the div's display:none attribute, and adjust the first div accordingly (float:left or float:right)
If possible, a fiddle would be nice also.
This should work for you if I got your problem completely:-
HTML
<div id="left">
<button onclick="showDiv()">Show</button>
</div>
<div id="right">
</div>
JS
function showDiv(){
var leftDiv = document.getElementById('left');
var rightDiv = document.getElementById('right');
leftDiv.style.float = 'left';
rightDiv.style.float = 'right';
rightDiv.style.display = 'block';
}
CSS
div{
width:200px;
height:200px;
background:gray;
margin:10px;
}
#left{
float:right;
}
#right{
display:none;
}
Fiddle
I have a group of objects (divs) that are small squares that I can move anywhere (there's a JavaScript function to move then). Those squares are all together and form a figure. So I have that figure centered by the CSS: "left: 600px" but now I'm trying to make a more responsive design for my page and I started to percents but I encountered 2 problems.
If I add the percentage to all the objects individually, when I zoom in or zoom out or when i resize my page they become more closer of far away from each other.
If I create a div including all the objects and then add "left:50%" when I click to move them they go instantanially another 50% to left.
So my mouse is this -> () [spacespacescpace] / \ <- and this the object, but I'm still selecting that object. So that's weird...
This is the HTML:
<div id="container">
<div class="VEPart" id="me2"></div>
<script type="text/javascript">
jcl.LoadBehaviour("me2", MoverBehaviour);
</script>
<div class="VEPart" id="me3"></div>
<script type="text/javascript">
jcl.LoadBehaviour("me3", MoverBehaviour);
</script>
<div class="VEPart" id="me4"></div>
<script type="text/javascript">
jcl.LoadBehaviour("me4", MoverBehaviour);
</script>
<div class="VEPart" id="me5"></div>
<script type="text/javascript">
jcl.LoadBehaviour("me5", MoverBehaviour);
</script></div>
Here's the CSS:
#me2
{
content:url("some image");
top:401px;
left:0px;
z-index:5;
}
#me3
{
content:url("some image");
top:400px;
left:-58px;
z-index:5;
}
#me4
{
content:url("some image");
top:400px;
left:58px;
z-index:5;
}
#me5
{
content:url("some image");
top:500px;
left:-57px;
z-index:5;
}
Try setting the position property to absolute and using the percentage. It sounds like you are having a problem with relative positioning.
#me2
{
content:url("some image");
position:absolute;
top:401px;
left:50%;
z-index:5;
}
http://www.w3schools.com/cssref/pr_class_position.asp
provide a style for all div..
Just put this in your css
div {
margin-left: 20%
}
I'm using jQuery 10.4.2 at the moment. I want to smoothly scale up an absolute positioned image. When I use the following code, I get no errors, but the animation does not occur. Instead, the image simply snaps to the full (100%) size.
HTML
<div class="box">
<img class="scaleMe" src="img.gif" />
</div>
CSS
.box { position:relative; height:0; padding-bottom:61.6667%; background-image:url('background.gif'); }
.scaleMe { display:block; position:absolute; bottom:0; left:0; z-index:1; width:50%; }
JS
$('.scaleMe').animate({width:'100%'}, 2000);
What am I doing wrong?
Update:
Here is a jsFiddle that works: http://jsfiddle.net/s_d_p/27DhK/
But here is a live demo that doesn't work.
You don't have a src on your image tag. Try:
<div class="box">
<img class="scaleMe" src="http://placekitten.com/g/200/300" />
</div>
http://jsfiddle.net/GZ8yX/
This is kind of lame, but if I capture the target width first and animate to that pixel value and then replace it with a percentage it works:
var oli = $('.scaleMe');
var toWidth = $('.box').width();
var scaleUP = function() {
oli.animate({width:toWidth}, 2000, function(){
oli.removeAttr("style");
oli.css("width", "100%");
});
}
I want to achieve hide/show with div's in html but in this way.
Here is my html:
<div id="left"></div>
<div id="middle">
<input type="button" id="button"/>
</div>
<div id="right"></div>
And this is my css:
body
{
height: 100%;
margin: 0;
padding: 0 ;
border: 0 none;
}
#left
{
background-color:#EEEEEE;
height:570px;
width:73.9%;
float:left;
}
#center
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.25%;
float:left;
margin:0;
}
#right
{
background-color:#D4EAE4;
float:left;
width:11%;
height:570px;
margin:0;
}
I want to do that when I click button on div center to hide div right and to expand divleft for the size of the div right and then move div center all the way to the right. I want to hide/show them with horizontal animation, such as from left to right or right to left.
Playing with the words can be tricky so I made a little pictures so you can actually see what am I talking about:
Start phase:
And end phase:
You can see a working demo here... http://jsfiddle.net/miqdad/3WDbz/
or you can see other demo which increment width of first div here .. http://jsfiddle.net/miqdad/3WDbz/1/
I had almost the same question a couple of days ago and maybe it helps you too.
this example uses a checkbox to hide the div. and make the other div 100% width.
javascript, When right div is hidden left div has to be 100% width.
the javascript code from the example:
$(function() {
$("#foo").on("click",function() {
if ($(this).is(':checked')) $('#checked-a').show('fast',function() {
$('#checked-b').css("width","60%");
$('#checked-a').css("width","40%");
}) ;
else $('#checked-a').show('fast',function(){
$('#checked-b').css("width","100%").show();
$('#checked-a').css("width","0%").hide();
});
});
});
and an example:
http://jsfiddle.net/mplungjan/5rdXh/
This is one of the best ways to hide a div element using JavaScript:
<html>
<head>
<script>
function hideDiv() {
document.getElementById("myP2").style.visibility = "hidden";
}
</script>
</head>
<body>
<button onClick="hideDiv()">Hide</button>
<br>
<br>
<p id="myP2">Hello world!</p>
</body>
</html>
Implementing with JQuery is easy. Have a look at this JSFiddle example: http://jsfiddle.net/q39wv/2/
(To all: Normally I wouldn't put only a JSFiddle link here, but this time I think it's worth showing the OP how the whole thing works, with some adjustments to his HTML and CSS).
A Javascript-only solution would be much more difficult to implement.
Using jquery's .css() i am changing the left attributes value to move a div left or right. Im looking for a way to animate this change as it occurs. Nothing ive tried is working, ive tried jQueryUI's .show(slide) function, but this moves the whole div, rather than just the 120px movement i need.
This is my current function which is working without an animation:
$('#plrt').live("click",function(){
var lm=$('.plwid').css("left");
lm = (parseInt(lm) + 120);
$('.plwid').css("left", lm);
});
this is the slide function, it does not work properly as the whole div goes from display:hide to display:show, rather than just moving the pixel change
try animate()
$('#plrt').on("click",function(){
$('.plwid').animate({ left: '+=120' }, 400 );
});
I have whipped up a quick example of what I think you are trying to achieve.
You should check out jQuery Animate.
//note live is deprecated
$('#plrt').on("click", function() {
//perform custom animation to add 120px to current left CSS position
$('.plwid').animate({
left: '+=120'
});
});
#plrt{
position:relative;
background:red;
width:100px;
height:100px;
cursor:pointer;
}
.plwid{
position:absolute;
background:blue;
width:100px;
height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="plrt"></div>
<div class="plwid"></div>
try this http://api.jquery.com/animate/
$('#plrt').on('click', function() {
$('.plwid').animate({ left: '+=120', 5000 });
});