SleekShare: A tiny jquery based social share plugin with share counts.

social share with counts

Hey friends was up? hope you all are fine. Today i am here with you after a long time as usewal i was very busy, anyways today i am glad to announce a new category in my blog where i will add free plugins based on Javascript/jquery starting from today, Yep today i am gonna share first plugin which is a tiny jquery plugin Named - "SleekShare: A tiny jquery based social share plugin with share counts." this plugin is a lightweight plugin for social shares and display your total share counts same as you have seen on Mashable or other sites.

Features

  • Share counts
  • Light weight
  • Easy optimizations
  • Allows Custom styles
  • Clean and Fast

Installation / Usage

Installing SleekShare is quite simple all you just need is to follow the below steps.

  1. Include jquery library first (If not included already).

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" ></script>
  2. After that you can use the below links to include plugin files which are uploaded to my server with Cloudflare CDN or Download the zip and host it your self.

    <link type="text/css" rel="stylesheet" href="http://mohammadwali.net/sleekshare/sleekShare-min.css" id="sleekShare-style"> 
    <script type="text/javascript" src="http://mohammadwali.net/sleekshare/sleekShare-min.js" ></script>

    Include these lines in your page <head> section remember to add jquery library above these files means you need to add these link after the jquery library so it can work properly.

  3. Now simply call the plugin with your desired options or you can leave it blank for defaults.

    <script type="text/javascript">
    $(function(){
    $.sleekShare()
    })
    </script>

    Blogger users if you need this plugin only on post page so you can simply call this in a condition

    <b:if cond='data:blog.pageType == "item"'>
    <script type="text/javascript">
    $(function(){
    $.sleekShare();
    })
    </script>
    </b:if>

Available options!

Option Default Can be Data type
position: left left, right String
countEach: true true, false Boolean
commentIcon: true true, false Boolean
customStyles: false true, false Boolean

Roles of options

Option Role
position: Align the social bar to left or right of browser window
countEach: Count each network share (EX. Facebook 120 shares)
commentIcon: The comment icon you can remove it if you are not using this on blogger by just using the false statement.
customStyles: Custom styles allows you to add a custom stylesheet to the plugin by default the plugin check for the stylesheet and if not found it add that automatically so making this true will not add the stylesheet automatically and you can use your own custom stylesheet.

Using Custom options

The Syntax

$(function(){
$.sleekShare({
   //options
})

// for example
$.sleekShare({
   position : "right"
}) 

// multiple options 

$.sleekShare({
   position : "right", commentIcon: false
})
})

Download / Demo

You can also download SleekShare files and host it on you server by the below download link

Have a Demo OR Download Zip

Using CSS3 :target Pseudo to make Light box or popup

pure-css3-lightbox-and-popups-using-target

Hello Guys, i am back again with an interesting topic! Today in this post we are going to disqus about pseudo's and will use a CSS3 Pseudo element for making a Popup box which can contain text, images, videos or any other stuff and how to create a pure css3 lightbox without javascript. Mostly before this we use javascript/jquery plugins/scripts to make a popup or lightbox but CSS3 has gave us many new and interesting properties/pseudo's including this :target pseudo. Lets see how to make use of it, lets get started!

What are Pseudo's?

Basically Pseudo is a keyword added with the selector and used to add some effect to the selector or its child elements, if you know a little about CSS you also would know that pseudo are divided in 2 types pseudo-elements and pseudo-classes,there is a lot of difference between them. lets see what is it?

Note: Internet Explorer below IE9 doesn't support all the pseudo's. You can use JS such like Selectvizr for fallback!

Difference between pseudo-elements and pseudo-classes

Pseudo-classes
A pseudo-class always consists of a colon (:) followed by the name of the pseudo-class and optionally by a value between parentheses. Just like - :hover, :visited, :link, :active, :target, :checked etc. Pseudo-class Can only style or can bring effects to your elements, however pseudo-elements Can create a element in the document which is not in the document source.

/* The syntax */
selector:pseudo-classes{
/* Your styles */
}

/* Example */
div:hover{
background: #000;
}

Pseudo-elements
A pseudo-element is made of two colons (::) followed by the name of the pseudo-element as the CSS3 official says, But before CSS 3 single colons were used for both pseudo elements and pseudo classes. CSS 3 differentiates between them with the use of double and single colons. Double colons are to be used on pseudo elements, and single colons are to be used on pseudo classes. Pseudo-elements can create an element in the content that does not exist in the document source. Using such - ::after and ::before pseudo's.

