Web page design – Do you know this?

Posted: November 22, 2010 in Javascript, Web Development
Tags: ,

There are users across the internet who don’t have Javascript. Good websites try to code in such a way that allows all users to access content, with or without Javascript or other plugins.

Then all the cool Javascript interaction and such is added on top later, for Javascript-enabled users (the majority). This is called Progressive Enhancement, a buzz word you should know about if you’re in the web development.

Code rendered inside noscript tag will only render when the user doesn’t have javascript enabled. So at the very least we can do something like this

<noscript> Java script is required for this page to view, please enable it through your browser options </noscript>

More about noscript tag …

<noscript>
<div id=”example”>I want to get this innerHTML</div>
</noscript>

<script type=”text/javascript”>
alert($(‘example’).innerHTML);
</script>

This javascript snippet just returns an empty string. To make it work we can sorta hack it in FF, IE, and Opera.

$(“div img[src*=’cg=myspace’]”).attr(“src”, “//secure-nz.imrworldwide.com/cgi-bin/m?ci=nz-fim&cg=myspace-music&cc=1”);
var nos = document.getElementsByTagName(“noscript”)[0];
// in some browsers, contents of noscript hang around in one form or another
var nosHtml = nos.textContentnos.innerHTML;
if ( nosHtml )
{
var temp = document.createElement(“div”);
temp.innerHTML = nosHtml;
// lazy man’s query library: add it, find it, remove it
document.body.appendChild(temp);
var ex = document.getElementById(“example”);
document.body.removeChild(temp);
alert(ex.innerHTML);
}

In Google’s Chrome, the noscript element has no children in the DOM i.e. everything ignored if scripting is enabled in the browser, and we may expect this to be true in other browsers as well as future versions of the browsers.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s