We Keep Coding

I can't extend a div in the correct direction with jquery?

I have a large header with a navigation bar within it. Once you reach the base of the header, the navigation bar becomes fixed at the top by itself leaving the header to scroll behind along with the remaining content. It snaps back into the header when you scroll up again. The functionality is perfect. I have two questions...
When it snaps at the top of the screen it becomes centered (which IS what I want), but it is only 500 pixels or so wide and I want the white background to extend beyond the buttons one either side to reach the edges of body (960px in width). When I changed the width, it only extended from the right hand side which then caused it to overlap off the edge of the page.
Even though it appears to be centred I am convinced that it is off by about 30 odd pixels. It may be a padding or margin setting???
THE WEIRDEST THING THOUGH, ONCE I PLACED THE CODE ONTO A WEB-SERVER FOR YOU TO TEST, THE NAVIGATION BAR DOESN'T CENTRE PROPERLY LIKE IT DOES WHEN I OPEN THE HTML FILE IN MY BROWSER... SO THERE'S A THIRD QUESTION? HOW DO I STOP IT FROM DOING THAT?
Thanks you and please help :)
The code is below but if you'd like to see it in action you may visit here (http://www.justletmeusethisnameplz.co.nf/).
Here is the relevant HTML
<div class="header"> <!-- BEGINNING OF HEADER -->
<div id="logo"> <!-- BEGINNING OF LOGO -->
<h1 class="sliding-middle-out">Hi</h1>
</div> <!-- END OF LOGO -->
<div id="navigation"> <!-- BEGINNING OF NAVIGATION -->
<div style="float:right"> <!-- BEGINNING OF IDK -->
<div id="slider"></div>
<div id="one" class="item"><div class="inside">Home</div></div>
<div id="two" class="item"><div class="inside">About Us</div></div>
<div id="three" class="item"><div class="inside">Content</div></div>
<div id="four" class="item"><div class="inside">Contact</div></div>
</div> <!-- END OF IDK -->
</div> <!-- END OF NAVIGATION -->
</div> <!-- END OF HEADER -->
Here is the relevant CSS
.header{
height:100px;
width:960px;
float:left;
background-color:white;
}
#navigation{
height:40px;
font-size:20px;
color:black;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:right;
background-color:white;
padding-top:5px;
position:relative;
}
#navigation.stick{
height:40px;
font-size:20px;
color:black;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
background-color:white;
padding-top:5px;
position:fixed;
}
.logo{
height:100px;
width:425px;
float:left;
}
Here is the relevant JavaScript/ JQuery
<script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./jquery-latest.js"></script>
<script>
$(document).on("scroll", function(){
if($(document).scrollTop() > 1){
$('#navigation').addClass("stick");
}else{
$('#navigation').removeClass("stick");
}
});
</script>
AND YES I AM AWARE OF CALLED UPON MANY JQUERY LIBRARIES.

So, you don't need jQuery for this. CSS will take care of it.
Your first problem with width can be solved by adding width:inherit; to #navigation.stick which will apply the width of the parent (in this case the header at 960px) to the element.
The next problem is that the logo pushes the navigation over. No problem, add this CSS:
#logo{
position:absolute;
}
That will break it from the flow of the page and allow the navigation to move to the left.
Finally for centering. You'll need some extra changes.
#navigation.stick{
text-align:center;
}
#navigation.stick > div{
float:none;
}
The only problem now will be that the slider effect over the menu might be broken because the menu is moving around but that'll be more involved to fix.

Is it possible to center a relative positioned div that contains an absolute positioned div?

boilerplate html/css/etc.
then
<div>
<div style="margin:0 auto; position:relative">
<div data-item data-ng-repeat="item in ItemCtrl.item"></div>
</div>
</div>
... the above uses an Angular template, which is incredibly simple. It just positions absolutely my content into one, two, or three columns. If I set the screen to two columns I'd like it to be centered. I'm able to do this via code, but I wanted a more fluid feel and I suspect CSS can do this, but I'm having trouble w/it.
Here's my template:
<div style="width:400px">
Content here ...
</div>
My Angular directive simply grabs the element above and changes its CSS position property to absolute and gives it a top and left property.
Why is this not working? Can this be done?
So in essence if I have one column, which is 400px and is put in my display at position 0, which would occur in this case, and the screen is at 1400px, I'd like the containing div to be displayed at x position (1400-400)/2.
If I have two columns, which are 400px and are put on my display at positions 0 and 410, which would also occur in this case, and the screen is at 1400px, I'd like the containing div to be displayed at x position (1400-810)/2.
UPDATE:
Here's a fiddle http://jsfiddle.net/0LLa1rs4/
UPDATE:
Here's a solution, although I'm not sure it's the most elegant. Any suggestions to make it better are welcome.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color:blue; position:relative; width:100%; margin:20px auto;">
testing ...
<div style="position:absolute; width:400px; left:50%; margin-left:-200px">
<div style="top:100px; left:0px; width:400px; background-color:green; position:absolute">
Item #1
</div>
<div style="top:200px; left:0px; width:400px; background-color:green; position:absolute">
Item #2
</div>
</div>
</div>
</body>
</html>

