Steemit FloatVote: KLYE Edition - Never Have to Scroll to the Bottom of a Post Again..!

klye (73) in steemdev • 7 years ago (edited)

Are you tired of finding great quality content but having to scroll all the way to the bottom of the post just to throw the author your seal of approval in the form of an upvote?

Do you often wish you could see how much reward, votes and views a post has right away when the page loads rather than having to hunt for it?

_{( sexy.. ain't it? )}

If you answered yes to either question above or just want your Steemit.com experience to be slightly more awesome have I got a grand offering for you! Adapted from @bitcoiner's original "Floatvote" I'm proud to release to the general public my own version.

Steemit FloatVote: KLYE Edition

No longer must you scroll to the bottom of a post to vote!

Users with over roughly 500 STEEM get access to voting weight controls!

By using the power of CSS and a bit of code wizardry was able to take the voting, views and reward displays from the bottom of the post GUI, sending them to the top right allowing for much more efficient curation or voting. The current setup on Steemit.com forces users to scroll all the way to the bottom of the post to vote, this script solves that problem while adding a bit of colour to the GUI.

Script & Installation

Google Chrome plugin "Tampermonkey" is what I use to run external Javascript code on top of target sites so before you go ahead please go get that installed in order to continue.

Not going to walk you through that part but once you've got Tampermonkey installed find it's little icon and create a new script as displayed in the screenshot given below:

This will open up a screen that looks like the one below, delete all the code in the new file:

Once you have all that crap deleted copy the script below and paste it into the document:

// ==UserScript==
// @name          Steemit FloatVote KLYE EDITION
// @namespace     http://userstyles.org
// @description   Steemit FloatVote - ? Because Voting is Important!
// @author        bitcoiner + KLYE
// @homepage      https://userstyles.org/styles/132260
// @include       http://steemit.com/*
// @include       https://steemit.com/*
// @include       http://*.steemit.com/*
// @include       https://*.steemit.com/*
// @run-at        document-start
// @version       0.20160902230543
// ==/UserScript==
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
var views;
var elements;
(function () {
    var css = [
        ".PostFull__footer .Voting {",
        "    box-shadow: 0px 3px 10px -3px #000;",
        "opacity: 80;",
        "background: #ffffff;",
        "background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);",
        "background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);",
        "background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%);",
        "filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );",
        " border-radius: 20px !important;",
        "border-top-right-radius: 0px !important;",
        "border-bottom-right-radius: 0px !important;",
        " border: 1px solid #bbb !important;",
        "    position: fixed !important;",
        "    padding: 4px 0.5em !important;",
        "    top: 7% !important;",
        "    right: 7% !important;",
        "    z-index: 1000 !important;",
        "}",
        ".PostFull__footer a {",
        "font-size: 100% !important;",
        //  " ",
        // " ",
        "}",
        ".PostFull__footer  .PostFull__views {",
        "left: 92.5%;",
        "    box-shadow: 0px 3px 10px -3px #000;",
        "opacity: 80 !important;",
        "background: #ffffff !important;",
        "background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%) !important;",
        "background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%) !important;",
        "background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%) !important;",
        "filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ) !important;",
        " border-radius: 20px !important;",
        "border-top-left-radius: 0px !important;",
        "border-bottom-left-radius: 0px !important;",
        " border: 1px solid #bbb !important;",
        "    position: fixed !important;",
        "    padding: 4px 0.5em 4px 0.33em !important;",
        "    top: 7% !important;",
        "    right: 1.5em !important;",
        "    z-index: 999 !important;",
        "}",
        "",
        ".PostFull__footer .PostFull__views",
        " .PostFull__footer .Voting__button-up .dropdown-pane {",
        "    top: inherit !important;",
        "    bottom: 35px !important;",
        "}",
        "",
        ".PostFull__time_author_category {",
        "    border-right: none !important;",
        "}",
        ".Voting__button-up circle:hover {",
        "    fill: #4ba2f2 !important; ",
        "stroke: #ccc !important;",
        "}",
        ".Voting__adjust_weight {",
        "    box-shadow: 0px 3px 10px -3px #000;",
        "    min-height: 44px;",
        "    margin-top: 4.7% !important;",
        "background: #ffffff !important;",
        "background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%) !important;",
        "background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%) !important;",
        "background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%) !important;",
        "filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ) !important;",
        "border-radius: 20px !important;",
        "position: relative !important;",
        "top: 7% !important;",
        "right: 74.5% !important;",
        "padding: 0px 5px 0px 0px !important;",
        "border: 1px solid #bbb !important;",
        "width: 251px !important;",
        "}",
        "a.confirm_weight {",
        "float: right !important;",
        "width: 2rem !important;",
        "height: 2.2rem !important;",
        "line-height: 2.6rem !important;",
        "-webkit-transition: all 0.3s ease 0s !important;",
        "-moz-transition: all 0.3s ease 0s !important;",
        "-ms-transition: all 0.3s ease 0s !important;",
        "-o-transition: all 0.3s ease 0s !important;",
        "transition: all 0.3s ease 0s !important;",
        "}",
        ".rangeslider-horizontal {",
        "   height: 7px !important;",
        "width: 200px !important;",
        "background: rgba(0,0,0,0.15) !important;",
        "float: right !important;",
        "margin-top: 18px !important;",
        "margin-right: 5px !important;",
        "box-shadow: inset 0 2px 4px rgba(0,0,0,.5) !important;",
        "}",
        ".rangeslider__fill {",
        "box-shadow: inset 0 1px 3px rgba(0,0,0,.3) !important;",
        "}",
        "button.Voting__adjust_weight_close {",
        "display: none;",
        "}",
        ".dropdown-pane.is-open {",
        "border: none !important;",
        "}",
        "div.rangeslider__handle {",
        "background: rgb(255,255,255) !important;",
        "background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%) !important;",
        "background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%) !important;",
        "background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%) !important;",
        "filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ) !important;",
        "width: 15px !important;",
        "border-radius: 15px !important;",
        "border-color: #bbb !important;",
        "    top: -12px !important;",
        "    box-shadow: 0px 3px 10px -3px #000;",
        "}",
        "div.rangeslider__handle:active {",
        "background: rgb(255,255,255) !important;",
        "background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%) !important;",
        "background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%) !important;",
        "background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%) !important;",
        "filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ) !important;",
        "width: 15px !important;",
        "border-radius: 15px !important;",
        "border-color: #bbb !important;",
        "    box-shadow: 0px 3px 10px -3px #000;",
        "}",
        ".dropdown-pane {",
        "box-shadow: none !important;",
        "}",
        ".weight-display {",
        "width: 3rem;",
        "float: left;",
        "margin-right: .5rem;",
        "text-align: right;",
        "color: #8a8a8a;",
        "line-height: 2.6rem;",
        "position: absolute;",
        "left: 30%;",
        "margin-top: 4.2% !important;",
        "-webkit-user-select: none;",
        "-moz-user-select: none;",
        "-ms-user-select: none;",
        "}",
        ".weight-display:after {",
        "content: 'Float-Vote @KLYE Edition';",
        "font-size: 0.6em;",
        "position: absolute;",
        "top: -25px;",
        "    right: -30px;",
        "color: #cdcdcd;",
        "}",
        // "div.Header__top li.Header__search:after {",
        // "position: absolute;",
        //"content: '🌑';",
        // "    top: 10px;",
        // " right: 19%;",
        // "}",
        //  "div.Header__top li.Header__search.c2:after {",
        // "position: absolute;",
        // "content: '☀️';",
        // "    top: 10px;",
        //" right: 19%;",
        // "}",
        ".menu.vertical {",
        " background: #fff;",
        " border: 1px solid #d6d6d6;",
        "  border-top: none;",
        "  margin-top: 2px;",
        "  box-shadow: 0px 4px 14px -3px #000;",
        "}",
        ".menu.vertical>li>a {",
        "    -webkit-transition: all 0.3s ease 0s;",
        " -moz-transition: all 0.3s ease 0s;",
        "-ms-transition: all 0.3s ease 0s;",
        " -o-transition: all 0.3s ease 0s;",
        "transition: all 0.3s ease 0s;",
        "}"
    ].join("\n");
    document.addEventListener('DOMContentLoaded', function () {

    }, false);
    if (typeof GM_addStyle != "undefined") {
        GM_addStyle(css);
    } else if (typeof PRO_addStyle != "undefined") {
        PRO_addStyle(css);
    } else if (typeof addStyle != "undefined") {
        addStyle(css);
    } else {
        var node = document.createElement("style");
        node.type = "text/css";
        node.appendChild(document.createTextNode(css));
        var heads = document.getElementsByTagName("head");
        if (heads.length > 0) {
            heads[0].appendChild(node);
        } else {
            // no head yet, stick it whereever
            document.documentElement.appendChild(node);
        }
    }
})();

Make sure to copy all the code in the grey box above and hit ctrl + c

Hit ctrl + s to save your new Float-Vote Script!

That's it! Float-Vote: KLYE Edition Should be Working!

Admittedly this code is mostly untested and may not work on all systems!

Shout out to @bitcoiner for making the original version! <3
Shout out to @transisto for putting me up to the challenge! <3

	VOTE @KLYE FOR WITNESS steemit.com/~witnesses

steemdev steemit steem-help steem life

7 years ago by klye (73)

$196.40

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!

Sort Order:

Trending

[-]

doccrypto (52) · 7 years ago

Very cool! On my way to 500 STEEM...

$0.07

1 vote

[-]

cryptonews-24 (40) · 7 years ago

i followed you , plz follow me back...

$0.00

[-]

klye (73) · 7 years ago (edited)

Please don't beg for follows on my posts. <3

$0.04

1 vote

[-]

klye (73) · 7 years ago

You'll get there eventually!

$0.00

[-]

charles1 (68) · 7 years ago

Innovation in action@klye. very impressive and the reason why steemit is great..because of people like you comming up with ideas that will help all.

$0.06

1 vote

[-]

klye (73) · 7 years ago

Thanks Charles! While not a perfect implementation of my idea it does seem to work for voting atleast..!

$0.00

[-]

charles1 (68) · 7 years ago

Good point. At least you are adding value to the platform. Thanks and keep it up.

$0.06

1 vote

[-]

klye (73) · 7 years ago (edited)

https://steemit.com/test/@klye/yourposturlhereplz

@tippy roll 100000

$0.00

[-]

tippy (39) · 7 years ago

Random Roll:
@klye rolled 26402 _{( roll was between 1 - 100000 )}

_{🤖 @Tippy - STEEM & SBD Text-to-Tip Bot by @KLYE 🤖
( click reply & type @tippy help for commands )}

$0.00

[-]

nezaigor (54) · 7 years ago

Good Very Very

$0.04

2 votes

[-]

cryptonews-24 (40) · 7 years ago

i upvoted to you and i followed you , plz follow me back... and Upvote

$0.03

1 vote

[-]

nezaigor (54) · 7 years ago

Goood

$0.00

1 vote

[-]

cryptonews-24 (40) · 7 years ago

i upvoted to you and i followed you , plz follow me back... and Upvote

$0.00

[-]

uruiamme (52) · 7 years ago

Can I have a version that has an animated upvote 💥 explosion?

$0.04

1 vote

[-]

klye (73) · 7 years ago

It's a possibility. :P

$0.00

[-]

splatterhaus (53) · 7 years ago

Question..... do you have to have 500 Steem in your account or 500 Steem Power for that voting bar to be enabled?

$0.00

1 vote

[-]

klye (73) · 7 years ago

500 STEEM Power! :)

$0.00

[-]

nollza (44) · 7 years ago

u,,,,

$0.00

[-]

klye (73) · 7 years ago

? What?

$0.00

[-]

nibzter8 (43) · 7 years ago

oh wow, real nice work done! It's good to have steemdevs around on the network itself. Not a waste of time anymore haha! Good work, sir. You've helped the masses. Cheers!

#follow4follow

$0.00

1 vote

[-]

fd907 (38) · 7 years ago

This is a great way to innovate the way we use Steemit and utitlize it's mechanics :). Personally, I had no clue Steemit was open sourced but the more you know... Do you think you'd be able to show this to any of the Steemit administration and have this script implemented in the actual website? If not, I know you can definitely shoot for it! I'll be trying this out in the future, I'll let you know how it feels for me!

$0.00

1 vote

[-]

klye (73) · 7 years ago

I could pass it on to the higher-ups and see what they think about it!

Heard rumour that Steemit Inc might be working on revamping the voting GUI a bit.

$0.00

1 vote

[-]

cryptonews-24 (40) · 7 years ago

i upvoted to you and i followed you , plz follow me back... and Upvote

$0.00

[-]

klye (73) · 7 years ago

$0.16

2 votes

[-]

acidyo (80) · 7 years ago

You couldn't add the one thing that would've been useful after the HF? To scale the votes with 1 or 2 more decimals?

$0.00

1 vote

[-]

klye (73) · 7 years ago

It's under development from steemit inc as far as I have heard.. :D

$0.00

[-]

cryptonews-24 (40) · 7 years ago

i upvoted to you and i followed you , plz follow me back... and Upvote

$0.00

[-]

lanceman (53) · 7 years ago

You have a new friend and follower @cryptonews-24 ! Thank you

$0.00

[-]

lanceman (53) · 7 years ago

Another cool and useful innovation @klye ! Thank you for the efforts to improve the community !

$0.00

1 vote

[-]

cryptonews-24 (40) · 7 years ago

i upvoted to you and i followed you , plz follow me back... and Upvote

$0.00

[-]

klye (73) · 7 years ago

No problem man, honestly I just enjoy tinkering and making things to make life easier.

$0.00

[-]

greatdabu (51) · 7 years ago

@klye I love this and have been using it for 5 hours now. Thanks so much !!! Very handy tool.

How hard or is it even possible to make an add-on that filters out resteems to get at the original posters posts ?

$0.38

1 vote

[-]

klye (73) · 7 years ago

I'll see what I can spin up in a bit. :)

$0.17

1 vote

[-]

greatdabu (51) · 7 years ago

totally rad

$0.00

[-]

itchykitten (59) · 7 years ago

this is a great question dabu...I've been wondering it myself. It's a bit more complicated then the float vote, because you need to pull MORE posts from steemd, to essentially replace the resteeemed ones. But it should absolutely be possible...especially with the javascript websocket rpc library

I've been thinking about this, going to try playing with it, it's a bit out of my comfort zone, but hey!

$0.15

1 vote

[-]

greatdabu (51) · 7 years ago

Thanks so much @itchykitten ! It seems to be a feature that alot of people are wanting. I'm now following you, especially after reading your Amazing Intro ! I'm glad you found your way here.

$0.00

[-]

transisto (74) · 7 years ago

Cheers ;)

