Develop Reference

Dynamic bottom value based on element position in browser

I am attempting to adapt this JS solution to keep a floating element above the footer of my site.
The adaption I am attempting is instead of changing the element position to absolute, I would have a dynamic bottom px value based on the position of the top of the footer, relevant to the client window.
function checkOffset() {
var onlineFloat = document.querySelector('#online-ceo');
var footer = document.querySelector('.site-footer');
function getRectTop(el){
var rect = el.getBoundingClientRect();
return rect.top;
}
if((getRectTop(onlineFloat) + document.body.scrollTop) + onlineFloat.offsetHeight >= (getRectTop(footer) + document.body.scrollTop) - 20)
var newBottom = ((getRectTop(footer) + document.body.scrollTop) - 40).toString().concat('px');
onlineFloat.style.bottom = newBottom;
if(document.body.scrollTop + window.innerHeight < (getRectTop(footer) + document.body.scrollTop))
onlineFloat.style.bottom = '20px';// restore when you scroll up
}
document.addEventListener("scroll", function(){
checkOffset();
});
The output of newBottom is currently a px value which changes on scroll, however, I am having issues setting this position to the element.
Where am I going wrong? Thanks.

With your approach (changing the bottom property), you can just calculate where the "float" should be if the footer's top position is in view (as in window.innerHeight) on scroll.
function checkOffset() {
var onlineFloat = document.querySelector('#online-ceo');
var footer = document.querySelector('.site-footer');
function getRectTop(el) {
var rect = el.getBoundingClientRect();
return rect.top;
}
var newBottom = 10 + (getRectTop(footer) < window.innerHeight ? window.innerHeight - getRectTop(footer) : 0) + 'px';
onlineFloat.style.bottom = newBottom;
}
document.addEventListener("scroll", function () {
checkOffset();
});

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;
}
}

Limit vertical background position on scrolling with jQuery

I'm using this function:
$(window).bind('load resize scroll',function(e) {
var y = $(window).scrollTop();
$('.tm-parallax').filter(function() {
return $(this).offset().top < (y + $(window).height()) &&
$(this).offset().top + $(this).height() > y;
}).css('background-position', '50% ' + parseInt(-y / 50) + 'px');
});
to achieve parallax effect on background images when scrolling down.
I would like to limit y position to certain value (for example 100px), so background image center stays visible after reaching this value.
Here is the code: http://jsfiddle.net/esedic/vw2n16r8/4/
Because bakcground images are quite large it's best seen on fullscreen: https://jsfiddle.net/esedic/vw2n16r8/4/embedded/result/
Because I'm using parallax background images on multiple elements, I'm looking for solution to set different values for each element (maybe using data attributes?).
Thanks for your help!

You should try reversing its polarity, but try this:
$(window).bind('load resize scroll',function(e) {
var y = $(window).scrollTop();
$('.tm-parallax').filter(function() {
if have return $(this).onset().top < (y + $(window).height()) &&
$(this).onset().top + $(this).height() > y;
}).css('background-position', '50% ' + parseInt(-y / 50) + 'px');
});

Javascript Scroll Height Percentage Math

