I was developing a site for my client and I decided that I wanted to make my footer stick to the bottom of the page regardless of the amount of content. I did a search for “sticky footers” and found some good CSS hacks. The problem is that it’s a little hard to implement once you have a majority of you site structured a specific ways.

I can tell you now that the CSS hacks for a sticky footer doesn’t cooperate well when you have margins declared in other div classes. I spent about an hour trying to get my footer to work right. It would work well in some pages but in others, would display a vertical scroll bar with 20 pixels or so left to scroll.

I got fed up and decided to try and use JQuery to solve my problems. It worked brilliantly! And it’s as simple as this. If my window height is greater than my content plus footer height, add the appropriate top padding to the footer that will keep it always on the bottom. If the content height is greater than the windows height, leave the padding as it was previously declared in your css. And just make sure you calculate the top padding on page load and when the window is resized.

Here is the code. Just put it at the end of your page somewhere. Make sure you change the class name ‘.footer’ with whatever class or id name you are using for your footer.

$(function(){
	positionFooter(); 
	function positionFooter(){
		var padding_top = $(".footer").css("padding-top").replace("px", "");
		var page_height = $(document.body).height() - padding_top;
		var window_height = $(window).height();
		var difference = window_height - page_height;
		if (difference < 0) 
			difference = 0;
 
		$(".footer").css({
			padding: difference + "px 0 0 0"
		})
	}
 
	$(window)
		.resize(positionFooter)
});

Using qTip, I was experiencing problems with the opacity levels in the fade in/fade out effects. My tooltip would activate on mouseover and deactivate on mouseout, which could enable a user to toggle back and forth very quickly. When the tooltip is fading in, and I quickly deactivate by mouseout, the opacity level that I deactivate at will become the maximum value.

Example:

Solution 1: You can turn off effects in jquery.

jQuery.fx.off = true;

Now, your qtip will not be able to use JQuery’s effect API and will not try to fade in/fade out. Your qTip will be fully functional. But not elegant.

If you don’t want to globally turn off the effects library for jquery, you can disable the fade in/fade out effects locally by using the stop() method and creating your own “dummy” effect function which will override the default effect. Here is an example.

$('.ajax_tooltip:not(.disabled)').each(function(){
    var information = null;
    information = $(this).attr("ref");
    $(this).qtip( {
        show: {
            delay: 0,
            solo: true,
            when: {
                target: false,
                event: 'mouseover'
            },
            effect: function() {
                $(this).stop(true, true).show();
            }
        },
        hide: {
            fixed: true,
            delay: 0,
            when: {
                target: false,
                event: 'mouseout'
            },
            effect: function() {
                $(this).stop(true, true).hide();
            }
        },
        position: {
            target: false,
            corner: {
                target: 'bottomMiddle',
                tooltip: 'topMiddle'
            },
            adjust: { screen: true }
        },
        content: {
            url: information,
            text: '<p>Content Loading...</p>'
        },
        style: { name: 'normal' }
    });
});

Solution 2: You can use this updated qTip Patch. This patch fixes the opacity problem during fade in/fade out. However, you may still wish to disable effects for added performance. The contents in this file can completely replace the original content in your qTip.js. I also noticed that it fixes an issue when trying to re-size the width in IE after loading content via Ajax. Keep track of the latest version. The patch is a fix for version 1.0.0-rc3.