Javascript scroll working!! but......

[bamben]

Hi all! I am new to javascript (I seam to be getting it right so far). I modifyed a java script that scrolled up and down on a page into a really cool script that builds a box around your website (unobtrusive). Now the script lets a user scroll in all directions including diaganol (all on mouse over) and double click makes it jump faster if you are in a hurry lol....

problem: I have been working really hard at making a button that toggles this script on and off (when off the scroll should be totally locked). I cant get my head around it though because my fuction playscroll() is called in the script at the very bottom (so this is like onload playscroll), to make a button that stops this is .... well I dont understand how I would do it because I would have to maybe first take this playscroll() code out and put it in my button like playscroll=true/playscroll=false ( but I like it set to scroll when loaded as it is now ) also the on mouse overs are making it difficult for me to get my head around ie: how the hell do I stop them lol!

Basicly: I love my script as it is now, only I really need to make a button that locks/un-locks the scroll




<script>

// *** D E F I N E V A R I A B L E S ***

// PUT YOUR CONTENT FILE
var filecontent = "http://www.mysite.com"; // put your content file
// SCROLLER OUTER BORDER IN PIXEL
var scrollborder = "1px";
var scrollbordercolor = "#CCCCCC";
// SCROLLBOX SIZE IN PIXEL:[999]px OR PERSENTAGE:[1-100]%
var scrollwidth = "94.7%";
var scrollheight = "94.3%";
// FILE NAVIGATION IMAGES (left & right) ATTRIBUTES
var imgleft = "scroll.png";
var imgright = "scroll.png";
var imgup = "scroll.png";
var imgdown = "scroll.png";
var imgwidth = "100%";
var imgheight = "100%";

// *** S T A R T S C R I P T ***

var TIME=9;

