Browse files

Added browser support warning

  • Loading branch information...
1 parent b80daf1 commit 70c8ff7be9aa47c3c538d210cb147f53780394bc Justin Windle committed Oct 18, 2012
Showing with 125 additions and 30 deletions.
  1. +50 −0 css/style.css
  2. +48 −27 index.html
  3. +27 −3 js/makisu.js
View
50 css/style.css
@@ -164,9 +164,59 @@ a {
}
.toggle:hover {
+
background: #E42692;
}
+/* No CSS 3D support warning */
+.warning {
+
+ -webkit-transform: translateZ(2px);
+ -moz-transform: translateZ(2px);
+ -ms-transform: translateZ(2px);
+ -o-transform: translateZ(2px);
+ transform: translateZ(2px);
+
+ background: rgba(255,255,255,0.6);
+ position: fixed;
+ display: none;
+ z-index: 999;
+ height: 100%;
+ width: 100%;
+ left: 0;
+ top: 0;
+}
+
+.warning .message {
+
+ box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
+ border-radius: 5px;
+ text-align: center;
+ margin-left: -150px;
+ margin-top: -60px;
+ line-height: 1.5;
+ background: #222;
+ font-size: 12px;
+ position: absolute;
+ padding: 10px;
+ width: 280px;
+ color: #fff;
+ left: 50%;
+ top: 50%;
+}
+
+.warning .message h1 {
+
+ font-weight: 300;
+ font-size: 14px;
+}
+
+.warning .message a {
+
+ text-decoration: none;
+ color: #73C8A9;
+}
+
/* Individual styles */
.sashimi dt, .sashimi dd, .sashimi a { background: #73C8A9; }
View
75 index.html
@@ -62,46 +62,67 @@
</section>
+ <div class="warning">
+ <div class="message">
+ <h1>CSS 3D Not Detected :(</h1>
+ <p>I couldn't detect your browser's CSS 3D capabilities. If I'm wrong, please <a href="https://github.com/soulwire/Makisu/issues" target="_blank">file an issue</a>, otherwise, try a <a href="www.google.com/chrome" target="_blank">sexier browser</a></p>
+ </div>
+ </div>
+
<a href="https://github.com/soulwire/Makisu" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/makisu.js"></script>
<script>
- // Create Makisus
+ // The `enabled` flag will be `false` if CSS 3D isn't available
+
+ if ( $.fn.makisu.enabled ) {
+
+ var $sashimi = $( '.sashimi' );
+ var $nigiri = $( '.nigiri' );
+ var $maki = $( '.maki' );
+
+ // Create Makisus
+
+ $nigiri.makisu({
+ selector: 'dd',
+ overlap: 0.85,
+ speed: 1.7
+ });
+
+ $maki.makisu({
+ selector: 'dd',
+ overlap: 0.6,
+ speed: 0.85
+ });
+
+ $sashimi.makisu({
+ selector: 'dd',
+ overlap: 0.2,
+ speed: 0.5
+ });
- $( '.nigiri' ).makisu({
- selector: 'dd',
- overlap: 0.85,
- speed: 1.7
- });
+ // Open all
+
+ $( '.list' ).makisu( 'open' );
- $( '.maki' ).makisu({
- selector: 'dd',
- overlap: 0.6,
- speed: 0.85
- });
+ // Toggle on click
- $( '.sashimi' ).makisu({
- selector: 'dd',
- overlap: 0.2,
- speed: 0.5
- });
+ $( '.toggle' ).on( 'click', function() {
+ $( '.list' ).makisu( 'toggle' );
+ });
- // Open all
-
- $( '.list' ).makisu( 'open' );
+ // Disable all links
- // Toggle on click
+ $( '.demo a' ).click( function( event ) {
+ event.preventDefault();
+ });
- $( '.toggle' ).on( 'click', function() {
- $( '.list' ).makisu( 'toggle' );
- });
+ } else {
- // Disable all links
- $( '.demo a' ).click( function( event ) {
- event.preventDefault();
- });
+ $( '.warning' ).show();
+ }
</script>
</body>
View
30 js/makisu.js
@@ -26,10 +26,11 @@
// Global initialisation flag
var initialized = false;
- // Detect browser prefix and capabilities
+ // For detecting browser prefix and capabilities
var el = document.createElement( 'div' );
var re = /^(Moz|(w|W)ebkit|O|ms)(?=[A-Z])/;
+ // Establish vendor prefix and CSS 3D support
var vendor = (function() { for ( var p in el.style ) if( re.test(p) ) return p.match(re)[0]; })() || '';
var canRun = vendor + 'Perspective' in el.style;
var prefix = '-' + vendor.toLowerCase() + '-';
@@ -87,8 +88,9 @@
}));
});
+ // Add momentum to the container
$root.css(utils.prefix({
- 'animation': 'swing-out ' + ($kids.length * speed * (1 - overlap) * 1.4) + 's ease-in-out 0s 1 normal forwards'
+ 'animation': 'swing-out ' + ( $kids.length * time * 1.4 ) + 's ease-in-out 0s 1 normal forwards'
}));
$this.addClass( 'open' );
@@ -134,8 +136,9 @@
}));
});
+ // Add momentum to the container
$root.css(utils.prefix({
- 'animation': 'swing-in ' + ($kids.length * speed * (1 - overlap) * 1.0) + 's ease-in-out 0s 1 normal forwards'
+ 'animation': 'swing-in ' + ( $kids.length * time * 1.0 ) + 's ease-in-out 0s 1 normal forwards'
}));
$this.removeClass( 'open' );
@@ -183,6 +186,25 @@
// Plugin definition
$.fn.makisu = function( options ) {
+ // Notify if 3D isn't available
+ if ( !canRun ) {
+
+ var message = 'Failed to detect CSS 3D support';
+
+ if( console && console.warn ) {
+
+ // Print warning to the console
+ console.warn( message );
+
+ // Trigger errors on elements
+ this.each( function() {
+ $( this ).trigger( 'error', message );
+ });
+ }
+
+ return;
+ }
+
// Fires only once
if ( !initialized ) {
@@ -387,4 +409,6 @@
easing: 'ease-in-out'
};
+ $.fn.makisu.enabled = canRun;
+
})( jQuery );

0 comments on commit 70c8ff7

Please sign in to comment.