css radial gradient

css radial gradient
css radial gradient example watch the output in full screen to see the difference .you will be seeing 
round radial circles.

jquery popup and alerts

jquery popup
Sometimes you need to go back to basics and use the .alert() function is jQuery to see what the hell a variable is or check if your JavaScript is actually working at all?! ... Also known as a jQuery command box or system popup window that contains text information displayed to the user.

 jqueryCode :
<!doctype html>
<html lang="en">
 <head>
 <script src='http://code.jquery.com/jquery-latest.min.js'></script>
  <style>
    #tip.error {
   background: #FF4136;
   color: #fff;
 }

 .error a {
   color: #fff;
   text-shadow: none;
 }

 #tip {
   z-index: 100;
   display: none;
   border-top: 1px solid #ccc;
   position: absolute;
   bottom: 0;
   font-size: 14px;
   line-height: 22px;
   background: #fdfece;
   left: 0;
   right: 0;
   padding: 2px 10px 2px 10px;
   -webkit-animation: tip-flash 100ms linear 4 alternate;
   -moz-animation: tip-flash 100ms linear 4 alternate;
   -ms-animation: tip-flash 100ms linear 4 alternate;
   -o-animation: tip-flash 100ms linear 4 alternate;
   animation: tip-flash 100ms linear 4 alternate;

   -webkit-transition: bottom 100ms linear;
   transition: bottom 100ms linear;
 }

 #tip.notification,
 #tip.error {
   bottom: auto;
   top: 34px;
   line-height: 28px;
   box-shadow: 0 2px 4px rgba(0,0,0,.2);
 }

 #tip p {
   margin: 5px 25px 5px 0;
   padding: 0 65px 0 0;
   line-height: 1.3;
 }

 #tip a.dismiss {
   line-height: 28px;
   position: absolute;
   right: 20px;
   top: 2px;
   text-decoration: none;
   text-shadow: none;
 }

  </style>
 </head>
 <body>
  <div id="tip">
  <p>
   <label>
    <input type="checkbox" class="enablealt"> 
     <strong>Turn this off</strong>
     . Reserve ctrl+[n] for switching browser tabs and use ctrl+<u>alt</u>+[n] to switch JS Bin panels. You can access this any time in 
     <strong>Help→Keyboard</strong>
   </label>
  </p>
  <a class="dismiss" href="#">Dismiss x</a>
</div>
<input type="submit" value="save" onclick="onSaveError();"/>
<input type="submit" value="delete" onclick="onDelete();"/>
<script>
  function onSaveError() {
      $("#tip").removeClass("error");
      $("#tip").addClass('notification');
   $("#tip p").html("Sorry this bin is too large for us to save");
   $("#tip").css({ display: "block" });
  };

  $("#tip").on("click", ".dismiss", function() {
    $("#tip").css({ display: "none" });
  });
     function onDelete(){
  $("#tip p").html("this file is deleted");
     $("#tip").removeClass("notification");
     $("#tip").addClass('error');
  $("#tip").css({ display: "block" });
  }
</script>
 </body>
</html>

highcharts bargarph

highcharts bargarph example

Highcharts is a JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers. this a great example on bargrap

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Dashboard
  </title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
  </script>
  <script src="http://202.65.133.69:8181/reports/scripts/highcharts/highcharts.js">
  </script>
  <script src="http://202.65.133.69:8181/reports/scripts/highcharts/exporting.js">
  </script>
  <style>
   .portfolio-item {
    margin: 0;
    padding: 0;
   }
   .btn {
    font-weight: 400;
   }
   .portfolio-item:hover .overlay {
    opacity: 1;
   }
   .portfolio-item .overlay {
    background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 0;
    transition: opacity 300ms ease 0s;
    vertical-align: middle;
    width: 100%;
   }
   .portfolio-item .item-inner {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #eee;
    margin: 0 20px 20px 0;
    padding: 10px 10px 0;
    position: relative;
   }
   .portfolio-item .overlay .preview {
    display: inline-block;
    margin-top: -20px;
    position: relative;
    top: 50%;
   }
   .fixed-panel {
    min-height: 200px;
    max-height: 200px;
    overflow-y: scroll;
   }
   .amd-summary-report
   {
    border-radius: 4px;
    cursor: pointer;
    margin: 9px;
    min-width: 200px;
    max-width: 300px;
    min-height: 200px;
   }
   .amd-summary-report-news
   {
    border-radius: 4px;
    cursor: pointer;
    margin: 5px;
    min-width: 200px;
    max-width: 600px;
    min-height: 200px;
   }
   .amd-summary-report .amd-summary-text
   {
    color: #808080;
    padding-left: 5px;
   }
   .amd-summary-report .amd-summary-value
   {
    color: #808080;
    font-weight: bold;
    font-size: 20px;
    text-align: right;
   }
   h5{
    color:green;
   }
  </style>
 </head>
 <body>
  <div class="row">
   <div class="col-lg-8">
    <div class="panel panel-default">
     <div class="panel-heading">
      <div id="barChart">
      </div>
     </div>
    </div>
   </div>
   <script type="text/javascript">
    $(function () {
     $('#barChart').highcharts({
      chart: {
       type: 'bar'
      }
      ,
      title: {
       text: 'District-wise trained students'
      }
      ,
      xAxis: {
       categories: ['Srikakulam', 'Vizianagaram','Visakhapatnam','East godavari','West godavari','Krishna','Guntur','Prakasam','Nellore','Chittor','Kadapa','Anantapur','Kurnool'],
       title: {
        text: null
       }
      }
      ,
      yAxis: {
       min: 0,
       title: {
        text: '',
        align: 'high'
       }
       ,
       labels: {
        overflow: 'justify'
       }
      }
      ,
      tooltip: {
       valueSuffix: ''
      }
      ,
      plotOptions: {
       bar: {
        dataLabels: {
         enabled: true
        }
       }
      }
      ,
      legend: {
       layout: 'vertical',
       align: 'right',
       verticalAlign: 'top',
       x: -40,
       y: 80,
       floating: true,
       borderWidth: 1,
       backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
       shadow: true
      }
      ,
      credits: {
       enabled: false
      }
      ,
      series: [{
       name: 'Trained',
       data: [945,1518,1275,7183,2872,7862,12181,4523,1873,6572,5515,2679,3595]
      }
         ,]
     }
            );
    }
     );
    $(function() {
     $('marquee').mouseover(function() {
      $(this).attr('scrollamount',0);
     }
            ).mouseout(function() {
      $(this).attr('scrollamount',5);
     }
             );
    }
     );
   </script>
   </body>
  </html>

