New Gmail like Floating Toolbar jQuery Plugin: v. 1.0

29
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;
}

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/

29 thoughts on “New Gmail like Floating Toolbar jQuery Plugin: v. 1.0”

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

    tbh.offset() is null

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

  8. 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

  9. 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

  10. 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.

  16. 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.

  17. 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!

  27. Hi,
    Thank you for this script, can you tell me please how in gmail this toolbar is hidden and when you check a checkbox it appears ?
    thanks

Comments are closed.