I have a simple JS module that calculates the percentage of the current scroll position.
var scrollPercent = (function() {
"use strict";
var module = {
config: {
},
init: function() {
return this.percent();
},
percent: function() {
var windowHeight = this.getWindowHeight();
var docHeight = this.getDocHeight();
var scrollPosition = this.getScrollPosition();
var result = ((scrollPosition + windowHeight) / docHeight) * 100;
return Math.floor(result);
},
getScrollPosition: function() {
return (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
},
getWindowHeight: function() {
return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
},
getDocHeight: function() {
return Math.max(
document.body.scrollHeight || 0,
document.documentElement.scrollHeight || 0,
document.body.offsetHeight || 0,
document.documentElement.offsetHeight || 0,
document.body.clientHeight || 0,
document.documentElement.clientHeight || 0
);
}
};
return module;
});
var scroller = new scrollPercent;
window.onscroll = function(event) {
console.log(scroller.init());
};
This is working as expected, if the window height is 500px and the doc height is 1000px, then the initial scroll position is 50%. If you were to scroll to the bottom it would be 100%.
What I would like to do is have my initial value be 1% and when scrolling to the bottom it return 100% (like it is now).
The problem is that my initial value of 50% is based off the window height (half the page is showing). For some reason I can't figure out the necessary math to have it start at 1% and go to 100% when reaching the bottom.

So, after a bunch of fiddling I came across your solution...
You have to take into consideration the current position of the document and the scroll bar. So if you want to get it between 0-100 you have to exclude the height of the window in your docHeight.
In your function I created a variable called initDiff and basically used this to calculate your value between 0-100.
This is how I set up your init function. Notice docHeight. Also, notice initDiff which calculates a difference that needs to be subtracted from your result. I don't use any scroll positioning because the initDiff is calculated for when the scroll-bar positioning is 0
init: function() {
var windowHeight = this.getWindowHeight();
var docHeight = this.getDocHeight() - windowHeight;
initDiff = (windowHeight / docHeight) * 100;
console.log('Difference : ' + initDiff);
return this.percent();
}
Below is your percent function that I changed up a bit. Again, docHeight takes into consideration the current height of the window. Your result, once you take out the windowHeight from docHeight your number generally ranged from something like 50-150, it all depends on the window height. What I do is "keep" that number, but I calculate that difference. So for that range, your initDiff will be 50. If the range was 56-156 your initDiff will be 56
percent: function() {
var windowHeight = this.getWindowHeight();
var docHeight = this.getDocHeight() - windowHeight;
var scrollPosition = this.getScrollPosition();
var result = ((scrollPosition + windowHeight) / docHeight) * 100 - initDiff;
console.log('Window Height : ' + windowHeight);
console.log('Document Height : ' + docHeight);
console.log('Scroll Position : ' + scrollPosition);
return Math.floor(result);
}
Here is the fiddle : http://jsfiddle.net/XNVNj/2/
Just look at your console. Should explain it all.

"Zooming" elements on a page while keeping the centre of enlargement in the centre of the window

I'm trying to work out how to enlarge all elements on a page, but keep the centre of enlargement in the centre of the window.
On this page, once the image reaches the top or the left side of the window the centre of enlargement changes. It also changes when you move the image. (exactly what you would expect)
I'm thinking I'd need to take a completely different approach to achieve what I want. But I'm not sure what that approach is..
Any ideas?

Well, here's my take.
Only thing is that I ditched the containers you were using. Is that cheating? Seems like they were only there to get the image centered. No need.
This works as expected with no side effects.
Here's a working demo you can test:
http://jsfiddle.net/YFPRB/1/
(You need to click on the pane with the baboon first.)
HTML
<body>
<img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" />
</body>
CSS
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}​
jQuery
EDIT: Thanks to #stagas for the reminder to clean up redundancies.
var $img = $('img'); // Cache the image. Better for performance.
$img.draggable();
$img.css({left: ($('body').width() / 2) - ($img.width() / 2)})
.css({top: ($('body').height() / 2) - ($img.height() / 2)})
$(document).keydown(function(event) {
if (event.keyCode == 38) {
var adjustment = 1.25;
} else if (event.keyCode == 40) {
var adjustment = 0.8;
} else {
return;
}
var offset = $img.offset();
var width = $img.width();
var height = $img.height();
var newWidth = width * adjustment;
var newHeight = height * adjustment;
var diffWidth = newWidth - width;
var diffHeight = newHeight - height;
var hcenter = $('body').width() / 2;
var vcenter = $('body').height() / 2;
var leftPercent = (hcenter - offset.left) / width;
var topPercent = (vcenter - offset.top) / height;
$img.offset({top: offset.top - (diffHeight * topPercent), left: offset.left - (diffWidth * leftPercent)});
$img.width(newWidth).height(newHeight);
});​

This is what I came up, it works as you say except the image will always go to the center after zooming in or out:
$('document').ready(function() {
zoomimg=$('#zoomimg'); // we store this in a variable since we don't need to traverse the DOM every time -- this is faster
var viewportWidth = $(window).width();
var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height(); // this is to work with Opera
zoomimg.css({'position': 'absolute', 'left': (viewportWidth/2)-(zoomimg.width()/2), 'top' : (viewportHeight/2)-(zoomimg.height()/2)}).draggable();
$(document).keydown(function(event) {
event = event || window.event;
var viewportWidth = $(window).width();
var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height(); // this is to work with Opera
if (event.keyCode == 38) {
width = zoomimg.width();
height = zoomimg.height();
zoomimg.width(width*1.2).height(height*1.2);
var viewportWidth = $(window).width();
var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
zoomimg.css({'left': (viewportWidth/2)-(zoomimg.width()/2), 'top' : (viewportHeight/2)-(zoomimg.height()/2)});
} else if (event.keyCode == 40) {
width = zoomimg.width();
height = zoomimg.height();
zoomimg.width(width*0.8).height(height*0.8);
var viewportWidth = $(window).width();
var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
zoomimg.css({'left': (viewportWidth/2)-(zoomimg.width()/2), 'top' : (viewportHeight/2)-(zoomimg.height()/2)});
} else {
return
}
});
});
You should put an ID 'zoomimg' on the tag for it to work, and overflow:hidden on the #container . Also ditch that display:table and display:table-cell they're useless now that we center with Javascript. Also, pressing the down arrow key will cause the container to scroll down, so you should use other keys, as the arrows are reserved by the browser for scrolling the viewport.