Update! Check out CSSresetr for an easy way to test and download the best reset styles for your next design.

Using CSS to style semantically meaningful (X)HTML markup is an important key to modern web design practices. In a perfect world, every browser would interpret and apply all CSS rules in exactly the same way. However, in the imperfect world in which we live, quite the opposite frequently happens to be the case: many CSS styles are displayed differently in virtually every browser.

Many, if not all, major modern browsers (e.g., Firefox, Opera, Internet Explorer, Netscape, et al) implement their own generalized CSS rules, which often conflict with designer-applied styles. Other browsers fail to implement properly various CSS rules, making a mess of pages that happen to display perfectly in other browsers. Even worse, some browsers completely ignore specific aspects of CSS altogether, entirely ignoring widely accepted CSS attributes and properties.

Continue Reading

WordPress users employing permalinks via htaccess to optimize their dynamic URLs transform complicated-looking links such as:

http://example.com/blog/index.php?page=33

..into search-engine friendly links such as:

http://example.com/blog/post-title/

Every rewritten URL relies on a common set of htaccess rules to transform the links. The htaccess rules for all WordPress permalinks look like this for root WP installations:

# BEGIN WordPress
<ifmodule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</ifmodule>
# END WordPress

..and like this for subdirectory WP installations:

Continue Reading

In this post I have assembled a concise collection of conforming, bare-bones document templates for the following doctypes:

Document Templates

XHTML 1.0

• XHTML 1.0 Strict
• XHTML 1.0 Transitional
• XHTML 1.0 Frameset
• XHTML Basic 1.0

XHTML 1.1

• XHTML 1.1
• XHTML Basic 1.1

HTML 4.01

• HTML 4.01 Strict
• HTML 4.01 Transitional
• HTML 4.01 Frameset

Continue Reading

HTML 5, also known as Web Applications 1.0, provides new markup elements that will change the way you design your web pages. The new elements replace commonly used divisions in web documents, facilitating an even greater degree of separation between structure (HTML) and presentation (CSS). Indeed, in many documents, the new elements will structure the document while providing enough hooks to render obsolete previously required divisions, classes, and identifiers. Let’s take a look..

New Structural and Semantic Elements in HTML 5

Structural Elements

The new structural elements in HTML 5 consist of the following:

• header
• section
• article
• nav
• footer

Continue Reading

Virtually every article written here at Perishable Press requires at least one or two “special” characters. Some of these characters — such as quotation marks, hyphens, and dashes — are very common, while others — such as the copyright symbol, bullet, and arrow — happen less frequently. As a blogger, I find myself repeatedly using a select handful of very common special characters. Very rarely do I ever find myself blogging a latin “Ä” (i.e., capital letter “A” with a diaeresis). To save time and effort, I need a quick reference that targets only the characters I find useful as a blogger. With that in mind, I assembled the following table of essential Unicode (UTF-8 encoded) characters ¹ for bloggers:

Continue Reading

Even with all the fancy-pants new features found in Windows XP and now Vista, Microsoft Windows 98 (Second Edition) remains our favorite Windows-flavored operating system. We love it so much, we still use it on one of our trusty laptops. Over the years, we have discovered several very useful functions available via the command line or even the “Run” prompt (Start → Run...). Anyway, without spending too much time researching or explaining these wonderful tools, we figured posting the information online may prove beneficial at some point in the future. So, without further ado, we present this working repository of helpful MS run commands:

Continue Reading

The target attribute for anchor elements (<a>) specifies the location in which the referenced document should load. For example, to open a link in a new window, we would use a target value of _blank. Although this is a commonly employed technique, the target attribute has been deprecated by the W3C and is not valid (X)HTML. Regardless, the target element remains a useful tool for practicing designers and developers. Here, we present the attribute values for the target element:

Continue Reading

URL’s frequently employ potentially conflicting characters such as question marks, ampersands, and pound signs. Fortunately, it is possible to encode such characters via their escaped hexadecimal ASCII representations. For example, we would write "?" as "%3F". Here are a few more URL character codes (case-insensitive):

