Develop Reference

Header disappearing on scroll

I'm trying to make my header disappear when scrolling down and only re-appear when scrolling up. I can't get it to work:
http://jsfiddle.net/mxj562qt/
Any ideas where I'm going wrong?
HTML:
<div id="header" class="custom-header">
This is your menu.
</div>
<main>
This is your body.
</main>
<footer>
This is your footer.
</footer>
Javascript:
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $("#header").outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$("#header").addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$("#header").removeClass('nav-up');
}
}
lastScrollTop = st;
}
CSS:
body {
padding-top: 40px;
}
#header {
background: #f5b335;
height: 50px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
}
.nav-up {
top: -50px;
}
main {
height: 2000px;
}
footer { background: #ddd;}
* { color: transparent}
It would appear that the CSS class doesn't get added but I'm not sure why. Am I referencing the Div in the wrong way?

So, I can see that the issue stems from this bit of code ...
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$("#header").removeClass('nav-up');
}
In my tests, the doc height was always > than the st + window height.
I did this ...
// Scroll Up
console.log('doc height: ', $(document).height());
console.log('st+window height: ', st + $(window).height());
if(st + $(window).height() < $(document).height()) {
$("#header").removeClass('nav-up');
}
// results from scrolling up + down
// doc height: 2058
// st+window height: 313
// doc height: 2058
// st+window height: 280
// doc height: 2058
// st+window height 1614
// doc height: 2058
// st+window height: 1580
Changing the aforementioned JS to this seems to get you where you need to be.
$("#header").removeClass('nav-up');
Then your CSS needed some work ...
I noticed that your top element wasn't applying due to the CSS selector priority.
.nav-up {
top: -50px !important;
}
The result: scrolling down, the nav bar hides, scrolling up, the navbar shows.
I forked your code below;
http://jsfiddle.net/itsbjk/aw6qb2mr/16/

The problem here is with your CSS. You have specified position:fixed; in your code and that bit of CSS overrides all the JS you are writing. Fixed will force your header to be visible no matter what you are doing. Instead, you could try this in your CSS:
body {
padding-top: 40px;
}
#header {
background: #f5b335;
height: 50px;
position: absolute;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
}
.nav-up {
top: -50px;
}
main {
height: 2000px;
}
footer { background: #ddd;}
* { color: transparent}
The absolute property should make it disappear on scrolling. And also, your referencing of the <div> tag isn't wrong!

Stop fixed element scrolling at certain point

I have fixed sidebar which should scroll along with main content and stop at certain point when I scroll down. And vise versa when I scroll up.
I wrote script which determines window height, scrollY position, position where sidebar should 'stop'. I stop sidebar by adding css 'bottom' property. But I have 2 problems with this approach:
When sidebar is close to 'pagination' where it should stop, it suddenly jumps down. When I scroll up it suddenly jumps up.
When I scroll page, sidebar moves all the time
Here's my code. HTML:
<div class="container">
<aside></aside>
<div class="content">
<div class="pagination"></div>
</div>
<footer></footer>
</div>
CSS:
aside {
display: flex;
position: fixed;
background-color: #fff;
border-radius: 4px;
transition: 0s;
transition: margin .2s, bottom .05s;
background: orange;
height: 350px;
width: 200px;
}
.content {
display: flex;
align-items: flex-end;
height: 1000px;
width: 100%;
background: green;
}
.pagination {
height: 100px;
width: 100%;
background: blue;
}
footer {
height: 500px;
width: 100%;
background: red;
}
JS:
let board = $('.pagination')[0].offsetTop;
let filterPanel = $('aside');
if (board <= window.innerHeight) {
filterPanel.css('position', 'static');
filterPanel.css('padding-right', '0');
}
$(document).on('scroll', function () {
let filterPanelBottom = filterPanel.offset().top + filterPanel.outerHeight(true);
let bottomDiff = board - filterPanelBottom;
if(filterPanel.css('position') != 'static') {
if (window.scrollY + window.innerHeight - (bottomDiff*2.6) >= board)
filterPanel.css('bottom', window.scrollY + window.innerHeight - board);
else
filterPanel.css('bottom', '');
}
});
Here's live demo on codepen
Side bar is marked with orange background and block where it should stop is marked with blue. Than you for your help in advance.

I solved my problem with solution described here
var windw = this;
let board = $('.pagination').offset().top;
let asideHeight = $('aside').outerHeight(true);
let coords = board - asideHeight;
console.log(coords)
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(windw);
$window.scroll(function(e){
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
});
};
$('aside').followTo(coords);
And calculated coordinates as endpoint offset top - sidebar height. You can see solution in my codepen

