Create smooth scroll?

**jerdy** · 01-22-2010, 05:19 AM

If you go to www.yogamoves.net and scroll down to the bottom of the page, you can see a scroll that says "Yoga to help you move through life".

I am using the marquee code, but I was wondering if javascript could create something a bit smoother so that it's less beef jerky.

Thank you

**vwphillips** · 01-22-2010, 12:08 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<style type="text/css">
<!--
#tagline {
  position:relative;overflow:hidden;width:500px;height:30px;border:solid black 1px;
}

#tagline DIV{
  position:absolute;left:0px;top:0px;width:250px;
}

#tagline1 {
  position:relative;overflow:hidden;width:500px;height:30px;border:solid black 1px;
}

#tagline1 DIV{
  position:absolute;left:0px;top:0px;width:250px;
}
-->
</style>
</head>

<body>
<div id="tagline"><div>Yoga to help you move through Life</div></div>
<br>
<div id="tagline1"><div>Yoga to help you move through Life</div></div>
<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
//  A           = a global variable                                                               (variable)
//  parameter 0 = the mode(see Note 1).                                                           (string)
//  parameter 1 = the unique ID name or element object.                                           (string or element object)
//  parameter 1 = the initial value.                                                              (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
//  A           = the global referencing the script instance.                                 (variable)
//  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
//  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
//  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
//  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
//                 field 0 the minimum value. (digits)
//                 field 1 the maximum value. (digits)
//  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
//                 'sin' progression starts fast and ends slow.
//                 'cos' progression starts slow and ends fast.
//
//  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//  Note 2:  The default units(excepting opacity) are 'px'.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  The scale is of particular use when re-calling the effect
//           in mid progression to retain an constant rate of progression.
//  Note 4:  The current effect value is recorded in A.data[0].
//  Note 5:  A function may be called on completion of the effect by assigning the function
//           to the animator intance property .Complete.
//           e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
 clearTimeout(this.to);
 this.time=ms||this.time||0;
 this.neg=srt<0||fin<0;
 this.data=[srt,srt,fin];
 this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
 this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
 this.inc=Math.PI/(2*this.mS);
 this.srttime=new Date().getTime();
 this.cng();
}

zxcAnimate.prototype.cng=function(){
 var oop=this,ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
 this.apply();
 if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
 else {
  this.data[0]=this.data[2];
  this.apply();
  if (this.Complete) this.Complete(this);
 }
}

zxcAnimate.prototype.apply=function(){
 if (isFinite(this.data[0])){
  if (this.data[0]<0&&!this.neg) this.data[0]=0;
  if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
  else zxcOpacity(this.obj,this.data[0]);
 }
}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>

<script language="JavaScript" type="text/javascript">
<!--

function MARQUEE(o){
 var p=document.getElementById(o.id);
 var obj=p.getElementsByTagName('DIV')[0];
 var srt=o.Direction=='left'?p.offsetWidth+5:-obj.offsetWidth-5;
 var fin=o.Direction=='left'?-obj.offsetWidth-5:p.offsetWidth+5;
 var oop=new zxcAnimate('left',obj,srt);
 oop.srt=srt;
 oop.fin=fin;
 oop.loop=o.Loop||false;
 oop.cnt=o.Loop;
 oop.duration=o.Duration||5000;
 oop.animate(oop.srt,oop.fin,oop.duration);
 oop.Complete=function(){
  if (this.data[0]==this.fin&&(!this.loop||this.cnt<=this.loop)){
   if (this.loop){
    this.cnt++;
   }
   oop.animate(this.srt,this.fin,this.duration);
  }
 }
}

MARQUEE({
 id:'tagline',
 Duration:10000,    // (optional) the time to travel one cycle in milli seconds. (digits, default = 5000)
 Direction:'left', // (optional) the direction of travel 'left' or 'right'.     (string, default = 'right')
 Loop:2            // (optional) the number of loops.                           (digits, default = infinate)
});


MARQUEE({
 id:'tagline1'
});

//-->
</script>
</body>

</html>

**jerdy** · 01-24-2010, 06:15 AM

