Social Media Sharing Popup Bubbles with jQuery

Let us talk about scripts, HTML, Perl, PHP, apache, etc.
Post Reply
User avatar
Stevyn
SysOp
Posts:1786
Joined:Mon Nov 09, 2009 10:03 am
Location:Japan
Contact:
Contact Stevyn
Social Media Sharing Popup Bubbles with jQuery

Post by Stevyn » Tue Jan 06, 2015 5:52 am

Hidden Social Media Sharing Popup Bubbles with jQuery Tutorial
Posted by Jake Rocheleau

http://blog.templatemonster.com/2015/01 ... -tutorial/

live demo http://blog.templatemonster.com/demos/h ... index.html

sourcecode: http://blog.templatemonster.com/demos/h ... source.zip

Getting Started

First create a new HTML document and make folders for the CSS and JS files. My stylesheet is named styles.css but choose any filename you like. Also grab a local copy of jQuery and include that into the header as well.

<!doctype html>

Code: Select all

 
  <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
nside the page body things get a little messy. I have a single outer container with the ID #wrapper centering all the content. Then I’ve created an overall container for the social media links using the class .social-links. Each link is actually a social media icon from the free Metro Uinvert icon set.

Since the icon links are positioned next to each other I have them floating within the .clearfix container. This is very important to ensure that further page content is cleared properly.

Code: Select all

<!-- @end #wrapper -->
Look at each individual section and you’ll notice two classes on each container. For example the first Twitter widget has a class of .glyph and .twitter. The glyph class sets a general default for each link such as padding and spacing. The secondary class is used to impose a specific link background icon.

The .glyph container has two separate items. First is the popup div which is originally hidden from the page. This uses the class .bubble and is found alongside an anchor link with no text. These links use a background icon to represent social media websites and the icon color changes while hovering.

One other thing you might notice is the addition of a .wide class on the Facebook bubble. Since the “Like” button is kinda long I created two different popup bubble classes – one that’s regular-sized and another that’s slightly wider. If you want to increase the size you can always recreate your own extended popup backgrounds.
Designing with CSS

Moving onto CSS I’ll explain how the page is organized and positioned. All images are stored within the “css” folder because each one is used as a CSS background. This makes resource management a whole lot easier in the long run.

To get started I’m using a slightly customized CSS reset from the Eric Meyer template. For the body background I’m using the Cream Dust tile from Subtle Patterns.

Code: Select all



	

  /** page structure **/
#wrapper {
  display: block;
  max-width: 700px;
  min-width: 350px;
  margin: 0 auto;
  padding: 20px 0;
}
 
 
/** social links **/
.social-links {
  display: block;
  width: 250px;
  padding-top: 100px;
  margin: 0 auto;
}
The outer wrapper should be self-explanatory as a general container. The inner .social-links container houses the link icons and centers them on the page.

Code: Select all

 .glyph {
  display: block;
  position: relative;
  float: left;
  width: auto;
  height: auto;
  margin-right: 2px;
  padding: 3px 6px;
  height: 35px;
  width: 52px;
}
.glyph.active {
  background: url('bubble-sm.png');
  background-position: -9px 40px;
}
 
.glyph .bubble { 
  display: none; 
  width: 140px;
  height: 89px;
  position: absolute;
  margin: 0;
  text-align: center;
  background: url('bubble-sm.png');
  padding: 20px 20px;
  bottom: 35px;
  left: -9px;
  cursor: pointer;
}
.glyph .bubble.wide {
  width: 160px;
  left: -6px;
  background: url('bubble-wide.png');
}
Now when it comes to the .glyph class there’s a lot to consider. Notably I’m using relative positioning because the glyphs need a particular spacing and the inner popup bubble is positioned absolutely. Having this popup bubble located relative to the icon glyph is the easiest solution.

If you check out the general .bubble class you’ll notice I’m using a background image for the drop shadow effect. This is easier because CSS would force a solid rectangle which means hovering next to the link would also open the menu. Instead I have the image split into two areas so the link icon and the popup window meet to create a seamless BG.

Code: Select all

.glyph a {
  display: block;
  position: relative;
  height: 33px;
  width: 40px;
}
 
.glyph.twitter a {
  background: url('twitter-grey@2x.png');
  background-repeat: no-repeat;
  background-size: 33px 28px;
  top: -4px;
  left: -1px;
}
.glyph.twitter.active a { 
  background: url('twitter@2x.png');
  background-repeat: no-repeat;
  background-size: 33px 28px;
}
.glyph.twitter .bubble {
  padding-top: 28px;
  padding-left: 24px;
}
 
 
.glyph.facebook a {
  background: url('facebook-grey@2x.png');
  background-repeat: no-repeat;
  background-size: 33px 28px;
  top: -4px;
  left: -1px;
}
.glyph.facebook.active a { 
  background: url('facebook@2x.png');
  background-repeat: no-repeat;
  background-size: 33px 28px;
}
.glyph.facebook .bubble {
  padding-top: 30px;
}
 
 
.glyph.dribbble a {
  background: url('dribbble-grey@2x.png');
  background-repeat: no-repeat;
  background-size: 33px 28px;
  top: -4px;
  left: -1px;
}
.glyph.dribbble.active a {
  background: url('dribbble@2x.png');
  background-repeat: no-repeat;
  background-size: 33px 28px;
}
.glyph.dribbble a.dbfollow {
  width: 85px;
  height: 36px;
  background: url('db-follow-grey@2x.png');
  background-repeat: no-repeat;
  background-size: 84px 35px;  
}
.glyph.dribbble a.dbfollow:hover {
  background: url('db-follow@2x.png');
  background-repeat: no-repeat;
  background-size: 84px 35px;   
}
.glyph.dribbble .bubble {
  padding-top: 30px;
  padding-left: 30px;
}

Lastly we come to the icon styles which are created using specific classes. Each icon style has two different effects: the original icon and the hovered icon. The hover effect just adds color into the icon but it’s still located in the exact same spot.

Also I’m using @2x retina images so each icon should look crisp on Retina MacBooks and Hi-DPI smart devices.
Animating with jQuery

Moving back into the HTML file I’ve added a small block of JavaScript at the bottom of the document. Everything is written in jQuery and uses the .on() event handler function.

Code: Select all

$(function(){
  $('.glyph').on('mouseover', function(e){
    $(this).addClass('active');
    $(this).find('.bubble').css('display','block');
  }).on('mouseleave', function(e){
    $(this).find('.bubble').css('display','none');
    $(this).removeClass('active');
  });
});
By creating a selector from the .glyph class I can run a function on each icon. With jQuery I can actually chain two functions together – one on mouseover and the other on mouseleave.

So when the user hovers onto an icon we give that div the .active class. Divs love active classes.

This should replace the grayscale background icon with a fully-colored version. Then using the .find() method I’m selecting the first child with a class of .bubble and forcing a display: block onto the element.

Once the user’s mouse leaves the icon or popup bubble then both of these actions are reversed. So the .active class is removed and the bubble is once again hidden from the page. This effect could be accomplished using pure CSS3 but it wouldn’t have as much support in older browsers. I really like the jQuery solution and it works perfectly.
Closing

The popup bubble effect is quite enjoyable and it works great in almost any type of website from portfolios to major corporations. The goal is to save space on the screen and offer more than just a link to your social profile. If the user wishes to click the link icon they can check your profile – but in this case the user is given an option of sharing your content as well. Feel free to download a copy of my source code and see if you can fit this into any future web design projects.
Contact me directly: Ironfeatherbooks (@) gmail.com

Image
Top
Post Reply

Return to “WEBMASTER CHAT”