Problem with animate jquery div with different pace - javascript

While I was animating two boxes with jQuery at same pace with setting marginTop, the second box will move faster than the first box.
<div id="box1" style="width:500px;height:80px;background-color:blue;">box 1</div>
<div id="box2" style="width:500px;height:80px;background-color:green;margin-left:510px;">box 2</div>
<script type="text/javascript">
jQuery("#box1").animate({marginTop:"-=80px"}, {duration: 1500});
jQuery("#box2").animate({marginTop:"-=80px"}, {duration: 1500});
</script>
However, when I apply the same setting Top, both box move at same pace.
<div id="box1" style="width:500px;height:80px;background-color:blue;position:relative;">box 1</div>
<div id="box2" style="width:500px;height:80px;background-color:green;margin-left:510px;position:relative;">box 2</div>
<script type="text/javascript">
jQuery("#box1").animate({top:"-=80px"}, {duration: 1500});
jQuery("#box2").animate({top:"-=80px"}, {duration: 1500});
</script>
Any idea why this happening this way?

You can see the effect more clearly in this fiddle
The reason why it is happening is because your second div is below the first div. And the margin property is relative to the elements surrounding it. The top div will move slower because the element that is above (in this case the body) is not moving. But your div on the bottom has to move faster in order to maintain that margin property relative to the element above it. In other words, it wants to MAINTAIN that property once the animation is finished.
In my fiddle, each div starts with margin-top: 100px. Now when they are animated, they want to marginTop: "-=80px", which means that they need to end up at margin-top: 20px. In the top elements case, it only needs to move 80px upward, because body isn't moving. But the bottom div needs to move 80px PLUS the amount that the top div moved, which is another 80px, for a total of 160px. The div needs to move 2x the amount of pixels in the same amount of time, so it will move faster.
We can further illustrate that the margin property is a relative property from this fiddle. Even though I'm only animating the top div, the bottom div is moving too because it needs to keep that margin value consistent.
The reason why your second piece of code allows the divs to move at the same speed is because the top property is not a relative property of any element besides it's container (the right container that is, probable that it's not it's direct container), so they will both move at the same speed.
Not sure if this is clear.

If you inspect the green box with Firebug or Chrome, you'll see that it's left margin has pushed itself underneath the blue box. It's still technically in line with the blue box, so jQuery calculates the end position (in line with the blue box). They end up next to each other at the same time just like your second example, but it just looks different. In the second example they look inline, so appear to move inline. This is what I have observed, anyway.

Related

Make div stick to non-child div with JQuery

So I'm trying to make a double slider in Owl-Carousel 2.0,
The first slider has 9 images, which means it has 9 dots. These dots are in placed in a container, #customdots. I'm trying to make the position of these dots be: horizontally centered (which works), and appear on top of the second slider, so position, bottom should be the height of the second slider (#sync2).
I tried using JQuery to do this, with the following line of code:
$("#customDots").css('bottom', $("#sync2").outerHeight()+ "px");
However, this doesn't get the actual #sync2 height, and it doesn't update on moving the window, neither does using height().
How would I go about making this #customDots div stick to the top of #sync2, when it can't be a child of #sync2?
See full codepen here: http://codepen.io/JJvanSteijn/pen/aJxgdW
I would wrap #sync2 in an element (I created #sync2Container), use that new element to position the second slider at the bottom of the window, and just add the dots to the top of that element. http://codepen.io/mcoker/pen/JWgKxJ
You need to add height to the CSS for #sync2:
#sync2{height:210px}
and use JS code to get the height:
$('#customDots').css('padding-bottom','0px');
$('#customDots').css('bottom',sync2.outerHeight());
Hope it's useful.

jquery animate doesnt work properly

im trying to animate the width of a table, so the content gets "closed" and "opened". So I manipulate the right and left gap:
$(".gaps").animate({width:"35%"},'slow', function(){
$(".gaps").animate({width: "10%"},'slow');
$("#content").fadeIn();
});
but somehow, its not animating linear. First 10% to 35% works fine, but the width jumps to over 100 at the start of the 10%-animation, so the content is jumping around. I tried some things like "width: "-=25%"", but even that didnt work. Am i having some other problems, dont i just see the obvious?
Thanks!
To finish this i will add the answer from the comments:
Sorry, but tables just do not behave nicely when it comes to animating sizes. Depending on what you are trying to do you might want to wrap your table with to divs: the inner one with static size and the outer one width overflow:hidden and then try to animate the outer one.
<div style="overflow:hidden; background:red;" class="animateMe">
<div style="width:300px;">
<table>...</table>
</div>
</div>
http://jsfiddle.net/mgwo9axL

Divs too wide when hiding/showing

