» » » Share Script Vote/Voting For Your Niche Websites

1 , 7:52 PM
Hi there, I am going to share my little script that I've made for one of my products, two months ago.
Thought you will find this very useful and interesting...
It is created to be modified but it looks too real to even think that it is modified .

Since this little script contain zero images, let me prepare you with requiremenents, in order for this to be fully working.



Code:
<div id="tb_outer"> <div id="tb_inner"> <div id="tb_question"> <span>Did it work ?</span> </div>
 <div id="tb_voting"> <div id="tb_text"> Works? <span>Cast your vote</span> </div>
 <div id="tb_vote"> <div id="tb_vote-no"> <a href="javascript:;"> <i class="fa fa-thumbs-o-down"></i><span>128</span> </a> </div>
 <div id="tb_vote-yes"> <a href="javascript:;"> <i class="fa fa-thumbs-o-up"></i><span>637</span> </a> </div> </div> </div> </div></div>


CSS:


#tb_outer { position: fixed; top: 120px; left: 0; z-index: 9999999999;
 -webkit-box-shadow: 0 0 50px 3px rgba(0, 0, 0, .2); box-shadow: 0 0 50px 3px rgba(0, 0, 0, .2);}
#tb_inner { background: rgba(112, 112, 112, 1); background: -webkit-linear-gradient(top, rgba(124, 124, 124, .8) 0%, rgba(112, 112, 112, .9) 50%, rgba(101, 101, 101, .95) 50%); background: -moz-linear-gradient(top, rgba(124, 124, 124, .8) 0%, rgba(112, 112, 112, .9) 50%, rgba(101, 101, 101, .95) 50%); background: -o-linear-gradient(top, rgba(124, 124, 124, .8) 0%, rgba(112, 112, 112, .9) 50%, rgba(101, 101, 101, .95) 50%); background: -ms-linear-gradient(top, rgba(124, 124, 124, .8) 0%, rgba(112, 112, 112, .9) 50%, rgba(101, 101, 101, .95) 50%); background: linear-gradient(top, rgba(124, 124, 124, .8) 0%, rgba(112, 112, 112, .9) 50%, rgba(101, 101, 101, .95) 50%);
 font-family: 'Source Sans Pro'; color: #fefefe; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); margin: auto; position: relative; overflow: hidden; cursor: default;
 -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), inset 0 1px 0 1px rgba(255, 255, 255, .35), inset 0 0 0 2px rgba(255, 255, 255, .15), inset 0 0 20px 5px rgba(200, 200, 200, .5), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), inset 0 1px 0 1px rgba(255, 255, 255, .35), inset 0 0 0 2px rgba(255, 255, 255, .15), inset 0 0 20px 5px rgba(200, 200, 200, .5), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .2);}
#tb_question { width: 30px; height: 112px; padding: 4px;}
#tb_question span { display: inline-block; position: absolute; top: 50px; font-size: 18px; width: 140px; text-align: center; text-transform: capitalize; font-weight: bold; left: -51px;
 -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg);}
#tb_voting { display: none; padding: 4px; width: 64px;}
#tb_text { font-size: 14px; text-transform: uppercase; text-align: center; margin-bottom: 10px;}
#tb_text span { display: block; font-size: 10px; font-style: italic; text-transform: lowercase;}
#tb_vote { font-size: 18px; text-align: center;}
#tb_vote > div { display: inline-block;}
#tb_vote a { color: #fff; text-decoration: none;
 -webkit-transition: .3s all ease-in-out; -moz-transition: .3s all ease-in-out; -o-transition: .3s all ease-in-out; -ms-transition: .3s all ease-in-out; transition: .3s all ease-in-out;}
#tb_vote a:hover:not(#tb_vote-disable), #tb_vote-active { color: #222 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .3);}
#tb_vote-no { margin-bottom: 10px;}
#tb_vote i { padding-right: 6px;}
#tb_vote-disable { cursor: default;
 -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px); opacity: .6;}
#tb_vote-disable:hover { color: inherit;}


Javascript:

