Simple Slider jQuery component

Hi All, I am sure if you're a web developer, you have used jQuery, or a jQuery plugin. I sure know I have, but now, I want to contribute one.

I have written a jQuery plugin which I call the "Sliderizer".

To use it, simply create an un-ordered list like such:

<ul class="someList">
   <li>Slide 1</li>
   <li>Slide 2</li>
   <li>Slide 3</li>
   <li>Slide 4</li>
</ul>

then select it, and call the Sliderizer like so:

$('.someList').sliderize({ height: 200, width: 200, direction : "vertical" });
$('#toSliderize').sliderize({ height: 200, width: 200, direction : "horizontal", speed: "2000" });

You can configure it with the following options:
height : integer     (defaults to 300)
width  : integer     (defaults to 300)
speed : integer     (defaults to 1000) -This is milliseconds for animation, 1000 = 1 second
direction : string   (default to horizontal)  -This can be horizontal or vertical

Below is some code I have written. Feel free to copy and paste it into a js file and use in a project. Please leave my name and link to my blog. Cross Browser friendly, just needs some CSS. If you have any questions or reccommendations, please feel free to email me. Enjoy!



(function($){  
$.fn.sliderize = function(options) 
{
//function by Brendon Irwin | 2011 | http://bren1818.blogspot.com/ | bren1818@gmail.com
//Last update: May 28th 2011

//Helper function for animating
function slideTheSlide(slider, direction, distance, speed){
var theDistance = 0;
speed = parseInt(speed);
var theId = '#' + slider;
if( direction == "left" || direction == "up" ){
theDistance = (distance * -1);
}else if( direction == "right" || direction == "down" ){ //right or up
theDistance = distance;
}


if( direction == "left" || direction == "right"){
$(theId + ' li').each(function(){
var thisPos = $(this).position();
$(this).animate({
left: (thisPos.left + theDistance) + 'px'
}, speed, function() {
// Animation complete.
//Re-enable buttons
var first = $(theId + ' li').first().position();
var last = $(theId + ' li').last().position();

if( first.left == 0){
$(theId + '_sliderized_controls .prevClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .prevClick').attr("disabled", false);
}

if( last.left == 0){
$(theId + '_sliderized_controls .nextClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .nextClick').attr("disabled", false);
}
});
});
}

if( direction == "up" || direction == "down"){
$(theId + ' li').each(function(){
var thisPos = $(this).position();
$(this).animate({
top: (thisPos.top + theDistance) + 'px'
}, speed, function() {
// Animation complete.
//Re-enable buttons
var first = $(theId + ' li').first().position();
var last = $(theId + ' li').last().position();

if( first.top == 0){
$(theId + '_sliderized_controls .prevClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .prevClick').attr("disabled", false);
}

if( last.top == 0){
$(theId + '_sliderized_controls .nextClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .nextClick').attr("disabled", false);
}
});
});
}
}//end slideTheSlide

//set defaults
var defaults = {
  height: "300",
  width: "300",
  speed: "1000",
  direction: "horizontal"
};
 
var options = $.extend(defaults, options);
//If there are one or more elements, return them  
return this.each(function(index) {
//check if item has an id, if not give it one
var thisId = "";
var listID ="";


if ($(this).attr('id')) {
thisId = $(this).attr('id') +  '_sliderized';
listID = $(this).attr('id');
} else {
thisId = "sliderList_" + index + '_sliderized';
listID = "sliderList_" + index;
$(this).attr('id', listID );
}

$(this).wrap('<div id="' + thisId + '" class="sliderized" />');
$(this).wrap('<div class="sliderizedContainer"/>');

$('#' + thisId + ' .sliderizedContainer').css({'position' : 'relative','height' : options.height + 'px', 'width' : options.width + 'px', 'overflow' : 'hidden'});

$(this).find('li').each(function(index){
$(this).css({'position' : 'absolute','float' : 'left', 'height' : options.height + 'px', 'width' : options.width + 'px', 'display' : 'block'});
if( options.direction == "horizontal"){
$(this).css({'left' : (index * options.width) + 'px'});
}else{
$(this).css({'top' : (-1 * (index * options.height)) + 'px'});
}
$(this).wrapInner('<div class="sliderizedSlide"/>');  
});

$('#' + listID + ' .sliderizedSlide').css({'position' : 'relative','height' : options.height + 'px', 'width' : options.width + 'px'}); //size the slide


$('#' + thisId).css({'height' : options.height + 'px', 'width' : options.width + 'px'});
$('#' + thisId).append('<div class="sliderized_controls" id="' + thisId + '_controls"/>');


$('#' + thisId + '_controls').append('<button class="prevClick">Previous</button>');

$('#' + thisId + '_controls .prevClick').click(function(){
$(this).attr("disabled", true);
if( options.direction == "horizontal"){
slideTheSlide(listID.toString(), "right",  options.width, options.speed );
}else{
slideTheSlide(listID.toString(), "up",  options.width, options.speed );
}
});

$('#' + thisId + '_controls').append('<button class="nextClick">Next</button>');
$('#' + thisId + '_controls .nextClick').click(function(){
$(this).attr("disabled", true);
if( options.direction == "horizontal"){
slideTheSlide(listID.toString(), "left",  options.width, options.speed );
}else{
slideTheSlide(listID.toString(), "down",  options.width, options.speed );
}
});

$('#' + thisId + '_controls .prevClick').attr("disabled", true); //disable previous at start

});// endeach function
 
};//end function sliderize
})(jQuery);//end function decleration