I have two divs that contain two other divs each. One containing DIV's display is set to none. I have a button that toggles the containing DIVs so I can alternately hide/show the containing div and thus the two divs inside. The inside DIVs are set the 49% width, floated left/right. Problem I have is the fist time the visible DIV is hidden and the hidden one displayed the inside two divs are way too wide. If I resize the width of the browser just a tiny bit with my mouse they are the desired size and any time I toggle the visibility from here on out all is fine. If I reload the page it is wrong on the first toggle. Works the same in IE 10 and Chrome so don't think a browser issue.
The inner two divs both contain high charts that are generated and rendered to the inner divs I want them to be side by side and almost (99%) the width of my page.
Here is snipped of my DIVs to be hidden and shown that contain the inner DIVs with highcharts
<div id="highChartsNG" style="width:99%;display:none;">
<div id="FillRateHigh" style="border:2px solid black;width:49%;float:left;"></div>
<div id="WaitTimeHigh"style="border:2px solid black;width:49%;float:right;"></div>
</div>
<div id="LowChartsPEAK" style="width:99%">
<div id="FillRateLow" style="border:2px solid black;width:49%;float:left;"></div>
<div id="WaitTimeLow"style="border:2px solid black;width:49%;float:right;" ></div>
</div>
This is a snippet of the javascript function I call on a button click to toggle on/off on the display of two containing DIVs
document.getElementById("highChartsNG").style.display = "none";
document.getElementById("LowChartsPEAK").style.display = "block";
Fiddle showing problem, see comment of mine below on how to reproduce http://jsfiddle.net/rplace/UTTz4/1/
Okay, after hours of searching I finally found the problem (I think). I was determined to find the solution =).
The problem is multiple-fold.
The first problem was the display:none; property on the second chartcontainer. For some reason the widths calculated for the charts and their containers were incorrect for the hidden div. So I removed the property from the HTML, and instead hid it dynamically with document.getElementById("LowChartsPEAK").style.display = "none"; in the JS right after the chart rendering functions. If you do this, your SVG's will fit your containers already, although the last one has a slight shift.
Apparently HighChart doesn't like percentage-based parent containers. When you go to your updated fiddle , run the fiddle with both:
<div id="wrapper" style="width: 800px;">
<div id="wrapper" style="width: 100%;">
Open the console and check the results (container name - SVG width - container width). When the wrapper is given a pixel width, all container widths are equal (as it should be). Now check the wrapper with percentage width: your last SVG will be about 6 to 20 pixels smaller. The only solution I have found for eliminating that small shift in the last container, is that somewhere a top container must have a pixel-width.
EDIT: pt's and em's also work. It's only % that causes problems
If you are hiding DIV, you should be aware that browser won't calculate %-based widths with display:none. Then if browser won;t calculate DIV, then also Highcharts are not able to do it ;)
Check this FAQ - when showing chart update his size or call reflow().

How to keep div in the center of viewport

I am creating a feedback system for one of my projects. My target device is iPad. Basically what happens is a div called into the page via ajax and it is supposed to overlay the content underneath. I have that part working.
What I want to do is have the div locked to the middle of the view-port. I have tried position:fixed on my element which works, except it will lock into the wrong position. It seems to be centering itself to the initial position of the viewport. If I scroll down to the bottom of a longer page and call my feedback window, it will still be near the top.
Ajax Page (this runs when the page is called)
$(document).ready(function(){
$(".popup").css({
top: "50%",
left: "50%",
marginLeft: -$(".popup").width() / 2,
marginTop: -$(".popup").height() / 2
});
});
If I can find the top of the viewport I think I'd be able to get this working right.
I've looked into: http://www.appelsiini.net/projects/viewport but it doesn't really solve my problem.
Any help, advice or pointers in the right direction would be greatly appreciated! Thanks!
Fixed positioning is applied relative to the top-left corner of the window, regardless of how far down you're scrolled (which I assume is what you want).
So:
.popup {
position:fixed;
top:20px;
left:40px;
right:40px;
}
Will, first of all, put your popup 20px from the address bar (meaning, even if you scrolled to the bottom).
Next, setting both left AND right will "stretch" the fixed element to start and end 40px (or whatever you give it) from both sides of the window. That's a convenient way of centering this popup div.
If your popup needs to be a fixed size – not stretched based on the width of the window – you could set both the left and right (to zero probably) and then inside this div, have another div with margin:0 auto, which will center that inner div within the fixed outer div.
P.S.
Just as you can set both left and right, you can also set both top and bottom, which will have corresponding results. However, if you need a fixed height, you won't be able to vertically center it using the margin:auto trick.
Don't know if it's the case, but If $(".popup") it's initially hidden by display:none, then it's width and height will be zero on page load.

How do I refresh auto margins when I resize an element using Javascript?

I have a DIV in the center of my page which has margin-left and margin-right both set to auto. I want to be able to enlarge or shrink that DIV. Unfortunately when I do so, the position of it on the screen does not change, meaning that it is no longer centered.
<div id="content" style="margin-left:auto;margin-right:auto;width:240px">
<p>Lots of text</p>
</div>
Meanwhile elsewhere:
$("#content").width(480);
At this point, I get my div no longer centered, but overbalanced to the right. Similarly if I set the width smaller than 240, it then becomes too far to the left.
How do I ensure that my margins actually adjust when the width changes? Needs to work in all modern browsers.
The div ist still centered. Just the text is aligned left.
Try this:
<div id="content" style="margin-left:auto;margin-right:auto;width:240px;border:1px solid red;text-align:center">
<p>Click here</p>
$('p').click(function(){$("#content").width(480)})
-
http://jsfiddle.net/nvzaw/1/
I have posted an answer to a similar problem (about window resize) here
Maybe this helps you!

Categories