janishutz-legacy/impress.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

impressive hardboiled fallback support added

Browse Source
This commit is contained in:
Bartek Szopka
2011-12-31 13:41:50 +01:00
parent 5ca2c6f510
commit 32a5c39857
4 changed files with 54 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@@ -9,7 +9,7 @@ BROWSER SUPPORT
----------------- -----------------
Impress.js is developed with current webkit-based browsers in mind (Chrome, Impress.js is developed with current webkit-based browsers in mind (Chrome,
Safari), but *should* work also in other browsers supporting CSS3 transforms Safari), but *should* work also in other browsers supporting CSS3 3D transforms
and transitions (Firefox, IE10). and transitions (Firefox, IE10).
It's actively developed with newest Chromium and tested in Firefox Aurora. It's actively developed with newest Chromium and tested in Firefox Aurora.
@@ -17,6 +17,9 @@ It's actively developed with newest Chromium and tested in Firefox Aurora.
I don't really expect it to run smoothly in non-webkit-based browser. I don't really expect it to run smoothly in non-webkit-based browser.
If it does, just let me know, I'll glad to hear that! If it does, just let me know, I'll glad to hear that!
For browsers not supporting CSS3 3D transforms impress.js adds `impress-not-supported`
class on `#impress` element, so fallback styles can be applied.
LICENSE LICENSE
--------- ---------

32
css/style.css
View File

@@ -64,6 +64,7 @@ body {
} }
b, strong { font-weight: bold } b, strong { font-weight: bold }
i, em { font-style: italic}
a { a {
color: inherit; color: inherit;
@@ -403,3 +404,34 @@ a:hover {
white-space: nowrap; white-space: nowrap;
} }
/* IMPRESS NOT SUPPORTED STYLES */
.fallback-message {
font-family: sans-serif;
line-height: 1.3;
display: none;
width: 780px;
padding: 10px 10px 0;
margin: 20px auto;
border-radius: 10px;
border: 1px solid #E4C652;
background: #EEDC94;
}
.fallback-message p {
margin-bottom: 10px;
}
.impress-not-supported .step {
position: relative;
opacity: 1;
margin: 20px auto;
}
.impress-not-supported .fallback-message {
display: block;
}

8
index.html
View File

@@ -13,7 +13,13 @@
</head> </head>
<body> <body>
<div id="impress">
<div id="impress" class="impress-not-supported">
<div class="fallback-message">
<p>Your browser <b>doesn't support features required</b> by impress.js, so are presented with simplified version of this presentation.</p>
<p>For the best experience please use latest <b>Chrome</b> or <b>Safari</b> browser. Firefox 10 and Internet Explorer 10 <i>should</i> also handle it.</p>
</div>
<div class="step slide" data-x="-1000" data-y="-1500"> <div class="step slide" data-x="-1000" data-y="-1500">
<q>Aren't you just <b>bored</b> with all those slides-based presentations?</q> <q>Aren't you just <b>bored</b> with all those slides-based presentations?</q>

11
js/impress.js
View File

@@ -72,10 +72,21 @@
return " scaleX(" + s.x + ") scaleY(" + s.y + ") scaleZ(" + s.z + ") "; return " scaleX(" + s.x + ") scaleY(" + s.y + ") scaleZ(" + s.z + ") ";
} }
// CHECK SUPPORT
var impressSupported = (pfx("perspective") != null);
// DOM ELEMENTS // DOM ELEMENTS
var impress = document.getElementById("impress"); var impress = document.getElementById("impress");
if (!impressSupported) {
impress.className = "impress-not-supported";
return;
} else {
impress.className = "";
}
var canvas = document.createElement("div"); var canvas = document.createElement("div");
canvas.className = "canvas"; canvas.className = "canvas";