The last week I have been working on various projects for ScanYours and some of its customers. For ScanYours, I was working on a few features for the website which will be released in the coming weeks. One of this features includes a box with several summaries from our news section that did not fit properly within the page. To make the box fit, I reduced its height and wrote a script to let the items scroll in the containing box. The script below scrolls down one item at the time with an interval of five seconds (5000 milliseconds), while the scrolling itself takes one full second (1000 milliseconds) to make the scrolling look smooth and fancy. You can view the script in action here or take a look below at the class itself.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

/**
 * ScrollBox - Scrolls DIV-containers in a defined box
 *
 * @version 1.0
 * @license     GNU General Public License
 * @author      A.G. Gideonse (http://www.xirtcms.com)
 * @copyright   A.G. Gideonse
 */
var ScrollBox = new Class({

   /*
   * Initializes the scrolling
   */
   initialize: function(box) {

      this.box = $(box);

      this.scroll = new Fx.Scroll(this.box, {
         duration: 1000,
         wait: false
      });

      this.fxChain = new Chain();
      this.doScroll();
   },

   /**
   * Execution of scrolling movement
   */
   doScroll: function() {

      var items  = this.box.getElements('div');
      items.each(function(item) {
         this.fxChain.chain(function() {
            this.scroll.toElement(item);
         }.bind(this));
      }, this);

      runChain = function() { 

         if (this.fxChain.$chain.length) {
            this.fxChain.callChain();
            return true;
         }

         $clear(this.timer);
         this.doScroll();
      }.bind(this);

      runChain();
      this.timer = runChain.periodical(5000);
   }
});

Instructions & download

The class contains all the variables and methods required to let the script function (except of course the MooTools libraries) and can be initiated using the ID of the element containing the items: new ScrollBox('theNews'); (make sure that you do this after the ‘domready’ event has fired!). This script has been released under the GNU General Public License and can be viewed here. A demo package can be downloaded here and contains all the files used by the live demo.


Tagged: content, javascript, mootools