jQuery Social Share Toolbar

This is the instructions on how to build your own social share toolbar using jQuery and CSS3. The toolbar should be visible at the bottom right corner of your browser. If you hover over the toolbar it will slide up, click the minimize button it will all but disappear, click one of the icons and you will be taken to either the login page or the share page of that social site.

Share toolbar

Hiding things with CSS, JavaScript or jQuery

To hide elements using CSS you can set display to none or visibility to hidden.
The difference is that with display:none the element is not on the page, where as with visibility:hidden the area is reserved for the element, so the space where the element would be if it was visible is still there, just empty.

Below is a DOM, JavaScript function that will display or hide a element given it's ID.

function showorhide(id){
   if(document.getElementById(id)){    //check the element exists and can be accessed

Syndicate content