www.webdeveloper.com
Results 1 to 8 of 8

Thread: help with news scroller

  1. #1
    Join Date
    Nov 2007
    Posts
    4

    help with news scroller

    I'm new to javascript and I found this code which I want to use it in with my other piece of code.

    Code:
    <!-- TWO STEPS TO INSTALL LEN'S NEWS SCROLLER:
    
    
    
      1.  Copy the coding into the HEAD of your HTML document
    
      2.  Add the last code into the BODY of your HTML document  -->
    
    
    
    <!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
    
    
    
    <HEAD>
    
    
    
    <!-- This script and many more are available free online at -->
    
    <!-- The JavaScript Source!! http://javascript.internet.com -->
    
    <!-- Original:  Len Dierickx (webmaster@n.one.port5.com) -->
    
    <!-- Web Site:  http://n.one.port5.com -->
    
    <script type="text/javascript">
    
        //<![CDATA[
    
        <!--
    
        function scrollerObj(name,initH,initW,heightB,widthB,content,initBg,Bg,speed,initFl){
    
        //**data**//
    
        this.name=name;
    
        this.initH=initH;
    
        this.initW=initW;
    
        this.heightB=heightB;
    
        this.widthB=widthB;
    
        this.content=content;
    
        this.initBg=initBg;
    
        this.Bg=Bg;
    
        this.iniFl=initFl;
    
        this.speed=parseInt(speed);
    
        this.timer = name + "Timer";
    
        this.elem;
    
    
    
    
    
        //**methods**//
    
        this.getElement = getElement;
    
        this.createLayer=createLayer;
    
        this.scrollLayer = scrollLayer; 
    
        this.scrollLoop=scrollLoop;
    
    
    
        //**initiate methods**//
    
        this.createLayer();
    
        this.getElement();
    
        this.scrollLayer();
    
        }
    
    
    
        //**call this method to stop scrolling**//
    
        function scrollLoop(s){
    
        this.speed = s;
    
        }
    
    
    
        //**pretty obvious**//
    
        function scrollLayer(){
    
        if(parseInt(this.elem.style.top)>(this.elem.offsetHeight*(-1))){
    
            this.elem.style.top = parseInt(this.elem.style.top)-this.speed;
    
            //alert(parseInt(this.elem.style.top)+"\n"+this.elem.id);
    
        }
    
        else {this.elem.style.top = this.initH;}
    
        }
    
    
    
        //**get the specific dom-expression**//
    
        function getElement(){
    
        if(document.getElementById){
    
            this.elem = document.getElementById(this.name);
    
            }
    
        else if (document.all){
    
        this.elem = document.all[name];
    
            }
    
        else if (document.layers){
    
        this.elem = document.layers[name];
    
            }
    
        }
    
    
    
        //**pretty obvious - if NS4 - please upgrade to a standard compliant browser**//
    
        function createLayer(){
    
        if(document.getElementById || document.all){
    
        document.write('<div id="layer'+this.name+'" style="position:relative;overflow:hidden;float:'+this.initFl+';background-color:#'+this.initBg+';border:1px solid black;width:'+this.initW+'px;height:'+this.initH+'px;" onMouseover="'+this.name+'.scrollLoop(0)" onMouseout="'+this.name+'.scrollLoop('+this.speed+')">');
    
        document.write('<div id="'+this.name+'" style="position:absolute;top:'+this.initH+'px;left:0px;border:0px solid black;width:'+this.widthB+'px;height:'+this.heightB+'px;background-color:#'+this.Bg+'">');
    
        document.write(this.content);
    
        document.write('<\/div><\/div>');}
    
        else if(document.layers){
    
            document.write('<ilayer name="'+this.name+'" bgcolor="#'+this.Bg+'" width="'+this.widthB+'" height="'+this.heightB+'">'+this.content+'<\/ilayer>');
    
            return;
    
        }
    
        if(this.scrollLayer){
    
          this.timer = setInterval(this.name+'.scrollLayer()','30');
    
        }
    
        }
    
    
    
        //-->
    
    
    
    
    
        //]]>
    
        </script>
    
        <style media="screen" type="text/css">
    
        /*<![CDATA[*/
    
        <!-- 
    
         BODY{ background-color:#99CCCC;}
    
        P{color:#465d5c;margin:3px;}
    
        A{color:#e86500}
    
        H1{color:#465d5c;font-size:11px;font-weight:normal;font-weight:bold;font-size:11px;font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;margin:3px; padding:0px}
    
        H2{color:#465d5c;font-size:11px;font-weight:bold;font-size:11px;font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;margin:3px; padding:0px}
    
        .art{font-weight:normal;font-size:11px;font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;width:100%;border-top:1px solid #FFFFFF;border-bottom:1px solid #FF7F00; padding:3px;margin-bottom:10px;text-align: justify;}
    
        .state{color:#e86500;margin-left:5px;margin-right:5px;}
    
        #art1{background-color:#FFBB00;}
    
        #art2{background-color:#FFCC00;}
    
        #art3{background-color:#FFDD00;}
    
        #art4{background-color:#FFEE00;}
    
        #main{background-image: url(img/bg_px_3.gif);background-color: #cc6600;width:600px;padding-bottom:75px;border:1px solid white}
    
        #logo{margin-left:10px; margin-top:3px; margin-bottom:10px; font-weight:bold;font-size:11px;font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;width:100%;}
    
        #date{font-size:9px; font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;color:#545454}
    
    
    
        -->
    
        /*]]>*/
    
        </style>
    
    </HEAD>
    
    
    
    <!-- STEP TWO: Copy this code into the BODY of your HTML document  -->
    
    
    
    <BODY>
    
    
    
    <!-- This script and many more are available free online at -->
    
    <!-- The JavaScript Source!! http://javascript.internet.com -->
    
    <!-- Original:  Len Dierickx (webmaster@n.one.port5.com) -->
    
    <!-- Web Site:  http://n.one.port5.com -->
    
    <div align="center">
    
            <script type="text/javascript">
    
            //<![CDATA[
    
            <!--
    
            var c = new scrollerObj('c','300','100','50','100','<h1>newssscroller<\/h1><p>This scroller code will allow you to put several newsboxes on your site. You can put any valid html in the box, including images.<\/p><p>Please note that when you put the ooscroller in a table, this will not work in Mozilla. When you hover your mouse over the box when running Mozilla: not working either. If anybody knows whats going on please <a href="mailto:webmaster@n.one.port5.com">mail me<\/a><\/p>','FFDD00','cccccc','2','center');
    
            //-->
    
            //]]>
    
            </script>
    
    </div>
    
    
    
    <p><center>
    
    <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
    
    by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
    
    </center><p>
    
    
    
    <!-- Script Size:  5.68 KB -->
    I want the texts within the ul to be a news scroller. Please help! But if this scroller code doesn't work with this piece of code, can someone please suggest another scroller code. Thank you!
    Code:
    <table width="100%"> 
            <tr> 
              <td width="60%" align="left" valign="top"> <div id="NewsScroller"> 
                  <ul> 
                    <li>'The Site' First Birthday</li> 
                    <li>Fortune 10,000 Listing</li> 
                    <li>Product 2 Reaches 10 </li> 
                    <li>New Version Numbering</li> 
                    <li>New Services Added</li> 
                    <li>New Staff Members</li> 
                    <li>We're Hiring </li> 
                  </ul> 
                </div></td> 
    		</tr>
    </table>
    Last edited by mlorac; 11-14-2007 at 07:55 PM.

  2. #2
    Join Date
    Jan 2007
    Posts
    15

    Marquee, Son!

    Toss that javascript in the trash and use the heavily deprecated HTML tag, "<marquee>". Party like its 1996.

    http://www.scit.wlv.ac.uk/encyc/marquee.html

  3. #3
    Join Date
    Nov 2007
    Posts
    4
    I know about the <marquee> tag, but I need use javascript because <marquee> tag doesn't validate.

  4. #4
    Join Date
    May 2004
    Location
    FL
    Posts
    3,453
    You should be able to find what you need over at JavaScript Source.

  5. #5
    Join Date
    Nov 2007
    Posts
    3

    OOSCroller

    Hi,

    Nice to see someone using my code, if you need help, have a look at this page:

    http://blockquote.be/articles/javasc...ercise-in-oop/

    It has been a long time I created this JavaScript, but the page will help you modify all you need.

    Len.

  6. #6
    Join Date
    May 2004
    Location
    FL
    Posts
    3,453
    Thanks, Len. I'll make the change on the site.

  7. #7
    Join Date
    Nov 2007
    Posts
    3
    Updated the generator for the newsscroller to character encode single quotes.

    http://blockquote.be/articles/javasc...ercise-in-oop/
    Last edited by astuanax; 11-19-2007 at 11:07 AM.

  8. #8
    Join Date
    Nov 2007
    Posts
    4
    thank you astuanax...
    I'm checking out the links now.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles