Scrolling a Layer Content

We have to give users the feeling that the menu drops down or rolls up when the Summary button is activated. Concretely, we will scroll the relevant layer downwards or upwards.

The targeted layer that we have to handle is called ContentLyr. To scroll it, we just need to change its top property's value.

To close the menu:

368:   contentLyr.top = (y_pos+(speed));

To open the menu:

361:   contentLyr.top = (y_pos-(speed));

The speed variable enables you to set the scrolling step.

Rather than using two different functions to scroll the layer in the two possible directions, we will create only one function, scrollPage(), which will receive two arguments at call time: the scrolling direction and the scrolling speed.

Here is the complete code which implements the scrolling of the menu layer:

347: //  SCROLL CONTROL
348: var loop = true;
349: var timer1 = null;
350: var direction = 'dn';
351: var speed = 1;
352:
353: function ScrollPage(dir,spd) {
354:   var y_pos = parseInt(contentLyr.top);
355:
356:   direction = dir;
357:   speed = spd;
358:   if(loop) {
359:     switch (direction) {
360:     case 'dn' :
361:          contentLyr.top = (y_pos-(speed));
362:          clearTimeout(timer1);
363:          timer1 = setTimeout("ScrollPage(direction,speed)", 1);
364:          break;
365:
366:       case 'up' :
367:          if (y_pos < 40) {
368:             contentLyr.top = (y_pos+(speed));
369:             clearTimeout(timer1);
370:             timer1 = setTimeout("ScrollPage(direction,speed)", 1);
371:          }
372:          break;
373:
374:       case 'top' :
375:          contentLyr.top = 40;
376:          break;
377:     }
378:   }

The switch instruction on line 359 ensures the execution of the right case group of instructions, based on the scrolling direction given by the direction variable's value.