Plugin sliding panel with icons of social networks

Recently, social networks are gaining more and more popularity. More and more people are starting to open accounts in various social networks. They do for various reasons. Someone just to talk with friends and like-minded people, someone to promote their products and services, someone to create their brand, etc. It did not pass by me. Created a Twitter account and facebook.

So, I decided to place on my site links to my accounts in the social. networks. Immediately I placed them on the sidebar, but then I thought and decided to make a floating panel on which all the links to my accounts on social networks would be placed.

I have already seen similar panels on other sites, but after searching for ready-made plugins I did not find anything suitable for myself. Well, I honestly don’t really want to find it. Therefore, I decided to create my first jQuery plugin.
')
The idea of ​​my floating panel is as follows, when scrolling the page it is always in a prominent place. Also added an initial transparency for the panel and when scrolling down the page, the panel smoothly becomes visible.

Thereby, when the user got acquainted with the material on the website and liked him, the panel with links to social network accounts is displayed to him smoothly. When you hover over a link, it becomes non-transparent and shifts to the side by 10px.



As a result, the jquery.socializer.js plugin was born , which has flexible settings and is suitable for any site.

In order to create a similar panel with tabs on social networks on your website, you need to connect the jQuery library and the plugin itself.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.socializer.js"></script> 

Next, you need to create a floating block itself with links. It looks like this for me:

 <div class="soc_buttons" id="soc_buttons"> <a title="    twitter" target="_blank" href="http://twitter.com/ivanshamshur"><img src="/images/icons/twitter_new.png" ></a> <a title="    facebook" target="_blank" href="http://www.facebook.com/ivan.shamshur"><img src="/images/icons/facebook_new.png"></a> <a title="    RSS" target="_blank" href="http://feeds.feedburner.com/biznesguide"><img src="/images/icons/rss_new.png"></a> </div> 

It must be placed immediately before the closing tag.

By the way, anything can be placed in this block!

You can register styles:

 .soc_buttons { position: absolute; right: 0; top: 152px; width: 70px; } .soc_buttons a { display: block; position: relative; } 

Next comes the call to the plugin itself:

 <script type="text/javascript"> $(function(){ $('#soc_buttons').socializer(); }) </script> 

This line will call the plugin with the default settings. See below for a complete list of options:

• type - sliding - A type of floating panel. Sliding - floating, fixed - fixed. i.e. when scrolling the page, the position of the panel is either fixed at a certain height, or constantly slides down.
• position - right - The location of the floating panel. right is on the right, left is on the left.
• opacity - 0.1 - Initial panel transparency when the page is loaded. Values ​​from 0 to 1 are available.
• container - document - The block relative to which the transparency of the floating panel will change. that is, when scrolling to the lower boundary of this block, the transparency will be 1.
• inittop - 150 - Initial distance from the top edge of the screen in pixels
• scrolltop - 20 - The distance from the top of the screen when scrolling through the page.
• speed - 300 - animation duration in ms
• hoverdistance - 15 - The distance in pixels by which social network icons are shifted when the user hovers the cursor.
• scrollend - false - A user-defined function that will be called when the lower border of the container is reached (container). An object is passed as a parameter.
• fx - linear - Animation effect control function

To make great effects you need to use the plugin - jquery.easing.js

A few examples of use:

 $(function(){ $('#soc_buttons').socializer({ position: 'left', type: 'fixed', scrolltop: 50, opacity: 1 }); }); 

In this example, we initialize the plugin with the given parameters. Using this code, the floating panel will be placed on the left side of the screen and when scrolling the page will take a fixed position 50 pixels from the top edge of the screen. Transparency is set to 1, which means that our panel will be constantly visible.

If it is necessary to set a block on the page relative to which the transparency will change, then you need to use the following plugin call:

 $(function(){ $('#soc_buttons').socializer({ container: '#id_blocka' }); }); 

that is, we indicate the block ID and in front of it we put the sign of the lattice.

The plugin is very simple, if you wish, you can remake it to fit your needs.

Download the sources at this link.

View demo page here

This is my first plugin, so do not judge strictly. I would be grateful if you could help make this plugin better!