We Keep Coding

How do I keep a bottom div a constant height below a top div with a div between them?

I have three divs aligned vertically and want the middle div to fade in and out with javascript by animating the opacity and setting 'display: none;'. However when I do this it causes the bottom div to move down the page to make room for the middle div.
How can I make the bottom div a constant height below the top div independent of whether the middle div is displayed or not?

You'll want to use visibility: hidden; instead of display: none;
visibility: hidden; hides an element, but it will still take up the same space as before.

Animating position of a div with javascript

I have a container div of other divs and I am trying to animate container divs position. Normally I can achieve this animating thing but I got a problem now. I am trying to animate this div to the center of the screen because there will be some other content( which I want to hide with the help of container div) behind the container div when it is animated to the center, and if it is not fixed at the center, the contents (which are behind the container div) becomes visible from left and/or right of the container.
when I set the container divs position as;
CSS:
#cont{ position:absolute; right: auto; left: auto; top: 130px;}
Container div appears at center and doesn't move when browser zoomed. This is the position that I want to have after animation.
Then I set the divs first position and the javascript animation like this;
CSS:
#cont{ position:absolute; right:20px; left: auto; top: 130px;}
This css works for me. Container's initial position is just perfect for me.
JS:
$('.open').on('click', function(){
$('#cont').animate({"right":"auto"},1000)});
But when I click on the '.open' element. Nothing happens.
Normally the JS codes works because I tried to change positions like that:
setting initial position in css like right:auto; and setting in JS like "right":"20px"
This is the fiddle that I have problem, not animating position:
http://jsfiddle.net/ctarimli/B9h2w/3/
This is the fiddle which I tried reverse (I set initial "right" and "left" as auto; and then changed in JS)
http://jsfiddle.net/ctarimli/B9h2w/5/
So, why the div is not animating the position in the first fiddle?

You can't animate to an auto value - how should the JS animate to it? Suppose you start from 20px, what values should it use to interpolate? 21..22..23.. or 19..18..17.. (it can't determine what the "target" value should be)
As you stated in your comment, you want it to be centered afterwards. Try giving the #cont a fixed width (like width: 150px;). Then animate to a right position of 50% (right: 50%) and correct the margin with an appropriate margin-right: -75px; like so:
$('.open').on('click', function() {
$('#cont').animate({
"right":"50%",
"marginRight":"-75px"
}, 1000)
});
See Fiddle: http://jsfiddle.net/B9h2w/17/

Div on top of Image moving out of it's right spot on the image

