One of my favorite games is Popcap Games' Bookworm. There are two versions: An offline version, which is a windows executable, and an online version, which is a java applet.
A few weeks ago mostly as an exercise in javascript, I decided to see if I could create a javascript derivative of bookworm. The project gradually simplified itself into an on-line word-find puzzle creator, which I've posted here.
I think the word-find utility turned out OK, and at least on the newer PCs that I use at home and at work seems not to suffer from noticeable lag. While working on it, I learned several useful tricks for working with DIV elements, which I will share with you here:
A few weeks ago mostly as an exercise in javascript, I decided to see if I could create a javascript derivative of bookworm. The project gradually simplified itself into an on-line word-find puzzle creator, which I've posted here.
I think the word-find utility turned out OK, and at least on the newer PCs that I use at home and at work seems not to suffer from noticeable lag. While working on it, I learned several useful tricks for working with DIV elements, which I will share with you here:
- While in Firefox it is possible to use document.getElementsByName to get an array of all DIV elements with a particular name, this technique does not work in IE. Instead, a workaround is to use document.getElementsByTagName to get a list of all DIV elements in the document, then look at the name property for each DIV. There may be a more efficient way to do this, but for the moment it seems to work acceptably well with one caveat, which leads us to...
- While in Firefox it is possible to directly access the name property of a DIV, this does not work in IE. Instead, use div.getAttribute("name") to retrieve the name of the DIV.
- Elements inside a DIV are easily accessible by using the childNodes property. Let's assume here that a DIV contains two text boxes. This statement will set the value of the second text box to "Hello World!": oDiv.childNodes[2].value='Hello World!';
- To set the background color of a DIV, use the javascript backgroundColor property as in:
oDiv.style.backgroundColor ='#cccccc'; - Also useful, but not related to divs:
- Use the javascript parseInt function to force a value to be a number when adding or subtracting.
- Use the setInterval function when you need a timer. This function executes another javascript function at a set interval (in milliseconds) until you stop it by using the clearInterval function.
0 Comments:
Post a Comment
<< Home