push data into firebase

firebase push
Firebase is a mobile and web application development platform. Firebase is made up of complementary features that developers can mix-and-match to fit their needs.

just replace firebase url and type some data and click on submit. Use this to store mailing list from your blogger or  wordpress. you should have a submit button and input box add the cdn  in the head section and the  second script before the body section then once user enters their mail the document.getElementById() will catch and push to firebase json database.

<!doctype html>
<html lang="en">
 <head>
  <title>Document</title>
  <script src = "https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
 </head>
 <body>
  <input type="text" id="subscribe" />
  <input type="submit"  value="submit" onclick="savedata( );" />
  <script>
      <!--  replace with your firebae url -->
       var firebase_url= 'https://javafcm.firebaseio.com/';
  var ref = new Firebase(firebase_url);
  var subscriber= ref.child("emails");
  function savedata(){
     var email= document.querySelector('#subscribe').value;
     subscriber.push(email);
  }

  </script>
 </body>
</html>

show ,hide and toggle effects using jquery

show ,hide and toggle effects using jquery
This is a basic jquery for show() ,hide() and toggle() functions that are bind to onclick litsner . just copy and place the code inside some text editor and save as .html and you should be able to see the output.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Showing and Hiding an Element</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#show").click(function() {
                $("#theDiv").show("normal");
            });
            $("#hide").click(function() {
                $("#theDiv").hide("normal");
            });
            $("#toggle").click(function() {
                $("#theDiv").toggle("slow");
            });
        });
    </script>
    <style type="text/css">
        div#theDiv {
            width: 250px;
            height: 180px;
            margin: 10px;
            padding: 20px;
            background: blue;
            border: 2px solid black;
            cursor: pointer;
        }
        p, span {
            font-size: 16pt;
        }
        button {
            margin: 5px;
        }
    </style>
</head>
<body>
    <p>
        Showing and Hiding an Element</p>
    <div id="theDiv">
    </div>
    <button id="show">Show</button>
    <button id="hide">Hide</button>
    <button id="toggle">Toggle</button>
</body>
</html>

jquery image slider

jquery image slider
 jquery image slider basic slide image one by one  with the help of css animate tag using 
addClass() method.
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Image Rotator</title>
    <script type="text/javascript" src="../jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(function() {
            // create the image rotator
            setInterval("rotateImages()", 2000);
        });

        function rotateImages() {
            var oCurPhoto = $('#photoShow div.current');
            var oNxtPhoto = oCurPhoto.next();
            if (oNxtPhoto.length == 0)
                oNxtPhoto = $('#photoShow div:first');

            oCurPhoto.removeClass('current').addClass('previous');
            oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
                function() {
                    oCurPhoto.removeClass('previous');
                });
        }
    </script>
<style type="text/css">
#photoShow {
    height:400px;
    width:400px;
}
#photoShow div {
    position:absolute;
    z-index: 0;
}
#photoShow div.previous {
    z-index: 1;
}
#photoShow div.current {
    z-index: 2;
}
</style>
</head>
<body>
    <h1>
        jQuery-based Image Rotator</h1>
    <div id="photoShow">
        <div class="current">
            <img src="images/Grass.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
        </div>
        <div>
            <img src="images/Leaf.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
        </div>
        <div>
            <img src="images/Spring.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
        </div>
        <div>
            <img src="images/Water.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
        </div>
    </div>
</body>
</html>

jquery animate

jquery animate

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Animating an Element</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#right").click(function() {
                $("#theDiv").animate({ width: "500px" }, 1000);
            });
            $("#text").click(function() {
                $("#theDiv").animate({ fontSize: "24pt" }, 1000);
            });
            $("#toggle").click(function() {
                $("#theDiv").animate({ left: "500" }, 1000, "swing");
            });
        });
    </script>
    <style type="text/css">
        div#theDiv {
            position:relative;
            width: 250px;
            height: 180px;
            margin: 10px;
            padding: 20px;
            background: cyan;
            border: 2px solid black;
            cursor: pointer;
        }
        p, span {
            font-size: 16pt;
        }
        button {
            margin: 5px;
        }
    </style>
</head>
<body>
    <p>
        Animating an Element</p>
    <div id="theDiv">Animate Me</div>
    <button id="right">Grow Right</button>
    <button id="text">Big Text</button>
    <button id="toggle">Move Div</button>
</body>
</html>