HTML5 and CSS3, Second Edition

(singke) #1
support. But because it does require rewriting the code, we’re not going to go
through that process. I’ll leave that up to you.

However, we should still prevent errors from occurring on older browsers, so
we’ll use Modernizr to detect for history support. Add Modernizr to the HTML
page:

html5_history/fallback/index.html
<scriptsrc="javascripts/modernizr.js"></script>

Then use Modernizr.history to wrap calls to the window.history object.


html5_history/fallback/javascripts/application.js
$("navul").click(function(event){
vartarget= $(event.target);
if(target.is("a")){
event.preventDefault();
if( $(target.attr("href")).attr("aria-hidden")){
➤ if(Modernizr.history){
addTabToHistory(target);
➤ }
activateTab(target.attr("href"));
};
};
});
varinit=function(){
configureTabSelection();
➤ if(Modernizr.history){
configurePopState();
activateDefaultTab();
➤ }
};

If you decide to implement History.js, you could use Modernizr.load() to load
different versions of your code based on whether you need a fallback.

Next let’s explore how to exchange information between two sites on different
domains.

Chapter 10. Creating Interactive Web Applications • 212


Download from Wow! eBook <www.wowebook.com> report erratum • discuss

Free download pdf