function LEFT(){
PAGE.scrollBy(-20,0);TIME=setTimeout('LEFT()',20);
}
function RIGHT(){
PAGE.scrollBy(20,0);TIME=setTimeout('RIGHT()',20);
}
function UP(){
PAGE.scrollBy(0,-20);TIME=setTimeout('UP()',20);
}
function DOWN(){
PAGE.scrollBy(0,20);TIME=setTimeout('DOWN()',20);
}
function DiDL(){
PAGE.scrollBy(-20,20);TIME=setTimeout('DiDL()',20);
}
function DiDR(){
PAGE.scrollBy(20,20);TIME=setTimeout('DiDR()',20);
}
function DiUR(){
PAGE.scrollBy(20,-20);TIME=setTimeout('DiUR()',20);
}
function DiUL(){
PAGE.scrollBy(-20,-20);TIME=setTimeout('DiUL()',20);
}
function STOP() {
clearTimeout(TIME);
}
function boxanak(){
var boxwidth=
document.writeln('<iframe name="PAGE" frameborder="1" scrolling="no" src="'+filecontent+'" style="position:absolute; width:94.7%; height:94.5%; border:1px outset #00CCFF; z-index:1; left: 2.5%; top: 2.5%; color:#FF0000; z-index:3;"></iframe>');
}
function playscroll(){

boxanak();

document.writeln('<div id="LEFT" style="position:absolute; width:2.5%; height:95%; z-index:1; top: 2.5%; left: 0; border: 1px none #000000;">');
document.writeln('<img class="klik" style="cursor:hand" src="'+ imgleft +'" border="0" width="'+ imgwidth +'" height="'+ imgheight +'" onmouseover="LEFT()" onmouseout="STOP()" onClick="PAGE.scrollBy(-200,0)">');
document.writeln('</div>');
document.writeln('<div id="LEFTlable" style="position:absolute; width:2.5%; height:50%; z-index:0; top: 50%; left: 0; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;">');
document.writeln('<center><span align="middle" style="color: #FF0000; font-family: Tahoma, Impact;font-size: 10;";>&lt;</span></center>');
document.writeln('</div>');
document.writeln('<div id="LEFTfill" style="position:absolute; width:2.5%; height:100%; z-index:-1; top: 0%; left: 0%; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;"></div>');

document.writeln('<div id="RIGHT" style="position:absolute; width:2.5%; height:95%; z-index:1; top: 2.5%; left: 97.5%; border: 1px none #000000;">');
document.writeln('<img class="klik" style="cursor:hand" src="'+ imgright +'" border="0" width="'+ imgwidth +'" height="'+ imgheight +'" onmouseover="RIGHT()" onmouseout="STOP()" onClick="PAGE.scrollBy(200,0)">');
document.writeln('</div>');
document.writeln('<div id="RIGHTlable" style="position:absolute; width:2.5%; height:50%; z-index:0; top: 50%; left: 97.5%; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;">');
document.writeln('<center><span align="middle" style="color: #FF0000; font-family: Tahoma, Impact;font-size: 10;";>&gt;</span></center>');
document.writeln('</div>');
document.writeln('<div id="RIGHTfill" style="position:absolute; width:2.5%; height:100%; z-index:-1; top: 0%; left: 97.5%; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;"></div>');

document.writeln('<div id="UP" style="position:absolute; width:95%; height:2.5%; z-index:1; left: 2.5%; top: 0; border: 1px none #000000;">');
document.writeln('<img class="klik" style="cursor:hand" src="'+ imgup +'" border="0" width="'+ imgwidth +'" height="'+ imgheight +'" onmouseover="UP()" onmouseout="STOP()" onClick="PAGE.scrollBy(0,-200)">');
document.writeln('</div>');
document.writeln('<div id="UPlable" style="position:absolute; width:95%; height:2.5%; z-index:0; left: 2.5%; top: 0; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;">');
document.writeln('<center><span style="color: #FF0000; font-family: Tahoma, Impact;font-size: 10;";> CLICK SCROLL </span></center>');
document.writeln('</div>');

document.writeln('<div id="DOWN" style="position:absolute; width:95%; height:2.5%; z-index:1; left: 2.5%; top: 97.5%; border: 1px none #000000;">');
document.writeln('<img class="klik" style="cursor:hand" src="'+ imgdown +'" border="0" width="'+ imgwidth +'" height="'+ imgheight +'" onmouseover="DOWN()" onmouseout="STOP()" onClick="PAGE.scrollBy(0,200)">');
document.writeln('</div>');
document.writeln('<div id="DOWNlable" style="position:absolute; width:95%; height:2.5%; z-index:0; left: 2.5%; top: 97.5%; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;">');
document.writeln('<center><span style="color: #FF0000; font-family: Tahoma, Impact;font-size: 10;";> CLICK SCROLL </span></center>');
document.writeln('</div>');




document.writeln('<div id="DIDL" style="position:absolute; width:25%; height:2.5%; z-index:2; left: 0%; top: 97.5%; background-color: #000000; layer-background-color: #FF0000; border: 1px none #000000;">');
document.writeln('<img class="klik" style="cursor:hand" src="'+ imgdown +'" border="0" width="'+ imgwidth +'" height="'+ imgheight +'" onmouseover="DiDL()" onmouseout="STOP()" onClick="PAGE.scrollBy(-200,200)">');
document.writeln('</div>');
document.writeln('<div id="DIDL2" style="position:absolute; width:2.5%; height:25%; z-index:3; left: 0%; top: 75%; background-color: #000000; layer-background-color: #FF0000; border: 1px none #000000;">');
document.writeln('<img class="klik" style="cursor:hand" src="'+ imgdown +'" border="0" width="'+ imgwidth +'" height="'+ imgheight +'" onmouseover="DiDL()" onmouseout="STOP()" onClick="PAGE.scrollBy(-200,200)">');
document.writeln('</div>');

document.writeln('<div id="DIDR" style="position:absolute; width:25%; height:2.5%; z-index:2; left: 75%; top: 97.5%; background-color: #000000; layer-background-color: #FF0000; border: 1px none #000000;">');
document.writeln('<img class="klik" style="cursor:hand" src="'+ imgdown +'" border="0" width="'+ imgwidth +'" height="'+ imgheight +'" onmouseover="DiDR()" onmouseout="STOP()" onClick="PAGE.scrollBy(200,200)">');
document.writeln('</div>');
document.writeln('<div id="DIDR2" style="position:absolute; width:2.5%; height:25%; z-index:3; left: 97.5%; top: 75%; background-color: #000000; layer-background-color: #FF0000; border: 1px none #000000;">');
document.writeln('<img class="klik" style="cursor:hand" src="'+ imgdown +'" border="0" width="'+ imgwidth +'" height="'+ imgheight +'" onmouseover="DiDR()" onmouseout="STOP()" onClick="PAGE.scrollBy(200,200)">');
document.writeln('</div>');

document.writeln('<div id="DIUR" style="position:absolute; width:25%; height:2.5%; z-index:2; left: 75%; top: 0%; background-color: #000000; layer-background-color: #FF0000; border: 1px none #000000;">');
document.writeln('<img class="klik" style="cursor:hand" src="'+ imgdown +'" border="0" width="'+ imgwidth +'" height="'+ imgheight +'" onmouseover="DiUR()" onmouseout="STOP()" onClick="PAGE.scrollBy(200,-200)">');
document.writeln('</div>');
document.writeln('<div id="DIUR2" style="position:absolute; width:2.5%; height:25%; z-index:3; left: 97.5%; top: 0%; background-color: #000000; layer-background-color: #FF0000; border: 1px none #000000;">');
document.writeln('<img class="klik" style="cursor:hand" src="'+ imgdown +'" border="0" width="'+ imgwidth +'" height="'+ imgheight +'" onmouseover="DiUR()" onmouseout="STOP()" onClick="PAGE.scrollBy(200,-200)">');
document.writeln('</div>');

document.writeln('<div id="DIUL" style="position:absolute; width:25%; height:2.5%; z-index:2; left: 0%; top: 0%; background-color: #000000; layer-background-color: #FF0000; border: 1px none #000000;">');
document.writeln('<img class="klik" style="cursor:hand" src="'+ imgdown +'" border="0" width="'+ imgwidth +'" height="'+ imgheight +'" onmouseover="DiUL()" onmouseout="STOP()" onClick="PAGE.scrollBy(-200,-200)">');
document.writeln('</div>');
document.writeln('<div id="DIUL2" style="position:absolute; width:2.5%; height:25%; z-index:3; left: 0%; top: 0%; background-color: #000000; layer-background-color: #FF0000; border: 1px none #000000;">');
document.writeln('<img class="klik" style="cursor:hand" src="'+ imgdown +'" border="0" width="'+ imgwidth +'" height="'+ imgheight +'" onmouseover="DiUL()" onmouseout="STOP()" onClick="PAGE.scrollBy(-200,-200)">');
document.writeln('</div>');


}

