Category Archives: DHTML Code

How to add a calendar (date picker) to your web applications

For almost any webapp, it's critical to be able to enter dates. But how do you ensure that people enter them in the right format? How do you make it look good?

The easiest answer to both of these questions is to use a calendar object of some sort. This not only can look great and restrict user input, but at the same time it makes your webapp far more usable, as now users can select the date in a quick-click, instead of having to type anything in manually.

Share

How to rotate an image or text with JavaScript & DHTML

So I need to rotate an image every few seconds on a homepage of a site I'm building. I looked around for some pre-built code that I could do this with, and I found a few functions. I picked the one I like the best, and I've modified it to my needs. This JavaScript code lets you define an array of HTML items (so you could use images, text, links, you name it!), and loop through the array. I added the variable for you to define how many seconds between rotation. Here's the JavaScript function, it will run automatically on the page load event. Place it in between your <head></head> tags.


<script language="JavaScript1.2">

var howOften = 2; //number often in seconds to rotate
var current = 0; //start the counter at 0
var ns6 = document.getElementById&&!document.all; //detect netscape 6

// place your images, text, etc in the array elements here
var items = new Array();
    items[0]="<img src='monkey.gif' border='0'>"; //an image
    items[1]="<a href='#'><img src='monkey.gif' border='0'></a>"; //a linked image
    items[2]="Text without a link";
    items[3]="<a href='#'>Text with a link</a>";
    items[4]="<a href='#'><img src='monkey.gif' border='0'> Text and image with a link</a>";

function rotater() {
    if(document.layers) {
        document.placeholderlayer.document.write(items[current]);
        document.placeholderlayer.document.close();
    }
    if(ns6)document.getElementById("placeholderdiv").innerHTML=items[current] 
        if(document.all)
            placeholderdiv.innerHTML=items[current];

    current = (current==items.length) ? 0 : current + 1; //increment or reset
    setTimeout("rotater()",howOften*1000);
}
window.onload=rotater;
//-->
</script>

Alternately, if you like simpler code, and you don't care about the .017% of users still using Netscape 6, you can use this JavaScript function for rotater:


function rotater() {
    document.getElementById("placeholder").innerHTML = items[current];
    current = (current==items.length-1) ? 0 : current + 1;
    setTimeout("rotater()",howOften*1000);
}

And here's the placeholder layers that you need to add to your HTML page to rotate the content in:


<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
Share

How to set an iframe to 100% height in FireFox

Here's the HTML code to implement if you'd like to embed another web page in an iframe on your web site, but would like it to appear as the entire page. This makes it hard to detect that the page is within an iframe. It's easy to do in IE, just set the iframe height and width to 100%. But this is invalid markup and won't work in FireFox. Here's the code to make it work, with CSS.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
 <head>
  <title>iframe example</title>
  <style type="text/css">
   html, body, div, iframe { margin:0; padding:0; height:100%; }
   iframe { display:block; width:100%; border:none; }
  </style>
 </head>
 <body>
  <div>
   <iframe src="http://example.org/" height="100%" width="100%">
    <p><a href="http://example.org/">example.org</a></p>
   </iframe>
  </div>
 </body>
</html>
Share

How to embed a .wmv file in a webpage

Ever wanted to have a .wmv file play automatically when a user visits your website? This is how you'd do it. Each embedded player instance on your Web page needs the object definition to clarify which version of the Windows Media Player will be called. This is identified by both the CLSID reference and the CODEBASE definition.

Here's the code to embed a Windows Media File into an HTML page:

Share

How to load XML data with JavaScript (AJAX tutorial)

The latest technology (or grouping of technologies) sweeping the web is AJAX (Asynchronous JavaScript And XML). This technology, using the XMLHttpRequest() object to retrieve a piece of XML in the background, and load its contents into the web page dynamically, thus creating a constantly refreshed Dynamic HTML (DHTML) interface.

You can make very complication AJAX code, but this is the bare-bones code to simply grab a node from the XML (I'll use a total sales revenue number as the target), and dynamically modify the page contents to display it on the page in a DIV with the ID "salesTotal".


function getSalesTotal() 

{
	url = "xml_sales_total.php";
	// AJAX code for Mozilla, Safari, Opera etc.
	if (window.XMLHttpRequest) {
		  xmlhttp = new XMLHttpRequest();
		  xmlhttp.onreadystatechange = xmlhttpChange;
		  xmlhttp.open("GET", url, true);
		  xmlhttp.send(null);
	}
	// AJAX code for IE
	else if (window.ActiveXObject)  {
	          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			if (xmlhttp)
			{
				xmlhttp.onreadystatechange = xmlhttpChange;
				xmlhttp.open("GET", url, true);
				xmlhttp.send();
			}
	  }
}

function xmlhttpChange()
{
	//create XMLDOM object if xmlhttp shows "loaded"

	if (xmlhttp.readyState == 4) {
	  // if "OK"
	  if (xmlhttp.status == 200) {
			var salesTotal = xmlhttp.responseXML.getElementsByTagName("salesTotal");
			if (browser == "Internet Explorer") { 
				salesTotal = salesTotal[0].firstChild.data;
			} else { 
				salesTotal= salesTotal[0].firstChild.data;
			}	
			document.getElementById("salesTotal").innerHTML= salesTotal; 			
	  } else {
		//alert("There was a problem retrieving the XML data");
	  }
      }
}

timeout = setInterval("getSalesTotal()", 1000);
Share