First declare a div called wrap
<div id="wrap">test</div>
<script>
//append html to this div wrap....it will add a new floating div with social media buttons
jQuery("#wrap").append('<div id="floatbutter">Follow us on:<a href="http://www.facebook.com/devopstech"><img src="./sites/all/images/fb.png" alt="Facebook" width="42" height="42"></a><a href="https://twitter.com/DevOpsTech"><img src="./sites/all/images/twitter.png" alt="Twitter" width="42" height="42"></a><a href="https://twitter.com/DevOpsTech"><img src="./sites/all/images/google+.png" alt="Google+" width="42" height="42"></a></div>');
//apply style to that div floatbutter
jQuery("#floatbutter").css({
'position':'fixed',
'bottom':'0px',
'height':'50px',
'width':'100%',
'padding':'5px',
'margin-left':'15px',
'margin-bottom':'0px',
'background':'grey',
'z-index':'100',
'font-weight': 'bold',
'text-shadow': '1px 1px 0px #fff',
'font-family': 'Arial Rounded MT Bold'
});
jQuery("#floatbutter a").css({'margin':'5px'});
</script>
The icons used are here:
Comments