/* The syntax */
selector::pseudo-elements{
/* Your styles */
}
<!-- Example -->
<p>Hello welcome to The</p>
<style type="text/css">
p::after{
content:" Blog.";
}
</style>

<!-- Result will be -->
Hello welcome to The Blog.

Note: Internet Explorer 8 just ignores double colon pseudo's, so we need to use single for that to work in IE.

The method to use :target pseudo

Lets start from the base, How does the target works ? if you know a bit of html there is something we called anchor linking with ids on same page to scroll to a different section on same page the target works on that it is applied when the id of the targeted element is the same as the URL hash of the current page. for example see the below demo-

In the above demo the box has by default black background but when the link is clicked with href value of that id and the window is targeted to that the color was red, it was done by below -

<div id="demo-target">
  I will be red When ill be Targeted!
</div>
<a href="#demo-target"> Target the box </a>

<a href="#" > Reset </a>
#demo-target {
    background: #000;
    color: #FFF;
    text-align: center;
    padding: 20px 5px;
}

#demo-target:target {
    background: #f00;
}
Simply just click the link and to reset use another hash link doesn't matter blank or with id of another element. So hope you got the method now lets start making a simple popup with it!

Popup using :target

So Now we are going to start the Markup for the popup-
As we are using pure CSS so we cant set the popup to be visible after sometime user need to trigger a link so that the popup can be visible!

<div class="popup" id="mypoupid">
  <a href="#" class="popupBg">
  </a>
  <div class="popup-wrapper">
    
    <!-- Your content for the popup -->
    
  </div>
</div>

<!-- the trigger link -->
<a href="#mypoupid">Show popup</a>
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    visibility: hidden;
}
/* Make the popup div visible when it is targeted */
.popup:target {
    visibility: visible;
    left: 0;
}
.popupBg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
/* Cross browser RGBA fix */
    background:rgb(255,0,0);
    background: transparent\9;
    background: rgba(0, 0, 0, 0.8);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000);
    zoom: 1;
}
.popup-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;  
/* Align box in center of browser window */
    width: 500px;  /* Set the width */
    height: 300px; /* Set the height */
    margin-left: -250px;  /* half of width */
    margin-top: -150px;  /* half of height */
}
So this was pretty easy you can check the demo also i have created some different effects but its pretty easy :) Hope you Got it! if not please make a comment, will definitely help you!

Lightbox using :target

So its the time to do some thing without using javascript i mean now a days mostly things are possible with CSS3, so lets create a JavaScript-free lightbox using Pure CSS. The method of this lightbox is simple as All we have to do is hide a lightbox div in the page and make it visible when the window hash is the :target element.So basically we will warp a thumbnail image with link of the lightbox div same as we do for jumping to another section of same page so when the link will be clicked the window hash will be changed and the properties we have defined with the :target pseudo will work. Now to close lightbox we just have to change the window hash so we can use just simply the #. check the below code -

<!-- thumbnail image -->
<a href="#img1" class="trigger">
<img src="images/img1.jpg">
</a>

<!-- lightbox for image 1 -->
<div class="lightbox" id="img1">
<img src="img/img1.jpg">
<a href="#" class="close">Close</a>
</div>
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    visiblity: hidden;
    z-index: 9999;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 9999;
/* Cross browser RGBA fix */
    background: rgb(255,0,0);
    background: transparent\9;
    background: rgba(0, 0, 0, 0.8);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000);
    zoom: 1;
/* lightbox closing effect */
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    -webkit-transform: rotate(0deg) scale(0);
    -moz-transform: rotate(0deg) scale(0);
    -ms-transform: rotate(0deg) scale(0);
    -o-transform: rotate(0deg) scale(0);
    transform: rotate(0deg) scale(0);
    -webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    -o-transform-origin: right top;
    transform-origin: right top;
}

.lightbox:target {
    opacity: 1;
    visiblity: visible;
/* lightbox opening effect */
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    -webkit-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -ms-transform: rotate(360deg) scale(1);
    -o-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
}
/* add max image size */
.lightbox img {
    max-width: 90%;
    height: 100%;
}
/* Align the close button */
.lightbox .close {
    position: absolute;
    top: 2%;
    right: 2%;
    color: #AAA;
}
So the above was example of creating a lightbox with pure css without any javascript, but i don't think it is still very effective for us as we are not going to add the image two times and say the browser load it at the time of loading the page but ohk its just a way to do it!