Continue Reading

Note: This article assumes a basic familiarity with the DOS command prompt, and is somewhat of a continuation of our previous article on DOS, Basic DOS Commands. Here, we are exploring a few of the more interesting commands available via the DOS command prompt. For a more complete reference please consult the Windows Help file (Windows XP) by entering

hh.exe ms-its:C:\WINDOWS\Help\ntcmds.chm::/ntcmds.htm

at the command line prompt (or via the Start > Run... dialogue box). For a brief overview of essential DOS commands, characters, devices, and variables, check out DOS Fundamentals.

Continue Reading

A brief overview of essential DOS commands, characters, devices, and variables

Ahh, the fun I have at work while experimenting with the command line. I will be the first to admit that I understand very little of DOS, especially when considering the scope of its functional capacity. Nonetheless, I am taking the time to chronicle a few interesting DOScoveries here in this article, as well as in at least a couple of others (see related articles section at the end of this article).

The first thing that I should mention is that there are at least several different entities commonly referred to as "DOS". Windows 98SE and earlier run on the MS-DOS kernel, which is directly accessible by pressing the F8 key repeatedly (after the beep) during computer startup. Windows 2000, Windows XP, and beyond do not run on the MS-DOS kernel, but do provide two MS-DOS-like programs, the command prompt Cmd.exe, and the MS-DOS emulator Command.com. For more information, you may want to explore the difference between Cmd.exe and Command.com before diving in..

Continue Reading

Embed Windows Media Player via the object tag

Here is the general format for including .wmv files in web pages:

<object type="video/x-ms-wmv" data="http://www.domain.com/path/to/winmovie.wmv" width="340" height="280">
  <param name="src" value="http://www.domain.com/path/to/winmovie.wmv" />
  <param name="controller" value="true" />
  <param name="autostart" value="true" />
</object>

Continue Reading

After digging through the WordPress source code, I stumbled upon this very useful JavaScript method for auto-focusing form elements upon page load. Here is the JavaScript code (place within the document head):

<script type="text/javascript">
   function formfocus() {
      document.getElementById('element').focus();
   }
   window.onload = formfocus;
</script>

…and corresponding (X)HTML markup (abbreviated for clarity):

<form>
   <input id="element" />
   <input />
   <input />
</form>

In this example, the first form element (identified by id="element") will be automatically focused when the document loads, thus facilitating the process of entering data in the form. This technique would serve users well on login pages (wink, wink;), or anywhere forms are required on a repetitive basis.

Update: [ May 29th, 2007 ] - Here is a similar method of auto-focusing a form element with just a splash of JavaScript. Place the following code into an input element that contains a predefined field value and watch in amazement as the text string is automatically highlighted upon user focus. Here is the JavaScript snippet:

onfocus="this.select();"

..and here is a “live” example:

..and corresponding code:

<form action="http://domain.com/" method="post">
   <div>
      <input onfocus="this.select();" value="Select this input element and this text will be highlighted.." size="55" type="text">
   </div>
</form>

DOS (Disk Operation System) is a tool which allows you to control the operation of the IBM PC. DOS is software which was written to control hardware. Here is a summary of some essential DOS commands.

Continue Reading

Welcome to Perishable Press! This article explains several methods for opening multiple frames with a single link. For more excellent (X)HTML information, check out the (X)HTML tag archive. If you like what you see, I encourage you to subscribe to Perishable Press for a periodic dose of online enlightenment ;)

Opening Multiple Frames with One Link

Method 1:

The first method of targeting multiple frames involves replacing either the entire frameset (via target="_top") or a subset of frames (via target="subset"). For example, any number of frames may be updated with a single link if that link targets a new frameset containing all of the new frames. Likewise, multiple frames within a nested frameset may be updated by replacing the nested frameset itself. This method works well when many frames need updating. In the following example, the nested frameset, "nested-frameset.html", contains multiple frames that need updating when a single link is clicked. When this happens, the "dynamic" frame is refreshed with multiple new frames, while the "static" frame remains constant. Using this method, virtually any combination of frames or framesets may be updated with a single link.

