Weekly freebies in your inbox.
Freebies By Design Shock
Read More
Read More
Read More
Friends
Weekly freebies in your inbox
Floating social toolbar with jQuery and CSS
Hello friends, today we’re going to show you how to make a fancy floating bar using jQuery and JavaScript, as the one you see when scrolling down on this page. From creating the PHP file to customizing the CSS, we will guide you across the several steps before you can complete this fancy floating bar ready to be implemented on your website and where you can place several elements, including social icons, information and more. Some other good examples of floating bars can be found at Meebo and Wibiya. Remember that among the main uses you can give to this great floating bar we can list:
- Social information
- Advertising
- Highlight important information (promos, etc.)
- Contact information
- Polls / feedback
View Demo 1View Demo 2See it in action
How does it work?
What we’re making on this tutorial is a nice floating bar with tooltip. The floating bar displays from the top of the page in a subtle way that starts increasing the bar’s opacity little by little, besides that you will find on the 2nd demo that when you roll over the bar, a fancy tooltip will display. The programming part is very simple, and to make it even simpler, we will explain you every step that we take during the process.
Make the HTML
The first thing that we need to do is the HTML. For start we must create the demo page and then save it as demo.php so we can continue with the implementation of the jQuery library.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Floating bar by tutorialshock</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.js"></script> </head> <body> </body> </html>
Configure the CSS
/*This is the main container, it's 100 % width so it can always expand horizontally to the totality of the screen.*/
div.scr_esp_down{
width:100%;
height:51px;
/* This is the 1 pixel background image that expands horizontally */
background: url(images/toolbar_make.jpg) repeat-x ;
position:fixed;
top:0;
left:0;
/* We place it in front of the rest*/
z-index:9999;
/* We start the opacity from 10%*/
opacity:0.10;
filter:alpha(opacity=10);
/* We initialize the container as hidden, then we use this operator because we need to reserve the area that the floating bar is going to occupy once it’s shown*/
visibility:hidden;
}
/* This div contains the image with the floating bar’s information such as the icons, main message and more. We initialize it on the horizontal center of the page*/
div.scr_esp_down div{
width:100%;
height:51px;
background:url(images/IS_toolbar_img.jpg) no-repeat top center ;
}
/*This class applies for the tooltip that is going to show on the 2nd demo’s roll over, on this case we use display none due to the fact that we no longer need to save space for this
image*/
img.img_animate{
display:none;
}
Now the remaining HTML
<div id="toolbar" align="center" class="scr_esp_down"> <div> </div> <img src="images/tooltip_2.jpg" border="0" class="img_animate" /> </div> /* This div sets a fixed height to the page so the scroll gets visible */ <div style="height:3000px;"> </div>
Finally the JS part, which does the magic :)
/* This function avoids having conflicts with other jQuery scripts, we suggest you to always use it.*/ var $jx= jQuery.noConflict(); /* On this validation we identify the browser to assign it the superior value of the vertical scroll, because you must remember that every browser plays by its own rules*/
$jx(window).scroll(function () {
if (whichBrs()=='chrome')
{
/* Identifies the superior position of the scroll in Chrome*/
$scroll_final=document.body.scrollTop;
}
if (whichBrs()=='Internet Explorer' || whichBrs()=='Firefox' )
{
/* Identifies the superior position of the scroll in Firefox and Internet Explorer*/
$scroll_final=document.documentElement.scrollTop;
}
/* If you need to add additional browsers then you have to research which function establishes the top position on each one of them*/
/* On this part we identify the main container*/
var toolbarid=document.getElementById('toolbar');
/* If the superior value of the scroll goes below 300, it means that the toolbar must not be shown and it will only be displayed once this value has been passed */
if ($scroll_final < 300)
{
toolbarid.style.visibility='hidden';
}
/* Here’s where the fade in animation begins*/
/* On this part we check the top value of the scroll and then we make 3 different opacity ranges to recreate the fade in effect. if you wish a softer effect you can simply add some
extra ranges*/
if ($scroll_final > 300 && $scroll_final <600 )
{
toolbarid.style.opacity='0.20';
toolbarid.style.filter='alpha(opacity=20)';
toolbarid.style.visibility='visible';
}
if ($scroll_final >600 && $scroll_final <1000 )
{
toolbarid.style.opacity='0.40';
toolbarid.style.filter='alpha(opacity=40)';
toolbarid.style.visibility='visible';
}
if ($scroll_final >=1000)
{
toolbarid.style.opacity='1.00';
toolbarid.style.filter='alpha(opacity=100)';
toolbarid.style.visibility='visible';
}
}
);
var $bt= jQuery.noConflict();
var time=0;
/*Coming next is the code that handles the tooltip*/
$bt(document).ready(function() {
/* We utilize the slideToggle function from jQuery to animate the tooltip, you can try another types of speeds and animation by visiting http://api.jquery.com/category/effects/ */
$bt("#toolbar").stop(true,true).mouseover(function () {
/* This part displays the tooltip*/
if (time==0)
{
$bt(".img_animate").slideToggle("slow");
time=1;
}
});
/* And this part hides the tooltip*/
$bt(".img_animate").click(function () {
if (time==1)
{
$bt(".img_animate").slideToggle("slow");
time=0;
}
});
});
/* Here’s where we make the tooltip to turn invisible once we click outside the tooltip’s image*/
$(document).bind('click', function(e){
var $clicked = $(e.target);
if (!($clicked.is('.img_animate') || $clicked.parents().is('.img_animate'))) {
$bt(".img_animate").stop(true, true);
time=0;
$bt(".img_animate").hide();
}
});
/* Identifies which browser is being utilized */
function whichBrs() {
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("opera") != -1) return 'Opera';
if (agt.indexOf("staroffice") != -1) return 'Star Office';
if (agt.indexOf("webtv") != -1) return 'WebTV';
if (agt.indexOf("beonex") != -1) return 'Beonex';
if (agt.indexOf("chimera") != -1) return 'Chimera';
if (agt.indexOf("netpositive") != -1) return 'NetPositive';
if (agt.indexOf("phoenix") != -1) return 'Phoenix';
if (agt.indexOf("firefox") != -1) return 'Firefox';
if (agt.indexOf("chrome") != -1) return 'chrome';
if (agt.indexOf("safari") != -1) return 'Safari';
if (agt.indexOf("skipstone") != -1) return 'SkipStone';
if (agt.indexOf("msie") != -1) return 'Internet Explorer';
if (agt.indexOf("netscape") != -1) return 'Netscape';
if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';
if (agt.indexOf('/') != -1) {
if (agt.substr(0,agt.indexOf('/')) != 'mozilla') {
return navigator.userAgent.substr(0,agt.indexOf('/'));}
else return 'Netscape';} else if (agt.indexOf(' ') != -1)
return navigator.userAgent.substr(0,agt.indexOf(' '));
else return navigator.userAgent;
}
And there you have it, a fancy floating bar made in a short time, let us know how it went to see if you have any doubts, the important thing is to remember that you can utilize this nice floating bar in several ways, including advertising, providing additional information or showing social icons and stuff; class dismissed, see you on our next tutorial.
View Demo 1
View Demo 2
See it in action
Download source
Author: Juan Pablo Sarmiento Founder and curator of:
iconshock
themeshock
boxofbundles
wpthemegenerator
webdesignshock
December 14th
The one that shows on the top is nice, but I want one like the social bar that shows to the left with the twitter and facebook buttons.
I wonder how google would feel about the top bar hovering over their ads?
December 14th
Hi Bob, the left bar has a different functionality to the top floating bar, however, it can be easily adapted to work laterally… we will publish later on an article showing you how to do it. Thanks for the idea and your comment, we’re glad you liked the tutorial :)…
February 20th
Hi, i agree with bob, I would like to know how to create the social media vertical floating box on the left hand side. Do you have a tutorial for that? Thanks for your help.
April 10th
Hi Aiden! Thank you very much for your input. We are working on it! Stay tuned for the upcoming posts. Cheers.
December 14th
It doesn’t seem to work for me… I can’t watch the demo’s or the site where it’s in action. This is strange, maybe because I’m using safari? However, it’s possible to run it in Safari…
December 14th
Hi man, actually if you take a look at the validation within the code, you will see that you can easily validate the visualization for Safari ;)…
December 14th
Thanks for the quick reply! The more that I think about it, having that bar at the top is a brilliant idea for sharing information with your visitors (Just ask gawker media.) I will have to try it out tonight. With my website, I’m not sure if it would be better to have a banner at the top or bottom. However I definitely want the twitter/facebook buttons on the left.
December 14th
No worries Bob, we always check our comments’ inbox to respond every doubt and comment that our visitors leave :). As for the floating bar, it’s just a matter of tastes and functionality, we decided to put it on top, while many others prefer to let it rest on the bottom; as for the social icons, probably the best option is definitely to put’em at one side of the website…
P.S: The close button idea is great, we will definitely put it into consideration with our team…
December 14th
Idea #2, in your next tutorial, add a close button. That will make the bar work for ALL websites. If the individual user doesn’t want it since it’s blocking the content, they could easily just click on the X or CLOSE, and that would be it.
December 31st
This is a really good idea and tutorial. It is a very good way to remind site visitors of some important ways to stay connected, or to simply give out information that demands attention.
This would suit well in some future applications we have (with credit of course).
Thanks for the awesome tutorial!
- 8th Studio
December 31st
Thanks buddies, we developed this great floating bar so you guys can implement it on your own applications :)…
March 3rd
very nice tut.
March 17th
Good tutorial, thanks for writing this!
March 17th
You’re welcome ;), thanks for your comment…
April 14th
Wow this is really interesting im going to try this on my website Thanks :)
April 14th
Hey that’s awesome Liam, please let us know once you have it :)…
April 15th
I really like this effect! Thanks for sharing.
April 20th
Didn’t really think much about this floating bar. It is nicely done. Very very nice.
Thanks for the tutorial.
April 20th
You’re welcome, thanks for your comment…
June 14th
The catchy blog with the interesting contents. You give the nice information that many people don’t know before. most of your contents are make me have more knowledge. it is very different. I was impressed with your blog. Never be bored to visit your website again. Have the nice day. Keep enjoyed your blogging.
June 15th
Thanks man, we’re so glad of seeing how people is enjoying our site more and more everyday, we promise that more quality contents and articles are around the corner…
July 8th
nice one… but I thought it was on the left sidebar of this blog…
<—- what about that on the left bar, what is it called?
July 11th
You mean the social toolbar?, that’s Digg Digg…
July 12th
This seems to work cross-browser to get the scroll position:
$scroll_final = window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
Worked in IE7, Chrome, Firefox, Safari on a quick test
July 14th
Ou yeah, that works great!, thanks for your contribution Brett, don’t forget to check the latest article at Webdesignshock to obtain a Google+ invitation…
August 4th
thanks for sharing
August 4th
Hi, I was searching for a floating toolbar with social buttons, and I found this very interesting, but …
How to add the left-side social toolbar to a website (this on the left)? It’s much more interesting for me, now ;)
Is there any article about it here?
(very useful form to send comments & suggestions!)
August 5th
Thanks Kasia, we’re glad you like the tutorial. Regarding your question, our left social bar works with a WP plugin named Digg Digg…
August 7th
Thanks a lot for the tutorial and scripts, it’s just beautiful!
September 3rd
Nice Looking Floating…. really i like it.. thank you for share..
October 6th
Since I don’t see any questions about functionality, I assume I must be doing something wrong because this does not work for me.
I keep getting a .js error of $ is not a function for this line: “$(document).bind(‘click’, function(e){”
Any idea what I’m doing wrong?
November 26th
Thanks for this incredible tutorial. Soon i will apply on my website. thanks
November 29th
patu, pls send us your website once you have added the menu ;)
February 13th
excellent publish, very informative. I wonder why the opposite specialists of this sector don’t notice this. You should proceed your writing. I am confident, you’ve a huge readers’ base already!
February 28th
Just a couple of minutes were searching for a floating toolbar with social buttons and found your toolbar option very useful, I will try to apply it for my website if I have problems to implement it can I email you? thank you.
February 29th
sure !
May 14th
Hello,
I am trying to make a current plugin that I’m using (Widgitized Stickybar) appear in this way. I am using a widget bar at the top of my page, but right now, I only have the option of collapsing it or making it appear all the time. I’d like it to appear once the user begins to scroll down the page. Can you please email me or let me know if this is a job you could do, along with the rates you would charge to do it? Thanks so much for your help!
March 2nd
The best
April 10th
Glad you liked it. Thanks for your input.
April 23rd
Very useful example. Thanks for tutorial.
April 24th
You’re very welcome, Ali. We do our best to bring you the best resources. Stay tuned.
[...] Create the amicable floating club with jQuery as well as JavaScript « Photoshop tutorials &… [...]
[...] Create a social floating bar with jQuery and JavaScript … [...]
[...] Create a social floating bar with jQuery and JavaScript … [...]
[...] See original here: Create a social floating bar with jQuery and JavaScript … [...]
[...] your website and where you can place several elements, including social icons, information and more.Source Link Related PostsTop Ten Best Online Time Tracking Software42 Cool and New Released Fonts For Your [...]
[...] Create a social floating bar with jQuery and CSS « Photoshop … [...]
Create a social floating bar with jQuery and CSS…
From creating the PHP file to customizing the CSS, we will guide you across the several steps before you can complete this fancy floating bar ready to be implemented on your website and where you can place several elements, including social icons, info…
[...] Create a amicable floating club with jQuery as well as CSS « Photoshop tutorials & illustr… [...]
[...] Create the amicable floating club with jQuery as great as CSS « Photoshop tutorials & illu… [...]
[...] Create a social floating bar with jQuery and CSS « Photoshop … [...]
[...] Create a social floating bar with jQuery and CSS [...]
[...] div.scr_esp_down{ width:100%; tutorialshock.com [...]
[...] Floating social bar with jQuery and CSS [...]
[...] Floating social bar with jQuery and CSS [...]
[...] Floating social bar with jQuery and CSS [...]
[...] Floating social bar with jQuery and CSS [...]
[...] Floating social bar with jQuery and CSS [...]
[...] Floating social bar with jQuery and CSS [...]
[...] Floating social bar with jQuery and CSS [...]
[...] Link: http://www.tutorialshock.com/tutorials/social-floating-bar-jquery-javascript/ [...]
[...] Link: http://www.tutorialshock.com/tutorials/social-floating-bar-jquery-javascript/ [...]
[...] Link: http://www.tutorialshock.com/tutorials/social-floating-bar-jquery-javascript/ [...]
[...] 学习使用 jQuery 制作浮动的社交工具条 [...]
[...] 学习使用 jQuery 制作浮动的社交工具条 [...]
[...] 学习使用 jQuery 制作浮动的社交工具条 [...]
[...] 学习使用 jQuery 制作浮动的社交工具条 [...]
[...] 学习使用 jQuery 制作很酷的动态菜单学习使用 jQuery 制作动态的作品集画廊学习使用 jQuery 制作浮动的社交工具条通过 jQuery 掌握元素的拖放技术学习使用 jQuery [...]
[...] colors, easing method and duration. Flashy Navigation with easing and hoverIntentView the DemoFloating Social Bar with jQuery and CSSFrom creating the PHP file to customizing the CSS, this tutorial will guide you through the steps to [...]
[...] Floating Social Bar with jQuery and CSS [...]
[...] Floating Social Bar with jQuery and CSS [...]
[...] Floating Social Bar with jQuery and CSS [...]
[...] Floating Social Bar with jQuery and CSS [...]
[...] «Плавающая панель» для социальных [...]
[...] Floating Social Bar with jQuery and CSS [...]
[...] Floating Social Bar with jQuery and CSS [...]
[...] Floating Social Bar with jQuery and CSS [...]
Dodaj na stronę www / bloga pływający banner społecznościowy http://t.co/GiTPQFxr via @webdesignshock
How to make a floating social toolbar with jQuery and CSS > http://t.co/oK7yfCFC