All done!

So guys, this was a post about Using CSS3 :target Pseudo to make Light box or popup, hope you learned something new and enjoyed please share it if you like it and let me know if you have any problem, question or any better method please make a comment!

Fix Disqus not loading problem!

Disqus not loading

Hello readers! today's post will solve the most common problem of Disqus users, well Disqus is a free service which enables great online communities. it is a most popular discussion system with cool features but it has a problem that "it doesn't load every time or need a fast internet connection to load properly" i can't say that its a bug or not as it may possible that if you or a user is using a slow internet then it may not work so what if this problem occurs? i think there is no solution for it till now except reloading the page because i also use disqus as you have noticed so few days ago i got this problem as my most of friends told and i maded a site for my client in which i have installed it as his requirement so there was also the same problem but finally after a little research i got that its due to slow internet connection now the question is what for those who are not using a fast one? but now i have a solution for it which will work perfectly for this problem! lets have a look

Must Read - How to get variables from URL with javascript

What we are going to do?

Well we are going to use Jquery! what it will do is when your page will be loaded it will check that disqus is loaded or not if it is not loaded it will show a message that disqus no loaded click to reload and when you will click on reload, it will reload the disqus not your page and i think this is better then reloading a page Check the below image! Disqus not loading solution

So that is how it will look like! lets use this script!

Adding the Jquery Script

As you know the below script is written with Jquery and to make the below script work you need to include Jquery library once in your page!

If you had included the Jquery library then just copy the below script and paste that in you page no problem if it is blogger or another platform

//Append a error message
function disqus_error() {
if (!$("#disqus_thread iframe:visible").length) {
if (!$("#dq-error:visible").length;) {
$("#disqus_thread").append("<p id='dq-error' style='text-align: center;font-size: 18px;font-weight: normal;'>Seems like Disquss is not loaded? <a id='reload-dq' style='cursor:pointer;color:#28B;'>Click to reload</a></p>");
}
}
}
//Click to reload
function reload_disqus() {
$("#reload-dq").click(function () {
DISQUS.reset({reload: true});
// Remove error message on click if disqus starts loading
if ($("#disqus_thread iframe:visible").length) {
$("#dq-error").remove();
}
});
}
//Activating function on document load
$(document).ready(function () {
$.when(disqus_error()).then(reload_disqus());
});

All done!

Now all done! so this was how we can fix disqus loading problem with Jquery! i hope you will like it and if you liked it dont forget to share it. Keep visiting!

Get variables from URL with javascript

Get variables from URL with javascript

Hello friends, this time we have a post of Javascript which i love most well this time we will see how we can get variables from URL using Javascript. Now if you don't know what are variables then let me tell you variable works like a container to store a value to get by defining that variable like for example

var a = "blog.";
var b = "mohammadwali.in";
var c = a + b;
//now when you will define c the result will be -
"blog.mohammadwali.in"

Ohk so what above i has done is i have maded a variable as a and define its value as blog and same for b and the value of b is mohammadwali.in and for c i have added value which will add the value of a and b a + b so when will you define c the return will be blog.mohammadwali.in that was an example of variables but remember that they are case-sensitive so remember when creating a variable this small mistake make you crazy sometimes. ohk before going to next if you haven't read my previous post just have a look it was about - How to remove outline from hyper links, textarea and input fields

What is URL variable?

so going to next what is URL variable and what is the use? well it is a very useful and helpful part which allows you to send your value to next page like the best it work with php or any server language but we can use it with javascript also but the best result will be with a server based language so now what we can do with it like we can change the styles, count page-views send data to another page(the most popular and important) etc. Now let's understand how they work in URL or how put them into URL. http://mysite.com/?user=wali this is how it will be placed now user is a variable and its value is wali. So this was how we can pass a value of a variable with URL but what if i want to get more like i want to send more variables like user=wali and id=1 then you will simply put & like http://mysite.com/?user=wali&id=1

Get variable from URL

Now the main thing how to get that variable value? well for that we need to add a small function which will get your url variables. Lets See this-

function geturlvar(vars){
var wl = window.location.search.substring(1);
var v = wl.split("&");
for (var i=0;i<vars.length;i++) {
var p = v[i].split("=");
if(p[0] == vars){return p[1];}
}
return(false);
}