$0.00

1 vote

[-]

moneymaster (45) · 7 years ago

thats a very crazy and helpful tool
you guys make the steem community
marveles place to be at in socialmedia
Thank you very much for sharing this know how
Resteemd, Upvt. Followd Cheers Mate

$0.00

1 vote

[-]

klye (73) · 7 years ago

No worries. It does help speed up voting / curating for sure.

$0.00

[-]

bycz (58) · 7 years ago

Thank you a lot man! you teach me a lot with this post! never used tampermonkey! thanks

$0.00

[-]

klye (73) · 7 years ago

It's a nifty little plugin to help you add functionality to sites. :)

$0.00

[-]

greatvideos (59) · 7 years ago

That is great
I d love to get it
But I still have a bit to go to get the 500steem power

$0.00

[-]

klye (73) · 7 years ago

You'll get there eventually!

$0.00

[-]

greatvideos (59) · 7 years ago

For that reason I am on 100% power up

$0.00

[-]

klye (73) · 7 years ago

You actually could get more STEEM by taking 50/50 payouts and selling the SBD on an exchange then buying STEEM with it to be honest. ;)

$0.00

[-]

greatvideos (59) · 7 years ago

That is true
Thank you
Yes sure I will have to do so from now on
Have a lovely time

$0.00

[-]

