7. Multiple Instances

NlsScroller supports multiple instances in a page. Creating multiple instances of scroller is just the same as creating single instance of scroller. Each scroller could have its own contents, properties and style. To have different style for each instance:

  • Create another copy of stylesheet file (you can duplicate the standard stylesheet file).
  • Rename it to e.g nlsscroller2.css
  • Add prefix to all style rules. The prefix can be any string, it cannot start with number and cannot contain space). For example the prefix is "scroller2_" then in the stylesheet, it will looks like: 
                  .scroller2_nlsscroller {...}
              .scroller2_scrlcontent {...}
  • Set the property of stylePref of scroller with the prefix.
    For example: 
                  scroller.stylePref = "scroller2_";
The example below show how to create multiple instances of scroller with different style. 


        <html>
        <head>
        <title>Multiple Instances</title>
        <link rel="StyleSheet" href="nlsscroller/nlsscroller.css" type="text/css" />
        <link rel="StyleSheet" href="nlsscroller2.css" type="text/css" />
        <script language="javascript" src="nlsscroller/nlsscroller.js"></script>
        </head>
        
        <body>
        
          <div id="scrollerDiv1" style="overflow:auto;width:320px;height:240px;">
            <div>Your content 1</div>
            <span class="nlsscrollerbreak"></span>
            <div>Your content 2</div>
            <span class="nlsscrollerbreak"></span>
            <div>Your content 3</div>
          </div>
          <script>
            var n1 = new NlsScroller("scroll1");
            n1.width=300;
            n1.height=220;
            n1.setEffect(new NlsEffContinuous("direction=up,speed=40,step=1,delay=0"));
            n1.setContentById("scrollerDiv1");
            n1.render("scrollerDiv1");  
          </script>          
                    
          <div id="scrollerDiv2" style="overflow:auto;width:320px;height:240px;">
            <div>Your content 1</div>
            <span class="nlsscrollerbreak"></span>
            <div>Your content 2</div>
            <span class="nlsscrollerbreak"></span>
            <div>Your content 3</div>
          </div>          

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

        </body>

        </html>