Develop Reference

How can i make a horizontal, both directions, (as if the body was a 360 horizontal plane), scrolling body with javascript?

How can i make a horizontal, both directions, (as if the body was a 360 horizontal plane), scrolling body with javascript? It is important that it comes back to the beggining through the scroll, either way you go.
I made a jsfiddle.
var main = document.querySelectorAll("main_div");
var container = document.querySelectorAll("object_container");
window.onscroll = function() {myFunction()};
function myFunction() {
if (window.scrollBy(80000, 0) > 0 || window.scrollBy(80000, 0) > 0) {
document.container.createElement(container);
} else if (window.scrollBy(0, 0) < 0 || window.scrollBy(0, 0) < 0) {
document.container.prepend(container);
}
}
https://jsfiddle.net/camilongeira/ckhd17q5/24/#&togetherjs=7tT1ILHRvg
The background image and the objects are on the main_div, and i was trying to make a function that triggered the main_div to repeat itself when you scrolled to the end of it, but couldnt manage and also dont know if it would make sense because cant make elements appear to the left side from the beggining.
I hope i am being clear enough... i am quite new in this community and understand people dont want to waste their time, but have been going around this for sometime and there are some close solution but nothing really does what i want...
Thanks!

Check if whole div is visible in browser window

I have a product listing on my website and when hovering over the product an info div shows up. The only problem is that in some cases parts of the div fall outside of the browser window.
I need to check with Javascript if thats the case, and if so I need to assign a class to that particular div. I know how to do the last part, but I have no idea how to check if the whole div is visible.
Can anybody give me a suggestion how to handle this?

Your goal is to determine if your HTML element is in the viewport. If you're using jQuery - there are a few plugins tha handle this.
Jquery check if element is visible in viewport
http://opensource.teamdf.com/visible/examples/demo-basic.html
With the example above, you'd want to use detectPartial set to true -- so that you would know whether or not the thing is inside the viewport entirely.
//added by JG 3/10/2011, to extend selectors.
// Example:
//if ($('#whatever').is(':inView') ) {...}
jQuery.extend(jQuery.expr[':'], {
inView: function(a) {
var st = (document.documentElement.scrollTop || document.body.scrollTop),
ot = jQuery(a).offset().top,
wh = (window.innerHeight && window.innerHeight < jQuery(window).height()) ? window.innerHeight : jQuery(window).height();
return ot > st && (jQuery(a).height() + ot) < (st + wh);
}
});
I did that a number of years ago, based off of Remy Sharp's inview plugin (https://remysharp.com/2009/01/26/element-in-view-event-plugin) -- but these only check for vertical in-view, not horizontal (scrolling sideways/off the left or right).

Fly-in Fly-out effect on scroll jquery css animation

I am trying to make the elements on my site fly-in and fly-out on scroll.
This is the effect I am looking for.
http://nizoapp.com/
The effect in the nizo site is done with jquery, I think
I have tried many different ways to get this effect working, with Skrollr, scrollorama, and jquery animate and with css transitions etc etc etc
I decided to use css transitions as mad by the "css animation cheat sheet" (google it)
After a lot of effort and some borrowed code, I have got it half working, as in, I can get the elements to fly-in on down scroll, but not to fly back out on up scroll.
This is a jsfiddle with it half working
http://jsfiddle.net/mrcharis/Hjx3Z/4/
The code is......
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).scroll(function () {
$('.box').each(function (i) {
if (isScrolledIntoView(this)) {
$(this).addClass("slideRight");
}
});
});
// this is the function to check if is scroll down or up, but I cannot get it to trigger the fly in effect,
(function () {
var previousScroll = 0;
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll){
// i figure to put the fly-in code here
}
else {
// and the fly-out code here
}
previousScroll = currentScroll;
});
}());
I have tried using another function (code chunk) to check if the scrolling is down or up, but i can't get it working with the existing code.
Any help to get this working would be awesome
Have a nice day
I will post the solution one day, if I can figure it out, sure someone else would like to know

The trick to knowing whether you're scrolling up or down is not to ask. Make it relational by using the top offset of the elements in question. Then it's as easy as > or <, for the most part.
Though if you do want to get the current direction you could always record the last scroll position and compare it with the current one.
var before = 0;
$(window).scroll(function(event){
var now = $(this).scrollTop();
if (now > before){
//on down code
} else {
//on up code
}
before = now;
});
Like the answer here suggests.
I like to trigger the events based on the screen size and the element position in the screen, so it doesn't matter whether it's up or down, it follows the same rules forwards and backwards. That way instead of asking up or down, it just asks if it's scrolling and executes it accordingly.
If you need me to make changes to my fiddle for you, just let me know what you want to happen. I only made the fiddle because of the horrible job they did on the tympanus.net example. You don't make a tutorial to accomplish a simple task 2 pages of js, that's unnecessary and it doesn't provide any instruction other than "hey, you want to do this? Then copy and paste these things I put together that have no clear course of action, and way too much code to digest quickly". Which doesn't help anyone learn.