// Vote Cast Action// ->
$("#tb_question").on('mouseenter', function () { $.when($(this).fadeOut()).then(function () { $("#tb_voting").fadeIn(); });});
$("#tb_voting").on('mouseleave', function () { $.when($(this).fadeOut()).then(function () { $("#tb_question").fadeIn(); });});

var like = $("#tb_vote-yes").find("span").html(), dislike = $("#tb_vote-no").find("span").html();
$("#tb_vote-yes, #tb_vote-no").on('click', function () { if ($.cookie("tb_like") == null && $.cookie("tb_dislike") == null) { $(this).find("a").attr("id", "tb_vote-active"); $(this).siblings().find("a").attr("id", "tb_vote-disable");
 if ($(this).find("span").html() == like) { $(this).find("span").html(parseInt(like) + 1); $.cookie("tb_like", "vote", { expires: 30, path: '/' }); } else { $(this).find("span").html(parseInt(dislike) + 1); $.cookie("tb_dislike", "vote", { expires: 30, path: '/' }); } }
 return false;});
if ($.cookie("tb_like") != null) { $("#tb_vote-yes") .find("a").attr("id", "tb_vote-active") .find("span").html(parseInt(like) + 1);
 $("#tb_vote-no") .find("a").attr("id", "tb_vote-disable");}else if ($.cookie("tb_dislike") != null) { $("#tb_vote-no") .find("a").attr("id", "tb_vote-active") .find("span").html(parseInt(dislike) + 1);
 $("#tb_vote-yes") .find("a").attr("id", "tb_vote-disable");}
// <-

Freedom:
- You may change anything in this script, such as improving it and using database if you want real voting and not modified one with cookies.- You may change design of it using provided CSS.- However you may not sell this script or post on any other forums without my permission. Thanks in advance.
Well that would be all, thank you for looking my thread, I hope it's not Low Quality post because I will try to post only quality stuff that I create by my self. Enjoy and good luck!
Posted by
Next
This is the most recent post.
Previous
Older Post

Post a Comment

1 comments:

avatar
Reply
RJ delete July 5, 2021 at 5:57 PM

good day are you from fiverr

Dear readers, after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me. Thank you.

Sunday, May 31, 2015

Share Script Vote/Voting For Your Niche Websites

Hi there, I am going to share my little script that I've made for one of my products, two months ago.
Thought you will find this very useful and interesting...
It is created to be modified but it looks too real to even think that it is modified .

Since this little script contain zero images, let me prepare you with requiremenents, in order for this to be fully working.



Code:
<div id="tb_outer"> <div id="tb_inner"> <div id="tb_question"> <span>Did it work ?</span> </div>
 <div id="tb_voting"> <div id="tb_text"> Works? <span>Cast your vote</span> </div>
 <div id="tb_vote"> <div id="tb_vote-no"> <a href="javascript:;"> <i class="fa fa-thumbs-o-down"></i><span>128</span> </a> </div>
 <div id="tb_vote-yes"> <a href="javascript:;"> <i class="fa fa-thumbs-o-up"></i><span>637</span> </a> </div> </div> </div> </div></div>


CSS:


#tb_outer { position: fixed; top: 120px; left: 0; z-index: 9999999999;
 -webkit-box-shadow: 0 0 50px 3px rgba(0, 0, 0, .2); box-shadow: 0 0 50px 3px rgba(0, 0, 0, .2);}
