Do you mean the tag or the plugin?
…
Unless the client can guarantee that all visitors have JS enabled or installed on the device, the everything-there-first approach is better. Having CSS hide stuff by default and needing Javascript to show it is the problem.
Or build the way the client wants and offer a link to a text version. This is kinda the garbage-way of doing it but deadlines exist and clients can demand things and sometimes that’s how it is. Text versions is not a good solution but it’s better than nothing and costs you almost zero time. You just link to a copy of the page but there’s no CSS it links to to hide stuff.
Though another solution could be, have the things the user clicks to create the popup take the user to another page with just that content. Meaning the divs/content could be hidden onload by CSS, because users still get access whether there’s JS or not.
In this case, you have CSS setting your content to display: none (if really all users shouldn’t be seeing/reading this content at first, but if it’s just a screen-clutter thing I’d stick to off-screen positioning technique instead), and what the user clicks is an anchor with an href. This gives you
- something natively clickable without extra coding
- naturally leads to the content (the disadvantage with static pages is, now you have more pages and that could mean more maintenance if you’re also styling these to look pretty)
Javascript, if available, does the showing of the content instead, and makes the anchor who got the click event return false; so the user stays on the page.
An interesting way to do this actually is having static pages as a backup for older browsers, and using a combination of separate content chunks and Ajax and the new History API.
Mark Pilgrim made a little demo on his Dive Into HTML5: http://diveintohtml5.info/history.html
and I thought his demo showed how everything works was pretty cool, but since he took his stuff down from Teh Interwebs I’d have to see if there’s a mirror showing that stuff. The demo was called casey.html
What I thought was interesting and maybe brittle of Mark’s setup was, he had a very certain directory structure of the pages… but it might be just the way his demo worked and my missing something. It might not matter so much.
Anyway History API is so browsers’ back and forward buttons can move the user between the chunks of content if they aren’t getting chunks added by Javascript. Since the fallback you build is still a set of static resources linked together, it generally works no matter what. I remember my FF 3.6 having a little bit of issue with the fallback but again, might’ve been the demo.
*Edit thought of another thing, though I forgot if it doesn’t work in IE7 and below… maybe also not IE8? The :target attribute is a cute way to show hidden things with CSS and let Javascript just step in for older browsers who don’t understand it.
The problem with :target is it requires the user to explicitly click it closed (by clicking on another link, and it should then be another in-page link if you don’t want a screen-refresh or the user brought back to the top of the page) and it muddies URLs by leaving # in the history, which actually isn’t helpful if the user has been clicking around a whole lot.
I’ve been playing with it on a page of mine to show and hide a submenu on click, and it’s fun. Dunno if it can be applied to what you’re working on.