how do I center javascript css popup div, no matter what the screen resolution?

I have the following code that opens a new popup window while disabling the background, the problem is that I have to position this so that it's 100px from the top (already got that through the CSS #dialog) and also in the center of the screen, no matter what the user's resolution is?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "block"
dlg.style.display = "block"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "1024"
cvr.style.height = "100%"
}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "none"
dlg.style.display = "none"
document.body.style.overflowY = "scroll"
}
</script>
<style type="text/css">
#cover {
display: none;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: gray;
filter: alpha(Opacity = 50);
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5
}
#dialog {
display: none;
left: 100px;
top: 100px;
width: 300px;
height: 300px;
position: absolute;
z-index: 100;
background: white;
padding: 2px;
font: 10pt tahoma;
border: 1px solid gray
}
</style>
</head>
<body>
<div id="cover"></div>
<div id="dialog">
My Dialog Content
<br><input type="text">
<br><input type="button" value="Submit">
<br>[Close]
</div>
Show
</body>
</html>

CSS based solution to center:
You need to use these styles to make it appear dead-center:
position:absolute;
top:50%;
left:50%;
width:400px; /* adjust as per your needs */
height:400px; /* adjust as per your needs */
margin-left:-200px; /* negative half of width above */
margin-top:-200px; /* negative half of height above */
So position should be specified. The top and left should be 50%. The margin-left and margin-top should be negative one half of the width and height of the box respectively.
Notice that if you want your popup to appear on center even when page is scrolled you will have to use position:fixed instead with the draw back that it doesn't work in IE6.

Just do this:
.body {
position: relative;
}
.popup {
position: absolute;
max-width: 800px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
no matters the screen or popup size. This will center the <div class="popup"></div>.

What you need is called a light-box.
To create it you should modify HTML,CSS and JS code.
Let's say your lightbox consist only of the string "login form". (You can put everything you want there) The HTML code should look like this:
<div id = "loginBox">login form</div>
Now, we need to hide it with CSS:
div#loginBox {
display: none;
}
Now our box is not visible. Lets modify our box as you want it to be 100px from the top:
div#loginBox {
display: none;
top: 100px;
}
We will worry about disabling the background later.
Our next job is to make a button that will display the box when we need it. Easy-peasy:
<div id = "loginBox" >login form</div>
<a id = "displayButton">login</a>
Note that we don't need the "href" attribute, because that will move the screen on clicking and other unwanted behavior.
Let's attach event handler on the button via JS:
var IE = document.all ? true : false; // obligatory "browser sniffing"
function display_box() {
document.getElementsById("loginBox").style.display = "inline-block"; // or "inline"
}
window.onload = function() {
var login_box = document.getElementsById("loginBox");
if (!IE) {
login_box.addEventListener( "click", display_box , false );
}
else {
login_box.attachEvent( "onclick", display_box );
}
}
But you want it to be in the center of the screen? Then the function goes like this:
function display_box() {
var theBox = document.getElementsById("loginBox").style,
left = document.width / 2 - 50; // 150 because it is 300 / 2
theBox.display = "inline-block";
theBox.left = left.toString() + "px";
}
I would guess that you will want to close the window at some point and make the "disabled background" effect. To do so you can create a div class that extends on the whole screen, attach a "display" event on it, put some z-index in the css to be sure the loginBox is over the "disabled background", and attach a "close the loginBox" event on the "background" div. And now the final code looks like this:
Note that we care only about the placement of the login-button, because the other are hidden from view, and then modified by JS:
HTML:
<div id = "loginBox" >login</div>
<a id = "displayButton">login</a>
<div id = "backgroundDarkener"> </div>
CSS:
div#loginBox {
display: none;
top: 100px;
width: 300px; #it is important to know the width of the box, to center it correctly
z-index: 2;
}
div#backgroundDarkener {
background: #000;
display: none;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.8;
# needless to say, you should play with opacity or if you want your
# css to validate - background image (because I suspect it won't
# validate for old versions of IE, Safari, etc.) This is just a suggestion
}
JS:
var IE = document.all ? true : false; // obligatory "browser sniffing"
function display_box() {
var theBox = document.getElementsById("loginBox").style,
background = document.getElementsById("loginBox").style,
left = document.width / 2 - 150; // 150 is 300 / 2
theBox.display = "inline-block";
theBox.left = left.toString() + "px";
background.display = "inline-block";
}
function hide_box() {
document.getElementsById("loginBox").style.display = "none";
document.getElementsById("backgroundDarkener").style.display = "none";
}
window.onload = function() {
var login_box = document.getElementsById("loginBox"),
background = document.getElementsById("backgroundDarkener");
if (!IE) {
login_box.addEventListener( "click", display_box , false );
background.addEventListener( "click", hide_box , false );
}
else {
login_box.attachEvent( "onclick", display_box );
background.attachEvent( "onclick", hide_box );
}
}