<frameset cols="*,3*">
   <frame src="static-content.html" name="static">
   <frame src="nested-frameset.html" name="dynamic">
</frameset>

Method 2:

The second method for targeting multiple frames employs JavaScript’s "onClick" function. With this method, the initial frame (or frameset) is updated via the link’s href attribute, while the additional frame(s)/frameset(s) is updated via the link’s onClick attribute. This method requires JavaScript, but is much less convoluted than the method previously discussed. In the following example, when the link is activated, "first-frame" will be updated with first-frame.html, while "second-frame" will be updated with second-frame.html:

<a href="/path/first-frame.html" 
 target="first-frame" title="Update frames" 
 onClick="top.second-frame.location='/path/second-frame.html';">
   Click here to update both frames.
</a>

Method 3:

Our third method of opening/updating multiple frames with a single click utilizes a simple JavaScript function. This method operates through a function call placed in either the href or onclick attribute of the anchor (<a>) element. Upon activation, the JavaScript function proceeds to open simultaneously the specified links. Implementing this technique is straightforward. Given the following frameset:

<html>
 <head>
  <title>The Frameset</title>
 </head>
 <frameset cols="50%,50%">
  <frame src="page-01.html" name="frame-one" />
  <frame src="page-02.html" name="frame-two" />
 </frameset>
</html>

…with the following code present in page-01.html, which is displayed as frame-one:

<html>
 <head>
  <title>Frame One</title>
  <script type="text/javascript">
   <!--//--><![CDATA[//><!--
    function openframes() {
       parent.frame-one.location="page-03.html";
       parent.frame-two.location="page-04.html";
    }
   //--><!]]>
  </script>
 </head>
 <body>
  <p>
   <a href="javascript:openframes();" title="Open two links..">
    Open "page-03.html" into "frame-one" and "page-04.html" into "frame-two"
   </a>
  </p>
 </body>
</html>

With the previous code in place, the broswer window will display two frames of equal width. In the left frame, there will be a link that, when clicked, will open two links at the same time. Specifically, when the link is clicked, a file named “page-03.html” will replace the contents of the left frame (”frame-one.html”) while a file named “page-04.html” will replace the contents of the right frame (”frame-two.html”). To setup additional frames to open/update upon link click, simply add the corresponding lines to the openframes() function by emulating the existing code pattern. For example, to add another three frames to the function:

function openframes() {
   parent.frame-one.location="page-03.html";
   parent.frame-two.location="page-04.html";
   parent.frame-thr.location="page-05.html";
   parent.frame-for.location="page-06.html";
   parent.frame-fiv.location="page-07.html";
}

Finally, to account for users without JavaScript, we could call the function via onclick attribute, include an alternate frameset or page via the href attribute, and throw in a return false declaration for good measure:

<a href="../no-javascript.html" onclick="javascript:openframes();return false;">
   Open "page-03.html" into "frame-one" and "page-04.html" into "frame-two"
</a>

Beyond frames..

Using the onClick attribute within links, it is possible to target more than just frames. For example, Monzilla’s Information theme for WordPress features subpanels that "pop" open to reveal various types of content. To improve usability, we wanted certain panel links to open their panels while simultaneously repositioning the top of the panel with the top of the browser. This was easily accomplished with an onClick attribute in each of the panel links¹.

References

• ¹ To check out the "popping" subpanels used in the Information theme, click here, scroll down near the bottom of the page, and click on either the "nonsense" or "details +" tabs. The single link click should result in two events happening simultaneously: the subpanel will pop open and the subpanel will align its top edge with the top of the browser window.

There are currently three formats for expressing date/time in Greenwich Mean Time (GMT). All examples represent the date, "July 04, 2050". The time for all three formats is expressed as "hour:minutes:seconds".

Here is the preferred, standard format¹ for the Internet. This format is defined by RFC 1123 (updated from RFC 822):

# RFC 1123 Standard GMT Format
Mon, 04 Jul 2050 07:07:07 GMT

