Shaun Mccran

My digital playground

04
F
E
B
2010

NoScript alternatives for Javascript content using CSS visibilty

I recently stumbled upon an interesting dilemma whilst using an image map that was dynamically generated from a Coldfusion Query. If you turn JavaScript off, then the image maps primary graphic still stays visible (and occupies the same space on a page), but none of the map links function anymore. The problem was to replace the map content with a list of hyperlinks that provide the same functionality. Initially I set the maps div CSS to be hidden. In this way the map is not shown by default.
view plain print about
1// css
2.interactiveMap {visibility: hidden;}
Next we can use a JavaScript call to change the CSS visibility to 'visible'. In this way if JavaScript is disabled the graphic remains hidden, if JavaScript is enabled it turns in on.
view plain print about
1<s/cript>
2    // show the map
3    document.getElementById('interactiveMap').style.visibility = "visible";
4</s/cript>
Lastly we can create the content that we want to see instead of the map. Don't forget to wrap it all in the no script html tag.
view plain print about
1<noscript>Your browser does not support JavaScript!
2<p></p>
3
4<!--- get the regions list --->
5<cfset variables.regions = getRegions()>
6
7<ul>
8<cfloop query="variables.regions">
9<li><a href="region.cfm?region=#variables.regions. regionid#">#variables.regionName#</a></li>
10</cfloop>
11
12</ul>
13</noscript>
By altering the css properties like this we can have the map and the no script content occupy the same real estate on the screen. If you simply populate the no script with the alternative, then the space the map occupies stays occupied, just by a hidden map, giving you a large blank space.
TweetBacks
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Back to top