Skip to content

Instantly share code, notes, and snippets.

Created October 1, 2015 19:49

Revisions

  1. @invalid-email-address Anonymous created this gist Oct 1, 2015.
    156 changes: 156 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,156 @@
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
    </head>
    <body>

    <style>

    a.button {
    padding:20px;
    background:skyblue
    }

    a.button .grey {
    background:grey
    }

    a.hover {
    background:blue;
    color:white;
    transition: all 1.0s ease;
    }

    a.light_hover {
    background:red;
    color:white;
    transition: all 1.0s ease;
    }

    a.light_selected {
    background:red;
    color:white;
    transition: all 0.5s ease;
    }

    a.selected {
    background:blue;
    color:white;
    transition: all 0.5s ease;


    </style>



    <div id="rating">
    <a href="#" class="button">1</a>
    <a href="#" class="button">2</a>
    <a href="#" class="button">3</a>
    <a href="#" class="button">4</a>
    <a href="#" class="button">5</a>
    <a href="#" class="button">6</a>
    <a href="#" class="button">7</a>
    <a href="#" class="button">8</a>
    <a href="#" class="button">9</a>
    <a href="#" class="button">10</a>

    <!-- Make it Hidden -->
    <br />
    <br />
    <br />
    <input type="text" value="0" id="rating-value" name="rating">

    </div>


    <script id="jsbin-javascript">
    var selected = false;

    $(document).on("click", ".button", function (e) {
    //clearing currrently "rated" star
    $(".button").removeClass("light_selected").removeClass("selected");

    var $this = $(this);
    //removing ration from all the following stars
    $this.nextAll(".button").removeClass("light_hover");

    //mark clicked star with data-selected attribute
    $this.addClass("selected");

    //mark previous stars
    $this.prevAll(".button").addClass("light_selected");

    $("#rating-value").val(parseInt($this.text()));
    selected = true;
    });


    $(document).on("mouseover", ".button", function (e) {
    var $this = $(this);
    $(this).addClass("hover");

    if (selected === true) {
    $('.selected').prevAll(".button").removeClass("light_selected"); $this.prevAll(".button").removeClass("light_selected");
    }

    $this.prevAll(".button").addClass("light_hover");
    });

    $(document).on("mouseout", ".button", function (e) {

    if (selected === true) {
    $('.selected').prevAll(".button").addClass("light_selected");
    }

    $(".button").removeClass("light_hover").removeClass("hover");
    });
    </script>



    <script id="jsbin-source-javascript" type="text/javascript">var selected = false;

    $(document).on("click", ".button", function (e) {
    //clearing currrently "rated" star
    $(".button").removeClass("light_selected").removeClass("selected");

    var $this = $(this);
    //removing ration from all the following stars
    $this.nextAll(".button").removeClass("light_hover");

    //mark clicked star with data-selected attribute
    $this.addClass("selected");

    //mark previous stars
    $this.prevAll(".button").addClass("light_selected");

    $("#rating-value").val(parseInt($this.text()));
    selected = true;
    });


    $(document).on("mouseover", ".button", function (e) {
    var $this = $(this);
    $(this).addClass("hover");

    if (selected === true) {
    $('.selected').prevAll(".button").removeClass("light_selected"); $this.prevAll(".button").removeClass("light_selected");
    }

    $this.prevAll(".button").addClass("light_hover");
    });

    $(document).on("mouseout", ".button", function (e) {

    if (selected === true) {
    $('.selected').prevAll(".button").addClass("light_selected");
    }

    $(".button").removeClass("light_hover").removeClass("hover");
    });
    </script></body>
    </html>
    40 changes: 40 additions & 0 deletions jsbin.qozosiluju.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    var selected = false;

    $(document).on("click", ".button", function (e) {
    //clearing currrently "rated" star
    $(".button").removeClass("light_selected").removeClass("selected");

    var $this = $(this);
    //removing ration from all the following stars
    $this.nextAll(".button").removeClass("light_hover");

    //mark clicked star with data-selected attribute
    $this.addClass("selected");

    //mark previous stars
    $this.prevAll(".button").addClass("light_selected");

    $("#rating-value").val(parseInt($this.text()));
    selected = true;
    });


    $(document).on("mouseover", ".button", function (e) {
    var $this = $(this);
    $(this).addClass("hover");

    if (selected === true) {
    $('.selected').prevAll(".button").removeClass("light_selected"); $this.prevAll(".button").removeClass("light_selected");
    }

    $this.prevAll(".button").addClass("light_hover");
    });

    $(document).on("mouseout", ".button", function (e) {

    if (selected === true) {
    $('.selected').prevAll(".button").addClass("light_selected");
    }

    $(".button").removeClass("light_hover").removeClass("hover");
    });