Present 'Turn JavaScript On' Instructions for Visitors

When JavaScript is turned off, the user can be informed that it must be turned on.

To be friendly and elegant about it, the instructions for turning it on can be provided right there on the page.

There are two ways to publish the instructions as noscript content, one for static content and one for PHP pages. I'll show you how to do both methods.

1. If the noscript tag is on a static page, publish the instructions for each browser.

2. If the noscript tag is on a PHP page, publish the instructions for only the browser the person is using.

"Turn JavaScript On" Instructions for Static Pages

Here is the code. Replace your current <noscript>...</noscript> tag with this.

<noscript>
<h2>
JavaScript Is Required
</h2>
<div style="border-left:3px double black; padding-left:15px;">
<p>
Please use these instructions to enable JavaScript in your browser.
</p>

<h4>Internet Explorer</h4>
<ol>
<li>From the menu, select "Tools | Internet Options".</li>
<li>Click the "Security" at the top of the dialog box.</li>
<li>Click the "Custom level..." button.</li>
<li>At the new Security Settings dialog box, scroll down to "Scripting".</li>
<li>At "Active scripting", click the "Enable" radio button.</li>
<li>Click the "OK" button to close the Security Settings dialog box.</li>
<li>Click the "OK" button to close the Internet Options dialog box.</li>
</ol>

<h4>Chrome</h4>
<ol>
<li>Click the wrench icon.</li>
<li>Click "Options" in the menu the wrench icon revealed.</li>
<li>Click the "Under the Hood" tab in the dialog box.</li>
<li>At the new Content Settings dialog box, click "JavaScript".</li>
<li>Click the "Allow all sites to run JavaScript" radio button.</li>
<li>Click the "Close" button to close the Content Settings dialog box.</li>
<li>Click the "Close" button to close the Options dialog box.</li>
</ol>

<h4>Firefox (Windows)</h4>
<ol>
<li>From the menu, select "Tools | Options".</li>
<li>Click the "Content" tab at the top of the dialog box.</li>
<li>Check the "Enable JavaScript" checkbox.</li>
<li>Click the "OK" button to close the dialog box.</li>
</ol>

<h4>Firefox (Mac)</h4>
<ol>
<li>Select "Preferences..." from the Firefox drop-down menu.</li>
<li>Click the "Content" tab at the top of the dialog box.</li>
<li>Check the "Enable JavaScript" checkbox.</li>
<li>Close the dialog box.</li>
</ol>

<h4>Safari</h4>
<ol>
<li>Select "Preferences..." from the Safari drop-down menu.</li>
<li>Click the "Security" at the top of the dialog box.</li>
<li>Check the "Enable JavaScript" checkbox.</li>
<li>Close the dialog box.</li>
</ol>

</div>
</noscript>

A double rule is printed on the left of the instructions to differentiate them from the rest of the page. That can be changed in the style of the div tag at the fifth line of the above code. (If the div tag is removed, the </div> at the second line from the bottom of the code must also be removed.)

"Turn JavaScript On" Instructions for PHP Pages

Here is the code. Replace your current <noscript>...</noscript> tag with this.

<noscript>
<h2>
JavaScript Is Required
</h2>
<div style="border-left:3px double black; padding-left:15px;">
<p>
Please use these instructions to enable JavaScript in your browser.
</p>

<?php
$browser = '';
if( strpos($_SERVER['HTTP_USER_AGENT'],'MSIE') ) { $browser = 'IE'; }
elseif( strpos($_SERVER['HTTP_USER_AGENT'],'Chrome') ) { $browser = 'Chrome'; }
elseif( strpos($_SERVER['HTTP_USER_AGENT'],'Safari') ) { $browser = 'Safari'; }
elseif( strpos($_SERVER['HTTP_USER_AGENT'],'Windows') and strpos($_SERVER['HTTP_USER_AGENT'],'Firefox') ) { $browser = 'Firefox Win'; }
elseif( strpos($_SERVER['HTTP_USER_AGENT'],'Macintosh') and strpos($_SERVER['HTTP_USER_AGENT'],'Firefox') ) { $browser = 'Firefox Mac'; }
?>

<?php if( $browser == 'IE' ): ?>
<ol>
<li>From the menu, select "Tools | Internet Options".</li>
<li>Click the "Security" at the top of the dialog box.</li>
<li>Click the "Custom level..." button.</li>
<li>At the new Security Settings dialog box, scroll down to "Scripting".</li>
<li>At "Active scripting", click the "Enable" radio button.</li>
<li>Click the "OK" button to close the Security Settings dialog box.</li>
<li>Click the "OK" button to close the Internet Options dialog box.</li>
</ol>

<?php elseif( $browser == 'Chrome' ): ?>
<ol>
<li>Click the wrench icon.</li>
<li>Click "Options" in the menu the wrench icon revealed.</li>
<li>Click the "Under the Hood" tab in the dialog box.</li>
<li>At the new Content Settings dialog box, click "JavaScript".</li>
<li>Click the "Allow all sites to run JavaScript" radio button.</li>
<li>Click the "Close" button to close the Content Settings dialog box.</li>
<li>Click the "Close" button to close the Options dialog box.</li>
</ol>

<?php elseif( $browser == 'Firefox Win' ): ?>
<ol>
<li>From the menu, select "Tools | Options".</li>
<li>Click the "Content" tab at the top of the dialog box.</li>
<li>Check the "Enable JavaScript" checkbox.</li>
<li>Click the "OK" button to close the dialog box.</li>
</ol>

<?php elseif( $browser == 'Firefox Mac' ): ?>
<ol>
<li>Select "Preferences..." from the Firefox drop-down menu.</li>
<li>Click the "Content" tab at the top of the dialog box.</li>
<li>Check the "Enable JavaScript" checkbox.</li>
<li>Close the dialog box.</li>
</ol>

<?php elseif( $browser == 'Safari' ): ?>
<ol>
<li>Select "Preferences..." from the Safari drop-down menu.</li>
<li>Click the "Security" at the top of the dialog box.</li>
<li>Check the "Enable JavaScript" checkbox.</li>
<li>Close the dialog box.</li>
</ol>

<?php endif; ?>
</div>
</noscript>

You'll notice when the browser is unrecognized, no instructions are printed. The instructions would be a guess. And it would not be good to print wrong instructions.

JavaScript-Disabled Browsers

While most browsers have JavaScript enabled, some do not.

If your website or certain pages require JavaScript to function correctly, let user know JavaScript must be turned on. Providing instructions for turning JavaScript on is a friendly gesture.

Will Bontrager