A quick Google search found this;
function PopupCenter(pageURL, title,w,h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}

This is where flexbox comes rescue now!
.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}

You need to use these styles to make div center:
width:500px;
left:0;
right:0;
margin:0 auto;

Simple, margin: 100px auto;. There's no need to do calculations in JavaScript.
Live Example

Slide Element Up Into Page?

I was wondering how I could slide up a banner at the bottom of my page that is hidden.
For instance:
Page loads
3 seconds later, the banner slides up from bottom of page
I want to be able to do this without any scrollbars appearing (no change in page height) and without revealing the banner prior to it sliding up.
I looked at slideUp() and slideToggle(), but I couldn't find a way to make it work to my liking :-/
Here's what I originally tried:
$(document).ready(function() {
$('.serverad').delay(3000).slideToggle('slow', function() {
// Animation complete.
});
});
And the CSS was visiblity: hidden;

use a position:fixed on the banner ad, and animate the bottom attribute to 0
have the initial bottom attribute be the a negative of its height.
<style>
.serverad
{
height:60px;
position:fixed;
left:0px;
bottom:-60px;
}
</style>
<script>
$(document).ready(function() {
$('.serverad').delay(3000).animate({bottom:"0px"},600);
});
</script>

I think you may want something along these lines:
HTML:
<body>
<div class="serveraddcontainer">
<div class="serveradd"></div>
</div>
</body>
CSS:
body{
overflow: hidden;
}
.serveraddcontainer{
width: 100%;
height: 80px;
position: absolute;
bottom: -80px;
}
.serveradd{
width: 400px;
height: 80px;
background-color: red;
margin: auto;
}
Javascript:
setTimeout(function(){
$('.serveraddcontainer').animate({'bottom': '0'});
}, 3000);
Example JSFiddle Here

Animate the height property instead of top:
In you CSS:
.serverad {
...
height: 0;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
visiblity: visible;
overflow: hidden;
...
}
And in your JS, change the animation code to:
$(document).ready(function() {
$('.serverad').delay(3000).animate({height: '30px'}, 'slow', function() {
// Animation complete.
});
});

Here's one approach:
var stepDurations = 3000;
var reveal = window.setTimeout(
function(){
$('#banner').animate(
{
'height' : '30px'
}, stepDurations,
function(){
$(this).animate(
{
'bottom' : $(window).height() - $(this).height()
}, stepDurations);
});
},stepDurations);
JS Fiddle demo.
Turned the above into a function:
function slideReveal(target, height, stepDuration, revealName){
if (!target) {
return false;
}
else {
var height = height || '30px',
stepDuration = stepDuration || 2000,
revealName = revealName || 'reveal';
revealName = window.setTimeout(
function(){
$(target).animate(
{
'height' : height
}, stepDuration,
function(){
$(this).animate(
{
'bottom' : $(window).height() - $(this).height()
}, stepDuration);
});
},stepDuration);
}
};
// call with:
slideReveal($('#banner'), '3em', 100, 'revelation');
JS Fiddle demo.

How to toggle (hide / show) sidebar div using jQuery

