Develop Reference

Paralax scroll of slider is not smooth

I have problem with my parallax slideshow script. It's not scrolling smooth and its shaking weird. The thing is that I couldn't find the proper script for element(like slider etc), most of them are only for single image. There is my script:
<script type="text/javascript">
var ypos,image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('slider');
image.style.top = ypos * .8 +'px';
}
window.addEventListener('scroll',parallex);
link to the site: http://www.pappu-lighting.com/Slider/Home.html

$(window).scroll(function(){
if($(document).scrollTop() > 600 && $(document).scrollTop() < 2500){
var temp = 100 - ($(document).scrollTop() - 1200) / 8;
var bonus = '50% ' + temp*-1 + '%';
document.getElementById('div').style.backgroundPosition = bonus;
}
}

Custom Javascript not working in Chrome

Browsed a lot, fiddled with it a lot. Came to the conclusion others may see the mistake that I am blind to.
The code is supposed to move the sidebar according to window height, sidebar height, content height, etc.
This is the code:
$(document).ready(function() {
var windowheight = $(window).height();
var identheight = $(".ident").height();
var sidebarheight = $(".sidebar").height();
var mainheight = $(".main").height();
var pos = $(window).scrollTop();
var diff = (((sidebarheight + 20) + identheight) - windowheight);
var cur = ((sidebarheight + 20) + (pos - diff)) - 2;
var max = (mainheight + 30);
contentScroll();
$(window).resize(function(){
windowheight = $(window).height();
identheight = $(".ident").height();
sidebarheight = $(".sidebar").height();
mainheight = $(".main").height();
pos = $(window).scrollTop();
diff = (((sidebarheight + 20) + identheight) - windowheight);
cur = (sidebarheight + 20) + (pos - diff);
max = (mainheight + 30);
contentScroll();
});
$(window).scroll(function (){
pos = $(window).scrollTop();
diff = (((sidebarheight + 20) + identheight) - windowheight);
cur = (sidebarheight + 20) + (pos - diff);
max = (mainheight + 30);
contentScroll();
});
function contentScroll() {
if (sidebarheight < mainheight) {
if (diff < identheight) {
if (pos >= identheight) {
$('.sidebar').css({
'margin-top' : (pos - identheight) + 'px'
});
}
} else {
if (pos >= diff && cur <= max) {
$('.sidebar').css({
'margin-top' : (pos - diff) + 'px'
});
}
if (pos <= diff) {
$('.sidebar').css({
'margin-top' : '0px'
});
}
}
}
}
});
I'm aware of it not being perfect, it's still in the rough phase. It works perfectly fine in FireFox, but not in chrome. The function is being called (tested with alerts). It just doesn't do anything.
Probably something about chrome reading syntax different.
If anyone that see's my mistake would kindly point me to it, it's been too long for me to keep cracking my head open over this.
This is the mock-website in question: http://klok-bremen.de/fff/

Use $(window).load instead of $(document).ready because the parent elements' heights will change after the images load.

Apply minus top margins using JS CSS

I am calculating a height of an element using JavaScript then I am applying that height as padding-top to another element as you can see below:
$(window).on("ready resize", function () {
if (window.innerWidth > 1024) {
var pageTop = $("#header.header-fixed .content").outerHeight() + "px";
$("#page .topSection").css("padding-top", pageTop);
} else {
var pageTop = $("#secondHeader").outerHeight() + "px";
$("#page .topSection").css("padding-top", pageTop);
}
});
My question is, how can I apply that height as margin-top "-" to the same element as well?
so for example if the #header height is 100px; the margin -top for .topSection will be -100px
------------- Update ---------------------------------------
Thank you! the answers below helped!
I am experiencing another problem which has been a result of applying the minus margins!
Here is the code I am currently using...
//Fixed header optimizer
$(window).on("ready resize", function() {
if (window.innerWidth > 1024) {
var pageTop = $("#header").outerHeight() + "px";
$("#page .topSection").css({"padding-top": pageTop, "margin-top": "-"+pageTop});
} else {
var pageTop = $("#secondHeader").outerHeight() + "px";
$("#page .topSection").css({"padding-top": pageTop, "margin-top": 0});
}
});
How can I make it not apply these margins if the #header had a class of .header-fixed?

Try concatenating the pageTop string with a "-":
$(window).on("ready resize", function () {
if (window.innerWidth > 1024) {
if(!$('#header').hasClass("header-fixed")) {
var pageTop = $("#header").outerHeight() + "px";
$("#page .topSection").css({"padding-top": pageTop, "margin-top": "-" + pageTop});
}
} else {
if(!$('#header').hasClass("header-fixed")) {
var pageTop = $("#secondHeader").outerHeight() + "px";
$("#page .topSection").css({"padding-top": pageTop, "margin-top": "-" + pageTop});
}
}
});

.css({"padding-top": pageTop, "margin-top": "-"+pageTop})

try following code,
$(window).on("ready resize", function () {
if (window.innerWidth > 1024) {
var pageTop = $("#header.header-fixed .content").outerHeight() + "px";
$("#page .topSection").css({"margin-top": "-" + pageTop, "padding-top" : pageTop});
} else {
var pageTop = $("#secondHeader").outerHeight() + "px";
$("#page .topSection").css({"margin-top": "-" + pageTop, "padding-top" : pageTop});
}
});

use this code
$("#page .topSection").css({"padding-top": pageTop,"margin-top":"-"+pageTop});
instead of
$("#page .topSection").css("padding-top", pageTop);

Scroll Top Jquery

I made the scroll to top and scroll to bottom in jquery. In that i make to scroll as with percentage. For example:
If the scroll from top to bottom is 50% then it scroll from top to bottom as 50% it already works. But now i want to scroll the 50% if i again click then it scroll the remaining 50% to the bottom of the page. I am not sure how to do this in jquery.
Here is the fiddle Any suggestion would be great.
http://jsfiddle.net/TkYpY/
Thanks,
vicky

$('#spnTop').on("click", function () {
var percentageToScroll = 50;
var percentage = percentageToScroll / 100;
var height = $(document).height() - $(window).height();
if(scrollAmount > 0 )
{
scrollAmount = scrollAmount - (height * percentage);
}
console.log('scrollAmount: ' + scrollAmount);
$('html,body').animate({
scrollTop: scrollAmount
}, 'slow', function () {
console.log("reached top");
});
});
var scrollAmount = 0;
$('#spnbottom').on("click", function () {
var percentageToScroll = 50;
var percentage = percentageToScroll / 100;
var height = $(document).height() - $(window).height();
if( scrollAmount < height)
{
scrollAmount = scrollAmount + height * percentage;
}
console.log('scrollAmount: ' + scrollAmount);
jQuery("html, body").animate({
scrollTop: scrollAmount
}, 900);
});

It does not scroll on the second click as you have already reached the scrollAmount.
If you want to scroll further then declare var scrollAmount outside the function and when you click again on the bottom link, calculate the next scroll Amount with max being your document height and add it to the global scrollAmount declared var.

$('#spnTop').on("click", function () {
var percentageToScroll = 80;
var percentage = percentageToScroll / 100;
var height = $(document).scrollTop();
var scrollAmount = height * (1 - percentage);
console.log('scrollAmount: ' + scrollAmount);
$('html,body').animate({
scrollTop: scrollAmount
}, 'slow', function () {
console.log("reached top");
});
});
var scrollAmount = 0;
$('#spnbottom').on("click", function () {
var percentageToScroll = 50;
var percentage = percentageToScroll / 100;
var height = $(document).height() - $(window).height();
scrollAmount = scrollAmount + height * percentage;
console.log('scrollAmount: ' + scrollAmount);
jQuery("html, body").animate({
scrollTop: scrollAmount
}, 900);
});

I modified your fiddle a bit. Seems to me some calculation problem. Here is your fiddle .
Is this what you needed?
First declare a global variable height with default value.
In top scroll code, replace
var height = $(document).scrollTop();
with
height -= $(document).height() - $(window).height();
and in bottom scroll replace this var height = $(document).height() - $(window).height(); with height += $(document).height() - $(window).height(); .

How to stop a fixed sidebar from going in the footer?

I'm building a website. http://check.topicwine.com
Have a look to see my work.
I want to make a static sidebar. I'm using the code:
$(function() {
var offset = $("#ad-wrapper").offset();
var topPadding = 60;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#ad-wrapper").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#ad-wrapper").stop().animate({
marginTop: 0
});
};
});
});
The sidebar comes along, but it also goes where it shouldn't. I mean, it enters the footer as well. Rather, it overlaps the footer.
I want it to stop next to the grid.
Thanks, in advance. :)

Add overflow:hidden to div#content. This way we will get the proper height of the content div.
Now $('#content').height() + $('#content').offset().top is the maximum distance the sidebar should move. Which means, the sidebar's offset.top + height should not go more than this.
Add this check in your scroll handler

Set a limit for the top margin, since the sidebar can't go past the $('#main') element.
$(function() {
var offset = $("#ad-wrapper").offset();
var topPadding = 60;
$(window).scroll(function() {
var scrollTop = $(window).scrollTop(); // Store this for convenience
if (scrollTop > offset.top) {
var newMarginTop = scrollTop - offset.top + topPadding;
// The sidebar can only go so far!
var marginLimit = $('#main').height() + $('#main').offset().top - offset.top - $("#ad-wrapper").height();
if (newMarginTop > marginLimit)
newMarginTop = marginLimit;
$("#ad-wrapper").stop().animate({
marginTop: newMarginTop
});
} else {
$("#ad-wrapper").stop().animate({
marginTop: 0
});
}
});
});