?
Solved

java script scroll text

Posted on 2002-06-07
5
Medium Priority
?
2,038 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 560 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
Suggested Courses

752 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