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,
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).
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.
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
---------

32
css/style.css
View File

@@ -64,6 +64,7 @@ body {
}
b, strong { font-weight: bold }
i, em { font-style: italic}
a {
color: inherit;
@@ -403,3 +404,34 @@ a:hover {
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>
<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">
<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 + ") ";
}
// CHECK SUPPORT
var impressSupported = (pfx("perspective") != null);
// DOM ELEMENTS
var impress = document.getElementById("impress");
if (!impressSupported) {
impress.className = "impress-not-supported";
return;
} else {
impress.className = "";
}
var canvas = document.createElement("div");
canvas.className = "canvas";