Well I'm not sure what you're trying to achieve, you jsfiddle is not very clear. Do you want the number of columns to be dynamic or you choose it? I've made a jsfiddle that could answer the issue but I'm not sure:
http://jsfiddle.net/0LLa1rs4/1/
Basically you should play with
display: flex;
And on the child element
margin: auto;

From your fiddle, it looks like you're trying to center elements horizontally within a container. Your description camouflages this.
Here's a simple fiddle that does similar things to the fiddle you posted, but in a much more concise way: http://jsfiddle.net/gunderson/5eLx4r4p/1/
HTML
<div class="container">
<div class="item">Item 0</div>
<div class="item">Item 1</div>
</div>
CSS
.container{
margin: 20px;
width: 100%;
}
.item{
width: 400px;
margin: 20px auto; /* margin (horizontal) auto is what does the centering, as long as width is defined */
background: green;
}

Creating a parallax-like effect using an image that isn't the background

I'm trying to create a scrolling effect that preferably doesn't use javascript (CSS only) but I understand if it's not possible, just exploring options.
My page looks like this:
When scrolling down I want the background image to have a parallax-like effect, staying static while the body's background and frame move around it.
Here's a sample of code to work with:
http://jsfiddle.net/J8fFa/7/
HTML
<body>
<div class="border-bg">
<div class="image-bg"></div>
</div>
<div class="border-bg">
<div class="spacer">
</div>
</div>
</body>
CSS
body{
background-color:#aaa;
}
.border-bg{
width:80%;
margin:30px auto;
background-color:#fff;
padding:40px;
}
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg');
height:400px;
background-size:cover;
}
.spacer{
height:900px;
}
I can see how this would work if the image was the background for the body, but as this is sitting on top of the body is there any way I can manipulate it to have a similar visual effect?

change your .image-bg class to:
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg') fixed;
height:400px;
background-size:cover;
}
this will prevent the image from scrolling
updated fiddle: http://jsfiddle.net/J8fFa/9/

Extend Sidebar Height to equate Content Height Using Javascript

I've a simple javascript function which is meant to increase my sidebar div's height to make it equal to the height of the content div. this is how I am doing this....
Javascript:
<script type="text/javascript">
function absar(){
document.getElementById("sidebar").style.height = document.getElementById("content").clientHeight;
}</script>
HTML:
<body onLoad="absar()">
<div id="sidebar" style="border:1px solid red">Few content</div>
<div id="content" style="border:1px solid red">
some content <br>
some content <br>
some content <br>
some content <br>
some content <br>
</div>
</body>
This code will make the height of sidebar equal to the height of content div. ** OK**
But when I paste same code in wordpress(where I've same id values content & sidebar) just after the body tag and provide onload="absar()" to body it does nothing, exactly nothing.
At this point when I've designed almost whole layout I can't go with a new solution like Faux Columns or table etc. .

At last a stupid css trick worked and worked perfectly,....
for my sidebar div I set
padding-bottom: 5000px;
margin-bottom: -5000px;
and for the container which contained sidebar and content divs. I set
overflow: hidden;
and it worked perfectly - Just like the way I wanted, Please tell If you know any drawbacks of this trick,... I'll be posting here if I found some,
Below is the example code,
HTML
<div class="main">
<div class="sidebar">Few Sidebar Widgets</div>
<div id="content">
Bang Bang Content <br>
Bang Bang Content <br>
Bang Bang Content <br>
</div> <!-- End of Content -->
</div> <!-- End of Main -->
CSS
#main{
overflow:hidden;
}
#sidebar{
padding-bottom: 5000px;
margin-bottom: -5000px;
}

Further to #Absar 's answer, can I just add my adaptation?
I did this:
.container {
overflow: hidden;
....
}
#sidebar {
margin-bottom: -101%;
padding-bottom: 101%;
....
}
I did the "101%" thing to cater for the (ultra rare) possibility that somebody may be viewing the site on a huge screen with a height more than 5000px!
Great answer though, Absar. It worked perfectly for me.

For several reasons, this should be solved by using proper CSS and HTML markup, not by Javascript. The main reason is the separation between your site logic and your presentation layer. CSS is just for visual layout, and simple presentation issues should be solved in the CSS domain. This seems to be the case of your question.
I suggest you have a look at this CSS-tricks article. It is both enlightening and thorough.
Hope it helps.

ajax loading content but my div won't expand to fit it

I have a page that static data in it will push a div down to make it longer. But when I use ajax loaded content then the div will stay as big it originally was and it looks like my new content will just overlap it...
I have a setup like this
<div id="wrap">
<div id="main-content">
<div id="content-fill">
<div id="files_left_pane">static content</div>
<div id="files_right_pane">ajax content</div>
</div>
</div>
</div>
#content-fill {border:1px solid #BDBDBD; width:919px;}
#files_left_pane {float:left; border-right:1px solid #BDBDBD; width:100px;}
#files_right_pane {float:right; widht:819px}
the height of the right pane is controlled by the height of the left pane since there is static content in there, mainly my navigation menu.
any advice?

as far as I test it when you add content then the div start from the left side. This happens because you didn't set width. for example add width:200px for #files_right_pane and check the results.
live example: http://jsbin.com/udori5

Set Your div position as relative
<div id="files_right_pane" style="position: relative;">ajax content</div>

Easiest fix is add float:left to content-fill