Would this go on every page? or is there a way to link the code to an external file? If so, how would I go about that.

...Thank you for the help!

**vwphillips** · 01-24-2010, 09:42 AM

the code in red can be placed in an external javascript(in the page header
the code in blue must be cusomised to the page requirement and must be called afer the page has loaded or poisitioned at the bottom of the page

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<style type="text/css">
<!--
#tagline {
  position:relative;overflow:hidden;width:500px;height:30px;border:solid black 1px;
}

#tagline DIV{
  position:absolute;left:0px;top:0px;width:250px;
}

#tagline1 {
  position:relative;overflow:hidden;width:500px;height:30px;border:solid black 1px;
}

#tagline1 DIV{
  position:absolute;left:0px;top:0px;width:250px;
}
-->
</style>
</head>

<body>
<div id="tagline"><div>Yoga to help you move through Life</div></div>
<br>
<div id="tagline1"><div>Yoga to help you move through Life</div></div>
<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
//  A           = a global variable                                                               (variable)
//  parameter 0 = the mode(see Note 1).                                                           (string)
//  parameter 1 = the unique ID name or element object.                                           (string or element object)
//  parameter 1 = the initial value.                                                              (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
//  A           = the global referencing the script instance.                                 (variable)
//  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
//  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
//  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
//  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
//                 field 0 the minimum value. (digits)
//                 field 1 the maximum value. (digits)
//  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
//                 'sin' progression starts fast and ends slow.
//                 'cos' progression starts slow and ends fast.
//
//  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//  Note 2:  The default units(excepting opacity) are 'px'.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  The scale is of particular use when re-calling the effect
//           in mid progression to retain an constant rate of progression.
//  Note 4:  The current effect value is recorded in A.data[0].
//  Note 5:  A function may be called on completion of the effect by assigning the function
//           to the animator intance property .Complete.
//           e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
 clearTimeout(this.to);
 this.time=ms||this.time||0;
 this.neg=srt<0||fin<0;
 this.data=[srt,srt,fin];
 this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
 this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
 this.inc=Math.PI/(2*this.mS);
 this.srttime=new Date().getTime();
 this.cng();
}

zxcAnimate.prototype.cng=function(){
 var oop=this,ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
 this.apply();
 if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
 else {
  this.data[0]=this.data[2];
  this.apply();
  if (this.Complete) this.Complete(this);
 }
}

zxcAnimate.prototype.apply=function(){
 if (isFinite(this.data[0])){
  if (this.data[0]<0&&!this.neg) this.data[0]=0;
  if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
  else zxcOpacity(this.obj,this.data[0]);
 }
}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>

<script language="JavaScript" type="text/javascript">
<!--

function MARQUEE(o){
 var p=document.getElementById(o.id);
 var obj=p.getElementsByTagName('DIV')[0];
 var srt=o.Direction=='left'?p.offsetWidth+5:-obj.offsetWidth-5;
 var fin=o.Direction=='left'?-obj.offsetWidth-5:p.offsetWidth+5;
 var oop=new zxcAnimate('left',obj,srt);
 oop.srt=srt;
 oop.fin=fin;
 oop.loop=o.Loop||false;
 oop.cnt=o.Loop;
 oop.duration=o.Duration||5000;
 oop.animate(oop.srt,oop.fin,oop.duration);
 oop.Complete=function(){
  if (this.data[0]==this.fin&&(!this.loop||this.cnt<=this.loop)){
   if (this.loop){
    this.cnt++;
   }
   oop.animate(this.srt,this.fin,this.duration);
  }
 }
}

MARQUEE({
 id:'tagline',
 Duration:10000,    // (optional) the time to travel one cycle in milli seconds. (digits, default = 5000)
 Direction:'left', // (optional) the direction of travel 'left' or 'right'.     (string, default = 'right')
 Loop:2            // (optional) the number of loops.                           (digits, default = infinate)
});


MARQUEE({
 id:'tagline1'
});

//-->
</script>
</body>

</html>

**jerdy** · 01-25-2010, 06:19 AM