playscroll();
</script>


http://www.dynamicdrive.com (this is nothing)

[bamben]

does any one have an idear how to do this button?

Ive experimented with ading a var YES = "true" but I dont think I am doing it right!?

Ive also tryed adding if yes true to playscroll but that dont work eather

??

[ddadmin]

This doesn't look like a DD script. I'm moving it over to the general JavaScript forum. Also, a link to the script in question may help those helping out.

[bamben]

This script has ON/OFF buttons exactly how I need them but I cant seem to copy what happens exactly..... Does any one know how?????

===========================================================
Script: TriState Rainbow Scrollbar Script I
Function: Causes all page scrollbars to blink in three
colors; on/off control (optional) can turn effect
on and off via links
Browsers: IE 5.5 (degrades gracefully on other browsers)
Author: etLux
===========================================================

Step 1.
Put the following script in the head of your page:

<script>

// (C) 2000 by CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header

// blink speed in miliseconds
var rate = 333;

// true to start automatically, else false
var DoIt = true

// the three blink colors
var Color1 = "#FF0000"
var Color2 = "#00FF00"
var Color3 = "#0000FF"

// the color if/when turned off
var ColorX = "#C0C0C0"

var i = 0;
function doTriStateRainbow(){
if (document.all){
if (DoIt){
i++;
if (i==1) C = Color1
if (i==2) C = Color2
if (i==3) C = Color3
document.body.style.scrollbarBaseColor = C
if (i>2) i=0;
timer=setTimeout('doTriStateRainbow()', rate)
}else{
document.body.style.scrollbarBaseColor = ColorX
}
}
}

</script>

===========================================================

Step 2.
Put this onload event call in your body tag:

<body onload="doTriStateRainbow()">

===========================================================

Step 3. (Optional)
To add on and off controls, use the following:

<a href="#" onClick="DoIt=false">Off</a>
<a href="#" onClick="DoIt=true;doTriStateRainbow()">On</a>

===========================================================

I cant post a link to the script as my website is not finished

[vwphillips]

<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
width:100px;border:solid black 1px;
}

/*]]>*/
</style><script type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (14-May-2009)
// 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 and an optional 'Bounce'.