s4m0ht (40) · 7 years ago

Yea, I really like the fact that is all mostly css, usually I am skeptic about injecting scripts but this looks all visual manipulation, please have my .01 upvote :D

$0.00

[-]

klye (73) · 7 years ago

It's nearly all CSS tweaks. All that is being done is taking the voting, view and reward elements and moved them upwards while skinning them a bit more pretty. :)

$0.00

[-]

whd (63) · 7 years ago

@klye great work. But installing extension to web browser to install extension well i think you should develop dedicated chrome/ff extension ! :)

$0.00

[-]

klye (73) · 7 years ago

Never made one.. Guess I could try!

$0.00

[-]

itchykitten (59) · 7 years ago

it's stupid easy, all javascript / html

$0.00

[-]

blackamine (52) · 7 years ago

Very cool feature, I personally don't mind scrolling all the way down to vote on a post I like, but I could see it very useful if you vote a lot! Trying to get to the 500 STEEM mark so I can enable the upvote bar, would be really help me allocate my votes! Thanks for the info!

$0.00

[-]

klye (73) · 7 years ago

Aye, I'm all about trying to make the most out of my time.. Been using this tool for a bit now and figured I should share my mod of it.

$0.00

[-]

blackamine (52) · 7 years ago

I agree!

$0.00

