CodingForums
Having trouble with scripting? Visit our help forum to get the answers you need.
Jump to...
-Free JavaScripts
-JS tutorials
-JS Reference
-DHTML/CSS
-Free applets
-Web Tutorials
-Link to Us!
- JavaScript Menus
- PHP Resources
- Hotels & Vacations
- Java Online Casinos
- Web hosting Search
Dynamically writing out html
Dynamically writing out html using JavaScript is very important-and powerful. With it, html turn dynamic. Instead of hard-coding lines of html onto your webpage, we can use JavaScript to intelligently write it out, changing the appearance of a html document dynamically. The basic concept of dynamically writing out html is amazingly simple:
- Chose any html line (ie: <img src="mygif.gif"> ) that you want to write out dynamically.
- Use the document.write() method of JavaScript to selectively write it out, instead of hard coding it into your document.
The concept may seem simple, and it is, but please realize that it is very useful and powerful! What you may have not realized is that, using JavaScript, you can dynamically write out any html code, yes, even the <html> tag itself!. All you need to know is html itself, and the document.write method of JavaScript to accomplish amazing things...
Lets have a look at an example that involves writing out the body tag dynamically. If you are using Microsoft Internet Explorer, you should be familiar with the concept "watermark" background. In essence, it is a background image of a document that does not tile itself beyond the first screen, and stays static when the rest of the document scrolls up and down. Using watermarked backgrounds, you can have one big image that sits behind the background, and will not repeat itself to fit the entire document, creating a very unique and often beautiful look. However, many people are reluctant to use watermark backgrounds, since when Netscape users drops by, they will see one large image that is eager to reproduce itself-very ugly and unprofessional. Lets see an example
Now, as you can see if you're using Netscape, the background tiles, which is really not that suitable, since its such a large "single" image. By using JavaScript, however, we can easily control that, by dynamically using different backgrounds, depending on the browser type. Before we do so, however, lets see the syntax of adding basic backgrounds, and watermarked backgrounds:
<body background="regular.gif">
//"regular" backgounds
<body background="watermark.gif" bgproperties="fixed">
//watermarked background. Works with Internet Explorer.
Ok, now that we know the syntax, we can easily use the "document.write" method to dynamically write out the background html code, depending on browser type:
<html>
<head><title>watermark improved</title></head>
<script>
document.write("<body background=")
if (navigator.appName=="Microsoft Internet Explorer")
document.write('"watermark.gif" bgproperties="fixed">')
else
document.write('"regular.gif">')
</script>
"
"
text here
"
"
</body>
</html>
Don't worry so much about how we tested for browser type, that's talked about in Lesson 10. Simply concentrate on how we dynamically wrote out the <body> tag itself, changing the way a document implements a background, depending on browser type.
No one is convincing you that you should now start to use watermarked backgrounds-I don't like to do so myself, since a watermarked background has to be almost as large as an entire screen to achieve its effects, which translates to long downloading time. The point here is that JavaScript adds a lot of versatility to your html document-the hell with static html tags, JavaScript's taking over!
-Tutorial introduction
-The date object
-Dynamically writing out html codes
-The setTimeout function
-Adding a live clock with the help of a form
-Example: To watermark or not to watermark?