SlickBoard | CSS/XML Timeline (new) | XML/SWF Charts | Timeline Eons

 < previousnext > 

 

Scroll

 

<scroll x='number'  
        y='number' 
        width='number' 
        height='number'
        mode='string' 
        />
      


Description

Scroll can be added to an object to make it scrollable. It can be used to manage long lists, wide control panels, graphics larger than their containers, etc.

Scrolling is activated by the mouse position without the need for clicking. Scrolling can be in one or both directions simultaneously (vertical & horizontal):

 

The scroll attributes are:

  • x: The horizontal position of the main scroll area relative to the upper left corner of the background (0, 0). The default is zero.

  • y: The vertical position of the main scroll area relative to the upper left corner of the background (0, 0). The default is zero.

  • width: The width of the main scroll area. The default is the board's width. To activate horizontal scrolling, the width of the scrolled object must be larger than this value.

  • height: The height of the main scroll area. The default is the board's height. To activate vertical scrolling, the height of the scrolled object must be larger than this value.

  • mode: This determines how the mouse position affects scrolling. Valid values are:

    • in: Scrolling takes place when the cursor is inside the scroll area defined by the x, y, width, and height attributes. When the cursor is at the center of the scroll area, then the center of the scrolled object is aligned with it. When the cursor is at the top-right corner of the scroll area, then the top-right corner of the scrolled object is aligned with it, and so on.

    • out: Scrolling takes place when the cursor is outside the scroll area defined by the x, y, width, and height attributes. When the cursor is inside the scroll area, then no scrolling takes place. When the cursor is below the scroll area, then the object is scrolled down. When the cursor is above the scroll area, then the object is scrolled up, and so on.

 

Example

<slickboard>
   
   <!-- a scrollling image that uses the scroll's 'in' mode -->
   <!-- position the cursor inside the red area to scroll -->
   <object>
      <image url='images/image_roadrunner.jpg' x='0' y='0' width='720' height='450' />   
      <scroll x='50' y='50' width='380' height='200' mode='in' />
   </object>
   
   <!-- the scroll area highlighted in red -->
   <rect x='50' y='50' width='380' height='200' fill_color='ff0000' fill_alpha='.2' />
   
</slickboard>

 


<slickboard>
   
   <!-- a scrollling image that uses the scroll's 'out' mode -->
   <!-- position the cursor outside the red area to scroll -->
   <object>
      <image url='images/image_roadrunner.jpg' x='0' y='0' width='720' height='450' />   
      <scroll x='50' y='50' width='380' height='200' mode='out' />
   </object>
   
   <!-- the scroll area highlighted in red -->
   <rect x='50' y='50' width='380' height='200' fill_color='ff0000' fill_alpha='.2' />
   
</slickboard>

 


<slickboard>
   
   <!-- red rectangle that highlights the scrolling area -->
   <rect x='145' y='45' width='110' height='210' fill_color='ff3300' />


   <!-- a list that scrolls only vertically-->
   <object offset_x='150' offset_y='50'>
      
      <rect x='0' y='0' width='100' height='300' fill_color='eeeeff' shadow='default' />   
      <scroll x='0' y='0' width='100' height='200' mode='out' />
      
      <object offset_y='0'>
         <rect x='2' y='2' width='96' height='46' fill_color='8888ff' state='hit' />   
         <rect x='2' y='2' width='96' height='46' fill_alpha='.2' state='over' />   
         <text x='2' y='2' width='96' height='46'>One</text> 
      </object>
      
      <object offset_y='50'>
         <rect x='2' y='2' width='96' height='46' fill_color='8888ff' state='hit' />   
         <rect x='2' y='2' width='96' height='46' fill_alpha='.2' state='over' />   
         <text x='2' y='2' width='96' height='46'>Two</text> 
      </object>
      
      <object offset_y='100'>
         <rect x='2' y='2' width='96' height='46' fill_color='8888ff' state='hit' />   
         <rect x='2' y='2' width='96' height='46' fill_alpha='.2' state='over' />   
         <text x='2' y='2' width='96' height='46'>Three</text> 
      </object>
      
      <object offset_y='150'>
         <rect x='2' y='2' width='96' height='46' fill_color='8888ff' state='hit' />   
         <rect x='2' y='2' width='96' height='46' fill_alpha='.2' state='over' />   
         <text x='2' y='2' width='96' height='46'>Four</text> 
      </object>
      
      <object offset_y='200'>
         <rect x='2' y='2' width='96' height='46' fill_color='8888ff' state='hit' />   
         <rect x='2' y='2' width='96' height='46' fill_alpha='.2' state='over' />   
         <text x='2' y='2' width='96' height='46'>Five</text> 
      </object>
      
      <object offset_y='250'>
         <rect x='2' y='2' width='96' height='46' fill_color='8888ff' state='hit' />   
         <rect x='2' y='2' width='96' height='46' fill_alpha='.2' state='over' />   
         <text x='2' y='2' width='96' height='46'>Six</text> 
      </object>
        
   </object>
   
   <filter>
      <shadow id='default' />
   </filter>
      
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us