Hi Guys, here with I am going to tell how to make highlight your contact address, twitter updates and flicker kinda pictures in a footer.

This Sticky footer with dropdown menu features always visible while visitor scrolling in a page. This makes quick and easy way of highlighting some important thing in your website.

In this tutorial, I have used Jquery CDN with google

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js”></script>

And some css and javascript code to make a div as sticky.

(function($) {

// check if all elements of my_array are equal, my_array needs to be an array
function check_for_equal_array_elements(my_array){
if (my_array.length == 1 || my_array.length == 0) {
return true;
}
for (i=0;i&lt;my_array.length;i++){
if (i &gt; 0 &amp;&amp; my_array[i] != my_array[i-1]) {
return false;
}
}
return true;
}

Array.max = function( array ){
return Math.max.apply( Math, array );
};

var widgetHeights = new Array();

$('.footer-widget').each(function(index) {
widgetHeights[index] = $(this).height();
});

var maxHeight = Array.max(widgetHeights);

// Set the height of the widget titles to the height of the tallest title, if the titles don't share the same height already
if(!check_for_equal_array_elements(widgetHeights)) {
$('.footer-widget').css('height', maxHeight);
}

// Enlarge the padding on the secondary footer area, to make it visible, if the bottom overlay is too tall
if(maxHeight &gt;= 72) {
$('.footer-secondary').css('padding-bottom', 96);
}

$('.footer-widget').find('.widgettitle + *').css('bottom', maxHeight).addClass('widget-content').click(function(e) {
e.stopPropagation();
});

$('.footer-widget').click(function() {

var $that = $(this);
var $widget = $that.find('.widget-content');

if($that.hasClass('inactive-widget')) {
$that.removeClass('inactive-widget').addClass('active-widget');
$widget.fadeIn(520);
}
else {
$that.removeClass('active-widget').addClass('inactive-widget');
$widget.fadeOut(400);
}

});

})( jQuery );// JavaScript Document&lt;/p&gt;

Please don’t forget to share and subscribe to latest updates of the blog.

Thanks!

View Demo
Download

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2012/03/sticky-footer-dropdown11.pnghttp://w3lessons.info/wp-content/uploads/2012/03/sticky-footer-dropdown11-150x150.pngKarthikeyan KCSS3facebookjqueryWeb DesignCSS3,freebies,Jquery,sticky footer,Website
Hi Guys, here with I am going to tell how to make highlight your contact address, twitter updates and flicker kinda pictures in a footer. This Sticky footer with dropdown menu features always visible while visitor scrolling in a page. This makes quick and easy way of highlighting some important...