SMover, a jQuery Social Media Plugin

27th November 2010

SMover (Social Media hover, pronounced smother) is a jQuery plugin that hides social media icons away, whilst allowing super smooth and easy access to them when required. It’s also really small, just 4kb compressed!

SMover hides away social media (in fact, any) icons and only displays them when the user hovers on a call to action, there are no labels with SMover, however the links title is used to signify the links purpose, check out the demo for a hands on session.

Usage

First we need to need to include the following JavaScript files, SMover depends on jQuery and hoverIntent, both are provided.

<script type="text/javascript" src="http://example.com/js/smover/jquery.js"></script>
<script type="text/javascript" src="http://example.com/js/smover/hoverintent.js"></script>
<script type="text/javascript" src="http://example.com/js/smover/smover.js"></script>

Now we have to specify our HTML structure, SMover is customisable so you don’t have to use the same structure as I have below.

<div id="share-page">
    <span>Share Page</span>
    <ul style="display: none;">
        <li><a title="Digg" href="#"><img alt="Share with Digg" src="http://example.com/images/social-icons/digg.png"></a></li>
        <li><a title="Facebook" href="#"><img alt="Share with Facebook" src="http://example.com/images/social-icons/facebook.png"></a></li>
        <li><a title="StumbleUpon" href="#"><img alt="Share with StumbleUpon" src="http://example.com/images/social-icons/stumbleupon.png"></a></li>
        <li><a title="Twitter" href="#"><img alt="Share with Twitter" src="http://example.com/images/social-icons/twitter.png"></a></li>
    </ul>
</div>

And now we can initiate our SMover plugin.

$(document).ready(function() {
    $('#share-page').smover();
});

And that’s all that’s required to get your SMover plugin going, you can see how this plugin will function be visiting the demo page.

Options

$(document).ready(function() {
	$('#smover1, #smover2').smover({
		titleElement  : 'span', // title selector, must be child of smover element
		linksElement  : 'ul',   // links selector, must be child of smover element
		fillerText    : ' on ', // the string that joins the title text and link title
		mouseoutDelay : 500     // hide delay after the mouseout event
	});
});

Commit History, Issues and Suggestions

SMover is hosted on GitHub, you can view the commit history there as well as raise an issue or suggestion.

  • James P.

    Looks great! How do you plan to solve the issue that it’s not obvious how to interact with it? It’s not a link and there’s no clue that you need to hover it to make it open.

    Also, being hover controlled means users with touch devices won’t be able to use it. Could it be made a link so that people can click to open it as well?

  • http://beneverard.co.uk Ben Everard

    Hi James,

    The plugin will automatically append “…” to the end of the title element, signifying that when clicked/hovered more options are displayed.

    With this in mind it’s as much the responsibly of the design than the plugin to draw attention to it, as for hovering, this is the simplest of mouse events, as said the “…” indicates hidden content and a design can back this up.

    For touch devices the plugin does have a click event, however click events in this scenario don’t really stack up too well. With that in mind perhaps for touch devices media queries should be used to adapt the website so social media icons display at the bottom of a post and are always visibile, SMover will allow you to do this.

    Many thanks for your comment :-)

    Ben

  • http://www.raghibsuleman.blogspot.com/ Raghibsuleman

    Very good work….

  • Barun Saha

    Superb piece of work, Ben! Continue your good work :)

  • Marina

    This is not working for me on IE7 (is great in FF and Chrome) but I see your demo does work. Any ideas about potential issues I could look into?

  • http://beneverard.co.uk Ben Everard

    I’ve just tried it on IE7 and it’s working okay, can you explain what’s not working?

    I’ve got a newer demo here that I’ve yet to link from this post, it’s also a newer version which might help.

  • Mark

    On chrome 27.0.1453.110 (and probably any other browser), there are [hero] and [/hero] tags before and after your code block. Great jquery plugin though.

    • beneverard

      D’oh! Thanks for the heads up Mark, left over from my previous blog theme.

      Cheers :-)