Friday, November 20th, 2009

Friday Fun; Scroll Clock

Category: Fun, MooTools

<>p>This is in the crazy but fun category, so I had to post this on a Friday. Toki Woki Scroll Clock:

scrollclock

Amazing what folks do with div overflows :)

All in a few lines of MooTools-used-JS:

javascript
< view plain text >
  1. var h1, h2, m1, m2, s1, s2;
  2. window.addEvent('domready', function() {
  3.     h1=new Digit();
  4.     h2=new Digit();
  5.     m1=new Digit();
  6.     m1.pushRight();
  7.     m2=new Digit();
  8.     s1=new Digit();
  9.     s1.pushRight();
  10.     s2=new Digit();
  11.     $('main').adopt(h1.getElement(), h2.getElement(), m1.getElement(), m2.getElement(), s1.getElement(), s2.getElement());
  12.     showTime();
  13.     setInterval('showTime()', 1000);
  14. });
  15. function showTime() {
  16.     var now=new Date();
  17.     h1.show(now.getHours()/10);
  18.     h2.show(now.getHours());
  19.     m1.show(now.getMinutes()/10);
  20.     m2.show(now.getMinutes());
  21.     s1.show(now.getSeconds()/10);
  22.     s2.show(now.getSeconds());
  23. }
  24. var barDim=120;
  25. var sbDim=18;
  26. var Bar = new Class({
  27.     initialize: function(dir) {
  28.         this.dir = dir;
  29.         var dim=dir=='v' ? barDim : (Browser.Engine.gecko ? barDim : barDim+sbDim);
  30.         this.holder=new Element('div', {styles:{width:dir=='h' ? dim : sbDim, height:dir=='h' ? sbDim : dim, overflow:'auto', float:'left'}});
  31.         this.content=new Element('div', {html:'&nbsp;'});
  32.         this.activate(true, true);
  33.         this.holder.adopt(this.content);
  34.     },
  35.     activate:function(b, now) {
  36.         var side=this.dir=='h' ? 'width' : 'height';
  37.         if (now) this.content.setStyle(side, b ? barDim+sbDim : barDim/2);
  38.         else this.content.tween(side, b ? barDim*2 : barDim/2);
  39.     },
  40.     getElement:function() {
  41.         return this.holder;
  42.     }
  43. });
  44. var HBar = new Class({
  45.     Extends: Bar,
  46.     initialize: function(){
  47.         this.parent('h');
  48.         this.holder.setStyles({'margin-left': sbDim, 'margin-right': sbDim});
  49.     }
  50. });
  51. var VBar = new Class({
  52.     Extends: Bar,
  53.     initialize: function(){
  54.         this.parent('v');
  55.     },
  56.     pushRight:function() {
  57.         this.holder.setStyle('margin-left', barDim);
  58.     }
  59. });
  60. var Digit=new Class({
  61.     initialize: function() {
  62.         var holder=this.holder=new Element('div', {styles:{width: barDim+2*sbDim, float:'left', 'margin-right':20}});
  63.         this.bars=[new HBar(), new VBar(), new VBar(), new HBar(), new VBar(), new VBar(), new HBar()];
  64.         this.bars[2].pushRight();
  65.         this.bars[5].pushRight();
  66.         this.bars.each(function(it) {holder.adopt(it.getElement());});
  67.         this.lights=[
  68.             [1, 1, 1, 0, 1, 1, 1],//0
  69.             [0, 0, 1, 0, 0, 1, 0],//1
  70.             [1, 0, 1, 1, 1, 0, 1],//2
  71.             [1, 0, 1, 1, 0, 1, 1],//3
  72.             [0, 1, 1, 1, 0, 1, 0],//4
  73.             [1, 1, 0, 1, 0, 1, 1],//5
  74.             [1, 1, 0, 1, 1, 1, 1],//6
  75.             [1, 0, 1, 0, 0, 1, 0],//7
  76.             [1, 1, 1, 1, 1, 1, 1],//8
  77.             [1, 1, 1, 1, 0, 1, 1] //9
  78.         ];
  79.     },
  80.     show: function(n) {
  81.         n=Math.floor(n);
  82.         n=n%10;
  83.         var light=this.lights[n];
  84.         this.bars.each(function(it, index) {
  85.             it.activate(light[index]==1);
  86.         });
  87.     },
  88.     pushRight:function() {
  89.         this.holder.setStyle('margin-left', '50px');
  90.     },
  91.     getElement:function() {
  92.         return this.holder;
  93.     }
  94. });

Related Content:

  • Is it just me...
    Tongue firmly in cheek for this one, but is it just me or do you get the feeling that Friday's just aren't quite what they used to be? The fun seems...
  • Have you got that Dotcom feeling?


    Games consoles, table football, fridges full of beer and "big balls of light" - Roisin Woolnough explores some new...
  • IT Channel News Briefs, May 16
    Today's headlines: Touch-screen BlackBerry? Oracle promotes SOA. Verizon shuns...
  • Building an Oracle team
    In today's e-business environment, maintaining high availability, optimizing performance and delivering consistent service are essential. Building and...
  • Laptop review: Dell Latitude D430
    The Dell Latitude D430 laptop, their current toted ultraportable, is designed with the highly mobile road warrior in...

Posted by Dion Almaer at 7:35 am
7 Comments

++++-
4.5 rating from 45 votes

7 Comments »

Comments feed TrackBack URI

This made my day.

Comment by ywg — November 20, 2009

Haha. Awesome!

Comment by WillPeavy — November 20, 2009

Doesn’t work for me. FF 3.5.5 XP SP3

Comment by tj111 — November 20, 2009

Awesome.

(FF 3.6b3)

Comment by Darkimmortal — November 20, 2009

Saw this earlier from the Mootools twitter feed, very cool! Not exactly useful, but still awesome, and some very clean code too.

Comment by MattCoz — November 20, 2009

@tj111

Works for me in FF3.5.5 on XP SP3.

Comment by jlizarraga — November 20, 2009

looks much better on mac with those blue scroller. on windows, it’s just plain grey. looks awesome and definitely a fun project.

Comment by bizsimon — November 25, 2009

Leave a comment

You must be logged in to post a comment.