Code: Javascript

Here I'll plonk (possibly) useful bits of code developed for various purposes professionally or personally.

Javascript

Javascript is notoriously non-standard (the nice thing about standards are there are so many of them...). There are, however, some things that can only be done client-side so javascript is then the obvious choice. None of these are earth shattering - just useful bits...

Page Padding

Good Morning|Afternoon|Evening

Page Padding

The following code tries to determine the height of the client window and pad the page length to that height by inserting a table which is the difference high (e.g padding table height = client height - content height [-15 fudge factor]). The result is you get a full length page even with a short content length - e.g my contact page

Tested in latest Firefox and IE 6 but nothing else (May2006).

The 'fudge factor' (-15 referred to earlier) depends on the height of your standard footer as the padding will normally be put in before that and has to take it into account - so -15 is about right for a 1 line high footer (this site uses -40 as the footer is about 3 lines all up).

Has been adapted to both tabled and tableless CSS layouts. The trick when using with tableless is:

• to use a <br clear="all"/> before this script to force the client to establish where it is on the page, and
• if you're using background images or colours you can wrap the script in a div and make sure its, and the padding tables', background colours are set to transparent

<script type="text/javascript" language="javascript">
<!-- // this script pads the content length to fill the window
// code adapted from http://www.quirksmode.org/viewport/compatibility.html
var pheight;
// all but Explorer Mac
if(document.body.scrollHeight < document.body.offsetHeight) 
  {
   pheight = document.body.scrollHeight;
  }
else // Explorer Mac;
//would also work in Explorer 6 Strict, Mozilla and Safari
 {
 pheight = document.body.offsetHeight;
 }
var wheight;
 if (self.innerHeight) // all except Explorer
 {
 wheight = self.innerHeight;
 }
 else if(document.documentElement && document.documentElement.clientHeight)
 // Explorer 6 Strict Mode
 {
 wheight = document.documentElement.clientHeight;
 }
 else if (document.body) // other Explorers
 {
  wheight = document.body.clientHeight;
 }
var diff = wheight - pheight-15; // nipping 15 off seems to work nicely
if (diff <= 0){diff = 0;} // zero it out if below 0
//alert("ClientHeight: "+wheight+" Scrollheight:"+pheight+" Diff: "+diff);
document.write('<table width="775" align="center" height="');
document.write(diff);
document.write('" summary="this table is for footer padding layout"')
document.write(' bgcolor="transparent"><tr><td></td></tr></table>');
// -->
</script>

Good Morning|Afternoon|Evening

This is a nice easy one if you're cutting your teeth on javascript. Gets the client local time and says something nice based on the time of day...

<script language="JavaScript" type="text/JavaScript">
   <!-- //
   document.write("Good ");
   currentdate = new Date();
   currenthour = currentdate.getHours();
   if(currenthour >= 0 && currenthour < 12){document.write("morning");}
   if(currenthour >= 12 && currenthour <= 17){document.write("afternoon");}
   if(currenthour >= 18){document.write("evening");}
   // -->
 </script>