Just include the above function once in your page and to know the value just simply call it like the below example-

//URL Query
http://mysite.com/?user=wali&id=1

//The below line will give you the value of the user variable
geturlvar("user");

//Likewise to know the value of id do the same.
geturlvar("id");

All done!

So this was how we can get a variable from URL and submit or get a value trough it using javascript! it was a short post but this thing can do a lot of things and the last 5 mins of this year lol! Wish you A very Happy new year! Keep visiting!

How to remove outline from hyper links, textarea and input fields

How to remove outline from hyper links, textarea and input fields

Hello Readers! today we are going to see how to remove the yellow outline which comes when we focus on a link, textarea or an input field.Hyper links, textarea and input fields default have a dotted outline around them when they become active or focused and sometimes it looks bad with our theme or template so with the help of CSS we can customize or remove it but most people are confused in it many times like i was a day then i got it that it was an outline which comes on focus on textarea and input the basic thing is the property from which u can disable this or customize this too!

Remove outline from links, textarea and inputs

CSS to remove yellow outline

input:focus, textarea:focus, a {
  outline: 0;
}
/* Remove dotted outline from input type=image in Firefox */
input::-moz-focus-inner { 
  border: 0; 
}

Some times it also occur with our flash object/embed so you can use the below -

object, embed { 
  outline: 0;
}

All done!

So this was how we can remove outline from hyper links,textarea and input fields.This time it was a little snippet anyway i will be back soon with another post keep visiting!

Smooth page scroll to an anchor link on the same page using Jquery

Smooth page scroll to an anchor link on the same page using Jquery

Hello friends and dear readers, i am back again with a new post actually i was very busy last days and today i got a holiday of Christmas so i am here with you, Today i have a snippet which is madeup using Jquery which will allow's you to make smooth page scroll to an anchor link on the same page. Well you have noticed that some links are used to navigate on same page well they are mostly used to navigate to different parts like you have noticed in some Portfolio or one page templates the navigation links scroll you to another section on same page smoothly that is anchor linking the scroll was smooth because of any Jquery plugin or javascript plugin without that it will work but not smoothly it will jump directly something like for example if you want to navigate to your about section on your page so just an id to you section div like <div id="about">About us</div> and for a link to it you will place an anchor link like <a href="#about">Click me to Go to About Section</a> now when you click on that link you will be directly jumped to that section but not smoothly. For sooth scroll you dont need to do anything in your markup you just have to include the blow script in your page. There are many Jquery plugins but this is a best snippet which i use and recommend you to use it.
so here is it have a look-

$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});

All done!

So that was how you can make smooth scroll on anchor links and made your webpage more beautiful. If you have any problem regarding this please leave a comment! and I wish the warmth of Christmas brings peace to your home. May you find happiness, love and friendship right beside you and wherever you may go. Merry Christmas to you and to your family.

Refrence URL

How to Disable / Hide Hyper links in Blogger comments

Hello friends well lastly i posted an amazing Script which allows you to Disable right click, CTRL key ,F12, etc. And now here is a post which will help all blogger's who are afraid of spammers and those who shared a link back with their comments, well we have many solutions for that, For example We can use comment moderation to check that the comment contains link or not but it is not a perfect solution so we are going to use The jquery which will allow you to Disable / Hide Hyper links in Blogger comments and its only two lines and works perfectly.

Lets have a look -
$("#comments p a").each(function () {
    $(this).replaceWith($(this).text());
});

That was the main jquery which will remove your links and place the text only which was inserted in that <a> tag for example -

//before
<a href="link"> Text </a>
//after
Text

Using this will remove the link and show the text which is between the a tag.

Adding it to Blogger

To add it to your blog you need to include Jquery library once in <head> section of your blog. if you haven't included till now then you can copy the below code and paste it above the </head> tag.

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

After that just copy the below code and paste it above </body> tag.

<script type="text/javascript">
$("#comments p a").each(function () {
    $(this).replaceWith($(this).text());
});
</script>

Want to hide the links + text also?

What if you want want to hide the link + the text also well you can use the below jquery to hide them.

$('#comments p a').hide());

All Done!

Finally we have completed the process and now you can save your template and check out the magic so this was how we can Disable / Hide Hyper links in Blogger comments. Hope it works for you all, if you have a Better solution so please share it as a comment.