Plugin Sale! Save 15% on pro plugins with discount code: FALL2020
Web Dev + WordPress + Security

JavaScript Notes Plus

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>

Jeff Starr
About the Author
Jeff Starr = Creative thinker. Passionate about free and open Web.
BBQ Pro: The fastest firewall to protect your WordPress.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
.htaccess made easy: Improve site performance and security.
Thoughts
Air finally clearing here in WA. Feeling grateful to breathe again. #oxygenmatters
Past week here in WA state has been hellish. So much smoke, like living in a chimney.
Now in September, I’m where I wanted to be in March.
Spent some time updating my article on unsafe characters, once again current with latest IETF specification.
Just realized that “Neo” is an anagram for “One”. As in, “he is the One” (The Matrix).
To get VLC app to load all songs (including subfolders), go to Preferences ▸ Show All ▸ Playlist ▸ Subdirectory behavior ▸ Expand.
Switching from PhotoShop to Affinity Photo is one of the most liberating work-related things I've done in 20 years.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.