Choosepizzi.net-logo

Andrea

info@choosepizzi.com

Insert date and time on top of our website with jQuery

This time i needed insert time and date on top of the header of a website.
i want to use jQuery and so i hase found an interesting plugin that is right for mine intent, show it ► here you can see an live example

.

here you can find the plugin and here you can download the example files.

Ok we  starts:

– First , starts with the .html file, ( i take the opportunity to test a plugin for code snippet that i installed on my wordpess :-)  )

[XHTML]<!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>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Time and Date in the Top of Our Page</title>
</head>
<body>
<div class="date">Date is :</div>
<div class="clock">Time is :</div>
<div id="header"></div>
<div id="contents">
<p>the first folder "images" contains the images for our
 portfolio for every element of our portfolio we need one
 image.jpg ( small )and one image_big.jpg the big one.the
 first folder "images" contains the images or our
portfolio for every element of our ortfolio we need one
 image.jpg( small )</p>
</div>
</body>
</html>[/XHTML]

the kernel of our html code is this :

<div class="date">Date is :</div>
<div class="clock">Time is :</div>
<div id="header"></div>
<div id="contents">
<p>the first folder "images" contains the images for our
 portfolio for every element of our portfolio we need one
 image.jpg ( small )and one image_big.jpg the big one.the
 first folder "images" contains the images or our
portfolio for every element of our ortfolio we need one
 image.jpg( small )</p>
</div>

with this  four divs we define the page structure:
div class="date" will contains the date value
div class="clock" will contains the date clock
div class="header" will contains the date header of our website
div id="contents" will contains the contents of our website

so at the moment we have on top date and clock, immediatly bottom , the header, and after our contents.

add links to
<link rel="stylesheet" type="text/css" href="style.css" /> add the CSS File
<script type="text/javascript" src="scripts/jquery-1.3.1.min.js"></script> add the JQuery script
JQuery <script type="text/javascript" src="scripts/jquery.jclock.js"></script> add the Clock JQuery script
immediatly after
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
now our code looks like:

[XHTML]<!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>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
 <!-- Link to CSS page -->
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="scripts/jquery-1.3.1.min.js">
</script>
<script type="text/javascript" src="scripts/jquery.jclock.js">
</script>
<title>Time and Date in the Top of Our Page</title> </head>
<body>
<div class="date">Date is :</div>
<div class="clock">Time is :</div>
<div id="header"></div>
<div id="contents">
<p>the first folder "images" contains the images for our
 portfolio for every element of our portfolio we need one
 image.jpg ( small )and one image_big.jpg the big one.the
 first folder "images" contains the images or our
portfolio for every element of our ortfolio we need one
 image.jpg( small )</p>
</div>
</body>
</html>[/XHTML]

it's time to copy and paste the two jQuery file that you find in the "scripts" folder inside the .zip example
( if you haven't downloaded the .zip you can do it here );

here there is an explaination about jquery.jclock.js  file
now open a new file and save it as style.css, ( you can save in the same folder as the project , as i have made with the example folder )
it's a realy simple CSS file :

[CSS]@charset "utf-8";
/* CSS Document */

body{
background-color:#666666;
}

.date{
float:left; /* insert date on left */
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#FFFFFF;
margin-top:-20px;
margin-left:5%;
}

.clock{
float:right; /* insert clock on right */
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#FFFFFF;
margin-top:-20px;
margin-right:5%;
}

#header{
width:90%;
height:200px;
margin:10px auto;
background-color:#333333;
margin-top:30px;
}

#contents{
background-color:#999999;
width:90%;
margin:10px auto;
}

#contents p{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#CCCCCC;
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
}[/CSS]

Last thing to do is insert a jQUery code that call a function for insert date and clock inside the right DIV.

that is the function :
[JS]
<script type="text/javascript">
    $(function($) {
      var options = {
        format: '%I:%M %p', // 12-hour with am/pm
      }
      $('.clock').jclock(options); // Insert the options that
// contains clock inside the DIV clock
//('div_in_witch_insert_clock_value').jclock(options_that
//_contains_the_value)
 var options3 = {
        format: '%d-%m-%Y ' // day-%month-%year
  }
      $('.date').jclock(options3);
    });
  </script>
[/JS]

and here is the complete final code :

[XHTML]
<!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>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="scripts/jquery-1.3.1.min.js">
</script>
<script type="text/javascript" src="scripts/jquery.jclock.js">
</script>
<title>Time and Date in the Top of Our Page</title>
<script type="text/javascript">
    $(function($) {
      var options = {
        format: '%I:%M %p', // 12-hour with am/pm
      }
      $('.clock').jclock(options);
	  var options3 = {
        format: '%d-%m-%Y ' // 24-hour
      }
      $('.date').jclock(options3);
    });
  </script>
</head>

<body>
<div class="date">Date is :</div>
<div class="clock">Time is :</div>
<div id="header"></div>
<div id="contents">
<p>the first folder "images" contains the images for our
 portfolio for every element of our portfolio we need one
 image.jpg ( small )and one image_big.jpg the big one.the
 first folder "images" contains the images or our
portfolio for every element of our ortfolio we need one
 image.jpg( small )</p>
</div>
</body>
</html>

[/XHTML]

show it ► here you can see an live example here you can find the plugin and here you can download the example files.

that's all

by by Pizzi
<code lang="lang">code</cc>