animated table and button with dialog box and local storage + animation

by Berat Emre Nebioğlu

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<button id="button11" class="buttonCla"></button>
<div id="window">Information about animated button.</div>
<br />
<br />
<br />
<div class="overlap">
    <div class="counter">
        <div class="circle1">
            <div class="redCounter"></div>
        </div>
        <div class="circle2">
            <div class="orangeCounter"></div>
        </div>
        <div class="circle3">
            <div class="grayCounter"></div>
        </div>
    </div>
    <button id="button" class="box">URL Monitor</button>
</div>
<p id="p1"></p>
<div id="popup">
    <input type="button" value="Click Me" id="button1" />
</div>
<div class="modalContainer">
<div id="popup2"></div>
<div class="boxContainer hiding">
    <div class="boxContainer2">
        <div class="textContainer">Button lara tıklayarak renkli alanları animasyonlu bir hale gtirebilirsiniz. Renkleri eşleştitrken butonun yanında ki yazının rengine göre seçimi yapabilirsiniz.</div>
    </div>
    <div class="boxContainer3">
        <div class="checkboxContainer">
            <label ID="label1">
                <input type="checkbox" id="checkbox" checked="checked" />Performans</label>
            <br />
            <label ID="label3">
                <input type="checkbox" id="checkbox3" checked="checked" />Güncel olmayanlar</label>
            <br />
            <label ID="label4">
                <input type="checkbox" id="checkbox4" checked="checked" />Kritik</label>
            <br />
        </div>
    </div>
</div>
</div>
<div id="tableContainer">
    <div>
        <table class="table table-bordered table-condensed  table-responsive tablesorter" cellspacing="0" rules="all" border="1" id="WebRequestGridView"...

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
}
.overlap{
    position:relative;
    z-index:3;
}

.redCounter {
    color:red;
    
}
.counter div {
   display:inline-block;
   text-align:center;
   vertical-align:40%;
    
   
    
   
}
div.circle1 {
    position:absolute;
    left:27px;
    top:-33px;
    border: 3px solid black;
    background-color:black;
    border-radius: 50%;
    width: 30px;
    height: 20px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-left:15px;
    z-index:2;
    
   
}
.orangeCounter {
    color:orange;
    
    
}
div.circle2 {
    position:absolute;
    left:5px;
    top:-33px;
    border: 3px solid black;
    background-color:black;
    border-radius: 50%;
    width: 30px;
    height: 20px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-right:15px;
    z-index:2;
     
}
.grayCounter {
    color:gray;
}
div.circle3 {
    position:absolute;
    left:95px;
    top:-33px;
    border: 3px solid black;
    background-color:black;
    border-radius: 50%;
    width: 30px;
    height: 20px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-left:-15px;
    z-index:2;
     
}
.buttonClass {
    display:table;
}
.buttonCla {
    position:absolute;
    top:0;
     margin:0 auto;
    width:50px;
    height:50px;
    background: url("http://i.imgur.com/XmBDr0U.png") no-repeat;
    width:50px;
    height:50px;
    background-color:#FFFFFF;
    border:none;
    outline:none;
    opacity:0.4;
}
.image {
    margin:0 auto;
    width:50px;
    height:50px;
    background: url("http://i.imgur.com/XmBDr0U.png") no-repeat;
}
#button1 {
    border: 1px solid #A3A3FF;
    background-image: url("http://i.imgur.com/2yuQih2.png ");
    background-repeat:no-repeat;
    width:25px;
    background-color: #A3A3FF;
}
.hideButton {
    display:none;
}
#tableContainer {
    display:none;
}
#WebRequestGridView th {
    margin: 20px auto;
    max-width: 200px;
    font-size:12px;
   ...

JavaScript

$(document).ready(function () {
    var table = $("#WebRequestGridView tbody tr");

    var redCounter = 0;
    var orangeCounter = 0;
    var grayCounter = 0;
    for (var i = 0; i < table.length; i++) {
        console.log($(table[i]).css('background-color'));

        if ($(table[i]).css("background-color") === "rgb(255, 0, 0)") {
            redCounter++;

        } else if ($(table[i]).css("background-color") === "rgb(255, 165, 0)") {
            orangeCounter++;

        } else if ($(table[i]).css("background-color") === "rgb(128, 128, 128)") {
            grayCounter++;

        }
        $(".redCounter").text(redCounter);
        $(".orangeCounter").text(orangeCounter);
        $(".grayCounter").text(grayCounter);
    }
});

/* first pop up when you click animated button you will see pop up contains table and buttons. Buttons will have some functionality.  Thats the plan. This function is to put hand image button to the head part of table. */

$("link[rel=icon]").attr("href", "http://i.imgur.com/2yuQih2.png");
$(document).ready(function () {
    var buttonToTheHead = $("#WebRequestGridView thead tr th:first-child");
    $button = $("#button1");
    $button.appendTo(buttonToTheHead);
    $button.removeClass("hideButton");
    $button.show();
});


$(document).ready(function () {
    $(".buttonClass").each(function (index, element) {
        $(element).prop("id", index);

    });
    var color = $('tbody tr:first-child').css('background-color');
    var checkbox1 = $('#checkbox');

    $("#button").css('background-color', color).on('click', function () {

        $(this).hide();
        var table = $('#WebRequestGridView');
        $("#popup").dialog({
            draggable: true,


            show: {
                effect: "fold",
                duration: 500
            },
            hide: {
                effect: "fold",
                duration: 500
            },

            position: {
                my: "left top",
                at: "left...