Solved

java script scroll text

Posted on 2002-06-07
5
2,036 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 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

705 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