asked on

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.

varontron

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

ddantes

ASKER

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.

ASKER CERTIFIED SOLUTION

varontron

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ddantes

ASKER

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?

varontron

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

ddantes

ASKER

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

varontron

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.

ddantes

ASKER

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.

varontron

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

ddantes

ASKER

Thank you. I must have made a mistake in implementing your code. I get an error: ";" expected line 29 character 8. noscript.js

varontron

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

ddantes

ASKER

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.

Refining an alternative to &lt;noscript&gt;

Refining an alternative to <noscript>