Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 271
  • Last Modified:

Refining an alternative to <noscript>

I'm trying to implement an alternative to <noscript> which is published at http://dev.opera.com/articles/view/replacing-noscript-with-accessible-un/   and finding an issue. When javascript is enabled, the <noscript> content appears momentarily, and then is replaced by the dynamic content.  In the notes discussing the article, someone suggested wrapping the "noscript" div with <noscript>...</noscript> and claimed that eliminated this "peekaboo effect".  But with my browsers (IE 8, Safari 5, Firefox 7) on a Windows 7 platform, the noscript content does not appear with javascript disabled, when the div is wrapped that way.  I'm looking for an effective way to eliminate the momentary appearance of noscript content when javascript is enabled.
0
ddantes
Asked:
ddantes
  • 6
  • 6
1 Solution
 
varontronCommented:
Hi,

can you post code?  your description, however accurate it may be, betrays conventional wisdom.  even the article you cite refers to the noscript problem being one with displaying noscript content in old browsers, not suppressing it from new ones.

cheers,
Dave
0
 
ddantesAuthor Commented:
Noscript-issue.zip   Thank you for your question.  I've embedded the files.  Please keep in mind that the dynamic content loads quickly when the file is "stripped down", so you may see the noscript content for only a fraction of a second.  However, when the page is loaded with other scripts and content, the noscript content appears for almost a full second before it is replaced.
0
 
varontronCommented:
Hi,

Ok, so the reason your static image is flashing is because you are loading it, it's being rendered, and then you are calling a js function to change it's css display attribute to 'none'.  So that is behaving as you have told it to:  load, render, then hide.  Your code does this for me as well in Chrome and Safari.

The way to use noscript is to do as you mentioned.  Wrap the content in noscript tags.  That should cause the browser to ignore it completely when js is enabled.

I tried it, and it works as it should in both chrome and safari.  I get no flashing content with the code below when js is enabled, and I get the gif when it's disabled.

<noscript>
<div id="noscript">
<p><CENTER><IMG SRC="images/maui.gif" ALT="Maui Tradewinds location on the island of Maui" WIDTH=640 HEIGHT=400></CENTER>
</p></div>
</noscript>
<center><div id="map" style="width: 640px; height: 400px"></div></center>

Open in new window


If you want to post the code you said didn't work when you tried this, I can look at that and see if something went wrong.

-Dave
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
ddantesAuthor Commented:
You are absolutely right.  It is still true that the noscript content does not appear under IE8 on this desktop, but your response moved me to try it on other systems in this office.   Noscript content does appear under IE8 and IE7 on a different desktop and laptop.  And it appears under Firefox and Safari on the problematic desktop. So there must be an issue with Internet Explorer, only on this one computer.  Any suggestion for how to resolve that?
0
 
varontronCommented:
A google search for "noscript ie8 bug" reveals many links with suggestions for workarounds.

No link I followed specifically calls out images, but they all indicate "block" elements are a problem in IE8.

Here is the search url.  Check out some of the links and the various suggestons there.  These include wrapping the content inside noscript in a specifically styled div, or using a meta tag to emulate IE7.  There is also an indication that, because the problem is with block elements, which have width and height, that even though images are "inline-block" this might be why the problem occurs with the image.

http://www.google.com/search?gcx=w&sourceid=chrome&ie=UTF-8&q=noscript+ie8+bug#pq=noscript+ie8+bug+images&hl=en&sugexp=kjrmc&cp=17&gs_id=38&xhr=t&q=noscript+ie8+bug&pf=p&sclient=psy-ab&safe=off&source=hp&pbx=1&oq=noscript+ie8+bug+&aq=f&aqi=&aql=&gs_sm=&gs_upl=&bav=on.2,or.r_gc.r_pw.,cf.osb&fp=fa8a22845779779&biw=1983&bih=1147&bs=1

-Dave
0
 
ddantesAuthor Commented:
Thank you for all your help, Dave.  I'm glad to know that the code is working, even though there is an issue with IE8.  However, it works on two other computers running IE8, so it's a bit of a mystery.  If I may ask one last question, my browser reports an error when I load a page with the new script: "object required: noscript.js, line 23 character 9."  Can you explain why that developed?  The page is at www.mauitradewinds.com 
0
 
varontronCommented:
I believe this is because when javascript is enabled, the browser converts all content inside noscript tags to text.  Thus there is no "node" with an id of "noscript" anymore. In your call to
if (document.removeChild) 
    {
        var div = document.getElementById("noscript");
        div.parentNode.removeChild(div);
    }

Open in new window



The 'div' var is null, and thus 'parentNode' can't be called on it.
0
 
ddantesAuthor Commented:
Thank you for the explanation.  I'm a little concerned about "error on page" appearing in visitor's browsers when they load my website.  Any workaround would be appreciated.  If I should post this in a new question, please let me know.
0
 
varontronCommented:
well, technically you don't need this, because when the browser does the right thing, it converts the node you're removing to text and it isn't rendered.  but if you want to keep in there, just check for null and only call the func if not null:
if (document.removeChild) 
    {
        var div = document.getElementById("noscript");
        if(div != null)
        {
              div.parentNode.removeChild(div);
        }
    }

Open in new window

0
 
ddantesAuthor Commented:
Thank you.  I must have made a mistake in implementing your code.  I get an error: ";" expected line 29 character 8. noscript.js
0
 
varontronCommented:
i think you dragged down too far and copied the text from the buttons below the code window.   here is the code you sent.  See the last line, you can delete it.

if (document.removeChild) 
    {
        var div = document.getElementById("noscript");
        if(div != null)
        {
              div.parentNode.removeChild(div);
        }
    } 
Toggle HighlightingOpen in New Window

Open in new window

0
 
ddantesAuthor Commented:
Thank you.  When I loaded the page, it asked for one more "}" at the end of the script, and after adding it, the error is gone.  I hope it was OK to add that "}"

I'm grateful for your extra help after the question was already closed.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now