Social share buttons

Do you see the social share buttons on the bottom left corner? Ok, I’m going to explain how to build them. It isn’t difficult… so if you don’t want to read you can download the project: While you are scrolling down you might notice that the buttons stay still until the end of the article, so they only move within the article section.

The HTML and CSS

The code below is a short version of the HTML structure of the article and buttons. To see the full version check the project on Github.
<div class="article-container">
<div class="share-btn">
<!– PLACE YOUR BUTTONS HERE –>
</div>
<div class="article">
<p>Here your article […]</p>
</div>
</div>
The CSS class article-container identifies the article div and must have the CSS property position:relative. The share buttons must be placed in the div with the class share-btn. The div share-btn must have the following properties:
  • position:absolute
  • top:0
  • left:0
To move the share buttons we are going to play with the CSS property top of share-btn through javascript functions.

The Javascript

When the document is ready, the function setArticleSection() calculates the boundaries of the article section and saves them in the global variable sectionArticle:
function setArticleSection() {
// space between the article-container and the top
var top_var = parseInt( $('.article-container’).position().top );

// height of the article-container
var height_var = $('.article-container’).height();

// bottom article limit that the share buttons have not to exceed
var bottom_limit_var = height_var + top_var;

// saving the values in a global variable
window.sectionArticle = {top:top_var , bottom_limit:bottom_limit_var};
}
social_sharer_button When you scroll you trigger the function moveShareBtns() that moves the share buttons (the div with the class share-btn).
function moveShareBtns() {
// it sums the current vertical position of the scroll bar  with  the browser window height
// in order to get the bottom position from the top
var bottom = $(window).scrollTop() + window.innerHeight;

// it checks if the browser bottom exceed the article bottom limit
if (window.sectionArticle.bottom_limit > bottom) {
// css_top is the position to assign to the share buttons from the top
var css_top = bottom – window.sectionArticle.top – $('.share-btn’).height();
if (css_top < 0) css_top = 0;
$('.share-btn’).css('top’, (css_top-25) ); // the -25 just to move the buttons a little bit up
}
}
social_share_buttons css_top is the final height to assign to .share-btn: this is the bottm without sectionArticle.top and the share button div height $(‘.share-btn’).height() _

Related Articles

Coming soon page

Category: resources

If you need a coming soon page, don't waste your time on developing it because you are going to use it for a short period. This coming soon page has a minimal design and it's made with PHP, HTML and ...

Free the bean!

Category: resources

This is a JavaScript game. The aim of the game is to free the dots (or the beans) by clicking on the sticks. When the sticks are removed the bean is free, and with every free bean you get a point and ...

CSS Loading spinner

Category: resources

This is a collection of CSS loading spinners, made only with CSS. To download the project click the link below _ GITHUB DOWNLOAD

Wordpress Empty Plugin

Category: resources

When I have to create a new Wordpress functionality I always use an empty plugin to start with. Here I'm going to explain how to develop your Wordpress plugin. If you are not interested in this ...

Brainy: a simple PHP class for machine learning

Category: resources

Brainy is a PHP class that helps you to create your neural network. I built Brainy just for fun during my artificial intelligence studies. If you are a web developer and you have just started ...

Matrix arithmetic PHP Class

Category: resources

During my studies in AI I wanted to solve the XOR problem; I wanted just to do a quick test so I started writing the code in PHP. Solving that problem I ended up to write a class that handles matrix ...