Solved

java script scroll text

Posted on 2002-06-07
5
2,026 Views
Last Modified: 2007-11-27
Hi,
  I am writing a javascript text scroller.  It use
css clip property to create a viewpoint on a moving
layer.  The code works well under IE. But has some
issues in NS 4.7.  What happened is , the first message
show up, and scrolled. But the second message never show
up. I only know it has something to do with
the statement  div.clip.top = cliptop;
if I set div.clip.top=0, the second message will show up.
But of course, the effect is not what I want.
Can somebody help me out.

Thanks a lot. I am giving out all my points.
Sean


//html file
<html>
<head>
  <script src=scroll.js>
  </script>
</head>
<body onLoad="startTextScroll();">

<div id="msg" style="position:absolute;left:100;top:200; width:150; height:150; z-index: 0;  visibility: visible; overflow: hidden;">
  <script>
     document.write(messages[0]);
  </script>
</div>

</body>
</html>


//scroll.js

var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);

var viewpointtop;
var scrollerwidth;
var scrollerheight;
var clipbottom;
var cliptop;

var pause=1000;
var speed=100;

var messages=new Array()

messages[0]='<p> Scrolling Layers</p><p> It is written by Shane Zhang.</P><P>Jun 6, 2002 </P>';
messages[1]='<p>This code uses css clip </p><p>property to create a fix</p><p> viewpoint on a moving layer .</p>';
messages[2]='<p>3. Hope it be of some use to you.</p> Bye bye.';

//the message to showed
i=0;

function setClipWindow (div)
 {
   if(isNS)
    {
      div.clip.top = cliptop;
      div.clip.bottom = clipbottom ;
      div.clip.left = 0 ;
      div.clip.right = scrollerwidth ;
    }else{
      newrect="rect("+cliptop+","+scrollerwidth+","+clipbottom+","+"0)";
      div.clip=newrect;
    }
 }
function moveMsg(div)
{
   if (isNS) x=div.top;
   else x=div.pixelTop;
   if (x>=viewpointtop-scrollerheight)
   {
      // this is the moving part
      if (x>=viewpointtop)
        {
        //moving in
        cliptop=0;
        clipbottom+=5;
        }
      else
        {
        //moving out
        cliptop+=5;
        }
      if(isNS) div.top-=5;
      else div.pixelTop-=5;
 
      setClipWindow(div);
 
      //all mesg show up, pause a while
      if(cliptop==5)
        {
        cliptop=0;
        setClipWindow(div);
        setTimeout("moveMsg(div)",pause);
        cliptop=10;
        }
      else
        setTimeout("moveMsg(div)",speed);
   }
   else
   {
      //new message
      if (i==messages.length-1)
        i=0;
      else
        i++;
      if(isNS)
        {
          document.msg.document.open();
          document.msg.document.write(messages[i]);
          document.msg.document.close();
        }
      else {
        document.all["msg"].innerHTML=messages[i];
        }
      cliptop=0;
      clipbottom=5;
      if(isNS)
        div.top=viewpointtop+scrollerheight;
      else
        div.pixelTop=viewpointtop+scrollerheight;
      setClipWindow(div);
      setTimeout("moveMsg(div)",speed);
   }
}
 
function getObjectByName(name) {
   return (isNS) ? eval('document.'+name) : eval('document.all.'+name+'.style');
}

function startTextScroll(){
   div=getObjectByName("msg");
   if(isNS) viewpointtop=div.top;
   else viewpointtop=div.pixelTop;
   scrollerwidth=150;
   scrollerheight=150;
   //at the begining show the whole message
   cliptop=0;
   clipbottom=scrollerheight;
   moveMsg(div);
}

0
Comment
Question by:xiaoxiangz
5 Comments
 
LVL 33

Expert Comment

by:knightEknight
ID: 7063409
what happens if cliptop is undefined the first time the function is called?

try this:

div.clip.top = cliptop||0;
0
 

Author Comment

by:xiaoxiangz
ID: 7063707
The strange thing is
if I do this the code will work under NS 4.7

if(cliptop==0) cliptop=-1;
div.clip.top=cliptop;
0
 
LVL 33

Accepted Solution

by:
knightEknight earned 140 total points
ID: 7066788
instead of this:

if(cliptop==0) cliptop=-1;
div.clip.top=cliptop;



do this:

div.clip.top = (cliptop==0&&document.layers) ? -1 : cliptop;


... that way you won't change cliptop for the other browsers.
0
 
LVL 12

Expert Comment

by:ahosang
ID: 8276037
No comment has been added lately, so it's time to clean up this TA.
I will leave a recommendation in the Cleanup topic area that this question is:

points to knightEknight
Please leave any comments here within the next seven days.
 
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!
 
ahosang
EE Cleanup Volunteer
0
 

Expert Comment

by:modulo
ID: 8360623
Finalized as proposed

modulo

Community Support Moderator
Experts Exchange
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Underline in nav for the page that you are currently on. 1 22
multiple selects 23 49
Button on Table, name table1 not working 4 22
send email part1 9 28
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question