Design Hints - Sticky footer

If you're a constant web surfer, there are things you have likely come to either expect or like to see. One particular attribute I like and develop most sites to use, is a 'sticky footer'. A sticky footer is simply when the footer is at the bottom of the page (as usual),but even if there isn't a lot of content, it sits at the bottom of the page. I think this looks much better then having the footer of the website show up half way up the page if there isn't enough content.

There are two typical methods you can use / find on the net, see links below, but I will paraphrase the method I like and show you the CSS/HTML layout for it. The method I use is pretty much identical to Method one, so quick it out after. Feel free to copy and paste the CSS/HTMl below.




<html>
    <head>
       <title>Page with a sticky footer</title>
       <!-- Include StyleSheet / Scripts -->
    </head>
    <body>
<style> /*The CSS, Im using inline styling for the sake of showing you*/
* {
margin: 0;
}
html, body {
height: 100%;
}


#header, #footer, #pageContent{
 width: 1024px;
 margin: 0 auto; /*who doesn't like a center aligned page?*/
}


#pageContent{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px;
/* Note the spacer must be the same height
as your footer. If too small it will not sit
properly, or if too large you will have overlap
*/
}
#footer, #spacer {
height: 150px;
}
</style>
<div id="header">
<p>Your Header Content</p>
</div>


        <div id="pageContent">
            <p>Your page content.</p>

            <div id="spacer"><!--Make sure this is within the PageContent --></div>
        </div>


        <div id="footer">
            <p>Your footer Content</p>
        </div>
    </body>
</html>

Method 1 (preferred)
Method 2

Hope this is useful!

Cross Browser Compatibility, A rant, Some tips, Some thoughts.

If you're reading this posting, and you're using IE6. Please just stop. Do yourself, and every web developer a favor. Download a new browser, whether it be the most up to date Internet Explorer, Firefox or Chrome, just do it.

Since that is out of the way, lets discuss this. If you're a web developer, I am sure you have developed pages where you are given a design, you implement it, it looks great, everyone is happy, and then the 'Client's client' is un happy because your .png graphics are not working and the page looks a skew. Why? They're on IE6.

This has happened on more then one occasion where I work, and even if you know ahead of time, working cross browser, and with out-dated browsers can be a pain in but. However, I do have some tips and tricks for you which may make your life a little easier.

If the website is already built, and there are only a few things wrong, ex: pngs are not transparent, and the odd div is out of place, there are two quick and easy solutions.

Solution 1. Using a png fix. There are many png fixes available, and they can be a real life saver. They typically require you to have jQuery included, but if you're a web developer and dont know about jQuery perhaps you shouldn't be one.

Solution 2. CSS Hacks. Although I try not to endorse CSS Hacks, they can be a real life saver for saving time. Essentially, they allow you to target specific elements' attributes depending on the browser.
For example:
<style>
     p{
          color: #000000; /*Black Color Text All Browsers*/
          _color: #ff0000; /*Red Color Text in IE6*/
          *color: #00ff00; /*Green Color Text in IE7 and below */
           color:#0000ff\9; /*Blue Color Text in IE8 and blow*/
     }
</style>


/*IE = 8:*/           property: value\9;
/*IE = 7: */       *property: value;
/*IE6:*/            _property: value;

Alternatively, you can use if conditionals such as:

<!--[if IE]> CssCode for Internet Explorer <![endif]-->
<!--[if lte IE 6]> Code for IE6 and below <![endif]-->
<!--[if lte IE 7]> Code for IE7 and below <![endif]-->
<!--[if lte IE 8]> Code for IE8 and below <![endif]-->

Within the 'Code' Section you can include Stylesheets or use plain css. I personally prefer the first method as I find it less messy.

A more comprehensive guide can be found here, here or here.


The Best Method, however is to be using the right tools, to help find the problems and see what is going on. I strongly recommend any web developer worth their salt to use:

Firebug (can be used in most browsers, however it is certainly best used in Firefox)
IE Tester - Handy application to view your pages in various versions of IE. Of course there is no substitute for the real thing, but this will certainly help.