3. Implementation

Please follows the steps below to embed the scroller to your web page.

1. Includes the Script Files and Stylesheet

You have to includes nlsscroller.js into your web page. You also need to specify the stylesheet, for example nlsscroller.css, the standard stylesheet.


        <html>
<head>
<title>Embeding NlsScroller</title>
<link rel="StyleSheet" href="nlsscroller/nlsscroller.css" type="text/css" />
<script language="javascript" src=" nlsscroller/nlsscroller.js"></script>
</head>
</html>

2. Prepares the Content

The content is regular HTML. You can authors the content using your favorite HTML editor. It is recommended to define a DIV container and put your content into it. You have to specify id for the container.

        
        <div id="scrollerDiv" style="width:260px;height:320px;overflow:auto;">
          <div>
            <strong>Topic 1</strong>
            <p>Description here, Lorem ipsum dolor sit amet, 
              consetetur sadipscing elitr, sed diam nonumy eirmod...
            </p>
          </div>
          
          <span class="nlsscrollerbreak"></span>

          <div>
            <strong>Topic 2</strong>
            <p>Description here, Lorem ipsum dolor sit amet, 
              consetetur sadipscing elitr, sed diam nonumy eirmod...
            </p>
          </div>
           
          <span class="nlsscrollerbreak"></span>
          
          <div>
            <strong>Topic 3</strong>
            <p>Description here, Lorem ipsum dolor sit amet, 
              consetetur sadipscing elitr, sed diam nonumy eirmod...
            </p>
          </div>
          
        </div>
      

Note that in example above the id of the div container is scrollerDiv and also defined style for the container. This style is optional but recommended because when user the Javascript turned off in their browser, the content is still visible with scroll bars.

Also note that the content can be divided into topics. You can have more than 1 topics. Each topic must be well form HTML and separated by special SPAN tag.

        <span class="nlsscrollerbreak"></span>
      

3. Creates the Scroller

This is the last step. You don't need to be Javascript expert to create the scroller. Just copy this following code (please remove the line number), put it just below your DIV container. You can customize it if necessary. There you have have the scroller embeded and runing on your page.

        1. <script>
        2.   var n = new NlsScroller("scroll1");
        3.   n.width=300;
        4.   n.height=220;
        5.   n.setEffect(new NlsEffContinuous("direction=up,speed=40,step=1,delay=0"));
        6.   n.setContentById("scrollerDiv");
        7.   n.render("scrollerDiv");  
        8. </script>
      

The scroller id ("scroll1" in example above) cannot be number and cannot contains space. For example: ‘1234’ is invalid, ‘scroller 1’ is also invalid.

In the example above, the scroller is rendered in the same container as the content. Another alternative is render the scroller in another container. If you use this implementation method, you will need to hide the content simply using css display:none attribute. For example:

          <div id="contentDiv" style="display:none">Your contents here</div>
          <div id="scrollerDiv">Scroller will be rendered here</div>
          <script>
            ...
            scroller.render("scrollerDiv");
          </script>
        


4. Putting It All Together

Putting all the code above together results a page with scroller embeded.

        <html>

        <head>
          <title>Embeding NlsScroller</title>

          <link rel="StyleSheet" href="nlsscroller/nlsscroller.css" type="text/css" />
          <script language="javascript" src=" nlsscroller/nlsscroller.js"></script>
        </head>

        <body>

          <h1>Here is my first scroller</h1><br>

          <div id="scrollerDiv" style="width:220px;height:220px;overflow:auto;">
            <div>
              <strong>Topic 1</strong>
              <p>Description here, Lorem ipsum dolor sit amet, 
                consetetur sadipscing elitr, sed diam nonumy eirmod...
              </p>
            </div>

            <span class="nlsscrollerbreak"></span>

            <div>
              <strong>Topic 2</strong>
              <p>Description here, Lorem ipsum dolor sit amet, 
                consetetur sadipscing elitr, sed diam nonumy eirmod...
              </p>
            </div>

            <span class="nlsscrollerbreak"></span>

            <div>
              <strong>Topic 3</strong>
              <p>Description here, Lorem ipsum dolor sit amet, 
                consetetur sadipscing elitr, sed diam nonumy eirmod...
              </p>
            </div>
          </div>

          <script>
            var n = new NlsScroller("scroll1");
            n.width=300;
            n.height=220;
            n.setEffect(new NlsEffContinuous("direction=up,speed=40,step=1,delay=0"));
            n.setContentById("scrollerDiv");
            n.render("scrollerDiv");  
          </script>

        </body>
        </html>        
      
5. Using NlsScroller Effect

In the example above, the scroller is configured to with continuous scrolling which is the default scrolling mode. NlsScroller supports many other cross browsers effect for example slide, fade and wipe effect. Please check NlsScroller Effects for more detail.