New Gmail like Floating Toolbar jQuery Plugin: v. 1.0 ~ Web Speaks

New Gmail like Floating Toolbar jQuery Plugin: v. 1.0

This time Google has invested some resources in designing their sites. Like Gmail has been made much better. The new theme is simple and sober. I liked the floating toolbar of new Gmail. When I looked at it I thought why shouldn't I create something like that for my readers. After that I created a jQuery plugin that floats any element on your webpage just like the Gmail's toolbar. The plugin is really simple to use with few lines of code. Lets have a look at it.

Live Demo 1 Live Demo 2 Download Script

jQuery Plugin:

Here is the jQuery plugin that I wrote to make the thing happen.

(function($){
 $.fn.fixFloat = function(options){ /**We have named our plugin 'fixFloat'**/
 
  var defaults = {
   enabled: true
  };
  var options = $.extend(defaults, options);

  var offsetTop;  /**Distance of the element from the top of window**/
  var s;    /**Scrolled distance from the top of window through which we have moved**/
  var fixMe = true;
  var repositionMe = true;

  var tbh = $(this);
  var originalOffset = tbh.css('top'); /**Get the actual distance of the element from the top**/

  tbh.css({'position':'absolute'});

  if(options.enabled){
   $(window).scroll(function(){
    var offsetTop = tbh.offset().top; /**Get the current distance of the element from the top**/
    var s = parseInt($(window).scrollTop(), 10); /**Get distance from the top of window through which we have scrolled**/
    var fixMe = true;
    if(s > offsetTop){
     fixMe = true;
    }else{
     fixMe = false;
    }

    if(s < parseInt(originalOffset, 10)){
     repositionMe = true;
    }else{
     repositionMe = false;
    }

    if(fixMe){
     var cssObj = {
      'position' : 'fixed',
      'top' : '0px'
     }
     tbh.css(cssObj);
    }
    if(repositionMe){
     var cssObj = {
      'position' : 'absolute',
      'top' : originalOffset
     }
     tbh.css(cssObj);
    }
   });
  }
 };
})(jQuery);

HTML Markup:

<html>
<head>
<title>WebSpeaks.in | Gmail like Floating Toolbar</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="fixFloat.jquery.js"></script>
<script type="text/javascript">
$(function(){
 $('div#toolbar_holder').fixFloat(); /**Call our plugin**/
});
</script>

</head>

<body>
<div class="main">
 <div id="toolbar_holder">
  <div class="tb">
   <ul>
    <li><input type="checkbox" ></li>
    <li><a>Archive</a></li>
    <li><a>Spam</a></li>
    <li><a>Delete</a></li>
    <li><a>Move to</a></li>
    <li><a>Labels</a></li>
    <li><a>Refresh</a></li>
   </ul>
  </div>
 </div>
 <div class="spacer">
 </div>
</div>
</body>
</html>

CSS Code:

html {
 height:100%; /* fix height to 100% for IE */
 max-height:100%; /* fix height for other browsers */
 padding:0; /*remove padding */
 margin:0; /* remove margins */
 border:0; /* remove borders */
 background:#fff; /*color background - only works in IE */
 /* hide overflow:hidden from IE5/Mac */
 /* \*/
 /*overflow:hidden; /*get rid of scroll bars in IE */
 /* */
 font: 75% arial,sans-serif;
}
#toolbar_holder{
 position:absolute;
 top:80px;
 margin:0;
 padding:0;
 border:1px solid #e1e1e1;
 background-color:#f9f9f9;
 height:50px;
 width:100%;
 width:800px;
 margin-left:207px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    -moz-box-shadow: 1px 1px 0 #d5d5d5;
}
.tb ul{
 margin:0;
 padding:0;
 background:transparent;
 height:100%;
 margin-left:60px;
 padding-left:60px;
 padding-top:10px;
    line-height: 31px;
}
.tb ul li {  display:inline;}
.tb ul li a {
 cursor:pointer;
 font-weight:bold;
 padding:6px;
 color:#666666;
 text-decoration:none;
 border:1px solid #D3D3D3;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
 background-color: #F1F1F1;
}
.tb ul li:first-child {
 padding-right:30px;
}
.tb ul li:last-child {
 padding-left:30px;
}
.tb ul li a:hover {
 border:1px solid #666666;
}
.spacer{
 height:1000px;
 width:100%;
 background-color:#F1F1F1;
 width:1007px;
}

