Thursday, September 23rd, 2010

Floating toolbar using jquery

I will walk you through how to create a floating toolbar for your website in this post using jquery. The floating toolbar sticks to page, even when user scrolls the page.

All utilities or links that you need to show to the user can be placed in the toolbar. The user can access the utilities without having them to leave the current section where user is in.

Well, enough about me describing the floating toolbar, let us see it in action.

Step 1:

First I am going to start with the HTML,


Step 2:

Next, lets add some styles to the HTML,

  body
  {
      background:#ccc;
      min-height: 1000px;
      margin: 0;
      padding: 0;
  }

  
  a{color:#fff;}
  
  #toolbar{
      background:url(toolbar.png) no-repeat center center; 
     margin: 0 auto; 
     height:35px;
     position:fixed;
     bottom:0;
     width:100%
  }
  
  .moveup{position:fixed;top:0;}
  
  .movedown{position:fixed;bottom:0;}
  
  
  #move{
    color:#333;
    float:right;
    font-size:11px;
    position:static;
    width:70px;
    font-weight:bold;
  }
  
  #move:hover{
      cursor:pointer;
  }
  
  #socialmedia{margin: 0 auto; width:450px;}
  
  #twitter,#facebook,#buzz,#reddit,#sharethis
  {
      float:left;
      padding:5px 20px;
  }

Step 3:

Now we have added the styles to the HTML, to bring the floating toolbar to life lets add javascript to it.

Once the page loads, after a while we want the toolbar to go transparent, with some nice animation effect.

      $('#toolbar').animate({opacity:0.1},{duration: 'slow', queue: false});

Step 4:

When you move the mouse over the page, the toolbar should be highlighted, lets set the opacity to 1 if mousemove event is triggered on the page.

      $(this).mousemove(function(event){
            $('#toolbar').animate({opacity: 1},{duration: 'slow', queue: false});
    });

Step 5:

I want to bring back the opacity to 0.1, if there is a idle period or inactivity. To find the inactivity over the page, let us write a small javascript function. I have used two global variables here, one for calculating the time elapsed by user inactivity and the other variable is to set the time interval.

      var elapsedtime = 0;
      var time;
   
      //Function to calculate idle time

    $.fn.Idle = function(){
    return this.each(function(){
        
        var interval  = 2 //set 2 seconds max timeout
        
        time = setInterval(function(){
                  elapsedtime++;
                  if(elapsedtime == interval)
                    $('#toolbar').animate({opacity:0.1},{duration: 'slow', queue: false},'easeout');
        },2000);
                            

     });
    
   };
   

You can also use a jquery plugin to find idle time on your page. The following are the famous idle timer plugins,

So now if you have inactivity for 2 seconds, the toolbar starts fading out.

Step 6:

I want the toolbar not to fade out when I have mouse over the toolbar. But right now it fades out after 2 seconds. For that I have written one more function,

     $.fn.toolbar = function(){
    
      return this.each(function(){
                             
        $('#toolbar').mousemove(function(event){
            window.clearInterval(time);
            $('#toolbar').animate({opacity: 1},{duration: 'slow', queue: false});
        });
        
        $('#toolbar').mouseout(function(event){
            elapsedtime = 0;
            $(this).Idle();
            $('#toolbar').animate({opacity:0.1},{duration: 'slow', queue: false});
        });
    });
    
  };

Step 7:

It would be nice to have the toolbar highlighted when we scroll the page. That’s right, this gives us the complete floating toolbar. The javascript that does the trick is below,

     $(window).scroll(function(){
     
     elapsedtime = 0;
     
     $('#toolbar').animate({opacity: 1},{duration: 'slow', queue: false});
      
     });

Step 8:

Now what is next? Lets allow the user to move the toolbar either top or bottom according to their convenience. Here is the script that toggles the toolbar.

      $('#move').toggle(function(){
			$('#toolbar').removeClass('movedown');
			$('#toolbar').addClass('moveup');
			$(this).html('Move Down');
			$(this).css('top',35);
	},function(){
			$('#toolbar').removeClass('moveup');	
			$('#toolbar').addClass('movedown');
			$(this).html('Move Up');
			$(this).css('top',-12);
	});

Step 9:

We can integrate all the code pieces now and this is how it looks,

  /*CSS Starts*/
  body
  {
      background:#ccc;
      min-height: 1000px;
      margin: 0;
      padding: 0;
  }

  
  a{color:#fff;}
  
  #toolbar{
      background:url(toolbar.png) no-repeat center center; 
      margin: 0 auto; 
      height:35px;
      position:fixed;
      bottom:0;
      width:100%
  }
  
  .moveup{position:fixed;top:0;}
  
  .movedown{position:fixed;bottom:0;}
  
  
  #move{
    color:#333;
    float:right;
    font-size:11px;
    position:relative;
    top:-12px;
    right: 218px;
    width:70px;
    font-weight:bold;
  }
  
  #move:hover{
      cursor:pointer;
  }
  
  #socialmedia{margin: 0 auto; width:450px;}
  
  #twitter,#facebook,#buzz,#reddit,#sharethis
  {
      float:left;
      padding:5px 20px;
  }
/*CSS Ends*/
 
/*Javascript Starts */


var elapsedtime = 0;
var time;

$.fn.Idle = function(){
    return this.each(function(){
        
        var interval  = 2 //set 2 seconds max timeout
        
        time = setInterval(function(){
                  elapsedtime++;
                  if(elapsedtime == interval)
                    $('#toolbar').animate({opacity:0.1},
                   {duration: 'slow', queue: false},'easeout');
        },2000);
                            

    });
    
};


$.fn.toolbar = function(){
    
    return this.each(function(){
                             
        $('#toolbar').mousemove(function(event){
            window.clearInterval(time);
            $('#toolbar').animate({opacity: 1},
               {duration: 'slow', queue: false});
        });
        
        $('#toolbar').mouseout(function(event){
            elapsedtime = 0;
            $(this).Idle();
            $('#toolbar').animate({opacity:0.1},
                {duration: 'slow', queue: false});
        });
    });
    
};

                        
            

$(window).scroll(function(){
     
     elapsedtime = 0;
     
     $('#toolbar').animate({opacity: 1},
           {duration: 'slow', queue: false});
      
});



$(function(){    
    
    $(this).Idle();
    
    $('#toolbar').animate({opacity:0.1},
           {duration: 'slow', queue: false});
    
    $(this).mousemove(function(event){
            elapsedtime = 0;
            $('#toolbar').animate({opacity: 1},
               {duration: 'slow', queue: false});
    });
    
    $('#toolbar').toolbar();
    
    $('#move').toggle(function(){
            $('#toolbar').removeClass('movedown');
            $('#toolbar').addClass('moveup');
            $(this).html('Move Down');
            $(this).css('top',35);
    },function(){
            $('#toolbar').removeClass('moveup');    
            $('#toolbar').addClass('movedown');
            $(this).html('Move Up');
            $(this).css('top',-12);
    });
    
});
/*Javascript Ends*/

   


Hope you enjoyed this tutorial. If you have any comments or feedback, please use the form below for your voice to be heard.

Category: Javascript
You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.
  • Pingback: Tweets that mention Floating toolbar using jquery | IWebUX -- Topsy.com

  • Jack

    Awesome post… Keep it going dude!!!

  • Ron

    Thanks for the post.

  • http://www.facebook.com/girish.jammu Girish Raina Jammu

    Can i see a live example?

  • http://iwebux.com Iwebux

    Added demo

  • Manovinayak

    This Does not work in Internet Explorer 8.

  • http://iwebux.com Iwebux

    This should be good now. Thanks