We Keep Coding

prevent jumping back to top of screen jQuery animate

I have two 'screens' with different background images.
when the user clicks on the down arrow it scrolls from one 'screen' to the one below. The second screen is set to display none at the beginning. This all works as expected, however, when trying to scroll to the top of the screen again it jumps to the top as opposed to smoothly scrolling back to the top. I am also using GSAPs tween library for other animations.
Please see code below:
JS
$('.down-arrow').click(function() {
var tl = new TimelineMax();
tl.set('.background-two', {display: 'block', onComplete: scrollDown})
tl.set('.background-one', {display: 'none', delay: 0.6})
function scrollDown(){
$('html, body').animate({scrollTop: $(window).height()}, 600);
}
});
$('.up-arrow').click(function() {
var tl = new TimelineMax();
tl.set('.background-one', {display: 'block', onComplete: scrollUp})
tl.set('.background-two', {display: 'none', delay: 0.6})
function scrollUp(){
$('html, body').animate({scrollTop: 0}, 600);
}
});
CSS
.background-one {
background: url(../img/Background1.png) no-repeat center;
background-size: cover;
height: 100%;
width: 100%;
position: relative;
}
.background-two {
background: url(../img/Background2.png) no-repeat center;
background-size: cover;
height: 100%;
width: 100%;
position: relative;
}
HTML
<div class="background-one">
<div class="up-arrow">UP</div>
</div>
<div class="background-two">
<div class="down-arrow">DOWN</div>
</div>

My guess is that when you set the top block to display: block; it appears immediately and pushes down your bottom block.
What you could try instead is sliding the blocks in (By animating their heights instead of scrolling).

Does it work when you properly close your html div-tags?
Edit:
I created a fiddle, the animation works fine. You're removing (display:none) the other element, which causes the page to flicker/jump.
function scrollDown(){
$('html, body').animate({scrollTop: $(window).height()}, 600);
}
function scrollUp(){
$('html, body').animate({scrollTop: 0}, 600);
}
$('.down-arrow').click(function() {
var tl = new TimelineMax();
tl.set('.background-two', {display: 'block', onComplete: scrollDown})
tl.set('.background-one', {display: 'none', delay: 0.6})
});
$('.up-arrow').click(function() {
var tl = new TimelineMax();
tl.set('.background-one', {display: 'block', onComplete: scrollUp})
tl.set('.background-two', {display: 'none', delay: 0.6})
});
Tip: Keep your functions outside your click-handler.

Div with position absolute and lower z-index is showing on top of a higher z-index(fixed position)

Alright... I have a nav menu that when you scroll down past it, it changes to a fixed menu on top that accompanies the page.
But for some reason, I have a div on the page that has an absolute position and a lower z-index than the menu but it still shows up on top of the menu...
Here's the function that sets the menu to fixed past a certain point.
$(function(){
var pos = $('#nav').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > pos ) {
$('#nav').parent().parent().css({position: 'fixed', top: '0px', background: '#fff', width: '100%', 'z-index': 9002, left:0});
} else {
$('#nav').parent().parent().css({position: 'static', top: '0px', background: 'none', width: '100%', 'z-index': 1});
}
});
});
This is the div that is showing on top when it shouldn't...
.header {
position: relative;
z-index: 1;
margin: 0;
padding: 0; }
Also, here you can see an example of it happening as you scroll down the page.

Apply a position:relative on <div id="page-content">
Change the z-index on <header class="site-header"> to 2

Back-To-Top button glitching with Javascript

