Develop Reference

add and remove function not working in jquery

I tried to add a secondary navigation bar that is fixed to the top-right of the webpage created and only appears when we scroll the page little bit down. this navigation is contained in the "sticky" class. the code and syntax seems to be right. but this bar is not hiding itself when the webpage is on the initial stage. its always there. I only want it to appear when the webpage is being scrolled down. pls help me fix this.
$(document).ready(function() {
$('.js--section-features').waypoint(function(direction) {
if (direction == 'down') {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
});
});

Consider the following example.
$(function() {
var navbar = $("nav");
var sticky = navbar.offset().top;
function addSticky() {
if (window.pageYOffset >= sticky) {
navbar.addClass("sticky")
} else {
navbar.removeClass("sticky");
}
}
$(window).scroll(addSticky);
});
body {
margin: 0;
padding: 0;
}
.row {
height: 100px;
}
nav {
overflow: hidden;
background-color: #333;
margin: 0;
}
nav.sticky {
position: fixed;
top: 0;
width: 100%;
}
nav.hidden {
display: none;
}
nav ul {
list-style: none;
margin: 0;
}
nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<img src="resources/images/logo-white.png" alt="omnifood logo" class="logo">
<img src="resources/images/logo.png" alt="omnifood logo" class="logo-black">
</div>
<nav>
<ul class="main-nav">
<li>Food delivery</li>
<li>how it works</li>
<li>Our cities</li>
<li>Sign-up</li>
</ul>
</nav>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius convallis turpis, semper varius lacus tincidunt eget. Ut in risus enim. Pellentesque consectetur leo at turpis malesuada pulvinar. Fusce venenatis lacinia hendrerit. Donec
quis lobortis justo. Duis suscipit neque ac justo blandit, ut egestas odio cursus. Donec porta ultricies nisi, id dictum purus ultrices et. Morbi tempor, purus at interdum blandit, sapien dui varius metus, quis euismod odio nunc facilisis nisl.</p>
<p>Morbi malesuada ornare suscipit. Proin in commodo urna, id tempor enim. Nullam egestas purus dictum nisi varius, et blandit metus lobortis. Mauris quis tellus ligula. Praesent tristique dictum massa, et blandit lectus hendrerit eget. Duis eget elementum
turpis. Vivamus efficitur sed arcu condimentum consequat. Suspendisse id tortor in velit venenatis congue. Proin non arcu quis nunc consectetur dignissim.</p>
<p>In pretium feugiat vulputate. Praesent feugiat eleifend lacus, eu euismod ante posuere ac. Morbi erat massa, tempor eu ex blandit, iaculis eleifend sem. Etiam quis velit ut dolor auctor imperdiet. Ut egestas malesuada metus et convallis. Praesent ut
finibus sapien. In quis enim in dui tristique cursus semper quis ligula. Nullam quis molestie lacus, et viverra mauris. Sed nec rhoncus lectus. Donec aliquam, neque ut hendrerit ultricies, tortor ex rutrum nunc, quis imperdiet ipsum lacus quis purus.
Pellentesque elementum lacinia elit, sit amet semper neque luctus vel.</p>
<p>Fusce malesuada nunc consectetur nisi vestibulum, et rutrum velit malesuada. Phasellus rutrum erat a felis sollicitudin, vitae luctus enim dignissim. Donec sagittis consequat metus. Quisque gravida magna vulputate sapien consectetur varius. Proin commodo
viverra convallis. Morbi ac commodo eros. Sed ornare eros ac nisi maximus efficitur. Aliquam at blandit risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ac sapien eget lorem luctus porta. Etiam
eget sem sodales, viverra tellus at, placerat lorem. Etiam convallis, erat at hendrerit pretium, lorem dui efficitur arcu, nec fermentum lacus quam nec mauris.</p>
<p>Ut ac tortor urna. Nullam vulputate auctor consectetur. In vehicula mauris sit amet nunc pellentesque, eu dapibus ligula tincidunt. Aenean in cursus augue, vel blandit leo. Proin scelerisque sem erat. Nunc magna dui, consectetur id est non, vestibulum
vestibulum metus. Aliquam semper nisi augue. Proin diam sapien, euismod eget maximus eu, commodo in libero. Nam nec dui tellus. Aliquam eu suscipit quam. Fusce vehicula lorem et velit finibus congue. Sed a urna diam. Pellentesque dignissim risus in
magna semper malesuada. Sed sagittis et tortor sed rhoncus. Fusce ac enim in urna lobortis auctor vitae sed lorem.</p>
</div>
See More: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
It's unclear from your example what .waypoint() is. I have to guess it's some callback event for a map element. There is also no specific reference, just "down", which I assume is in reference to scroll direction. It's hard to know when your code would need to add the Class. I am guessing anyone the user triggers the down scroll.
I would suggest, if it's still not working, to check the console for errors. Maybe add console.log inside your callback, so you can see what value direction has. Maybe it never gets a value of down.

I figured it out. I am posting this answer to only let people know what the actual problem is in my code.
<nav class = "sticky">
i defined my secondary nav class to the main nav permanently. that`s why the "sticky nav bar was always on the top of my website.

CSS - Footer Repositioning Below Vertically Centered Content

The Problem:
I'm trying to set my masthead's height equal to the viewport height and vertically center the nested content using the table/table-cell method. When I set the height value of the masthead's parent div (the main element) to 100%, the footer repositions just below the masthead because the main element's height is limited to the viewport height, even with a clearfix.
Potential solutions that I'd like to avoid:
Moving the masthead content before the main content (Possible SEO
impact?)
Moving the masthead content into the header (Using CI framework, not an option)
Using vh units / JavaScript / jQuery (I want 100% browser compatibility, ideally)
I'd greatly appreciate any help or insight into this issue that you can offer. If there isn't a pure CSS solution that meets the above criteria, I'll select the most browser-friendly solution.
Code Snippet Demoing the Issue:
.clearfix:after,
.clearfix:before {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
*, :after, :before, html {
box-sizing: border-box;
}
* {
margin:0;
padding:0;
}
html, body, .wrapper, main, .masthead, .masthead .section-content {
height:100%;
}
body {
background-color:#dddddd;
}
.section-content {
background-color:#eeeeee;
}
header {
position:fixed;
top:0;
left:0;
right:0;
}
header, footer {
height:61px;
line-height:61px;
background-color:white;
}
nav, .section-content, footer div {
width:75%;
margin-left:auto;
margin-right:auto;
}
li {
display:inline-block;
}
main {
padding-top:61px;
}
section {
padding-top:1rem;
padding-bottom:1rem;
}
h1, h3, p {
padding-bottom:1rem;
}
.centered-wrapper {
display:table;
height:100%;
}
.centered-content {
display:table-cell;
vertical-align:middle;
}
<body>
<div class="wrapper">
<header>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
</header>
<main class="clearfix">
<section class="masthead">
<div class="section-content">
<div class="centered-wrapper">
<div class="centered-content">
<h1>
Heading 1
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus.</p>
</div>
</div>
</div>
</section>
<section>
<div class="section-content">
<h3>
Section Header
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus. Sed rhoncus, mi ac egestas elementum, diam neque interdum arcu, non varius ligula lectus molestie dui. In aliquet nec magna sit amet hendrerit. Donec vehicula, nisl eget ullamcorper eleifend, ante ex accumsan odio, porttitor aliquet sem velit non elit. Vestibulum efficitur molestie ipsum, id pellentesque odio. Nulla accumsan ligula neque, id pharetra elit molestie sed. Sed sit amet eros et nisi efficitur dapibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus. Sed rhoncus, mi ac egestas elementum, diam neque interdum arcu, non varius ligula lectus molestie dui. In aliquet nec magna sit amet hendrerit. Donec vehicula, nisl eget ullamcorper eleifend, ante ex accumsan odio, porttitor aliquet sem velit non elit. Vestibulum efficitur molestie ipsum, id pellentesque odio. Nulla accumsan ligula neque, id pharetra elit molestie sed. Sed sit amet eros et nisi efficitur dapibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus. Sed rhoncus, mi ac egestas elementum, diam neque interdum arcu, non varius ligula lectus molestie dui. In aliquet nec magna sit amet hendrerit. Donec vehicula, nisl eget ullamcorper eleifend, ante ex accumsan odio, porttitor aliquet sem velit non elit. Vestibulum efficitur molestie ipsum, id pellentesque odio. Nulla accumsan ligula neque, id pharetra elit molestie sed. Sed sit amet eros et nisi efficitur dapibus.</p>
</div>
</section>
</main>
<footer>
<div>
<p>
© Tyler Fuller
</p>
</div>
</footer>
</div>
</body>

This seems to be a common problem for many people. I'm afraid one of the best solutions at the moment is to use vh units with this javascript 'buggyfill' until iOS Safari fixes their browser.
I know you said you don't want a vh or JavaScript solution, but you did say you want 100% browser compatibility. Unfortunately we can't have our cake and eat it, too. Case in point: Modernizr.
That being said, don't be afraid to use that buggyfill I linked to. It's very easy to use. Here's a demo CodePen: https://codepen.io/krabbypattified/pen/ZKaKJw/
A webpage without the "buggyfill": http://lab.gasteroprod.com/vub/index-ios-issue.html
Same webpage with the "buggyfill": http://s.codepen.io/krabbypattified/debug/ZKaKJw/YvkgOPPypyok
(feel free to visit those links on iOS Safari)
The vh solution for your website is simple. Just remove the height from the main element and add a height: 100vh to the .masthead.

Hide the content under transparent fixed navbar while scrolling down

the problem:
I have transparent fixed navbar with some gap (margin-top) and below content, which is located under the navbar while scrolling down globally. The problem is that navbar is transparent and the background of the page is a dynamic slideshow of different images so I can't use z-index and hide it by changing background color or put image same as background..
In conclusion:
Transparent fixed navbar with gap
Dynamic images background
It has to be global scrolling (can't use scrolling for div content)
I'am using bootstrap 3
Drawings:
WRONG: [How its looks now][1]
RIGHT: [How it should be][2]
[1]: http://i.stack.imgur.com/Iwc1h.png
[2]: http://i.stack.imgur.com/f1Sbd.png
Sorry for problems with understanding me, here is code:
http://jsfiddle.net/5myw4e26/

if you're using a position fixed at your navbar you can do a top div empty with float left and a height with the size of your navbar.

I managed to accomplish what you we're trying to do. It's probably not the best solution, but it works.
Using JQuery I calculated when a paragraph (p.content) and the navigation-bar collided.
There's more than enough to finetune, so you can adjust it to your needs.
JQuery
$(document).ready(function() {
$(document).scroll(function() {
$("p").each(function() {
if ($(this).offset().top <= $(document).scrollTop() + 32) {
$(this).css("opacity", "0");
} else {
$(this).css("opacity", "1");
}
});
});
});
Note that the 32 in $(this).offset().top <= $(document).scrollTop() + 32 is the height of the navigation bar.
Example:
$(document).ready(function() {
$(document).scroll(function() {
$("p").each(function() {
if ($(this).offset().top <= $(document).scrollTop() + 32) {
$(this).css("opacity", "0");
} else {
$(this).css("opacity", "1");
}
});
});
});
body {
margin: 0px;
font-family: Arial;
font-size: 12px;
min-height: 2000px;
}
nav {
width: 100%;
height: 32px;
line-height: 32px;
text-align: center;
position: fixed;
top: 0;
border-bottom: 1px solid black;
}
p.content {
margin: 12px 0px 0px 0px;
background: yellow;
}
p:first-of-type {
margin: 44px 0px 0px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="wrapper">
<nav>
Navigation Bar
</nav>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed dolor metus. Morbi tristique nisl vel lectus rutrum, non ultricies dolor feugiat. Fusce nec dolor in purus consectetur lacinia non sit amet turpis. Donec facilisis tortor mauris, nec vulputate
massa fermentum vel. Praesent in neque quis lacus hendrerit tincidunt sed et dolor. Nullam fermentum, orci at pulvinar imperdiet, lacus libero facilisis ante, sit amet venenatis sem tortor in nibh. Ut ullamcorper porta fermentum. Praesent faucibus,
erat eget iaculis porttitor, purus purus posuere nulla, eget lacinia odio libero in lectus. Vivamus sem ex, commodo ac tortor ut, fringilla vulputate eros. Ut iaculis augue non ipsum porttitor ornare.</p>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis tellus luctus ornare hendrerit. Curabitur hendrerit justo ante. Maecenas scelerisque ligula condimentum, aliquam tortor sit amet, aliquam lacus. Interdum et malesuada fames ac
ante ipsum primis in faucibus. Ut ut augue vel massa tempus laoreet. Nulla porttitor, sem ac aliquet facilisis, purus ligula pulvinar ipsum, quis volutpat enim elit sed ante. Pellentesque quis diam vestibulum, viverra elit at, sollicitudin mi. Vivamus
vehicula ex eu justo feugiat, a ullamcorper nisi commodo. Phasellus sed tortor eget purus mollis tempor at sit amet libero. Fusce tincidunt est est, tristique pretium justo feugiat eget. Donec et lacus vehicula, aliquam sapien a, eleifend tortor.</p>
<p class="content">Vivamus vitae placerat elit. Integer eleifend nibh at purus suscipit rutrum. Aliquam et fermentum mauris. Aenean gravida velit a vehicula aliquet. Duis neque tortor, luctus eget condimentum eget, venenatis eget lorem. Maecenas sed ullamcorper tellus.
Donec euismod bibendum nunc, non ullamcorper neque cursus eget. Curabitur dapibus orci non quam vestibulum ornare. Aenean tincidunt interdum justo faucibus feugiat. Proin molestie lorem ultricies neque consequat, commodo cursus nisl molestie. Donec
gravida viverra nisl, consectetur laoreet libero interdum ac. Vivamus varius vestibulum quam eu rutrum. Pellentesque id rhoncus massa.</p>
<p class="content">Nunc finibus leo mollis efficitur tempus. Suspendisse ac elit lectus. Proin auctor ipsum faucibus arcu cursus congue. Nam rutrum odio non enim euismod auctor id in justo. Ut non sagittis orci, vel tincidunt elit. Mauris odio sem, varius eget tortor
at, commodo pretium massa. Cras sed rhoncus dolor, non dictum sem. Curabitur in imperdiet turpis, in imperdiet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas erat nisl, sagittis id eleifend ut, consequat eget orci. Aenean
blandit arcu non varius ornare.</p>
<p class="content">Pellentesque molestie consectetur lectus in iaculis. Curabitur efficitur ac nisi vitae eleifend. Morbi semper tristique ornare. Morbi in cursus mauris. Morbi et risus velit. Etiam lobortis commodo dolor, ac pulvinar dolor gravida vel. Donec sollicitudin
metus urna, eu consequat magna vehicula a. Vivamus interdum, enim non consequat ultrices, lacus enim vehicula ante, vitae tristique tellus nibh sit amet eros. Aliquam consequat eu orci id rutrum. Donec lacus eros, eleifend et viverra vitae, congue
at turpis. Quisque rhoncus fermentum ex sed lobortis. Fusce luctus, lorem vitae condimentum gravida, nibh tortor elementum nulla, id auctor nisl ex eu lectus. Donec auctor ligula sem, et porttitor neque eleifend vitae. Aliquam felis lacus, sollicitudin
laoreet dui mollis, scelerisque auctor metus.</p>
</div>

Jquery smooth scrolling (not anchor)

I've seen a couple of articles here but I just can't find the right answer.
I'm not looking for a smooth scrolling to an anchor point, I already got that, I'm looking for a smooth scrolling like this or this.
somehow they both uses this jquery which I don't know how to implement.
I've tried this one: simplr-smoothscroll. But this one is not really that 'smooth', when you scroll fast it slows you down.
I've also tried: simple smooth-wheel. But I couldn't implement that properly, since my body height is set to 100%, someone else complained about that as well on github. Above that, the demo provided in the Download (not on github) didn't work for me aswell, tried to fix that demo but still no luck.
I've also try to use the source of that one: smoothwheel. However I'm not a javascript magician with javascript so, no couldn't get that done.
Here is the simple jsfiddle page I have, where it should work: jsfiddle
<div id="menubar">
WelcomeWelcomeWelcomeWelcome
</div>
<div id="container">
<div id="content">
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a tortor fringilla, volutpat justo malesuada, suscipit justo. Fusce ante dui, bibendum non sapien vitae, hendrerit ultricies enim. Quisque dictum fermentum congue. Vestibulum posuere iaculis arcu, ultrices pharetra mauris ultrices finibus. Ut pulvinar sit amet justo et rhoncus. Maecenas id ante vel tortor vulputate commodo in in lacus. Nunc auctor vulputate ornare. Donec lacus odio, maximus ut massa a, finibus pulvinar justo. In facilisis quam sed pharetra aliquet. Etiam varius non eros non suscipit. Vestibulum venenatis placerat accumsan. Nulla nec consequat mauris. Etiam nisl magna, semper vel sem mollis, vehicula bibendum urna. Nunc porttitor dui sed volutpat imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra ligula sit amet sapien mollis malesuada.
Sed mollis convallis risus. Duis volutpat, diam rutrum pretium scelerisque, odio nunc faucibus odio, sit amet cursus justo justo ac mi. Aenean laoreet et eros non viverra. Praesent id erat vel nisl molestie pharetra. Pellentesque eu eros nibh. Aliquam mollis, tortor eget consequat varius, metus sapien suscipit nisl, eu convallis ligula orci eu erat. Fusce et ex dignissim eros porta eleifend in quis sapien. Suspendisse potenti. Quisque non vehicula mauris, eget ornare tellus. Pellentesque aliquet massa augue, sed hendrerit massa condimentum eget. Nunc vulputate neque nunc, ac interdum velit tristique sed. Donec vestibulum nibh at tellus condimentum, sed rutrum quam pellentesque. Mauris congue blandit justo, a auctor est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse et sem vulputate, malesuada lectus ultrices, luctus elit.
Ut enim metus, lobortis in malesuada sed, fringilla sit amet velit. Phasellus nec tincidunt risus. Nam id nulla et dolor tempor consectetur elementum sit amet lacus. Nunc non felis enim. Curabitur feugiat at quam ac auctor. Duis nibh enim, consequat id sagittis vitae, pharetra nec arcu. Pellentesque vitae nisl tincidunt purus faucibus dignissim ut egestas enim. Integer gravida suscipit interdum. Nunc ac tellus urna. Proin odio quam, pulvinar sed tristique sed, viverra sed mi. Phasellus dapibus ipsum in tempor aliquet. Nam a lectus eu purus volutpat sodales eu at ante. Duis quis scelerisque lectus. Mauris interdum massa quis nisi luctus tincidunt. Etiam ut varius arcu, venenatis lacinia nulla. Cras tristique porta accumsan.
Nam dignissim risus tellus, sit amet faucibus mi dignissim eget. Sed luctus dolor et augue convallis tristique. Etiam sed urna urna. Etiam id lacinia neque. Aliquam ac sapien lacus. Ut lacus quam, efficitur a orci a, gravida porttitor dui. Nunc eget augue vehicula, congue mi ultrices, tempus neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nullam at venenatis ante. Ut odio justo, auctor non lacinia at, sollicitudin vel augue. Pellentesque urna felis, posuere sit amet lacus fermentum, congue dignissim elit. Phasellus eleifend lectus vitae arcu tristique, et pellentesque nunc venenatis. Duis at est velit. Nullam vestibulum lorem auctor vestibulum ornare. Mauris sed libero ut libero pellentesque fermentum eget eu nisi. Nam augue dolor, mollis ut volutpat eget, vulputate sit amet nisl. Etiam at elit dapibus, laoreet est at, sagittis nisl. Pellentesque sed risus in quam pretium porta sed vitae velit. Phasellus risus odio, imperdiet vel vulputate eget, imperdiet eu nisl. Aliquam ultrices lorem nec aliquet consectetur.</p>
<br />
</div>
<div id="img2">
<img src="someImage.png" />
</div>
css:
body {
min-width:800px;
margin: 0;
background-color:blue; <!--this is a image -->
background-size: 100% auto;
background-attachment:fixed;
height:100%;
}
#menubar{
position:fixed;
top:5px;
right:0;
background-color:none;
height:auto;
z-index:1;
}
#container{
position:absolute;
top:75%;
}
#content{
width:100%;
background-color:white;
margin:0;
}
#img2{
width:100%;
margin:0;
}
#img2 img{
width:100%;
}

In the example you gave, they are using jquery.smoothwheel by IntelliJ IDEA.
Check this link. Maybe it's the effect you are searching for.
Hope it's useful!
Edit by OP:
After #Academia gave me this fiddle I manged to get it to work for my needs.
This is what I ended up with:
css:
body {
background: url(someImage.png);
background-size: 100% auto;
background-attachment:fixed;
margin: 0 auto;
width:100%;
height:1000px; /*key value to make this script work, else it only scrolls smoothly when your mouse is hovering over the #container*/
overflow:auto;
-webkit-overflow-scrolling: touch;
position:relative;
}
#container{
width:100%;
background-color:white;
position:absolute;
top:700px; /*I intent to scroll the content over the bg image, that was my struggle, I had it in procentage first*/
}
#content{
width:100%;
background-color:white;
margin:0;
}
html:
<body>
<div id="container">
<div id="content">
<p>some content</p>
</div>
</div>
</body>
Now for the javascript, I had to add an function that would keep the top value of the container correct to the width of the screen
script for smoothscroll:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/jquery.smoothwheel.js"></script>
<script>
$(document).ready(function () {
$("body").smoothWheel()
});
</script>
script for the top value of the container, 0.36 because 1920/700 = 0.36, this depends on the top value you want to have:
<script type="text/javascript">
$(document).ready(function () {
var jqeuryElem = jQuery("#container");
var w = $(window).width();
var top = w *0.36;
jqeuryElem.css("top", top+"px");
});
$(window).resize(function () {
var jqeuryElem = jQuery("#container");
var w = $(window).width();
var top = w * 0.36;
jqeuryElem.css("top", top + "px");
});
</script>
I'll post the result when the website is done.

Fading effect between switching divs

I'm using http://tympanus.net/Development/PageTransitions/ for my main pages, the code below is used within a single page to showcase other different content info. All pages coded are in one index file.
The code below is used to switch between divs.
I tried using simple javascript onclick to make the pages fadeIn/fadeOut but it couldn't work.
jQuery:
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i = 0; i < sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container' + idInfo).style.display = 'block';
}
$("#fade").click(function () {
$('#container1').fadeOut('slow');
$('#container2').fadeIn('slow');
});
</script>
CSS:
<style type="text/css">
#container1, #container2, #container3 {
display:none;
width:100%;
height:auto;
}
</style>
HTML:
<img src="img/thumbnail1.png" /><br>click to see content 1
<img src="img/thumbnail2.png" /><br>click to see content 2
<img src="img/thumbnail3.png" /><br>click to see content 3
<div id="container1">content1</div>
<div id="container2">content2</div>
<div id="container3">content3</div>
Just need the .onclick fade effect to work after clicking on the link.
Many thanks in advance!

I think that this is what you are aiming for:
Online Demo
HTML:
<div class="links">
click to see content 1
click to see content 2
click to see content 3
</div>
<div class="content-divs">
<div>content0</div>
<div>content1</div>
<div>content2</div>
</div>
JavaScript:
$(".links a").click(function () {
var id = $(this).data('toggle');
showDiv(id);
});
function showDiv(id) {
// hide all other
var divs = $('.content-divs');
divs.children().each(function(index) {
$(this).hide();
});
// fade the correct one in.
divs.children('div:nth-child('+id+')').fadeIn();
}
Same css.
Since you are already using jQuery, why not use all it's functions?
You could do that with onclick="showDiv(id)", but jsfiddle does not work with that, so .data('toggle') is a nice workaround.

It seems you may be making this a little bit more complicated then it needs to be, try this out:
<script type="text/javascript">
$(document).ready(function(){
var curr = 1
$('.fader').click(function(){
var next_attr = $(this).data('num');
if(curr != next_attr){
$('div[data-num="'+curr+'"]').hide(1000, function(){
$('div[data-num="'+next_attr+'"]').show(1000);
});
curr = next_attr
}
});
});
</script>
Here is the html
<div class="links">
<a class=".fader" data-num="1">Show Container 1</a>
<a class=".fader" data-num="2">Show Container 2</a>
<a class=".fader" data-num="3">Show Container 3</a>
</div>
<div class="containers">
<div id="container1" data-num="1">Container 1</div>
<div id="container2" data-num="2">Container 2</div>
<div id="container3" data-num="3">Container 3</div>
</div>
and here is the css
#container2, #container3{
display:none;
width:100%;
height:auto;
}
that should give you the ability to switch between the 3 containers by clicking the links corresponding to them. I used a data attribute to link the containers to there links. When a link is clicked it looks for div with the same data-num and fades out the current one once its faded out it fades in the new one and sets the curr variable.

You can actually do this in pure CSS. (Not supported for IE 8-)
http://jsbin.com/eVeNeSO/1/edit
CSS:
body {
background-image: url(data:image/png;base64,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);
background-color: #001;
}
/* Header Styling and Positioning */
#container ul {
list-style:none;
margin: 2em 0;
padding: 0;
text-align: center;
font-size: 1.5em;
}
#container li {
display: inline;
margin: 0 1em;
}
#container li a {
margin: 0 1em;
color: #09b;
text-decoration: none;
background: #333;
padding: .6em;
border-radius: 25em;
}
#container li a:hover {
color: #099;
background: #444;
}
#container li a:active {
color: #066;
background: #222;
}
/* Content Area */
.content div {
width: 50%;
margin: 2em auto;
padding: 1em;
background: #333;
border: 1em solid #555;
color: #fff;
}
/* hide unselected targets */
.content div:not(:target) {
display: none;
}
/* display selected target */
:target {
display: inherit;
}
HTML:
<article id="container">
<ul>
<li>About</li>
<li>Contact</li>
<li>Services</li>
</ul>
<div class="content">
<div id="about">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at feugiat odio. Proin sit amet eros ac diam tempus tempor. Fusce gravida ut nisi in consectetur. Sed hendrerit sapien id metus adipiscing, id vehicula lacus fermentum. Proin mollis facilisis erat, eu sollicitudin diam scelerisque ut. Phasellus non mollis nisl. Vestibulum ac mi quis metus mollis fermentum. Donec pharetra consequat lacinia. Vestibulum porta tortor purus, non fermentum turpis congue eget. Nulla varius augue dolor, at pellentesque diam volutpat in. Vestibulum vitae ligula eu eros tristique accumsan. Mauris sagittis iaculis lorem id egestas. Suspendisse potenti. Cras faucibus dolor turpis, ac ultrices dolor rhoncus a.
<p>Etiam aliquam magna vitae hendrerit accumsan. Nam venenatis risus a tempor semper. Nullam ac est nec dolor pellentesque laoreet ac ac nisi. Ut sit amet magna nunc. Vestibulum orci ipsum, pretium nec venenatis vel, lacinia et magna. Proin dignissim dui ligula, eget pretium nisl ultrices eu. Etiam sit amet nunc non nisl scelerisque dignissim a sed sapien.</p>
<p>Quisque auctor sit amet mi sed porta. Fusce nec erat eros. Suspendisse et diam sit amet quam pretium sollicitudin quis nec enim. Nam fermentum risus dui, non volutpat dolor pellentesque nec. Quisque interdum, neque eu feugiat hendrerit, risus augue malesuada mauris, non vestibulum ante erat quis purus. Nunc scelerisque sapien vel leo bibendum, vel dapibus ipsum ultricies. Cras commodo lacus quis nunc eleifend iaculis. Nam adipiscing ipsum non justo ultrices, sit amet vestibulum urna vehicula. Praesent porttitor neque et dictum euismod. Aliquam erat volutpat. Nam adipiscing, neque ut dictum ultricies, dui odio aliquet dui, ac rhoncus neque nulla a enim.</p>
</div>
<div id="contact">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut purus leo, varius pellentesque vestibulum at, lobortis quis est. Suspendisse mattis leo vel eros faucibus adipiscing. Phasellus sed nisl eu lectus blandit dignissim vel id nibh. Donec rutrum felis urna, sed elementum urna venenatis quis. Praesent vel tortor sed felis sodales lobortis eget eget nulla. Aliquam bibendum elit eu nunc facilisis, varius tempor lectus mattis. Aenean sed aliquet orci. Aliquam viverra molestie ultrices.
<p>Nullam luctus imperdiet risus, vel convallis massa interdum id. In ultricies pulvinar libero vitae sodales. Fusce eleifend varius tincidunt. Nulla sed blandit nibh. Ut sollicitudin, metus et sagittis tincidunt, nisl felis ultricies ante, eu dapibus massa odio sed nunc. Pellentesque semper eros dui, ac mollis nunc dictum non. Quisque ultrices sapien at velit pellentesque, at lacinia est commodo. Morbi commodo in neque eu tempor. Curabitur eu mattis diam, eu tristique mauris.</p>
<p>Suspendisse sit amet lacus rutrum, faucibus augue vitae, euismod nibh. Mauris aliquet nisi in nibh aliquam, et ullamcorper turpis mattis. Vestibulum ut hendrerit libero, eu ultricies odio. Etiam sodales vehicula dignissim. Vestibulum libero tellus, luctus sed imperdiet quis, malesuada sed nunc. In aliquet pellentesque erat pellentesque fringilla. Aenean egestas ipsum eu nunc auctor, nec vestibulum est varius. Integer convallis, orci sit amet sagittis hendrerit, purus ligula dictum dolor, in lobortis ligula lacus pulvinar lorem. Sed pulvinar porttitor egestas. Duis ac ante ipsum. Donec sem odio, sollicitudin in fermentum egestas, gravida sed diam. Nam condimentum augue ut ligula dapibus sodales. Donec blandit sem non cursus aliquam.</p>
</div>
<div id="services">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus posuere porta suscipit. In ac purus quis lectus blandit rutrum eu vitae nisi. Nunc vel ante at enim imperdiet ultrices et non erat. Vestibulum sagittis facilisis nulla. Ut quis turpis sit amet enim volutpat tincidunt. Vivamus vel ornare neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis tincidunt mi et ipsum cursus, vitae tincidunt ipsum fringilla. Integer eu mollis elit, in tincidunt neque.
<p>Maecenas ac est gravida, iaculis mauris vitae, tempus enim. Mauris ut nisi dapibus, commodo massa sed, iaculis augue. Cras sit amet leo libero. Mauris ac dui lorem. Aenean velit risus, ornare molestie neque ac, feugiat cursus tellus. Duis commodo lacinia felis, vitae aliquam mauris consectetur cursus. Donec arcu orci, sollicitudin eu lacus id, ultricies sollicitudin ligula. Vivamus ac egestas ipsum. Duis aliquam suscipit tristique. Vestibulum aliquet bibendum arcu, in adipiscing arcu sagittis ut. Aenean in leo risus. Morbi vitae nibh in eros accumsan consequat in ac lacus. Maecenas pretium mattis justo non euismod. Sed vel velit sollicitudin, posuere mi nec, dictum lectus.</p>
<p>Nullam nisl nisi, dignissim ultrices cursus id, aliquet vel purus. Praesent velit purus, pharetra id eros id, viverra ultricies velit. Phasellus sed lacinia neque, at dictum odio. Mauris eget accumsan augue, ac imperdiet magna. Proin commodo sem id purus vulputate mollis. Nunc a dignissim urna. Nam facilisis, lectus sit amet blandit egestas, velit tortor imperdiet massa, eu elementum lorem dolor nec diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus sit amet nisl turpis. Nulla vel nulla ut odio feugiat ultrices. Ut id consequat sem.</p>
</div>
</div>
</article>