I have 2 <div>s with ids A and B. div A has a fixed width, which is taken as a sidebar.
The layout looks like diagram below:
The styling is like below:
html, body {
margin: 0;
padding: 0;
border: 0;
}
#A, #B {
position: absolute;
}
#A {
top: 0px;
width: 200px;
bottom: 0px;
}
#B {
top: 0px;
left: 200px;
right: 0;
bottom: 0px;
}
I have <a id="toggle">toggle</a> which acts as a toggle button. On the toggle button click, the sidebar may hide to the left and div B should stretch to fill the empty space. On second click, the sidebar may reappear to the previous position and div B should shrink back to the previous width.
How can I get this done using jQuery?

$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
Check working example at http://jsfiddle.net/hThGb/1/
You can also see any animated version at http://jsfiddle.net/hThGb/2/

See this fiddle for a preview and check the documentation for jquerys toggle and animate methods.
$('#toggle').toggle(function(){
$('#A').animate({width:0});
$('#B').animate({left:0});
},function(){
$('#A').animate({width:200});
$('#B').animate({left:200});
});
Basically you animate on the properties that sets the layout.
A more advanced version:
$('#toggle').toggle(function(){
$('#A').stop(true).animate({width:0});
$('#B').stop(true).animate({left:0});
},function(){
$('#A').stop(true).animate({width:200});
$('#B').stop(true).animate({left:200});
})
This stops the previous animation, clears animation queue and begins the new animation.

You can visit w3school for the solution on this the link is here and there is another example also available that might surely help,
Take a look

The following will work with new versions of jQuery.
$(window).on('load', function(){
var toggle = false;
$('button').click(function() {
toggle = !toggle;
if(toggle){
$('#B').animate({left: 0});
}
else{
$('#B').animate({left: 200});
}
});
});

Using Javascript
var side = document.querySelector("#side");
var main = document.querySelector("#main");
var togg = document.querySelector("#toogle");
var width = window.innerWidth;
window.document.addEventListener("click", function() {
if (side.clientWidth == 0) {
// alert(side.clientWidth);
side.style.width = "200px";
main.style.marginLeft = "200px";
main.style.width = (width - 200) + "px";
togg.innerHTML = "Min";
} else {
// alert(side.clientWidth);
side.style.width = "0";
main.style.marginLeft = "0";
main.style.width = width + "px";
togg.innerHTML = "Max";
}
}, false);
button {
width: 100px;
position: relative;
display: block;
}
div {
position: absolute;
left: 0;
border: 3px solid #73AD21;
display: inline-block;
transition: 0.5s;
}
#side {
left: 0;
width: 0px;
background-color: red;
}
#main {
width: 100%;
background-color: white;
}
<button id="toogle">Max</button>
<div id="side">Sidebar</div>
<div id="main">Main</div>

$('#toggle').click(function() {
$('#B').toggleClass('extended-panel');
$('#A').toggle(/** specify a time here for an animation */);
});
and in the CSS:
.extended-panel {
left: 0px !important;
}

$(document).ready(function () {
$(".trigger").click(function () {
$("#sidebar").toggle("fast");
$("#sidebar").toggleClass("active");
return false;
});
});
<div>
<a class="trigger" href="#">
<img id="icon-menu" alt='menu' height='50' src="Images/Push Pin.png" width='50' />
</a>
</div>
<div id="sidebar">
</div>
Instead #sidebar give the id of ur div.

This help to hide and show the sidebar, and the content take place of the empty space left by the sidebar.
<div id="A">Sidebar</div>
<div id="B"><button>toggle</button>
Content here: Bla, bla, bla
</div>
//Toggle Hide/Show sidebar slowy
$(document).ready(function(){
$('#B').click(function(e) {
e.preventDefault();
$('#A').toggle('slow');
$('#B').toggleClass('extended-panel');
});
});
html, body {
margin: 0;
padding: 0;
border: 0;
}
#A, #B {
position: absolute;
}
#A {
top: 0px;
width: 200px;
bottom: 0px;
background:orange;
}
#B {
top: 0px;
left: 200px;
right: 0;
bottom: 0px;
background:green;
}
/* makes the content take place of the SIDEBAR
which is empty when is hided */
.extended-panel {
left: 0px !important;
}