After some code borrowing from tympanus.net and using the modernizer library I came up with this.
I tried different approaches as well but all of them turned out to have some flaws in them so I find best approach to be using the sample code and the already provided modernizer JS library.

Custom parallax

I'm trying to create my own custom parallax plugin so that I am able to choose the direction the items transition off the screen and I'm just stuck at making sure that no matter how a user scrolls and no matter of the size of the window that the object disappears at the correct point.
Currently I have:
var lastScrollTop = 0;
var logoStartPos = $('.bg-logo').position().left;
$(function(){
$(window).scroll(function(){
var st = $(this).scrollTop();
if (st > lastScrollTop){
if($('.bg-logo').is(':in-viewport'))
$('.bg-logo').css({'left':($('.bg-logo').position().left+10) + "px"});
} else {
if($('.bg-logo').is(':in-viewport') && logoStartPos < $('.bg-logo').position().left)
$('.bg-logo').css({'left':($('.bg-logo').position().left-10) + "px"});
}
lastScrollTop = st;
});
});
As you can guess this only moves the item right until it goes off screen. This way has varied results because if I use the scroll wheel it take longer to disappear to if I use the scroll bar. I also have another problem in that if I use a mixture or have a different view port I get an different result all together.
Any tips or pointers to achieve the result I'm after?
An working example of my code is at http://motoring.egl.me.uk
Thanks Matt

A bit dated, but FYI...
In your jQuery initialize or ready event, you need to initialize each section, article, item or whatever it is (item.each) to instantiate a scroll function, so that each one has it's own scroll function.
this.each(function(index) {
Then in scroll function, only handle the event, if it is the 'current' section. You will need some way to determine which item is the 'current' one. Often this is done by saving each item's window size into a global array, and then using that compare to the current location.
Something like: (The way you designed your code will likely be very different)
// If this section is in view
if ( ($window.scrollTop() + $window.height()) > (topOffset) &&
( (topOffset + $self.height()) > $window.scrollTop() ) )
In this way, once one item goes off the screen, the next item should become 'current' and continue the scrolling.

Keeping sidebar in viewport, problem with scrolling

I've got a solution for keeping a sidebar in the viewport as you scroll up and down the page. Problem comes in when the sidebar is longer than the content area, and you keep scrolling you get this jittering effect as the sidebar keeps pushing the footer down.
I've got an example of this setup in jsFiddle: http://jsfiddle.net/U9F7w/2/ (full screen: http://jsfiddle.net/U9F7w/2/embedded/result/ )
My question is, is there a way to make the sidebar stop once it touches the bottom/footer area?
I've read some solutions about setting the sidebar to absolute, unfortunately it's an existing site and changing the position didn't work and messed with a lot of the existing page elements.
Here's the jQuery/js I'm working with:
// set the offset
var sidebarOffset = $(".sidebar").offset();
var sidebarPadding = 15;
// when the window scrolls, keep sidebar in view
$(window).scroll(function() {
if ($(window).scrollTop() > sidebarOffset.top) {
$(".sidebar").stop().animate({marginTop: $(window).scrollTop() - sidebarOffset.top + sidebarPadding });
}
else {
$(".sidebar").stop().animate({marginTop: 0});
};
});
edit
One thing I thought about was (not sure if this is possible) to detect if the bottom of one div was lower than the bottom of another, stop the scrolling. Is there a way to detect if the bottom of one div is lower than the other?

Check if the sidebar's height is greater then that of the content:
var ct = $(".content");
var sb = $(".sidebar");
var sbOffsetTop = sb.offset().top;
var sbPadding = 15;
$(window).scroll(function() {
if (sb.height() < ct.height()) {
if ($(window).scrollTop() > sbOffsetTop) {
sb.stop().animate({top: $(window).scrollTop() - sbOffsetTop + sbPadding });
}
else {
sb.stop().animate({top: 0});
};
};
});
See demo fiddle with large content and demo fiddle with large sidebar.
And I don't know why exactly, I would use top in conjunction with position: relative, but marginTop works also fine.