Awesome, will give it a go tomorrow. Thank ya

Edit: Okay I uploaded what I thought you were saying but I must have gotten some wires crossed somewhere...eek.
I am unable to change the speed and also the direction of the scroll, it seems like it's not linking up to the .js file or sometin.

www.yogamoves.net
(Bottom of pg)

**vwphillips** · 01-25-2010, 10:46 AM

this goes in the external javascript

Code:

// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
//  A           = a global variable                                                               (variable)
//  parameter 0 = the mode(see Note 1).                                                           (string)
//  parameter 1 = the unique ID name or element object.                                           (string or element object)
//  parameter 1 = the initial value.                                                              (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
//  A           = the global referencing the script instance.                                 (variable)
//  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
//  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
//  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
//  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
//                 field 0 the minimum value. (digits)
//                 field 1 the maximum value. (digits)
//  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
//                 'sin' progression starts fast and ends slow.
//                 'cos' progression starts slow and ends fast.
//
//  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//  Note 2:  The default units(excepting opacity) are 'px'.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  The scale is of particular use when re-calling the effect
//           in mid progression to retain an constant rate of progression.
//  Note 4:  The current effect value is recorded in A.data[0].
//  Note 5:  A function may be called on completion of the effect by assigning the function
//           to the animator intance property .Complete.
//           e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
 clearTimeout(this.to);
 this.time=ms||this.time||0;
 this.neg=srt<0||fin<0;
 this.data=[srt,srt,fin];
 this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
 this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
 this.inc=Math.PI/(2*this.mS);
 this.srttime=new Date().getTime();
 this.cng();
}

zxcAnimate.prototype.cng=function(){
 var oop=this,ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
 this.apply();
 if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
 else {
  this.data[0]=this.data[2];
  this.apply();
  if (this.Complete) this.Complete(this);
 }
}

zxcAnimate.prototype.apply=function(){
 if (isFinite(this.data[0])){
  if (this.data[0]<0&&!this.neg) this.data[0]=0;
  if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
  else zxcOpacity(this.obj,this.data[0]);
 }
}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}



function MARQUEE(o){
 var p=document.getElementById(o.id);
 var obj=p.getElementsByTagName('DIV')[0];
 var srt=o.Direction=='left'?p.offsetWidth+5:-obj.offsetWidth-5;
 var fin=o.Direction=='left'?-obj.offsetWidth-5:p.offsetWidth+5;
 var oop=new zxcAnimate('left',obj,srt);
 oop.srt=srt;
 oop.fin=fin;
 oop.loop=o.Loop||false;
 oop.cnt=o.Loop;
 oop.duration=o.Duration||5000;
 oop.animate(oop.srt,oop.fin,oop.duration);
 oop.Complete=function(){
  if (this.data[0]==this.fin&&(!this.loop||this.cnt<=this.loop)){
   if (this.loop){
    this.cnt++;
   }
   oop.animate(this.srt,this.fin,this.duration);
  }
 }
}

this is the new CSS

Code:

#tagline {
  position:relative;overflow:hidden;width:500px;height:30px;border:solid black 1px;
}

#tagline DIV{
  position:absolute;left:0px;top:0px;width:250px;
}

#tagline1 {
  position:relative;overflow:hidden;width:500px;height:30px;border:solid black 1px;
}

#tagline1 DIV{
  position:absolute;left:0px;top:0px;width:250px;
}

this replaces the tagline div

Code:

<div id="tagline"><div>Yoga to help you move through Life</div></div>
<script type="text/javascript">
/*<![CDATA[*/
MARQUEE({
 id:'tagline',
 Duration:10000,    // (optional) the time to travel one cycle in milli seconds. (digits, default = 5000)
 Direction:'right', // (optional) the direction of travel 'left' or 'right'.     (string, default = 'right')
 Loop:'infinate'            // (optional) the number of loops.                           (digits, default = infinate)
});

/*]]>*/
</script>