The programming language C uses the ANSI standard format¹ in its asctime():

# ANSI Standard GMT Format
Mon Jul 4 07:07:07 2050

The RFC 850 format² is now obsolete (RFC 1036) and should not be used:

# RFC 850 Standard GMT Format [obsolete]
Monday, 04-Jul-50 07:07:07 GMT

¹ Weekday abbreviations: Mon, Tue, Wed, Thu, Fri, Sat, Sun
Month abbreviations: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec

² Weekday abbreviations: Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday
Month abbreviations: January, February, March, April, May, June, July, August, September, October, November, December

References

• Greenwich Mean Time Website
• Official US Time
• Time Zones

Search engines loathe crawling through convoluted lines of code. Oceans of complex JavaScript scare away the priceless indexing and archiving efforts of most major search engines, which will generally abort a crawl upon encountering such mess. The good news is that search engines actually do not deploy JavaScript, so it is possible to use JavaScript to hide those miles of messy code by using the fundamental document.write function.

Place this function in an external JavaScript file, “navmenu.js”:

function navMenu() {
   document.open();
   document.write("<div>Convoluted code goes here.</div>");
   document.close();
}

Link to the external JavaScript file by placing this code in the document head:

<script src="js/navmenu.js" type="text/javascript"></script>

Finally, call the function by adding this to the target location within the document body:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

   navMenu();

//--><!]]>
</script>

To execute WordPress functions in an external directory (i.e., outside of the WordPress install directory), it is necessary to include a call to “wp-blog-header.php” at the top of the external file.

