Quick Start Guide

This guide is provided to quickly starts using NlsScroller with examples and also intended for user who doesn't have proficiency in Javascript programming language.

  1. Installing NlsScroller
  2. Embeding NlsScroller into Web Page
  3. Slide effect Example
  4. Fade effect Example
  5. Wipe effect Example
  6. Blank effect Example
  7. IE's Visual Transition Effect Example
  8. Newsticker Example
  9. Scrolls RSS Feed
1. Installing NlsScroller

To install the scroller, just downloads the package and unzip the content into a prepared folder on your website.

 

2. Embeding NlsScroller into Web Page

Copy the following HTML code to HEAD section of your page.

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

Please make sure the path to script and stylesheet is correct.

Copy the following html code into your web page where the scroller will be displayed.

         <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>
      

Content is defined in DIV element with id=scrollerDiv.

Note that <span class="nlsscrollerbreak"></span> is topic break. You can have one or more topics in the content. Each topic can be text, html or image.

Copy the following code into your web page just below the scroller content.

        <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>
      

Complete example code:

      
      <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>              
      

 

3. Slide Effect Example

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

            <link rel="StyleSheet" href="nlsscroller/slide.css" type="text/css" />
            <script language="javascript" src=" nlsscroller/nlsscroller.js"></script>
            <script language="javascript" src=" nlsscroller/nlsscroller_eff_slide.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 NlsEffSlide("type=shift,direction=up,speed=10,stepsnum=40")
              );

              //uncomment this lines for slide in effect 
              //n.setEffect(
              //  new NlsEffSlide("type=in,direction=up,speed=10,stepsnum=40")
              //);

              //uncomment this lines for slide out effect 
              //n.setEffect(
              //  new NlsEffSlide("type=out,direction=up,speed=10,stepsnum=40")
              //);

              n.setContentById("scrollerDiv");
              n.render("scrollerDiv");  
            </script>

          </body>
        </html>       
      
      
 

4. Fade Effect Example

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

          <link rel="StyleSheet" href="nlsscroller/nlsscroller.css" type="text/css" />
          <script language="javascript" src=" nlsscroller/nlsscroller.js"></script>
          <script language="javascript" src=" nlsscroller/nlsscroller_eff_fade.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 NlsEffFade("tyle=linear,speed=5,stepsnum=50"));
            
            //uncomment this line for cross fade effect
            //n.setEffect(new NlsEffFade("tyle=cross,speed=5,stepsnum=50"));
            
            n.setContentById("scrollerDiv");
            n.render("scrollerDiv");  
          </script>

        </body>
      </html> 

      
 

5. Wipe Effect Example

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

          <link rel="StyleSheet" href="nlsscroller/nlsscroller.css" type="text/css" />
          <script language="javascript" src=" nlsscroller/nlsscroller.js"></script>
          <script language="javascript" src=" nlsscroller/nlsscroller_eff_wipe.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 NlsEffWipe("type=alternate,speed=5,stepsnum=100"));            
            
            //uncomment this line for vertical wipe effect
            //n.setEffect(new NlsEffWipe("type=vertical,speed=5,stepsnum=100"));            
           
            //uncomment this line for horizontal wipe effect
            //n.setEffect(new NlsEffWipe("type=horizontal,speed=5,stepsnum=100"));            

            n.setContentById("scrollerDiv");
            n.render("scrollerDiv");  
          </script>

        </body>
      </html> 

      
 

6. Blank Effect Example

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

          <link rel="StyleSheet" href="nlsscroller/nlsscroller.css" type="text/css" />
          <script language="javascript" src=" nlsscroller/nlsscroller.js"></script>
          <script language="javascript" src=" nlsscroller/nlsscroller_eff_blank.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 NlsEffBlank("speed=600"));            

            n.setContentById("scrollerDiv");
            n.render("scrollerDiv");  
          </script>

        </body>
        </html> 

      
 

7. IE's Visual Transition Effect Example


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

            <link rel="StyleSheet" href="nlsscroller/nlsscroller.css" type="text/css" />
            <script language="javascript" src=" nlsscroller/nlsscroller.js"></script>
            <script language="javascript" src=" nlsscroller/nlsscroller_eff_ievs.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 NlsEffIETrans(
                  ["progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.00,wipestyle=0,motion=forward);"]
                )
              );

              //other transition effect
              //n.setEffect(new NlsEffIETrans(["progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=CLOCK);"]));
              //n.setEffect(new NlsEffIETrans(["progid:DXImageTransform.Microsoft.Fade(Overlap=1);"]));
              //n.setEffect(new NlsEffIETrans(["progid:DXImageTransform.Microsoft.Stretch(stretchstyle=SPIN);"]));
              //n.setEffect(new NlsEffIETrans(["progid:DXImageTransform.Microsoft.Iris(irisstyle=CIRCLE,motion=in);"]));
              //n.setEffect(new NlsEffIETrans(["progid:DXImageTransform.Microsoft.Iris(irisstyle=CIRCLE,motion=in)","progid:DXImageTransform.Microsoft.Iris(irisstyle=STAR,motion=in)","progid:DXImageTransform.Microsoft.Spiral(GridSizeX=16,GridSizeY=16)","progid:DXImageTransform.Microsoft.Blinds( Bands=6,direction=up)", "progid:DXImageTransform.Microsoft.Wheel(spokes=4)"]));

              n.setContentById("scrollerDiv");
              n.render("scrollerDiv");  
            </script>

          </body>
        </html> 

        
 

8. Newsticker Example

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

            <link rel="StyleSheet" href="nlsscroller/newsticker.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="overflow:auto;height:40px;width:390px;">
              <span>ACMT <strong>5,232.01</strong> <strong style='color:#00cc00'>+10.9</strong>  </span>
              <span class="nlsscrollerbreak"></span>
              <span>BC&T <strong>7,323.88</strong> <strong style='color:#cc0000'>-3.99</strong>  </span>
              <span class="nlsscrollerbreak"></span>
              <span>ABCD <strong>9,123.12</strong> <strong style='color:#cc0000'>-1.0</strong>  </span>
              <span class="nlsscrollerbreak"></span>
              <span>GTRR <strong>3,877.45</strong> <strong style='color:#00cc00'>+4.43</strong>  </span>
              <span class="nlsscrollerbreak"></span>
              <span>YYHT <strong>345.99</strong> <strong style='color:#00cc00'>+9.85</strong>  </span>
            </div>            
            <script>
              var n = new NlsScroller("scroll1");
              n.setContentById("scrollerDiv");
              n.width=250;
              n.height=18;
              n.setEffect(new NlsEffContinuous("direction=left,speed=30,step=1,delay=0"));
              n.render("scrollerDiv");  
            </script>

          </body>
        </html>       
      
 

9. Scrolls RSS Feed

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

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

          <body>

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

            <div id="scrollerDiv" style="overflow:auto;height:270px;width:320px;"></div>

            <script>
              var n = new NlsScroller("scroll1");

              n.width=300;
              n.height=220;
              n.showToolbar=false;
              n.setEffect(new NlsEffContinuous("direction=up,speed=40,step=1,delay=0"));
              n.render("scrollerDiv");

              n.loadDynamicContent("loadfromrss.php?fname=http://valid_rss_feed_url_here");

            </script>  

          </body>
        </html>       
      

Note that is the example above you will need to specify valid RSS feed url.