760 posts tagged “javascript”
2003
Better image rollovers
When browsing through other site’s source code, some of the ugliest HTML occurs when the site uses one of the most basic javascript effects: The image rollover. There are a myriad of these scripts available for free on the web, but as far as I can tell every single one of them requires event handling code to be added to the markup of the page.
[... 341 words]2002
Blockquote citations
Inspired by Adrian Holovaty, I spent an hour this morning getting dirty with the DOM in an effort to replicate his funky CSS blockquote citations effect but with links that you can actually click on. The resulting code is now active on this weblog—check the javascript out here.
[... 86 words]Javascript XML parser
I’ve added Dave Lindquist’s Javascript XML parser to my blog entry form using the code he posted in the discussion on webgraphics. It works an absolute treat—it even pops up an alert message telling me what is wrong with the post (usually ’End tag does not match opening tag’) and won’t let me submit the form until I have fixed the error. The actual XML parsing library is a truly impressive piece of work, despite the lack of documentation. Dave suggests that it is pretty much obsolete now that most modern browsers have a built in XML parser accessible through scripting, but his parser is easily fast enough for my purposes.
Optimising Javascript
A thread on SitePoint lead me to these two excellent tutorials: Javascript Optimisation and Tackling JavaScript strict warnings.
Blogchat rocks
I spent a while today over at Brent Ashley’s blog chatting away on BlogChat. BlogChat is Brent’s impressive DHTML chat system (backend in PHP, front end via JSRS) which allows anyone visiting his blog to talk to him (and other visitors) in real time, provided he is online to host the session. During the afternoon I got to talk to people from all over the world, all with similar interests because they all had the same taste in blogs. I am hoping to install a version of Brent’s system on this site in the not-too-distant future.
How Wolfenstein 5k works
I linked to the 5k entry Wolfenstein 5K the other day. Lee Semel, the author of the entry, has written an article describing how the impressive Javascript first person shooter works. The principle method used is the dynamic creation of XBM images using a 3D graphics technique known as raycasting (described in this tutorial). The author incorrectly states that Mozilla does not have the capacity to render XBMs—Wolfenstein 5K runs just fine in my version of Mozilla so I presume support has been added since he last tested it.
The 5k
The 5k is an annual competition in which entrants must create the most impressive web site in 5k or less. This year’s competition entries are now online and the quality of the entries is even higher than the previous two years. My initial favourite is Wolfenstein 5K, a texture mapped first person shooter implemented in 5119 bytes of cross browser javascript (I tested it in Mozilla and IE6, and the author claims it runs in Netscape 4).
Javascript select boxes
Via thelist: Javascript Selectbox Functions. Extremely useful demonstrations of how multi-line selectboxes can be used to create advanced user interface widgets with javascript, including tools to alter the order of items in a list and pass values from one selectbox to another and back again.
JSRS 2.1 released
Brent Ashley: JSRS2.1 Released (from June 10th—Internet Archive copy). JSRS is Javascript Remote Scripting, an incredibly powerful javascript library that allows DHTML pages to communicate with a web server without having to reload the page. This latest version fixes POST suport for Mozilla. The library opens the way for a whole host of interactive web applications without the normal limitations caused by the request-and-response nature of the web. Best of all, JSRS is cross platform (at least for Mozilla, NS4+ and IE4+).
[... 151 words]Tree from unordered list
The amazing tree generator (via webgraphics, who in turn got it from CSS Discuss). This is just the kind of DHTML I really like. Place a simple nested unordered list in your document and this external javascript can use the DOM to convert the list in to a hierarchical outline style tree, with each node expandable to show the child members. It looks great and works in both IE and Mozilla—I haven’t tested it in other browsers but it should degrade gracefully, leaving them with a static nested list.