[-]

wvm (54) · 7 years ago

Great idea!

$0.00

[-]

adamm (52) · 7 years ago

Brilliant stuff!! Thanks for sharing. I didn't even know tampermonkey existed. Useful!

$0.00

[-]

l0k1 (69) · 7 years ago

I knew of greasemonkey but not tampermonkey... there's a few of these available for several browsers now. They can do all kinds of cool things to webpages automatically for you.

$0.00

[-]

klye (73) · 7 years ago

It's a good one for sure. :)

$0.00

[-]

singa (69) · 7 years ago

Great. Now I wait until I have 500 . Thank you so much for the right advice and guidance.
I run to 500!!

$0.00

[-]

husaini (71) · 7 years ago

Thank you for your information friend.

$0.00

[-]

kryptik (63) · 7 years ago

Take my full upvote you sexual dolphin.

$0.00

[-]

klye (73) · 7 years ago

$0.13

1 vote

[-]

greatdabu (51) · 7 years ago

Upvoted 100% using My NEW Float-Vote - Klye Edition (on Firefox even)

$0.00

[-]

jzeek (54) · 7 years ago

Good tutorial but scrolling has its own enjoyable taste for many who like to play with the mouse wheel anyway. but for those who hate it this is the best guide @klye

$0.00

[-]

klye (73) · 7 years ago

Will hopefully save many needless scrollin'!

$0.00

[-]

elevator09 (71) · 7 years ago

great! thanks for sharing

$0.00

[-]

practicaleric (66) · 7 years ago

Wonderful idea...had to scroll so far down to upvote and comment on this. Thanks for sharing

$0.00

[-]

noaommerrr (55) · 7 years ago

Nice!

$0.00

[-]

jelazile (38) · 7 years ago

I follow you and you can me.
This is awesome

$0.00

[-]

schererf (64) · 7 years ago

Great post. I have to try it!

$0.00

[-]

steemboys (57) · 7 years ago

almost at 500SP, oh wait - not!

$0.00

[-]

nicnas (66) · 7 years ago

Wow very cool man. Thanks for adding some new features that allow us to increase efficiency when we are spending hours a day reading and skimming content. Your work is much appreciated @klye

$0.00

[-]

natasmr (52) · 7 years ago

I still grow and grow to 500! Sad)

$0.00

Steemit FloatVote: KLYE Edition - Never Have to Scroll to the Bottom of a Post Again..!

Steemit FloatVote: KLYE Edition

Script & Installation

That's it! Float-Vote: KLYE Edition Should be Working!

VOTE @KLYE FOR WITNESS

26402