Paul McFedries' Web Home


The cover of The Complete Idiot's Guide to Create a Web Page The CIGHTML Mailing List
Frequently Asked Questions - JavaScript

Main FAQ page

What is Dynamic HTML?

In the standard implementation, Dynamic HTML combines HTML, JavaScript, style sheets, and the Document Object Model (see http://www.w3.org/DOM/). The idea is that every aspect of the Web page becomes an "object" that can be manipulated (animated, changed, hidden, expanded, poked in the eye, or whatever) programmatically not only when the page loads, but even after loading in response to user input, browser version, time constraints, mouse position, etc. A good place to learn more about this is the Dynamic HTML Zone: http://www.dhtmlzone.com/. Note, too, that Netscape also implements a form of "Dynamic HTML," but it should be ignored by all as it's completely proprietary and has nothing to do with the W3C standard.

I don't want my site displayed in someone else's frames. Is it possible to prevent that?

Yes. Assuming your frames page is named "myframes.html", insert the following JavaScript into your page between the </HEAD> and <BODY> tags:

<SCRIPT LANGUAGE="JavaScript">
<!--
if (top != self)
    top.location.href="myframes.html"
//-->
</SCRIPT>

How do I display a scrolling message in the status bar of the browser?

I have a number of scripts that do this. See the following pages:

http://www.mcfedries.com/JavaScript/StatusBarMessage.asp
http://www.mcfedries.com/JavaScript/BouncingStatusBarMessage.asp
http://www.mcfedries.com/JavaScript/MultipleStatusBarMessages.asp
http://www.mcfedries.com/JavaScript/RandomStatusBarMessages.asp
http://www.mcfedries.com/JavaScript/CountStatusBarScrolls.asp

How do I use a form's Submit button to create a link to another page?

You could set up cute little mini-forms that consist of just a single BUTTON control. You add the JavaScript onClick attribute and use it to set the location property to the address of the Web page you want to load:

<FORM>
<INPUT 
   TYPE=BUTTON 
   VALUE="Paul's Place" 
   onClick="location='http://www.mcfedries.com'">
</FORM>
Create a separate mini-form for each link. Note, too, that you'll need to use a table if you want to line up the buttons side-by-each.

How do I display a message in the status bar of the browser when the user places their mouse over a link?

This is a variation on the mouseover theme:

<A 
   HREF="whatever.html" 
   onMouseover="self.status='This link takes you to my Whatever page'; return true;"
   onMouseout="self.status=''; return true;">
Click This!</A>

How can I display the current date/time on the page?

The following JavaScript displays the current date and time:

<SCRIPT LANGUAGE="JavaScript">
<!--
var d = new Date()
document.write(d)
//-->
</SCRIPT>
Here's a script that writes the current time in hh:mm:ss format:
<SCRIPT LANGUAGE="JavaScript">
<!--
var d = new Date()
var hh = d.getHours()
var mm = d.getMinutes()
if (mm < 10)
    mm = "0" + mm
var ss = d.getSeconds()
if (ss < 10)
    ss = "0" + ss
document.write("The time is now " + hh + ":" + mm +":" + ss)
//-->
</SCRIPT>
Here's a script that writes the current date in m/d/yy format:
<SCRIPT LANGUAGE="JavaScript">
<!--
var d = new Date()
var mth = d.getMonth() + 1
var day = d.getDate()
var yr = d.getYear()
document.write("The date is " + mth + "/" + day +"/" + yr)
//-->
</SCRIPT>

How can I make a drop-down list of links?

You can do this with JavaScript. I have a script that shows you how to set it up.

Is it possible to determine the resolution of the user's screen?

Yes, using JavaScript's screen.height property. In the following example, the script checks this property and then replaces the current page with another page that's optimized (presumably) for the user's screen resolution:

<SCRIPT LANGUAGE="JavaScript">
<!--

// Check for 640x480
if (screen.height == '480')
    location.replace('480.html')

// Check for 800x600
else if (screen.height == '600')
    location.replace('600.html')

// Check for 1024x768
else if (screen.height == '768')
    location.replace('768.html')

// Check for 1280x1024
else if (screen.height == '1024')
    location.replace('1024.html')

// Everything else
else
    location.replace('else.html')
//-->
</SCRIPT>

How do I display a message in the status bar of the browser?

In a JavaScript, you set the self.status property equal to whatever text you want in the status bar. For example, the following script displays a welcome message in the status bar when the page loads:

<SCRIPT LANGUAGE="JavaScript">
<!--
self.status = "Welcome to my Web site!"
//-->
</SCRIPT>

Is it possible to use JavaScript to take form data and record it on another page?

No, JavaScript can't create a page or add text to an existing page. This can only be done using CGI.

Can I use a sound file with a mouseover instead of an image?

To play a sound in JavaScript, you set the location.href property equal to the sound file you want to play, like so:

location.href="applause.au"

So with a mouseover, you'd tack this on to the end (note the semi-colon in between):

onMouseover="books.src='books-on.gif'; location.href='applause.au'"

What are cookies and how do I work with them?

A "cookie" is a tiny chunk of information that a web server stores on a Web surfer's computer. The idea is that this file contains data that the server wants to "remember" about the surfer. For example, if you're clicking through an online shopping mall, the server needs to keep track of which items you want to buy. If all the items are on a single page, the task is relatively easy (you just process the form data). However, most e-malls are spread across several pages, so it's much more difficult to keeps tabs on the items that have been selected. Instead, each time you select an item, the server stores the item's data in a special cookie file on your computer.

To use cookies, you need to do some programming. See my JavaScript cookies page.

Why does it take so long for my mouseover images to appear?

The first time you hover the mouse over an image, the browser has to download the new image from the server, which can take time. The easiest way to reduce that time is to use smaller images. If that's not practical, you can also "pre-load" all the images. This means that the images are loaded into memory when the page is loaded, so they appear immediately when the user places their mouse over the image. See my third mouseover tutorial to learn how to pre-load images.

Is there a way to automatically insert the date and time when the page was last modified?

Use JavaScript's document.lastModified property:

<SCRIPT LANGUAGE="JavaScript">
<!--
var d = new Date(document.lastModified)
document.write("Last modified on " + d)
//-->
</SCRIPT>
See also How can I display the current date/time on the page?

How do I detect which browser the user is surfing with?

You can do it with JavaScript. I have a tutorial on my Web site that shows you how to go about it.

Main FAQ page


Copyright © 1995-2008 Paul McFedries and Logophilia Limited