Over the past few months I have been discussing progressive enhancement with some of my clients. For some reason there seem to be real friction about how to safely integrated JavaScript to provide web 2.0 style web design but to ensure that the site provide a similar experience for users with older browsers or with JavaScript disabled.
While this is a bit of a mute point as pretty much consistently over the past 5 years 90% of browsers have JavaScript enabled, it is essential to be aware of progressive enhancement for accessibility reasons.
So here is a quick example using asp.net MVC and jQuery to provide overlay style popups which degrade to a post back model if JavaScript is disabled.
View Code HTML
<!-- Create a link labeled 'show overlay' which uses the 'ShowOverlay' action of the
'home' controller-->
<p><%= Html.ActionLink("Show overlay", "ShowOverlay", "Home")%></p>
<!-- Above the closing body tag include the following code -->
<% if ((bool)ViewData["ShowOverlay"] == true)
{ %>
<div id="panel">
<div id="Div1">
<%= Html.ActionLink("Close", "CloseOverlay", "Home")%>
</div>
<div id="content">
<h2>Overlay header</h2>
<p>Dulce et decorum est pro patria mori</p>
</div>
</div>
<div id="mask"></div>
<% }%>
View Code - JavaScript
/*On page load bind the 'ShowOverlay' function to click events of the 'show overlay'
link and close link. */
var PageReady = function() {
var ShowOverlay = function(State) {
if (State.data.show == true) {
jQuery("body").append('[Panel HTML]);
jQuery(".close").bind("click", { show: false }, ShowOverlay);
} else {
jQuery("#panel").remove();
jQuery("#mask").remove();
};
return false;
};
jQuery(".overlay").bind("click", { show: true }, ShowOverlay);
};
jQuery(document).ready(PageReady);
Essentially this is all the code you need to degrade the user experience. If JavaScript isn’t available the click events will never be bound to the link and therefor the page. will degrade to use a post back model.
However we need to create some code in our ‘home’ controller to show or hide the overlay on post back.
Controller - Actions
public class HomeController : Controller
{
public ActionResult Index()
{
ViewData["ShowOverlay"] = TempData["ShowOverlay"] == null ?
false : TempData["ShowOverlay"];
return View();
}
public ActionResult ShowOverlay()
{
TempData["ShowOverlay"] = true;
return RedirectToAction("Index");
}
public ActionResult CloseOverlay()
{
TempData["ShowOverlay"] = false;
return RedirectToAction("Index");
}
}
}
There are a couple of thing happening in this example i’d like to discuss.
When we click ‘ShowOverlay’ the action ShowOverlay is invoked but i don’t want the URL to change to ‘home/showoverlay’ to get round the automatic URL rewriting I set TempData[“ShowOverlay”] to true and return to the ‘index’ action.
Currently the only way i know how to pass data between controller actions is to store the value in TempData, which i can then pass into ViewData in the target controller action to return to the view.
The second in the controller action is a lazy piece of code which sets ViewData[“ShowOverlay”] to false if TempData[‘ShowOverlay’] is null i.e. we never clicked the show or close links.
And that’s it - all you need to know to degrade a web 2.0 style overlay using progressive enhancement.
Take a look at an example page, where you can download the JavaScript and CSS.
]]>
UX Media got all broody this week as we welcomed little Amelie Serra into the world on Thursday 21 August at 9.42 am.