I've a div that I placed on top of a background image. The div is clickeable so it brings a popup dialog. The background image has got dots on which the div circles are to be placed.
The problem:
It works fine when both the background image is left aligned and the div elements have "position:absolute; left:x; top:y" but my problem is when I try to center align the image the absolute-x and absolute-y of the div are not being in the spots they have to be in the image.
Also when i change the size of the window the location of the div square shifts. I tried both absolute and relative positioning.
What I have:
<style>
.containerdiv { position: relative; width:100%; }
.cornerimage { position: absolute; top: 100px; left: 130px; }
.circle {
border-radius: 50%;
display: inline-block;
margin-right: 20px;
background: none repeat scroll 0 0 #701470;
height: 24px;
width: 24px;
}
</style>
And my div's here:
<div class="containerdiv" align="center">
<!-- my background image -->
<img border="0" src='http://www.infokerala.org/sites/default/files/images/barry_boehms_spiral_model.jpg' alt="">
<!-- trying absolute positioning -->
<div class="circle" id="bar" style="top: 142px; left:875px; position: absolute;"></div>
<!-- trying relative positioning -->
<div class="circle" id="foo" style="top: -68px; right: 332px; left:-332px; position: relative;"></div>
<div>
As you can see in the image, as I resize the window, the absolute positioned div starts moving off of the image.
The "relative" positioned div disappears after some time. I'm not sure why?
All I want is the div circles to be in fixed positions on top of the image regardless of the window size or where in the page I embed the image or any resizing activity.
What I wanted:
How the div moves out of it's initial location:
Finally even the "relative" positioned div also disappears, after I slowly shrink the window size :(
I understand that "absolute" positioning is absolute position with respect to the window, but why how can I make the div's stick to the original spots I wanted them to be?

Instead of using a div have you considered using an image map? You can make it look the way you want and it's positioning is based on the image so it will stay in the correct position. You can also attach the clicks as you would to a dive.
I know that image maps are considered a bit Web 1.0 but I have seen them used very effectively in exactly this sort of situation to produce very dynamic results with the addition of JavaScript and JQuery. This JQuery literary works greate: ImageMapster
Where as the floating div's solution has always seemed a bit like forcing a square peg in a round hole.

Since you know the size of the background image, it's easy to calculate percentile offsets instead of absolute offsets.
Say you have an image of 500x500 pixels as background, and you want to position the circle at position 50x50. If you put it at left:50px;top:50px the image will remain at that position even if the parent container resizes. However if you put it at left:10%;top:10% its offsets will scale along with the positioning parent.

so when you position it absolute, it is going to stay there, and when your background image moves because of the window resize, it is going to go away from the top of it.(actualt the circle is staying in its x,y position, and it is the background that is moving)
your solution is to go with relative.
I put your code in jsfiddle and the relative works fine
works fine here, not sure why you said it disapears after sometime? maybe some JS removes it?

You will need to add an event that recalculates the absolute position of the div either on page resize and onload:
<script>
function recalc(){
var width, height;
width = $('.containerDiv').width();
height = $('.containerDiv').height();
width = width / 2;
height = height / 2;
$("#bar").css({"position":"absolute","top": width + "px","left": height + "px",});
$("#foo").css({"position":"absolute","top": width + "px","left": height + "px",});
}
$(window).load(function(){ recalc();});
$(window).resize(function () { recalc();});
</script>

Bottom div with horizontally sliding content

I need an div that will be always at the bottom of the page, margin 172px at the left, and 383px at the right.
This div will have some images and text and left and right buttons. When you hover the mouse at the right button, for example, the content that was "invisible", after reaching the div's width limit, will start appearing from the right, sliding the content for the left.
I tried using position:fixed; bottom:0px, but I couldn't margin the div, and the width of it doesn't change when the screen size changes...
For example, this would be exactly what I want (the black div at the bottom):
If you know any jquery plugin that does what I want or if you know how to do something like this, please help me!

If you're using position: fixed, margin can not be applied. You can specify the left and right attributes though.
position: fixed;
right: 383px;
bottom: 0;
left: 172px;
I know it's not exactly what you're asking for, but you can then set the white-space and overflow attributes on that div to make it so that it will show a horizontal scrollbar.
white-space: nowrap;
overflow: auto;
The user would use the scrollbar on the bottom to move the content of the div. Here's an example: http://jsfiddle.net/rustyjeans/5nv84/
To use jQuery set overflow: hidden and add some functions that adjust the scrollLeft of the div, then add some controls that call those functions when they're hovered. Here's an example: http://jsfiddle.net/rustyjeans/FtSGn/

This shouldn't be too hard to do. You want a containing div that has the dimensions of the viewer. Then, have a div inside that one, with position absolute and dimensions that extend beyond the viewer in width. When the arrows are hovered over use jquery to change the "left" css property of the inner div. Did that help?
EDIT:
The outer div should have "position: relative;" to insure that the inner div is positioned relative to its margins.

Force vertical scroll bar on animation

I have a div that animated from height: 0 to height: 80% (80% of the body) and sometimes the content in this appearing div will be bigger than the div, requiring a scroll bar.
Problem is the scroll bar isn't apparant when the animation is running, and it only appears when it needs to after the animation. (kinda a good thing really)
But I'm being picky because I'm adding the final touches to my site and when the scroll bar randomly appears, it shifts the content left and it just looks funny.
So I want the scroll bar to be there all the time regardless. Is this possible?

Your animation library must be setting overflow: hidden on the outer element, which is why the scrollbar disappears.
Try wrapping the content in one more div:
<!-- the outer element; pass this one to the animation lib -->
<div>
<!-- the scroll bar will appear on this element -->
<div style="overflow: scroll; height: 100%">
<!-- content here -->
</div>
</div>
Try it here: http://jsfiddle.net/e3BkK/

To always display a vertical scroll bar, you can use
#yourDivId {
overflow-y: scroll;
}
If your contained content has a smaller height than #yourDivId, then the vertical scroll bar appears disabled.
If it has a bigger height, then the vertical scroll bar becomes enabled.

Add overflow: scroll to the body element through CSS: http://jsfiddle.net/GMcdf/1/.
body {
overflow: scroll;
}