Solved

java script scroll text

Posted on 2002-06-07
5
2,012 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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now