Example 5 - Custom jQuery Positioning

Example 5 - Custom jQuery Positioning

Another example of custom styling to create a double row button panel with just minor changes to the default css styles.

This example also includes some additional jQuery code, which prevents the buttons moving up into the header by adjusting the position when the user scrolls the browser.

jQuery Code

$(document).ready(function(){
	$('#social-share').dcSocialShare({
		buttons: 'twitter,facebook,linkedin,digg,stumbleupon,delicious,pinterest,buffer,print,email',
		offsetLocation: 0,
		center: 625,
		floater: false
	});
	var a = $('#dcssb-1');
	buttonPosition(a);
	$(window).scroll(function(){
		buttonPosition(a);
	});
});
function buttonPosition(obj){
	var top = $(document).scrollTop();
	var p = top > 400 ? {marginTop: '20px'} : {marginTop: (400-top)+'px'} ;
	obj.css(p);
}

HTML

<div id="social-share"></div>

Custom CSS

.dcssb-float .dcssb-content {
	background: #fff;
	padding: 10px 5px 5px 10px;
	text-align: center;
	width: 130px;
	height: 320px;
	border-radius: 3px 0 0 3px; 
	-webkit-border-radius: 3px 0 0 3px;
	box-shadow: -2px 2px 1px #555;
}
.dcssb-btn {
	margin: 0 5px 10px 0;
	float: left;
}
	

Using External Links

Using the "classOpen", "classClose" & "classToggle" options we can create external links that will hide/show the share buttons:

Click To Toggle Open/Close

<a href="#" class="dc-toggle">Click To Toggle Open/Close</a>

Click To Open

<a href="#" class="dc-open">Click To Open</a>

Click To Close

<a href="#" class="dc-close">Click To Close</a>

Note: Google plus button will not show for local addresses.