Permalink
Browse files

Warning messages for users with IE<9 or without javascript enabled

  • Loading branch information...
1 parent f9af373 commit e1b5b0b6e8d88bddfc0d1b61a605113719ccb4d8 @dmfrancisco committed Aug 3, 2011
Showing with 61 additions and 24 deletions.
  1. +21 −0 lib/styles.css
  2. +37 −21 slideshow/master.html
  3. +1 −1 slideshow/slide7.html.partial
  4. +1 −1 slideshow/slide8.html.partial
  5. +1 −1 slideshow/slide9.html.partial
View
21 lib/styles.css
@@ -180,6 +180,27 @@ html, body { height:100%; }
z-index: 1;
}
+/* No javascript & other kinds of blocking problems */
+
+.warning {
+ font-size: 20px;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 10000;
+ padding: 30px;
+ background: #FBFBE3;
+ line-height: 28px;
+}
+.warning a,
+.warning a:hover,
+.warning a:focus,
+.warning a:visited {
+ color: #000;
+}
+
/* The grey background */
body {
background: #989898 url(data:image/png;base64,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);
View
58 slideshow/master.html
@@ -1,5 +1,8 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
+<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
+<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
@@ -47,34 +50,47 @@ <h1 class="hide">An example slideshow</h1>
</li>
</ul>
</nav>
- </footer>
+ </header>
+
+ <noscript>
+ <div class="warning">You should enable javascript to access this website.</div>
+ </noscript>
<script src="lib/jquery-1.5.2.min.js"></script>
<script src="lib/jquery.jswipe-0.1.2.js"></script>
<script src="lib/html-slides.js"></script>
<% if @live %><script src="lib/live.js"></script><% end %>
<script>
- // Do our business when the DOM is ready for us
- $(function() {
- // You can trigger Javascript based on the slide number like this:
- $('html').bind('newSlide', function(e, id) {
- switch(id) {
- case 2:
- console.log('This is the second slide.');;
- break;
- case 3:
- console.log('Hello, third slide.');
- break;
- }
- });
+ // Block access from older browsers (you probably want to remove this; keep in mind that there're still some issues)
+ if ($("html").is('.ie6, .ie7, .ie8')) {
+ $("body").html("<div class='warning'>We are sorry but this website does not render properly in your browser" +
+ " for now. <br/>If possible, try to access it using a different browser, such as <a" +
+ " href='http://google.com/chrome/'>Google Chrome</a>, <a " +
+ " href='http://mozilla.com/firefox/'>Mozilla Firefox 4+</a> or <a " +
+ " href='http://beautyoftheweb.com/'>Internet Explorer 9+</a>.<br/></div>");
+ } else {
+ // Do our business when the DOM is ready for us
+ $(function() {
+ // You can trigger Javascript based on the slide number like this:
+ $('html').bind('newSlide', function(e, id) {
+ switch(id) {
+ case 2:
+ console.log('This is the second slide.');;
+ break;
+ case 3:
+ console.log('Hello, third slide.');
+ break;
+ }
+ });
- // Init!
- htmlSlides.init();
+ // Init!
+ htmlSlides.init();
- // You can specify the width to height ratio like this:
- // htmlSlides.init({ slideWidth: 1280, slideHeight: 800 });
- });
+ // You can specify the width to height ratio like this:
+ // htmlSlides.init({ slideWidth: 1280, slideHeight: 800 });
+ });
+ }
</script>
</body>
</html>
View
2 slideshow/slide7.html.partial
@@ -1,7 +1,7 @@
<section class="cover">
<div class="stripes"></div>
- <h1>thank you for watching</h2>
+ <h1>thank you for watching</h1>
<style scoped>
#slide7 h1 {
View
2 slideshow/slide8.html.partial
@@ -11,7 +11,7 @@
<strong>HTML5 Slideshow</strong>
<span class="link"><a href="http://www.ravelrumba.com/blog/html5-slideshow/">goo.gl/CeD4Q</a></span>
<br /><span class="serif"><em>by</em></span> Rob Flaherty
- <img src="<%= @root %>/images/arrow-3.png" alt="" height="30px">
+ <img src="<%= @root %>/images/arrow-3.png" alt="" height="30">
<span class="note">the main library used for slideshow.html</span>
</p>
View
2 slideshow/slide9.html.partial
@@ -1,7 +1,7 @@
<section class="cover">
<div class="stripes"></div>
- <h1><a href="http://slideshow.dmfranc.com/">slideshow.dmfranc.com</a></h2>
+ <h1><a href="http://slideshow.dmfranc.com/">slideshow.dmfranc.com</a></h1>
<style scoped>
#slide9 h1 {

0 comments on commit e1b5b0b

Please sign in to comment.