Develop Reference

jQuery positioning footer without element the jump

So I am using jQuery to position the footer absolutely on pages where there isnt much content.
The problem I have noticed is that the footer loads in it's normally position and then visibily jumps to the bottom of the page when the jQuery adds the class. Is there anyway to get around this jump?
/* Position footer bottom of all pages */
positionFooter: function () {
var windowHeight = jQuery(window).height();
var content = jQuery("#content").height() + jQuery("#footer-wrapper").height();
if (windowHeight > content){
jQuery("#content").css("padding-bottom", jQuery("#footer-wrapper").height());
jQuery("#footer-wrapper").addClass("fixed-bottom");
}
}
I am using window.load:
jQuery(window).load(function()

How about this
positionFooter: function ()
{
var windowHeight = jQuery(window).height();
var content = jQuery("#content").height() + jQuery("#footer-wrapper").height();
jQuery("#footer-wrapper").addClass("fixed-bottom");
jQuery("#footer-wrapper").hide();
if (windowHeight > content)
{
jQuery("#content").css("padding-bottom", jQuery("#footer-wrapper").height());
jQuery("#footer-wrapper").show();
}
}

If you can change the html, maybe you should use a css sticky footer
http://ryanfait.com/sticky-footer/
I've used this in a lot of websites and works just fine

A quick dirty fix would be to give the body { opacity: 0} before the document loads, and then animate the opacity back up to 1 over a period of, say, 1 second. That way, the whole body will fade in after the footer has already jumped.
simple fiddle
This is how a lot of people deal with Flashes Of Unstyled Content (or FOUC).
Edit: As Freeeeez pointed out below, using body as the animatee isn't necessary, but in my opinion the effect is pleasing :)

If you set it to display:none as default with a specific class. You could then use jQuery to remove the class after the document has finished loading with something like this:
$(document).ready(function(){
$('.hideMe').removeClass('hideMe');
});

jQuery Lazy load for animated scrolling

I would like to use Lazy load to my site, but there is a little problem: I scroll the content with JS (animate the content with X px ), so I don't use the scrollbars. Sadly, lazy load doesn't trigger in this case. Got any ideas how to make this?
My site scrolling horizontally, all content div-s float near each other and only the current one is visible, all other are on display: none;
Here is a not so pro pic of my site: I marked with black the visible area and with red, the moving parts.
my site in pic

All I can think of is hook into when the content slides, then add the images in or the whole content with AJAX if thats your aim. Plugins will usually focus on the majority of use cases, so Lazy load might not be good for you.

I would just write my own simple lazy load script:
$(function(){
$('img').each(function(){
var $this = $(this)
$this.data('origImg',$this.attr('src'))
$this.removeAttr('src') // or set a placeholder img
})
var $window = $(window), $container = $('#sliding_content')
window.lazyLoad = function () {
$container.find('img:not([src])').each(function(){
var $this = $(this), left = $this.offset().left
if (!(left < 0) && !(left > $window.width()))
$this.attr('src',$this.data('origImg'))
})
}
})
And then when the divs are animated, call lazyLoad().
Let me know if this works for you. :)

Ok, after some hours I've decided to use JAIL for this. Not the best solution, but better than nothing since I'm dumb with AJAX JAIL aka jQuery Asynchronous Image Loader

jQuery - "wait until ready"?

I have this slider on my website:
http://css-tricks.com/examples/AnythingSlider/
It works fine, but I don't like the way it loads (you can see list of the images with list dots before it is ready).
Is there a universal way of bypassing that? How to load the slider in the background so users don't see it UNTIL it's fully loaded (while it loads in the background I could display preloader.gif for example).
I was thinking about opacity: 0 & fading it after the slider in DOM, but maybe there's other way?

I tend to use the following pattern:
// assumes slider is hidden
var imgCount = $("#slider img").length;
var loadCount = 0;
$("#slider img").one("load", function() {
loadCount++;
if(loadCount === imgCount) {
// show slider once all images have loaded
showSlider();
}
}).each(function() {
if(this.complete) $(this).trigger("load");
});

I would say apply css
.anythingSlider
{
display:none;
}
and then change it with jQuery after the slider is loaded.

Why does setInterval seem to have scope issues in my jQuery plugin?

I'm sorry this isn't more specific, but I'm having trouble isolating the issue.
I've written a very simple jQuery plugin that scrolls images or other elements through a div, like a carousel, on a set interval. I wanted this plugin to work with multiple instances on one page, but when I call it on multiple elements, only the last initialized element scrolls. I assume the way I'm using setInterval is the cause, but I don't understand why.
The function for scrolling is as follows, and the full source is linked above.
function scrollRight() {
// Don't animate if the mouse is over the scrollah
if (hovering) { return; }
/* If we're at the end, flip back to the first image
* before animating, lest we view blankness in the wrapper
*/
if (position === nChildren) {
position = 0;
$wrapper.css('left', '0px');
}
// Animate to the next view
position++;
$wrapper.animate({
left: position*-width+'px'
}, 1000, 'swing', function() {
// Animation complete.
});
}
setInterval(scrollRight, 5000);
So why do individual instances of this plugin not scroll once more have been initialized?

I think if you change $wrapper = $this.find('.wrapper'); to var $wrapper = $this.find('.wrapper'); it might work.
Learned this the other day from Stack Overflow: variables that don't use the var keyword are implicitly global in scope, so I think each scroller is overwriting the same global $wrapper variable.
EDIT: might also want to do var $this = $(this);.

"collapsing" position: fixed element using jquery

I'm trying to implement the effect the logo has in this page, where it is fixed on the top of the page, but when scrolling down, only a part of it remains visible, not the whole element.
I have found plenty of jquery plugins that will keep the top of an element at the top of the page, but none that will let me customize how high the element will stay. My javascript is not up to coding something from scratch. Does anyone have any suggestions for plugins that might be useful?

You shouldn't need a plugin for this. CSS can keep the logo fixed and you can use JavaScript to change the display of the element once the user begins to scroll the page.
Assuming that your logo has the ID of logo, the CSS would be:
#logo {
top: 0;
position: fixed;
}
Since it appears you're using jQuery, you can do something like this:
$(function() {
// gets a reference to the document based on which browser is being used
var oDoc = $.browser.msie === true ? window : document;
// event handler for when the user scrolls
$(oDoc).scroll(function() {
// if the user is at the top, display the whole image
if($(this).scrollTop() === 0) {
$('#logo').css('margin-top', 0);
// otherwise, pull the image up a single em (200 is arbitrary)
} else if($(this).scrollTop() > 200) {
$('#logo').css('margin-top', '-1em');
}
});
});