For example, if your WordPress-powered blog is located in a subdirectory called “blog” and the external file is in the domain root (e.g., the external file is located directly in http://domain.com/), add the following code to the top of the external file:

<?php require_once("./blog/wp-blog-header.php"); ?>

This may be generalized by writing:

<?php require($_SERVER['DOCUMENT_ROOT'].'/blog/wp-blog-header.php'); ?>

To help maintain consistency when developing new CSS-styled websites, we have created a complete CSS template file. The file contains every HTML/XHTML tag known to man. This includes tags such as BASEFONT and CENTER, which have been deprecated; tags such as COMMENT and MARQUEE, which are exclusive to Internet Explorer; tags such as SPACER and SERVER, which are exclusive to Netscape Navigator; and even tags such as !DOCTYPE and BASE, which are included merely for the sake of completeness. As CSS selectors, the tags are (almost all) empty, just waiting to be filled with declarations, properties, and values.

Tags that have been deprecated, or that are exclusive to a specific browser, are indicated as such using the following syntax:

|x = deprecated
|e = explorer only
|n = navigator only

These symbols are written next to their associated tag/selector such as shown in the following examples:

basefont|x {}
marquee|e {}
spacer|n {}

Besides individual selectors, the template file also includes several common selector combinations such as various list selector combinations, image-link sets, and series sets like h1,...h6. Additionally, the skeleton.css file provides several common classes, such as .show, .hide, and .clear, and even includes the very popular and versatile .clearfix hack, which is actually like three or four hacks rolled into one. The file is a paltry 4KB in size and free for download via the link below. Leave the credit at the bottom of the file intact and you are free to use the contents in any way you see fit!

Note: This free CSS template file, skeleton.css, is a continually evolving resource. Please share any valuable insights or potential improvements with everyone with a comment or email.

Download the Complete CSS Template File [ .css file | ~4KB | 3467 downloads ]

I found this interesting:

• Enlighten
• Encode
• Decode

Apparently, I am defined as:

GFA d-@ s:- a C++ U@ P@ L@ E@ W+++ !N !o K--? w@ O@ M@ !V PS@ PE@ Y@ PGP@ t !5 !X R@ tv-- b+ DI !D G@ e+ h@ r+++ y+++

Earlier this year, we decided to implement the much-hyped Google Analytics visitor-tracking and optimization tool. The free service offers enterprise-level statistics capabilities and provides “high-end web analytics” and works with or without Google AdWords. Sounds great, however the service is available through invitation only. Skeptical that we would ever hear anything, we decided to submit a request anyway.

Several months later, after having completely forgotten about signing up for GA (Google Analytics), we received our official GA invitation and immediately began the registration process. The invitation included a “secret code” and required us to create a free Google account, which enables access to a variety of Google services, such as “Analytics, AdWords, Google Groups and [a] personalized Google home page.” After verification of the account email, we were ready to register for GA.

GA registration involves entering your secret password some personal information. I hope they were not looking for any authentic personal data. After floating the password, you’re in the business. The final steps include dropping the following lines of JavaScript into any pages that need analyzing:

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
   _uacct = "UA-xxx777-1";
   urchinTracker();
</script>

The JavaScript code should be placed near the end of the document source code, preferably just before the <body> tag. Once the script is in place and online, login to your GA account and activate the target page(s) via the “validate tracking” tool. Once this happens, Google Analytics begins tracking, analyzing, and reporting visitor activity at your website. Nice. There are now a plethora of high-end statistics tools and resources at your command.

After successfully setting up GA for Perishable Press, we immediately requested an invite for Monzilla Media. Apparently, it is only a matter of time.

Improve accessibility by adding title attributes to your WordPress userspace.

Note: This article applies specifically to WordPress 2.0.2, but may be generalized to any WP 2.0+ version.

By default, WordPress navigation links omit the title attributes for both page and post views. Title attributes for links provide additional information that can improve the accessibility of your website. This is especially true when images or text symbols exclusively are used for navigation.

To add title attributes to WordPress page-view links (e.g., links for index, archive, and category views), open the file wp-includes/template-functions-links.php and find the functions previous_posts_link (line #494) and next_posts_link (line #459).

Within each function, replace the following line:

echo '">'. preg_replace('/&([^#])(?![a-z]{1,8};)/', '&#038;$1', $label) .'</a>';

..with this:

echo '" title="EDIT THIS">'. preg_replace('/&([^#])(?![a-z]{1,8};)/', '&#038;$1', $label) .'</a>';

Next, replace the EDIT THIS text in each function with “Previous Posts” and “Next Posts”. Keep in mind the reverse chronological order by which these links navigate. Remember to check a few page views and then you are done.

Now, to add the title attribute to navigation links within individual post views. Open the same file as above, wp-includes/template-functions-links.php and find the functions previous_post (line #336) and next_post (line #357).

Within each function, replace the following line:

$string = '<a href="'.get_permalink($post->ID).'">'.$next;

..with this:

$string = '<a href="'.get_permalink($post->ID).'" title="EDIT THIS">'.$next;

Next, replace the EDIT THIS text in each function with “Previous Post” and “Next Post” respectively. Remember to check a few post views and then you are done.

I recently enabled the permalinks feature for a fresh WordPress 2.0.2 upgrade. The process required several hours of research and approximately 90 minutes to fully implement. This brief article summarizes the process and applies to at least the following setup:

1. WordPress 2.0.2
2. Apache Server with mod_rewrite enabled
3. The ability to access/modify your .htaccess file(s)
4. You have decided to use the /%year%/%monthnum%/%day%/%postname%/ permalink format (actually, any format will work; simply swap your preferred format for the one mentioned here)
5. You may also be using any of the plugins listed in the dungeon (actually, most plugins are compatible — only a few cause problems)

Permalinks are important for several reasons: search engines love them, people can understand them, and links (theoretically) become permanent because of them. Plus, all of the cool kids are using them, so you should too. They really add the finishing touches to your site and provide a sense of unity and sophistication that the “http://ugly-domain.com/blog/index.php?page_id=66” format just can’t match.

Before you begin any changes it is highly recommended to backup everything: WordPress files, database(s), notes, edited files, image files, htaccess file(s), etcetera. Just a friendly reminder.

Then, if you are seriously considering jumping into permalinks, do some research. Search Google, Ask, WordPress, and dig through a few blogs for terms such as “WordPress permalinks”, “permalink tips”, “permalink guide”, etc. As you learn, copy and paste any important notes, code, or links that seem important and may be useful later on. You may also wish to anticipate certain scenarios by searching for “permalink nightmare” or “permalink success”, for example.

Now that you have studied the process, you realize that certain conditions produce errors or other problems. For example, if you are planning on using the %postname% in your permalinks, very long post titles may cause problems in emails, posts, and chats. Although such an issue may be fixed after the fact, it is wise to scan through your posts and edit the post slug of any posts with excessively long titles. Regardless of the post title name, it is the post slug that is used when implementing the %postname% in permalinks. If possible, I recommend manually checking every post title and slug and editing (if needed) with permalinks %postname% in mind. Don’t forget to check your pages as well.

Now for the fun stuff. Well, almost. WordPress 2.0.2 has a problem writing to .htaccess files even when their CHMOD is set to 666 or 777. To fix this, open wp-includes/vars.php and replace the following line of code:

$is_apache = ( strstr($_SERVER['SERVER_SOFTWARE'], 'Apache') || strstr($_SERVER['SERVER_SOFTWARE'], 'LiteSpeed') ) ? 1 : 0;

..with this one:

$is_apache = 1;

This is a change that should be needed only during the establishment of permalinks. After you have permalinks flying high, you should revert the previous replacement and restore order to the galaxy.

Now create your htaccess file(s). Open a text editor and save a blank document as “htaccess” in the root of your site. Then rename it to “.htaccess” (i.e., put a dot before the name). Upload this file and change its CHMOD setting to 666. Again, this change should only endure until permalinks are functioning. So remember to change it back to its default setting (typically 644).

Okay, get ready to party. First restart your computer (for good measure). Then, open your WordPress Admin and navigate to the Permalinks submenu (under Options). Read everything carefully and then select the “Date and name based” option under the “Common options” menu. Make sure that WordPress automatically added /%year%/%monthnum%/%day%/%postname%/ (or that of your preferred format) to the “Custom structure” field. Now click the “Update Permalink Structure” button and wait for the “success” message to appear. At this point, permalinks should work throughout your WordPress-powered website.

Almost done. Check everything. First download your htaccess file and check that WordPress automatically added the htaccess directives required to create permalinks:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /press/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /press/index.php [L]
</IfModule>
# END WordPress

If you don’t see it, then copy and paste it into your htaccess file manually. If your htaccess file is blank, permalinks will not work. Once your htaccess file is good to go, clear your browser cache and surf your entire site — pages, posts — everything. Check internal links and external links. If possible, check links pointing to your site from elsewhere online. Every page or post should now be addressed by its corresponding and unique permalink, as displayed in your browser’s address field. If all is looking smooth, great. Remember to check the functionality of everything: commenting, posting, tagging, and editing posts. Also check your calendar, archives, search function, different themes, and plugin features (if any).

One problem I encountered (besides those inherently addressed in this article) involved an unwanted index.php statement included before the date in all permalinks. To fix this, you must access the wp_options table in your WordPress database. Once there, find the index field called option_name and search for the record rewrite_rules and clear the contents of the option_value. This will force WordPress to generate new permalink values based on current user settings. Read more via this thread at the WordPress Support Forums.

Don’t forget to reverse any changes made during the permalink conversion process.

References & Resources

• The htaccess Rules for all WordPress Permalinks
• WordPress Permalinks
• Enforce www-Preference
• WP 2.0 Plugin Compatibility
• A mod_rewrite Tutorial

To add Lightbox functionality to any single image:

1. Add rel="lightbox" to the anchor tag.
2. Add a title="" attribute to the anchor tag.
3. Add an alt="" attribute to the image tag.

To add Lightbox functionality to any series of images:

1. Add rel="lightbox[value]" to the anchor tag of each image.
2. Add a title="" attribute to the anchor tag of each image.
3. Add an alt="" attribute to the image tag of each image.
4. Any set of pictures with the same rel="lightbox[value]" will display with nav buttons.

Microsoft Windows XP [Version 5.1.2600]
(C) Copyright 1985-2000 Microsoft Corp.

H:\>ping localhost

Pinging mozilla.biz [127.0.0.1] with 32 bytes of data:

Reply from 127.0.0.1: bytes=32 time<10ms TTL=128
Reply from 127.0.0.1: bytes=32 time<10ms TTL=128
Reply from 127.0.0.1: bytes=32 time<10ms TTL=128
Reply from 127.0.0.1: bytes=32 time<10ms TTL=128

Ping statistics for 127.0.0.1:
     Packets: Sent = 4, Received = 4, Lost = 0 (0% loss)
Approximate round trip times in milli-seconds:
     Minimum = 0ms, Maximum = 0ms, Average = 0ms

Welcome to Perishable Press! This article covers a plethora of useful JavaScript tips and tricks. For more excellent JavaScript information, check out the JavaScript tag archive. If you like what you see, I encourage you to subscribe to Perishable Press for a periodic dose of online enlightenment ;)

Nifty JavaScript Design Tricks

Clickable divs

Standard design practice dictates that the site logo or banner located at the top of the page links to the home page of the site. There are several methods for including such functionality into a design, including this JavaScript trick that transforms an entire element (e.g., any div) into a link pointing to the site root:

<div id="banner" onclick="location.href='/';" style="cursor:pointer;">
   [ content goes here ]
</div>

Hide/Validate JavaScript Code

JavaScript Comments

Commenting your scripts is an excellent and highly recommended practice. Here are two methods of commenting within a block of JavaScript.

<script type="text/javascript">

// Use two forward slashes for single line comments

/* Use this method for
multi-line comments */

</script>

Link to an External JavaScript File

This is the preferred method of including JavaScript files. It is invisible to non-JavaScript browsers, and keeps the document from breaking during validation. Use if possible.

<script src="external.js" type="text/javascript"></script>

Hiding JavaScript

Hiding JavaScript code from non-compliant browsers is rather easy, just employ the following lines of code:

<script type="text/javascript">
<!--

JavaScript goes here
JavaScript goes here

//-->
</script>

Unfortunately, JavaScript code does not validate as XHTML. Fortunately, it is possible to present your code as invisible to the validators by enveloping it with the following lines of code:

<script type="text/javascript">
<![CDATA[

JavaScript goes here
JavaScript goes here

]]>
</script>

Combining these two methods produces a deadly weapon in the hellish JavaScript battle:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

JavaScript goes here
JavaScript goes here

//--><!]]>
</script>

And, an alternate method has been suggested, but sustains inconsistent consensus:

<script type="text/javascript">
/* <![CDATA[ */

JavaScript goes here
JavaScript goes here

/* ]]> */
</script>

Here is the same commenting method used for CSS:

<style type="text/css">
/* <![CDATA[ */

CSS goes here
CSS goes here

/* ]]> */
</style>

A slightly modified version of the previous method:

<style type="text/css">
/* //<![CDATA[ */
<!--

CSS goes here
CSS goes here

//-->
/* //]]> */
</style>

Here is yet another way to comment out CSS content:

<style type="text/css">
<!--/*--><![CDATA[/*><!--*/

CSS goes here
CSS goes here

/*]]>*/-->
</style>

Finally, although popular, avoiding this method has been recommended:

<script type="text/javascript">
//<![CDATA[
<!--

JavaScript goes here
JavaScript goes here

//-->
//]]>
</script>

Non-JavaScript Browser Support

Use the <noscript> tag to provide support for antiquated browsers and serve 'em some alternate content. The <noscript> tag operates according to the presence/absence of JavaScript. Consider the following:

<noscript>
 <p>This will not be displayed if JavaScript is enabled.</p>
</noscript>

Here is a specific example that would provide a user with the option to continue browsing without JavaScript:

<noscript>
 <p>
  It appears your browser doesn't support JavaScript.
  Please visit <a href="http://domain.tld/noscript.html">the no-script page</a>
  to see a non-JavaScript version of this page.
 </p>
</noscript>