#tb_inner { background: rgba(112, 112, 112, 1); background: -webkit-linear-gradient(top, rgba(124, 124, 124, .8) 0%, rgba(112, 112, 112, .9) 50%, rgba(101, 101, 101, .95) 50%); background: -moz-linear-gradient(top, rgba(124, 124, 124, .8) 0%, rgba(112, 112, 112, .9) 50%, rgba(101, 101, 101, .95) 50%); background: -o-linear-gradient(top, rgba(124, 124, 124, .8) 0%, rgba(112, 112, 112, .9) 50%, rgba(101, 101, 101, .95) 50%); background: -ms-linear-gradient(top, rgba(124, 124, 124, .8) 0%, rgba(112, 112, 112, .9) 50%, rgba(101, 101, 101, .95) 50%); background: linear-gradient(top, rgba(124, 124, 124, .8) 0%, rgba(112, 112, 112, .9) 50%, rgba(101, 101, 101, .95) 50%);
 font-family: 'Source Sans Pro'; color: #fefefe; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); margin: auto; position: relative; overflow: hidden; cursor: default;
 -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), inset 0 1px 0 1px rgba(255, 255, 255, .35), inset 0 0 0 2px rgba(255, 255, 255, .15), inset 0 0 20px 5px rgba(200, 200, 200, .5), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), inset 0 1px 0 1px rgba(255, 255, 255, .35), inset 0 0 0 2px rgba(255, 255, 255, .15), inset 0 0 20px 5px rgba(200, 200, 200, .5), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .2);}
#tb_question { width: 30px; height: 112px; padding: 4px;}
#tb_question span { display: inline-block; position: absolute; top: 50px; font-size: 18px; width: 140px; text-align: center; text-transform: capitalize; font-weight: bold; left: -51px;
 -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg);}
#tb_voting { display: none; padding: 4px; width: 64px;}
#tb_text { font-size: 14px; text-transform: uppercase; text-align: center; margin-bottom: 10px;}
#tb_text span { display: block; font-size: 10px; font-style: italic; text-transform: lowercase;}
#tb_vote { font-size: 18px; text-align: center;}
#tb_vote > div { display: inline-block;}
#tb_vote a { color: #fff; text-decoration: none;
 -webkit-transition: .3s all ease-in-out; -moz-transition: .3s all ease-in-out; -o-transition: .3s all ease-in-out; -ms-transition: .3s all ease-in-out; transition: .3s all ease-in-out;}
#tb_vote a:hover:not(#tb_vote-disable), #tb_vote-active { color: #222 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .3);}
#tb_vote-no { margin-bottom: 10px;}
#tb_vote i { padding-right: 6px;}
#tb_vote-disable { cursor: default;
 -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px); opacity: .6;}
#tb_vote-disable:hover { color: inherit;}


Javascript:

// Vote Cast Action// ->
$("#tb_question").on('mouseenter', function () { $.when($(this).fadeOut()).then(function () { $("#tb_voting").fadeIn(); });});
$("#tb_voting").on('mouseleave', function () { $.when($(this).fadeOut()).then(function () { $("#tb_question").fadeIn(); });});

var like = $("#tb_vote-yes").find("span").html(), dislike = $("#tb_vote-no").find("span").html();
$("#tb_vote-yes, #tb_vote-no").on('click', function () { if ($.cookie("tb_like") == null && $.cookie("tb_dislike") == null) { $(this).find("a").attr("id", "tb_vote-active"); $(this).siblings().find("a").attr("id", "tb_vote-disable");
 if ($(this).find("span").html() == like) { $(this).find("span").html(parseInt(like) + 1); $.cookie("tb_like", "vote", { expires: 30, path: '/' }); } else { $(this).find("span").html(parseInt(dislike) + 1); $.cookie("tb_dislike", "vote", { expires: 30, path: '/' }); } }
 return false;});
if ($.cookie("tb_like") != null) { $("#tb_vote-yes") .find("a").attr("id", "tb_vote-active") .find("span").html(parseInt(like) + 1);
 $("#tb_vote-no") .find("a").attr("id", "tb_vote-disable");}else if ($.cookie("tb_dislike") != null) { $("#tb_vote-no") .find("a").attr("id", "tb_vote-active") .find("span").html(parseInt(dislike) + 1);
 $("#tb_vote-yes") .find("a").attr("id", "tb_vote-disable");}
// <-

Freedom:
- You may change anything in this script, such as improving it and using database if you want real voting and not modified one with cookies.- You may change design of it using provided CSS.- However you may not sell this script or post on any other forums without my permission. Thanks in advance.
Well that would be all, thank you for looking my thread, I hope it's not Low Quality post because I will try to post only quality stuff that I create by my self. Enjoy and good luck!
Posted by at
Labels: ,

1 comment:

Subscribe to: Post Comments (Atom)