Friday, 5 July 2013

Digital Clock with jquery and CSS having sunrise and sunset features

This code is for a 24 hour digital clock with sunrise and sunset feature (built using jquery and CSS)

How To Use

The example given below is self explanatory you just have to give the sunset,sunrise,moonrise nd moonset time to the plugin.Suppose the sunset time is 18:00 and sunrise is 06:00 ,moonrise is 20:00 and moonset is 04:00.Then use like
$(".clock").clock({"sunrise":6,"sunset":18,"moonrise":20,"moonset":4});
Note:Make sure that a div tag with class clock exist in your DOM before the .clock() method is called

Full Code

First of all download the two images into the same directory where your jquery code is and rename the sun as sun.png and moon moon.png.
Sun
Moon
Code of the jquery plugin .Just put this code in your page(best in head tag) and yes don't forget to include the jquery library
<script> (function($) {$.fn.clock=function(options) { var defaults={}; var arg=$.extend(defaults, options); return this.each(function() { var $this=$(this); $this.css({"position":"relative","overflow":"hidden","border-radius":"10px","width":"200px","height":"100px","text-align":"center","line-height":"100px"}); width=$this.width(); height=$this.height(); var blue,col; var sun=$("<img src='sun.png' />").css({"position":"absolute","top":-100}).appendTo($this); var moon=$("<img src='moon.png' />").css({"position":"absolute","top":-100}).appendTo($this); $("<div id='time'>").css({"position":"relative","font-family":"Calibri","font-size":"40px","color":"#fff"}).appendTo($this); sdo(); setInterval(sdo,60000); function sdo() { var d = new Date(); hour=d.getHours(); minute=d.getMinutes(); $this.children("#time").html((hour<10?"0":"")+hour+':'+(minute<10?"0":"")+minute); if(hour==(arg.sunrise-1)) { blue=60+parseInt(3.3*minute); col=0; } else if(hour>=arg.sunrise&&hour<=arg.sunset) { if(hour==arg.sunrise) { blue=255; col=parseInt(3*minute); } else if(hour==(arg.sunset-1)) { blue=255; col=147-parseInt(3*minute); } else if(hour==arg.sunset) { col=0; blue=255-parseInt(3.3*minute); } else { blue=255; col=147; } angle=3.14/180*((minute+(hour-6)*60)*0.346-45); xco=width/2-30+80*Math.cos(angle); yco=height-50-60*Math.sin(angle); sun.css("left",xco).show(); sun.css("top",yco); } else if(hour>=arg.moonrise||hour<=(arg.moonset-1)) { ho=(hour<=3?(24+hour):hour); angle=3.14/180*((minute+(ho-20)*60)*0.5625-45); xco=width/2-30+80*Math.cos(angle); yco=height-50-60*Math.sin(angle); moon.css("left",xco).show(); moon.css("top",yco); blue=60; col=0; } else { blue=60; col=0; } $this.css("background-color","rgb("+col+","+col+","+blue+")"); } }); }; })(jQuery); </script>

Demonstration

May be here you are having a box around moon and sun but that's the problem of this blogspot.com, once you will download it in your computer it will be good and will look somewhat like this
OR

Saturday, 8 June 2013

Disable back button of your browser using javascript(Cross browser compatible)

It is an interesting browser hack and which uses hash values to prevent the default functionality of browser back button.But it and can be very annoying to use in your website and may be your user can dump your website . So please don't use that until if you have a really valid reason for it.

How To

Add the line
window.location.hash="no-back-button"; 
 just at the top of your script .It set the hash value to 'no-back-button' at the time of page load.

Note: Since Javascript is loaded after window so you can add it either directly or using onload events.

Add one more line
window.onhashchange=function(){window.location.hash="no-back-button";}.
This line is the main worker of this program.

  Working

When a user clicks back button first time then the hash value set by first line of Javascript code gets changed triggering the onhashchange event written in second line.And then the function written in second line again sets the hash value to 'no-back-button' making the situation same as before when the user didn't click any button.

Full Code

 <script>
window.location.hash="no-back-button";
window.location.hash="Again-No-back-button";//again because google chrome don't insert first hash into history
window.onhashchange=function(){window.location.hash="no-back-button";}
</script>
Note :
  • It doesn't mutilate browser history.
  • For Internet Explorer 9 put meta tag <meta http-equiv="X-UA-Compatible" content="IE=8"> either before or after head tag to make it work.