29 comments

Joe Michieli

July 24, 2011 at 2:00 PM

This is awesome, good job! :)

Arvind Bhardwaj

July 24, 2011 at 9:19 PM

Thanks Joe,
Keep reading...

Gautam Pai

July 27, 2011 at 10:12 AM

Saw this on gmail and was just searching for this exact same thing.

Awesome job dude.

July 28, 2011 at 2:33 AM

What a wonderful plugin information? Today I learnt jQuery v.1.0 information.

July 28, 2011 at 8:35 AM

Thanks guys:)

Anonymous

July 28, 2011 at 6:39 PM

Awesome plugin!! I keep running into a javascript error whenever I scroll - any ideas? Thanks

tbh.offset() is null

July 28, 2011 at 8:58 PM

Hi,
Please check if you have given the correct ID of the element to be fixed. Possibly the script cannot find the corresponding element.

THE SPUNK

July 29, 2011 at 3:18 AM

Hi,

Did you try this out on tablet pcs like iPad, galaxy pad and other smart phones.
It is not working in these devices. I have been working on one such floating toolbar for sometime now, but for my website, I am unablet to set the floating toolbar at the bottom of the page.
Please if you have any ideas on how to do this. Please help.

Regards,
Mano

July 29, 2011 at 3:24 AM

Hi,

Even in this page, the RSS feed, twitter and facebook buttons that are fixed on the right, are not fixed in the same position, if I open this page in iPad and scroll.

This is a kind of requirement that I have, i.e. to keep the floating tool on the bottom of the page irrespective of scroll and orientation change.

I have been successfull in web desktop browsers but not on tablet PCs.

Regards,
Mano

July 29, 2011 at 8:14 AM

Hi,
You are absolutely right. The reason is being that the css property 'position:fixed' does not work in mobile and ipad browsers. I am working around to find a solution for that. Please update all our readers if you find any solution.
Thanks.

August 10, 2011 at 4:08 AM

Hey there Bhardwaj,

I really thanks for this awesome contribution.

Regards
Basharat Ali

August 14, 2011 at 12:29 PM

Broken Live demo links

Buy Domain

August 18, 2011 at 7:02 AM

Great article. I like this blog very much because I had gathered many new information from your post.

pasmalin

September 6, 2011 at 1:30 AM

Hi,
Thank you for tgis plugin :o)
I just made some small change.
The plugin work with a non absolute toolbar : http://jsfiddle.net/pasmalin/AyjeZ/

September 6, 2011 at 1:43 AM

Hi Pasmalin,
Thanks for your effort. You did a fab job:)

Einar Ólafsson

September 6, 2011 at 3:04 AM

This does not work like in google news ore on gmail. The element should not movie when I scroll to the left ore right. This part is easy, just using css fixed position when you get to the top, but you need to keep the element on the right x-axis on the document.

Fernando Cardoso

September 6, 2011 at 7:15 AM

Great job.

I did a little tweak to adapt to specific case: the offset of the floating element is not necessarily equal to its CSS top. In a JSF composition, for example the offset and the top are different.

All I did was treating the original offset and the original top as different variables.
var originalOffset = tbh.offset().top;
var originalTop = tbh.css('top');

Also, when repositioning, I set the top to original top instead of original offset.

Thanks a lot!

iphonefamily

October 21, 2011 at 5:53 AM

At the top, the banner and search are too big, just wasting space. I prefer the big buttons but too much space in between. However, an improvement.
http://www.iphonefamily.net/2011/10/21/new-gmail-design-leaked-video/