I am making a back-to-top button for my website and I have the following settings;
My HTML code:
<div class="back-to-top">A</div>
My CSS:
.back-to-top{position: fixed; right: 60px; font-family: iconFont; font-size: 20px; color:#666; padding: 10px 15px 10px 15px; background-color: rgba(00, 00,00,0.3); border-radius: 5px; dislpay: none;}
.back-to-top:hover{cursor: pointer; color: #2E2E2E; background-color: rgba(0,0,0,0.4);}
My JavaScript:
$('.back-to-top').click(function () {
$("html, body").animate({
scrollTop: 0
}, 400);
return false;
});
$(window).scroll(function () {
var height = $('body').height();
var scrollTop = $(window).scrollTop();
if(scrollTop > 100){
$('.back-to-top').css({ 'position': 'fixed', 'bottom' : '50px' , 'display' : 'block'});
}
else {
$('.back-to-top').css({ 'position': 'absolute', 'bottom': '-50px' , 'display' : 'none'});
}
});
My problem is that when ever I load the page the button appears at the top right of the page, where it shouldn't be, but when I scroll it disappears and then functions normally. Also when I reload the page at any point in the middle, there isn't any glitch whatsoever. How do I fix my button from appearing at the top of my corner when reloading the page at the very top?

Check here http://jsfiddle.net/tQuK5/2/ it works by adding
display: none;
to your css. You had declared this as dislpay: none; which made things a little misleading.

It doesn't look as though you have a vertical position set for the button. You are only adding this via your JavaScript when the page is scrolled.
Try adding bottom:50px to you css to set the initial position of the button

Jquery UI - Resizable: alsoResize not accurate?

Ok I'm not using the 'alsoResize' but I've tested and it behaves the same.
When you resize the main element, the black border from the bottom element 'marquee' often nudges out of line with the dashed white border from the top element.
$(".layer").resizable({
//alsoResize: '.marquee',
resize: function(event, ui) {
$('.marquee').css({
width : ui.size.width + "px",
height : ui.size.height + "px",
left : ui.position.left + "px",
top : ui.position.top + "px",
});
},
handles: 'all',
aspectRatio: true,
});
http://jsfiddle.net/digitaloutback/uGr3w/3/
Using firebug on a local demo, at the stage they go out of line, you can see the inline element styles for left, top and width, height are different.
I wonder if a work around would be to send the position and size stats to function which outputs an exact measurement to both elements? Any simpler options? Thanks
UPDATE:
I've got a workaround which works cleanly.. it is to pass the resizable-calculated dimensions to a function which sets the top layer to these dimensions also.
I'm sure there's a more efficient method to do this, feel free to offer an optimised version..
http://jsfiddle.net/digitaloutback/VDfpY/5/

There seems to be a discrepancy in the size and position reported by the ui parameter to the resize event, and the actual sizes and positions. This is possibly due to a delay between the ui parameter being built and the event being fired.
I experimented using the actual position and size reported at the time of the event running:
$('.marquee').css({
'left' : $(this).position().left,
'top' : $(this).position().top,
'width' : $(this).width(),
'height' : $(this).height()
});
This seems to match much more precicely the actual dimensions.
http://jsfiddle.net/VDfpY/1/

How about this?
Let the CSS handle the sizes and not the JS
http://jsfiddle.net/HerrSerker/uGr3w/5/
--edit added code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".layer").resizable({
handles: 'all',
aspectRatio: true,
});
});
</script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />
<link type="text/css">
#canvas {
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
background: #999}
.marquee {
border: 1px dashed #fff;
position: absolute;
left: -1px; top: -1px;
width: 100%; height: 100%;
display: block;
z-index: 2500;
}
.layer {
border: 1px solid black;
position: absolute;
left: 150px; top: 150px;
width: 250px; height: 226px;
display: block;
z-index: 2501;
}
</link>
<body>
<div id="canvas">
<a class="layer" href="#"><span class="marquee"></span></a>
</div>
</body>

JQuery Animate

Really easy, I'm sure...
I have a div which is the full screen and I want it to slide down from the top to the bottom.
I have this:
$('#full-screen').animate({
"bottom":0,
height: 'toggle'
}, 1000, function() {
// Animation complete.
});
But this is the wrong way round as the bottom moves up; how do I get the bottom to stay where is is and the top to slide down to meet it?
Thanks

Your exact code works fine when you have absolute positioning on the element.
http://jsfiddle.net/hhEJD/
CSS
body {
padding: 0;
margin: 0;
}
#full-screen {
background: orange;
color: white;
width: 100%;
height: 100%;
position: absolute; // position absolute, and your code works
clip:auto;
overflow:hidden;
}​
HTML
<div id="full-screen"></div>​
Your code
$('#full-screen').animate({
"bottom":0,
height: 'toggle'
}, 1000, function() {
// Animation complete.
});
You're setting the bottom style to 0 in your animate. This has no effect if you don't use absolute positioning on your element.

You need to also animate the 'top' property of the div as well as disabling the animation queue so both animations happen at the same time.
$('#slide2').animate(
{height: '0px'},
{
duration: 1000,
queue: false, //Disable the queue so both events happen at the same time.
complete: function()
{
// animation complete
}
}
).animate( //also animate the top property
{top: '500px'},
{duration: 1000}
);​
Try it out over at jsFiddle.

You can use marginTop for it:
var h=$('#full-screen').height();
$('#full-screen')
.animate(
{marginTop: h, height: 'toggle'},
1000,
function() {
// Animation complete.
}
)
see at: http://jsbin.com/esotu3