// **** 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.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcBAnimator('width#',document.getElementById('tst'),10,800,5000,[10,800],'sin');'
// where:
// parameter 0 = the mode(see Note 2). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the start position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 3 = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
// parameter 5 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 5)
// field 0 the minimum. (digits)
// field 1 the maximum. (digits)
// parameter 6 = (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: The default units(excepting opacity) are 'px'.
// Note 2: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: To 'toggle' the effect include '#' in parameter 0.
// The first call will set the toggle parameters.
// Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
// Note 4: The function may be re-executed with a different set of parameters (start/finish time or period)
// whenever required, say from an onclick/mouseover/out event.
// The period parameter will be retained unless re-specified.
// Note 5: parameter 5 is of particular use when re-calling the effect
// in mid travel to retain an constant rate of progression.
// Note 6: parameters 2 and 3 must be different values to execute the script.
//


// **** Functional Code - NO NEED to Change


function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
if (!obj) return;
var oop=obj[mde.replace(/\W/g,'')+'oop'];
if (oop){
if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
else oop.update([srt,fin],ms,scale,curve);
}
else oop=obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
return oop;
}

function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
this.srtfin=[srt,fin];
this.to=null;
this.obj=obj;
this.mde=mde.replace(/\W/g,'');
this.update([srt,fin],ms,scale,curve);
}

zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
clearTimeout(this.to);
this.time=ms||this.time||2000;
this.data=[srtfin[0],srtfin[0],srtfin[1]];
this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
this.ms=this.mS;
this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
}

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

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

zxcBAnimatorOOP.prototype.bounce=function(){
if (this.Bounce[2]%2==0)
this.Bounce[1]+=(this.Bounce[0]-this.Bounce[1])/(this.Bounce[2])
this.update([this.data[0],this.Bounce[this.Bounce[2]%2==0?1:0]],this.Bounce[3]/this.Bounce[2]);
this.Bounce[2]--;
}

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 type="text/javascript">
/*<![CDATA[*/

function Menu(id,ms){
var obj=document.getElementById(id);
var clds=obj.childNodes;
this.ary=[];
this.max=0;
this.ms=ms||1000;
for (var ul,d,z0=0;z0<clds.length;z0++){
if (clds[z0].nodeName=='LI'){
ul=clds[z0].getElementsByTagName('UL')[0];
if (ul){
d=zxcES('DIV',{},clds[z0]);
zxcES(ul,{},d);
this.ary[z0]=[d.offsetHeight,zxcBAnimator('height',d,10,0,10),clds[z0]];
this.max=Math.max(this.max,this.ary[z0][0]);
zxcES(d,{overflow:'hidden',width:'100px'});
this.addevt(clds[z0].getElementsByTagName('A')[0],'mouseover','Expand',z0);
this.addevt(clds[z0],'mouseout','Expand',z0);
}
}
}
}

Menu.prototype.Expand=function(e,nu){
this.ary[nu][1].update([this.ary[nu][1].data[0],e.type=='mouseout'&&zxcCkEventObj(e,this.ary[nu][2])?0:this.ary[nu][0]],this.ms,[0,this.max]);
}

Menu.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}

function zxcES(ele,style,par,txt){
if (typeof(ele)=='string') ele=document.createElement(ele);
for (key in style) ele.style[key]=style[key];
if (par) par.appendChild(ele);
if (txt) ele.appendChild(document.createTextNode(txt));
return ele;
}

function zxcCkEventObj(e,p){
if (!e) var e=window.event;
e.cancelBubble=true;
if (e.stopPropagation) e.stopPropagation();
if (e.target) eobj=e.target;
else if (e.srcElement) eobj=e.srcElement;
if (eobj.nodeType==3) eobj=eobj.parentNode;
var eobj=(e.relatedTarget)?e.relatedTarget:(e.type=='mouseout')?e.toElement:e.fromElement;
if (!eobj||eobj==p) return false;
while (eobj.parentNode){
if (eobj==p) return false;
eobj=eobj.parentNode;
}
return true;
}


/*]]>*/
</script></head>

<body onload="M=new Menu('tst',500);">
<ul id="tst" class="sf-menu sf-vertical">
<li>

<a href="">photography</a>
<ul>
<li><a href="#">dance</a></li>
<li><a href="#">portraits</a></li>
<li><a href="#">fashion</a></li>
<li><a href="#">corporate</a></li>
</ul>
</li>

<li>
<a href="">videography</a>
<ul>
<li><a href="#">video 1</a></li>
<li><a href="#">video 2</a></li>
</ul>
</li>

<li><a href="">animation</a></li>
<li><a href="">design</a></li>
<li><a href="">about us</a></li>
</ul>

</body>

</html>