**jerdy** · 01-25-2010, 07:51 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Yogamoves ~ Yoga to help you move through Life</title>
<link href="css/yoga_moves.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>YOGAMOVES - RELAX</title>
<script type="text/javascript" src="js/smooth_scroll.js">
</head>
<body>
<center>
<div id="header"> </div>
<div id="container">
<div id="navigation">
		<ul>
        <li><a href="index.html" class="selected"><font color="#2829A6">Home</font></a></li>
        <li><a href="eye_pillows.html">Eye Pillows</a></li>
        <li><a href="blog.html">Yoga Talk</a></li>
		<li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        </ul>
        </div>
<div id="content">
<center>
<h2>Thought for the Day</h2>
<p style="margin-top:-15px">with <b>Laureen Lucero</b></p>  
<p><img src="img/namaste.jpg" width="220" height="239" alt="namaste" />
<div id="quote"></div>
</div>
<div id="footer">Website designed by <a href="http://www.metzhere.com">Amber Metz</a> ~ Background Image Provided by <a href="http://casperium.deviantart.com/">casperium</a></div></div>
<style type="text/css">
#tagline {
  position:relative;overflow:hidden;width:500px;height:30px;border:solid black 1px;
}

#tagline DIV{
  position:absolute;left:0px;top:0px;width:250px;
}

#tagline1 {
  position:relative;overflow:hidden;width:500px;height:30px;border:solid black 1px;
}

#tagline1 DIV{
  position:absolute;left:0px;top:0px;width:250px;
}
</style>
<div id="tagline"><h1>Yoga to help you move through Life</h1></div>
<script type="text/javascript">
/*<![CDATA[*/
MARQUEE({
 id:'tagline',
 Duration:10000,    // (optional) the time to travel one cycle in milli seconds. (digits, default = 5000)
 Direction:'right', // (optional) the direction of travel 'left' or 'right'.     (string, default = 'right')
 Loop:'infinate'            // (optional) the number of loops.                           (digits, default = infinate)
});

/*]]>*/
</script>
</body>
</html>

Ah still having problems

Now the scroll is not moving, I think I may be misplacing the code? Or maybe forgetting some code.

**vwphillips** · 01-26-2010, 12:46 PM

Code:

<script type="text/javascript" src="js/smooth_scroll.js">

should be

Code:

<script type="text/javascript" src="js/smooth_scroll.js" ></script>

and

Code:

<div id="tagline"><h1>Yoga to help you move through Life</h1></div>

should be

Code:

<div id="tagline"><div><h1>Yoga to help you move through Life</h1></div></div>

but I will need a link to your page to check the the external javascript is correct

**jerdy** · 01-27-2010, 07:19 AM

Cool, changes are made. The .js external file is located in the head of this page: www.yogamoves.net/index.html

I must have something wrong

**vwphillips** · 01-27-2010, 12:16 PM

remove

Code:

</script>

<script language="JavaScript" type="text/javascript">
<!--

from the middle of the external java script

replace

Code:

<script type="text/javascript" src="js/smooth_scroll.js">
/*<![CDATA[*/
MARQUEE({
 id:'tagline',
 Duration:100000,    // (optional) the time to travel one cycle in milli seconds. (digits, default = 5000)
 Direction:'left', 	// (optional) the direction of travel 'left' or 'right'.       (string, default = 'right')
 Loop:'infinate'   // (optional) the number of loops.                    (digits, default = infinate)
});

/*]]>*/
</script>

with

Code:

<script type="text/javascript">
/*<![CDATA[*/
MARQUEE({
 id:'tagline',
 Duration:100000,    // (optional) the time to travel one cycle in milli seconds. (digits, default = 5000)
 Direction:'left', 	// (optional) the direction of travel 'left' or 'right'.       (string, default = 'right')
 Loop:'infinate'   // (optional) the number of loops.                    (digits, default = infinate)
});

/*]]>*/
</script>

insert the additional css in the header

Code:

#tagline {
  position:relative;overflow:hidden;width:640px;height:30px;border:solid black 1px;
}

#tagline DIV{
  position:absolute;left:0px;top:0px;width:300px;
}

Thread: Create smooth scroll?

Thread Tools

Search Thread

Create smooth scroll?

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions