Comments on: How to hide and show initial content, depending on whether JavaScript support is available http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/ Web development and Internet trends Sat, 20 Mar 2010 20:09:50 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: Abicus http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-589830 Abicus Mon, 15 Jun 2009 17:09:30 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-589830 I am working on 5 sites (various locations) that have the same content, but they all have different headers and footers as they are specific to each location. Instead of creating 5 pages is there a way I can create just the one page and dynamically insert the header and footer? i.e style sheet switcher? like the css zen garden. I am working on 5 sites (various locations) that have the same content, but they all have different headers and footers as they are specific to each location. Instead of creating 5 pages is there a way I can create just the one page and dynamically insert the header and footer? i.e style sheet switcher? like the css zen garden.

]]> By: Robert Nyman http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-578390 Robert Nyman Thu, 30 Apr 2009 17:56:09 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-578390 Matthew, Thank you! Matthew,

Thank you!

]]> By: Matthew Latkiewicz http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-578382 Matthew Latkiewicz Thu, 30 Apr 2009 15:51:37 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-578382 My man! Great, elegant solution. I'm definitely throwing this one in the ol' utility belt with attribution to you. Cheers, Matthew My man! Great, elegant solution. I’m definitely throwing this one in the ol’ utility belt with attribution to you.

Cheers,
Matthew

]]> By: Robert Nyman http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-514963 Robert Nyman Thu, 05 Feb 2009 06:10:19 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-514963 Jessica, You're welcome! Jessica,

You’re welcome!

]]> By: Jessica http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-514256 Jessica Wed, 04 Feb 2009 17:13:13 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-514256 Wonderful, this is just what I was looking for! Thank you! Wonderful, this is just what I was looking for!

Thank you!

]]> By: Thank you for 2008 - Happy New Year! - Robert’s talk - Web development and Internet trends http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-492996 Thank you for 2008 - Happy New Year! - Robert’s talk - Web development and Internet trends Tue, 30 Dec 2008 21:40:42 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-492996 [...] How to hide and show initial content, depending on whether JavaScript support is available [...] [...] How to hide and show initial content, depending on whether JavaScript support is available [...]

]]> By: Robert Nyman http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-488278 Robert Nyman Sat, 20 Dec 2008 12:13:14 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-488278 Dallas, There are a number of downsides to <code>document.write</code>, such as it stalls all other renderering, it won't work with the proper XHTML MIME type <code>application/text+xhtml</code> etc. Without having the actual case at hand, theoretically, you shouldn't get a flickr. But if that happens, I'd rather see an inline script block at the start of the page which creates a script style through DOM methods rather than using <code>document.write</code> to write a string. Dallas,

There are a number of downsides to document.write, such as it stalls all other renderering, it won’t work with the proper XHTML MIME type application/text+xhtml etc.

Without having the actual case at hand, theoretically, you shouldn’t get a flickr. But if that happens, I’d rather see an inline script block at the start of the page which creates a script style through DOM methods rather than using document.write to write a string.

]]> By: Dallas http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-488128 Dallas Fri, 19 Dec 2008 20:30:04 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-488128 The solution that I have found most useful—that is, the solution with the overall performance needed and minimal flicker present—is to have a script tag in the header which does a <code>document.write(…)</code>. I'm coding with Rails but this code is easily adapted: <code><%= javascript_tag %(document.write(#{stylesheet_link_tag('javascript').to_json}) %></code> I tried your solution, as I liked the single-line <code><script src="…"></code> much better, but with your exact solution and with replacing all of the JavaScript code with the same <code>document.write(…)</code> I still got some page flicker. I like the inclusion of a JavaScript-only stylesheet because it lessens the load even more for those non-JS users out there and it just seems a little bit cleaner than adding an extra class to <code><body></code>. As far as implementing any sort of JavaScript library functions in the header, it is generally best to include as little JavaScript as possible at the top of your page since it <em>must</em> be completely loaded and run before anything beneath can be loaded. Hope this helps a few people. The solution that I have found most useful—that is, the solution with the overall performance needed and minimal flicker present—is to have a script tag in the header which does a document.write(…). I’m coding with Rails but this code is easily adapted:

<%= javascript_tag %(document.write(#{stylesheet_link_tag('javascript').to_json}) %>

I tried your solution, as I liked the single-line <script src="…"> much better, but with your exact solution and with replacing all of the JavaScript code with the same document.write(…) I still got some page flicker.

I like the inclusion of a JavaScript-only stylesheet because it lessens the load even more for those non-JS users out there and it just seems a little bit cleaner than adding an extra class to <body>. As far as implementing any sort of JavaScript library functions in the header, it is generally best to include as little JavaScript as possible at the top of your page since it must be completely loaded and run before anything beneath can be loaded.

Hope this helps a few people.

]]> By: Knowledge Base - .NET, C#, SQL Server 2005, PHP and Actionscript 2.0 / 3.0 etc » Blog Archive » » Hiding and showing initial content with JavaScript http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-466301 Knowledge Base - .NET, C#, SQL Server 2005, PHP and Actionscript 2.0 / 3.0 etc » Blog Archive » » Hiding and showing initial content with JavaScript Mon, 20 Oct 2008 16:18:37 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-466301 [...] Hiding and showing initial content with JavaScript Category: Uncategorized http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-java... [...] [...] Hiding and showing initial content with JavaScript Category: Uncategorized http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-java... [...]

]]> By: H. Kurth Bemis » Blog Archive » links for 2008-09-30 http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-443846 H. Kurth Bemis » Blog Archive » links for 2008-09-30 Wed, 01 Oct 2008 02:31:24 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-443846 [...] How to hide and show initial content, depending on whether JavaScript support is available - Robert?... (tags: reference howto tips code) [...] [...] How to hide and show initial content, depending on whether JavaScript support is available – Robert?… (tags: reference howto tips code) [...]

]]> By: Avoiding The Flicker : mnavasca.ca http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-443340 Avoiding The Flicker : mnavasca.ca Tue, 30 Sep 2008 20:19:23 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-443340 [...] Anyways here’s the hack / fix that I found: [...] [...] Anyways here’s the hack / fix that I found: [...]

]]> By: Mixx’s Engine Room » Hiding content, accessibility, and the onload problem http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-420942 Mixx’s Engine Room » Hiding content, accessibility, and the onload problem Mon, 15 Sep 2008 13:27:53 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-420942 [...] Nyman, in his post How to hide and show initial content, depending on whether JavaScript support is available, outlines a technique where you add a <script> element to the <head> of your document [...] [...] Nyman, in his post How to hide and show initial content, depending on whether JavaScript support is available, outlines a technique where you add a <script> element to the <head> of your document [...]

]]> By: dv http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-307586 dv Wed, 18 Jun 2008 08:33:06 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-307586 <div id="hide-with-script" style="display:none;"> <div id=”hide-with-script” style=”display:none;”>

]]> By: FreePress Blog » Link - How to hide and show initial content, depending on whether JavaScript support is available - Robert’s talk - Web development and Internet trends http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-302107 FreePress Blog » Link - How to hide and show initial content, depending on whether JavaScript support is available - Robert’s talk - Web development and Internet trends Fri, 13 Jun 2008 04:49:07 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-302107 [...] How to hide and show initial content, depending on whether JavaScript support is available - Robert?... [...] [...] How to hide and show initial content, depending on whether JavaScript support is available – Robert?… [...]

]]> By: Summer break - Robert’s talk - Web development and Internet trends http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-301963 Summer break - Robert’s talk - Web development and Internet trends Thu, 12 Jun 2008 23:17:30 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-301963 [...] How to hide and show initial content, depending on whether JavaScript support is available [...] [...] How to hide and show initial content, depending on whether JavaScript support is available [...]

]]> By: XMLRPC Test » Link - How to hide and show initial content, depending on whether JavaScript support is available - Robert’s talk - Web development and Internet trends http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-289558 XMLRPC Test » Link - How to hide and show initial content, depending on whether JavaScript support is available - Robert’s talk - Web development and Internet trends Sat, 31 May 2008 19:15:01 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-289558 [...] How to hide and show initial content, depending on whether JavaScript support is available - Robert?... [...] [...] How to hide and show initial content, depending on whether JavaScript support is available – Robert?… [...]

]]> By: Robert Nyman http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-283754 Robert Nyman Mon, 26 May 2008 07:47:07 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-283754 mike, Thanks for sharing! <a href="http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-272957" rel="nofollow">Ole was mentioning this above</a> as well, but to my knowledge, it's not valid to add properties to the HTML element itself. mike,

Thanks for sharing!
Ole was mentioning this above as well, but to my knowledge, it’s not valid to add properties to the HTML element itself.

]]> By: mike foskett http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-282946 mike foskett Sun, 25 May 2008 10:58:37 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-282946 Hi Rob, Nice article, here's one more varient to add to the mix: <code><script type="text/javascript">/*<![CDATA[*/ document.documentElement.className="hasJS"; /*]]>*/</script></code> Placed straight after the title element, it adds the class .hasJS to the html element (valid grammatically but cannot have properties). So does not interfere with body element at all. I sometimes add an extra variable which is set server-side: <code>var ajaxOn=true;</code> Which may be switched via a content link for accessibility. Example: <a href="http://websemantics.co.uk/" rel="nofollow">webSemantics</a> Hi Rob,

Nice article, here’s one more varient to add to the mix:
<script type="text/javascript">/*<![CDATA[*/
document.documentElement.className="hasJS";
/*]]>*/</script>

Placed straight after the title element, it adds the class .hasJS to the html element (valid grammatically but cannot have properties).
So does not interfere with body element at all.

I sometimes add an extra variable which is set server-side:
var ajaxOn=true;
Which may be switched via a content link for accessibility.

Example: webSemantics

]]> By: Robert Nyman http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-281211 Robert Nyman Fri, 23 May 2008 14:47:26 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-281211 Ian, It's a good point about screen readers. Unfortunately I don't have access to proper screen reader testing opportunities at the moment either, but I had a friend do brief tests for me. The result can, most likely, vary from screen reader to screen reader, but a recommended alternative CSS approach to avoid having content not being read is using: <code>position: absolute; left: -999px;</code> instead of <code>display: none;</code> Then, have your script change the value to: <code>position: static; left: 0;</code> when showing the element. Ian,

It’s a good point about screen readers. Unfortunately I don’t have access to proper screen reader testing opportunities at the moment either, but I had a friend do brief tests for me.

The result can, most likely, vary from screen reader to screen reader, but a recommended alternative CSS approach to avoid having content not being read is using:

position: absolute;
left: -999px;

instead of

display: none;

Then, have your script change the value to:

position: static;
left: 0;

when showing the element.

]]> By: Ian Lloyd http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-281178 Ian Lloyd Fri, 23 May 2008 13:39:54 +0000 http://www.robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/#comment-281178 Just to clarify my comment 'Why is this important?' ... I meant 'Why is it important [that I was searching for this]' rather than 'Why is this [your technique] important?'. Just re-read it and thought that might not have come across quite as clearly as I hoped :-) Just to clarify my comment ‘Why is this important?’ … I meant ‘Why is it important [that I was searching for this]‘ rather than ‘Why is this [your technique] important?’. Just re-read it and thought that might not have come across quite as clearly as I hoped :-)

]]>