We Keep Coding

Html, css, and jQuery. Something isnt working in my code

I'm new to jQuery and watching a tutorial for a sticky nav bar and something went wrong and idk what to do!
In my Script file I have it so it runs this code on load [http://pastebin.com/XYWR5tKJ][1] and I have a class in css to use with the nav Placeholder wrap.
Well the margin property doesn't seem to be working, if you run the site and scroll the whole way down the nav bar sticks to the side, its supposed to be centered(the margins job). I have no idea why its not doing it, its probably something stupid but please help!`
HERES THE CODE__
Script.js: http://pastebin.com/XYWR5tKJ
Css: http://pastebin.com/Y51rYJVE
HTML: http://pastebin.com/tTftEJKh
__
THANKS!
[1]: http://pastebin.com/tTftEJKh

Basic set up for a fixed, centered element is:
Containing element that is position fixed.
An element within that has margin:0 auto; and a set width.

I'd say that your left:0 inside fixed is counteracting things mostly.
Since you didn't specify responsive is this good enough for you?
http://jsbin.com/nevuqi/4/
Also probably better, as a tip to share code in something like a JSFiddle, Codepen or JSBin to name a few... good for learning inside of too.

This question reminded me of a JSFIDLE I made a while back to learn the same concept. I've updated it with comments to make it more readable...
It doesn't really answer your question but I thought it would help understand the various components involved when implementing the sticky nav effect in JQuery for anyone who comes across this thread who is unsure.
JavaScript/JQuery code:
(refer to jsfiddle for the accompanying html/css )
//window - the container that holds and renders the document.
//document - the rendered html within the window. the document can be bigger than the window as with this example as scrolling is needed..
//refer to css for more info on the appended classes to nav bar and proceeding element.
$(document).ready(function () {
//add a scroll function to the document that
$(document).on('scroll', function () {
//get the number of pixels that the window is from the top of the document. this is zero at first.
var scrollTop = $(this).scrollTop();
//insert the name of your sticky nav element here in place of .scrollFixed
$('.scrollFixed').each(function () {
//scrollFix variable is initialized as .scrollFixed object with all its attributes.
var scrollFix = $(this);
//gets offset of sticky nav element in pixels
var topDistance = scrollFix.offset().top;
var previousElement = scrollFix.prev();
//this is just for debugging and learning purposes.
$('.fixed_info').html('nav bar is ' + topDistance + ' pixels from top of document');
//if you put topDistance here instead of the number manually, the nav bar will flicker.
//unsure why..
//checks to see whether nav element has been scrolled past the top of window.
if ((298) < scrollTop) {
//make sticky nav a fixed element
scrollFix.addClass("stuck");
//extend the element below for this example so proceeding elements don't visually jump up
//when closing the empty gap.
$(".element_below_fixed_nav_bar").addClass("extend");
//indicates element is fixed!
scrollFix.html("Element now fixed!");
//you will have to manually put the topDistance here as well...
//this checks whether the nav element's original top has passed the top of
//the enclosing window.
//it needs to become scrollable again
} else if (298 >= scrollTop && scrollFix.hasClass('stuck')) {
//make sticky nav a scrollable element
scrollFix.removeClass('stuck');
//make proceeding element shorter to compensate for sticky nav pushing elements below it down.
$(".element_below_fixed_nav_bar").removeClass("extend");
//indicates element is scrollable!
scrollFix.html("Element now moveable!");
}
});
});
});
It's very similar to the logic behind the JavaScript code you linked.
find number of pixels of window from top of document. starts at 0 when document first loads unless otherwise coded. This updates every time you scroll.
find (offset) number of pixels of nav bar element from top of document.
check if nav bar has reached the top of the window by checking its offset to the window. If it is then make it fixed.
check whether the nav bar's original offset has fallen below the top of the window. If it has then make the nav bar scrollable.
It doesn't really answer your question but I thought it would help understand the various components involved when implementing the sticky nav effect in JQuery for anyone who comes across this thread who is unsure.

jquery/javascript show hide content and push site to right

I have a fixed div to left that fills the left site (ca 20% of the total width). Its a navigation menu. To the right I have a Span with my Site content wich is scrollable.
I want to be albe to close the menu to the left, when its closed I want the width of the content span to be 100%.
I'm using Rails 4 and Bootstrap 3.
Don't know much jquery/javascript, could need a clue or a push in the right direction. Thanks!

since you have Bootstrap in picture, you can use Jquery to do the magic for you. Hide the left div using the id something like this $('.target').hide(); and than increase the width of the corresponding right div to 100% width. something like this:
if you td is
** td id="myRow" /td **
than set the width to 100% using CSS : $('#myRow').css(width,"100%");
this should work.

How to make a top bar slide down by pulling a button?

I can't find a script or example of this... I'd like to have a little div on top of window, when you hover on it, a top horizontal bar slides down. I've made a schema :
thanks

Check the fiddle:
http://jsfiddle.net/EghgN/8/
You can add your menu contents to the structure.

Bootstrap 'Affix' wont affix on the right

I've created an example here : http://jsfiddle.net/Ninjanoel/9GEGU/
Basically, I'd like to affix something to the right, in this case, the red box, I want it to appear to just pin itself to the top as it should once the correct amount of page scroll has occurred, but everytime it 'affixes', it jumps to the left, overlapping the content I already have on the left.
It's great that bootstrap has such a volume of documentation, but unfortunately I think I'm missing something regarding this. Please help.
var offsetFn = function() {
return $('#sidebar').position().top;
}
$(document).ready(function(e) {
$('#sidebar').affix({
offset: {top: offsetFn}
});
});​
is a code snippet I found on Stack overflow to not have to guess the top offset value, but even if I give it a simple value, when the div becomes affixed it jumps left.
Note about the fiddle : it doesn't appear to be working very well, at least the version on my hdd jumps left, but it is the code i'm using basically, and the small window size may complicate things, green and red boxes are suppose to be vertical columns

Create inner div for sidebar. Affix is setting position: fixed to column therefore making it not working.
Edit: see http://jsfiddle.net/9GEGU/2/ and your function is needless, only causing weird behaviour in FF, so remove {offset: {top: offsetFn}}. It will look the same but scrolling will be smoother.
Also set width of span5 (290px) to the #sidebar because when element has position: fixed it is removed from document flow and isn't limited by parent's width.

vertical align with specific margin top and bottom

I have a div (the green one) positioned in the middle of the window but I want that when I resize the window, this div ALWAYS respect a margin (the height of the logo and the footer).
I really don't get it. Could anyone have a look at it? The proyect is this one: http://sfrpsicologia.com/inicio.html
Thanks for everything

give ol & li width using %