added browser checking

Andrew Mahon (Type/Code) · Andrew Mahon (Type/Code) · commit cff80d969134 · 2010-12-01T19:48:10.000-05:00
diff --git a/css/tc.splash.css b/css/tc.splash.css
@@ -78,7 +78,6 @@ h1 span { display:none; }
 	display:block;
 	position:relative;
 	z-index:100;
-	
 	opacity:0;
 }
 
@@ -129,3 +128,17 @@ h1 span { display:none; }
 	left:1px;
 	outline:0;
 }
+
+.browser-hint{
+  position:fixed;
+  left:10px;
+  bottom:10px;
+  z-index:10000;
+  font-size:0.8em;
+  opacity:0;
+}
+
+.browser-hint a{
+  color: #6198bf;
+	text-decoration:none;
+}
diff --git a/index.html b/index.html
@@ -25,6 +25,8 @@ <h1><span>Type/Code</span></h1>
 			<p>See what we’re up to on <a href="http://blog.typeslashcode.com">our blog</a></p>
 		</div>
 		
+		<p class='browser-hint'>This works best on Google <a href='http://www.google.com/chrome/'>Chrome</a>.</p>
+		
 		<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.2.0/build/yui/yui-min.js&3.2.0/build/json/json-min.js&3.2.0/build/oop/oop-min.js&3.2.0/build/event-custom/event-custom-min.js&3.2.0/build/event/event-base-min.js&3.2.0/build/dom/dom-min.js&3.2.0/build/dom/dom-style-ie-min.js&3.2.0/build/pluginhost/pluginhost-min.js&3.2.0/build/node/node-min.js&3.2.0/build/event/event-delegate-min.js&3.2.0/build/querystring/querystring-stringify-simple-min.js&3.2.0/build/queue-promote/queue-promote-min.js&3.2.0/build/datatype/datatype-xml-min.js&3.2.0/build/io/io-min.js&3.2.0/build/event-simulate/event-simulate-min.js&3.2.0/build/node/node-event-simulate-min.js"></script>
 		<script type="text/javascript" src="scripts/lib/excanvas.compiled.js"></script>
 		<script type="text/javascript" src="scripts/lib/includes.sylvester.src.js"></script>
diff --git a/scripts/tc.app.js b/scripts/tc.app.js
@@ -5,6 +5,7 @@ var app = {
     selector:'#app',
     name:'Type/Code',
     version:0.2,
+    smallest_particle:2,
     particle_panel:null
   };
   
@@ -14,12 +15,13 @@ var app = {
     app.Y.Node.one('title').setContent(app.name);
     app.Y.augment(app ,app.Y.EventTarget);
     if (app.Y.UA.webkit) {
-      app.particle_panel = tc.particle.panel(app).render();
-      if(app.particle_panel){
-        app.particle_panel.add_squares(tc.squares.squares);
-      }
+      app.smallest_particle = 2;
     } else {
-      app.Y.Node.one('body').addClass('fallback');
+      app.smallest_particle = 4;
+    }
+    app.particle_panel = tc.particle.panel(app).render();
+    if(app.particle_panel){
+      app.particle_panel.add_squares(tc.squares.squares);
     }
   };
   
@@ -31,4 +33,17 @@ var app = {
       }
     });
     fadeIn.run();
-  };
+    app.showBrowserHint();
+  };
+  
+  app.showBrowserHint = function() {
+    if(app.smallest_particle != 2){
+      var fadeIn = new app.Y.Anim({
+        node: '.browser-hint',
+        to: {
+          opacity: 0.6
+        }
+      });
+      fadeIn.run();
+    }
+  }
diff --git a/scripts/tc.app.particle.context.js b/scripts/tc.app.particle.context.js
@@ -140,7 +140,7 @@ if(!tc){ var tc = {}; }
     
     function _draw(){
       //tc.util.log('tc.particle.context[_me.draw]');
-      var opacity, i;
+      var opacity, i, alpha;
       
       _me.context.globalAlpha = 1;
       _me.context.fillStyle = 'rgba(252,252,252,0.5)';
@@ -161,7 +161,13 @@ if(!tc){ var tc = {}; }
         );
       }
       
-      _me.context.globalAlpha = 1 - opacity + 0.01;
+      if(opacity){
+        alpha = 1 - opacity + 0.01;
+      } else {
+        alpha = 1;
+      }
+      
+      _me.context.globalAlpha = alpha;
       
       for(i = 0; i < _me.particles.length; i++){
         _me.particles[i].draw(_me.context);
diff --git a/scripts/tc.app.particle.panel.js b/scripts/tc.app.particle.panel.js
@@ -32,7 +32,7 @@ if(!tc){ var tc = {}; }
     this.add_squares = function(arr){
       var i;
       for(i = 0; i < arr.length; i++){
-        if(arr[i].s < 2){ return; }
+        if(arr[i].s < app.smallest_particle){ return; }
         (function(sq){
           var i, j, ax, ay;
           ax = ( sq.x );
