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 06: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,447
    You should be able to find what you need over at JavaScript Source.
    Lee

    ""Men occasionally stumble over the truth, but most of them pick themselves up and hurry off as if nothing ever happened."" -- Sir Winston Churchill

  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,447
    Thanks, Len. I'll make the change on the site.
    Lee

    ""Men occasionally stumble over the truth, but most of them pick themselves up and hurry off as if nothing ever happened."" -- Sir Winston Churchill

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