Databases
StackOverflow2013
Postsdbo
POSafe way to make behavioral CSS trigger based on Javascript availability
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSafe way to make behavioral CSS trigger based on Javascript availability
    text
    copied!<p>I have been using this chunk of code to programmatically check if Javascript is available and use different behavioral CSS.</p> <p>If Javascript is disabled, it will only show a normal unordered list.</p> <p>If javascript is enabled, the list will be transformed after page load and <strong>then</strong> displayed to the user (avoiding the possible redraw/flicker of the unordered list element before/during transformation).</p> <p>Is it possible that <strong>document.getElementsByTagName('body')</strong> can actually return an empty array at this stage of the page rendering, or is it always available?</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style type="text/css"&gt; .javascript ul { display:none; } .no_javascript ul { display:block; } .transformed { background-color: yellow; } &lt;/style&gt; &lt;/head&gt; &lt;body class="no_javascript"&gt; &lt;script type="text/javascript"&gt; // Inform us that javascript is available (function() { var body = document.getElementsByTagName('body'); if ( body &amp;&amp; body[0] ) { body[0].className = body[0].className.replace(/no_javascript/, "javascript"); } })(); &lt;/script&gt; &lt;ul&gt; &lt;li&gt;Option 1&lt;/li&gt; &lt;li&gt;Option 2&lt;/li&gt; &lt;li&gt;Option 3&lt;/li&gt; &lt;/ul&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $(".javascript ul").addClass("transformed").css('display','block'); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Update: <a href="https://stackoverflow.com/questions/463670/how-to-eliminate-post-render-flicker">How to eliminate post-render &quot;flicker&quot;?</a> seems like a duplicate of my question. It was the problem I was trying to solve properly.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload