PDA

View Full Version : Scroll jpowered editing


Rich_A06
04-08-2007, 01:36 PM
There is a jpowered javascript scrolling links here in the right frame, www.eoaa.org. Does anyone know how start positions can be added to the .js file? I want the links to start at the top when the page initially loads and then scroll from there. It looks a bit funny having a completely white page when it initially loads.

davidj
04-08-2007, 03:36 PM
i have looked at the js

it was very messy so i cleaned it up...


function JPscrollStart() {

JPscrollgetcontent();
JPscrollValidate();
JPSCROLL_outerdiv=document.getElementById('JPSCROL L_outer');

JPSCROLL_outerdiv.style.height = JPSCROLL_height+'px';
JPSCROLL_outerdiv.style.width = JPSCROLL_width+'px';
JPSCROLL_outerdiv.style.border = JPSCROLL_bordercolor+' '+JPSCROLL_borderstyle+' '+JPSCROLL_borderwidth+'px';

JPSCROLL_outerdiv.style.clip = 'rect(0 '+JPSCROLL_innerwidth+' '+JPSCROLL_innerheight+' 0)';
JPSCROLL_outerdiv.style.backgroundColor = JPSCROLL_bgcolor;

JPSCROLL_style = 'position:relative; overflow: hidden;height:'+(JPSCROLL_height-2*JPSCROLL_borderwidth)+'px; width: '+(JPSCROLL_width-2*JPSCROLL_borderwidth)+'px; border-color: '+JPSCROLL_bgcolor+'; border-style: solid; border-width: '+JPSCROLL_bordergap+'px; background-color:'+JPSCROLL_bgcolor+'; ' +'color: '+JPSCROLL_textcolor+';'+'font-size: '+JPSCROLL_fontsize+'px; '+'font-family: '+JPSCROLL_fontfamily+'; '+'font-style: '+JPSCROLL_fontstyle+'; '+'font-weight: '+JPSCROLL_fontweight+'; ';

JPSCROLL_outerdiv.innerHTML='<div style="'+JPSCROLL_style+'"><div id="JPSCROLL_area" style="position:relative; overflow: hidden; width:'+JPSCROLL_innerwidth+'px;text-align: '+JPSCROLL_alignment+'; border: 0px; margin: 0px; padding: 0px;"></div></div>';

JPSCROLL_div=document.getElementById('JPSCROLL_are a');
JPSCROLL_div.style.top=JPSCROLL_innerheight+'px';
JPSCROLL_div.innerHTML=JPSCROLL_message;
JPSCROLL_vsize=JPSCROLL_div.offsetHeight;

adjustVsize();

JPSCROLL_div.innerHTML=JPSCROLL_message + JPSCROLL_filler + JPSCROLL_message;

JPscroll();

}


function adjustVsize() {

var tempheight = 0;

while (tempheight<JPSCROLL_vsize) {

tempheight = tempheight + JPSCROLL_innerheight;

}

if ( (tempheight-JPSCROLL_vsize-2)<1 ) {

JPSCROLL_filler = "";

}else {

JPSCROLL_filler = '<div style="border: 0px; margin: 0px; padding: 0px; background-color: '+JPSCROLL_bgcolor+'; height: '+(tempheight-JPSCROLL_vsize-2)+'px;"> </div>';
}

JPSCROLL_vsize = tempheight;

}

function JPscroll() {

JPSCROLL_pagepixelcount++;

if (JPSCROLL_pagepixelcount > JPSCROLL_innerheight) {

JPSCROLL_pagepixelcount = 0;

if (JPSCROLL_pagepause>0) {

setTimeout("JPscroll()",JPSCROLL_pagepause);

}else{

JPscroll();

}

}else{

if(parseInt(JPSCROLL_div.style.top)>=JPSCROLL_vsize*(-1)) {

JPSCROLL_div.style.top=parseInt(JPSCROLL_div.style .top)-JPSCROLL_sspeed+'px';setTimeout("JPscroll()",JPSCROLL_speed)+'px';

}else {

JPSCROLL_div.style.top=-2+'px';

JPscroll();

}
}
}
function JPscrollgetcontent() {

try {
document.getElementById('JPSCROLL_content').style. visibility="hidden";
document.getElementById('JPSCROLL_content').style. height="1px";
document.getElementById('JPSCROLL_content').style. width="1px";
document.getElementById('JPSCROLL_content').style. overflow="hidden";

JPSCROLL_message = document.getElementById('JPSCROLL_content').innerH TML;

}catch (ex) {

JPSCROLL_message = "Error <br> Unable to load content<br><br>Ensure Content DIV tag is placed before the SCRIPT tags.";
}
}

function JPscrollValidate() {

if (JPSCROLL_speed<10) {
JPSCROLL_speed = 10;
}

var found = false;
var thelink = "";
var jplink = "j"+"p"+"o"+"w"+"e"+"r"+"e"+"d"+"."+"c"+"o"+"m";

for (i=0; i<document.links.length; i++) {

thelink = document.links[i].href;

if (thelink.indexOf(jplink)>0) {

found = true;
}
}

if (!found) {

JPSCROLL_message = "Link is not present in the page";

}
}

function JPscrollConfig() {

JPSCROLL_width=150;
JPSCROLL_height=200;
JPSCROLL_bgcolor="#FFDDDD";
JPSCROLL_bordercolor="#FF0000";
JPSCROLL_speed=10;
JPSCROLL_pagepause = 1000;
JPSCROLL_borderwidth = 1;
JPSCROLL_borderstyle = "dashed";
JPSCROLL_bordergap = 2;
JPSCROLL_alignment = "left";
JPSCROLL_textcolor = "#000000";
JPSCROLL_fontsize = 12;
JPSCROLL_fontfamily = "Arial, sans-serif";
JPSCROLL_fontstyle = "normal";
JPSCROLL_fontweight = "normal";
JPSCROLL_width = JPscrollGetIntParam('JPSCROLL_width','150');
JPSCROLL_height = JPscrollGetIntParam('JPSCROLL_height','200');
JPSCROLL_bgcolor = JPscrollGetParam('JPSCROLL_bgcolor','#FFFFFF');
JPSCROLL_bordercolor = JPscrollGetParam('JPSCROLL_bordercolor','#444444') ;
JPSCROLL_speed = JPscrollGetIntParam('JPSCROLL_speed','10');
JPSCROLL_borderwidth = JPscrollGetIntParam('JPSCROLL_borderwidth','1');
JPSCROLL_borderstyle = JPscrollGetParam('JPSCROLL_borderstyle','solid');
JPSCROLL_bordergap = JPscrollGetIntParam('JPSCROLL_bordergap','2');
JPSCROLL_alignment = JPscrollGetParam('JPSCROLL_alignment','left');
JPSCROLL_pagepause = 1000 * JPscrollGetIntParam('JPSCROLL_pagepause','0');
JPSCROLL_textcolor = JPscrollGetParam('JPSCROLL_textcolor','#000000');
JPSCROLL_fontsize = JPscrollGetIntParam('JPSCROLL_fontsize','12');
JPSCROLL_fontfamily = JPscrollGetParam('JPSCROLL_fontfamily','Arial, sans-serif');
JPSCROLL_fontstyle = JPscrollGetParam('JPSCROLL_fontstyle','normal');
JPSCROLL_fontweight = JPscrollGetParam('JPSCROLL_fontweight','normal');

if (JPSCROLL_width<1) {
JPSCROLL_width=150;
}

if (JPSCROLL_height<1) {
JPSCROLL_height=200;
}
if (JPSCROLL_speed<10) {
JPSCROLL_speed=10;
}
if (JPSCROLL_pagepause<0) {
JPSCROLL_pagepause=0;
}
if (JPSCROLL_borderwidth<0) {
JPSCROLL_borderwidth=0;
}
if (JPSCROLL_bordergap<0) {
JPSCROLL_bordergap=0;
}
if (JPSCROLL_fontsize<6) {
JPSCROLL_fontsize=12;
}

JPSCROLL_borderstyle = JPSCROLL_borderstyle.toLowerCase();
JPSCROLL_alignment = JPSCROLL_alignment.toLowerCase();
JPSCROLL_fontstyle = JPSCROLL_fontstyle.toLowerCase();
JPSCROLL_fontweight = JPSCROLL_fontweight.toLowerCase();
JPSCROLL_innerwidth = JPSCROLL_width - 2*JPSCROLL_borderwidth - 2*JPSCROLL_bordergap;
JPSCROLL_innerheight = JPSCROLL_height - 2*JPSCROLL_borderwidth - 2*JPSCROLL_bordergap;

}

function JPscrolltrim(str) {

while(str.charAt(0)==" ") {

str=str.substring(1,str.length);

}while(str.charAt(str.length-1)==" ") {

str=str.substring(0,str.length-1);

}
return str;
}

function JPscrollGetParam(paramname,defaultvalue) {

var paramvalue = defaultvalue;

if (document.getElementById(paramname)) {
document.getElementById(paramname).style.visibilit y="hidden";
document.getElementById(paramname).style.height="1px";
document.getElementById(paramname).style.width="1px";

paramvalue = document.getElementById(paramname).innerHTML;

}

paramvalue = JPscrolltrim(paramvalue);
return paramvalue;

}

function JPscrollGetIntParam(paramname,defaultvalue) {

var paramvalue = defaultvalue;

if (document.getElementById(paramname)) {

document.getElementById(paramname).style.visibilit y="hidden";
document.getElementById(paramname).style.height="1px";
document.getElementById(paramname).style.width="1px";

paramvalue = document.getElementById(paramname).innerHTML;

}

paramvalue = parseInt(paramvalue);

if (isNaN(paramvalue)) {

CROLL_sspeed;

var JPSCROLL_innerwidth = JPSCROLL_width - 2*JPSCROLL_borderwidth - 2*JPSCROLL_bordergap;
var JPSCROLL_innerheight = JPSCROLL_height - 2*JPSCROLL_borderwidth - 2*JPSCROLL_bordergap;
var JPSCROLL_message='no content';
var JPSCROLL_width=1;
var JPSCROLL_height=2;
var JPSCROLL_bgcolor="#FFDDDD";
var JPSCROLL_bordercolor="#FF0000";
var JPSCROLL_speed=10;
var JPSCROLL_borderwidth = 1;
var JPSCROLL_borderstyle = "dashed";
var JPSCROLL_bordergap = 2;
var JPSCROLL_alignment = "left";
var JPSCROLL_pagepause = 1000;
var JPSCROLL_pagepixelcount = 0;
var JPSCROLL_textcolor = "#000000";
var JPSCROLL_fontsize = 12;
var JPSCROLL_fontfamily = "Arial, sans-serif";
var JPSCROLL_fontstyle = "normal";
var JPSCROLL_fontweight = "normal";
var JPSCROLL_filler = "";JPscrollConfig();JPscrollStart();
}}



at the bottom of this script there is a delay variable (page pause). Try changing the value to 0

this may help

Rich_A06
04-09-2007, 01:37 AM
Wow, thanks davidj.

So does that code you wrote for me go after <!-- scrolling parameters --> which is in the links.htm?? Or is it meant to replace everything in the .js file?

Thanks again, really wasn't expecting that much help! In fact, I was about to give up and use simple page numbers lol.

davidj
04-09-2007, 11:08 AM
use page numbers

Rich_A06
04-09-2007, 01:11 PM
Nooooo, lol. Yea it looks very much like HTML code so will try pasting it in after the contents of the scroll.

EDIT, no it's .js code but look like HTLM.

Rich_A06
04-09-2007, 01:24 PM
OK tried pasting in your code to the .js file overwriting what was there before. Caused the links page to show nothing at all. Here's what's in the HTML relating to the .js file.

<script src="jpscrollhere.js" language="JavaScript"></script>

<!-- scrolling content -->
<div id="JPSCROLL_content" style="visibility:hidden; height: 100px; width: 1px; overflow:hidden;">
<div align="center">
<div align="left"> </div>
</div>

<!-- scrolling parameters -->
<div id="JPSCROLL_parameters" style="visibility:hidden; height: 0px; width: 0px; overflow:hidden;">
<div id="JPSCROLL_width">200</div>
<div id="JPSCROLL_height">850</div>
<div id="JPSCROLL_bgcolor">#ffffff</div>
<div id="JPSCROLL_bordercolor">#ffffff</div>
<div id="JPSCROLL_speed">1</div>
<div id="JPSCROLL_borderwidth">0</div>
<div id="JPSCROLL_borderstyle">solid</div>
<div id="JPSCROLL_bordergap">0</div>
<div id="JPSCROLL_alignment">left</div>
<div id="JPSCROLL_pagepause">0</div>
<div id="JPSCROLL_textcolor">#000000</div>
<div id="JPSCROLL_fontsize">11</div>
<div id="JPSCROLL_fontfamily">arial, sans-serif</div>
<div id="JPSCROLL_fontstyle">normal</div>
<div id="JPSCROLL_fontweight">normal</div>
</div><div style="text-align: center; width: 200px; background-color: #FFFFFF;color: #0000FF;font: normal 10px arial"><a href="http://www.jpowered.com"></a></div>
<script src="jpscroll.js" language="JavaScript"></script>

Any ideas?

davidj
04-09-2007, 01:40 PM
the code i cleaned up relates to the external .JS file not the HTML or age that is calling it

just paste the code in there

make sure you backup the original before you overwrite it

Rich_A06
04-09-2007, 03:57 PM
Huh this is weird. I pasted it in and it showed the table, although nothing was moving. Then I re pasted it and now it's blank again. Tried doing it different ways but can't get it to show again. If you have a working .js file can you send it me to richard_anthony@eoaa.org please?

Yes I have a backup no problem but I won't be using that previous version because it looks daft.

One thing, in the HTML, there are those parameters. Perhaps there are some conflicts in the HTML? Or maybe it's just not pasting it correctly. Line 1 starts 'function JPscrollStart() {' .. looks exactly like your code but it still shows nothing when I preview the links.htm page.

davidj
04-09-2007, 03:59 PM
sorry

i dont have time to debug this for you

you need to find one that works then learn how to tweak it

Rich_A06
04-09-2007, 04:05 PM
Agh, but surely you tested it and got it to work or did you write it and then post it straight away? If you've got it to work then it's surely something silly I'm not doing correctly.

The only difference is that DW doesn't keep the code on one line but I'm sure that can't be it!

davidj
04-09-2007, 04:27 PM
all i did was look at the problem you said which was to change the way it first scrolled (displaying the white initially)

i had to format the code visually to see how the speed was set and thats what i did

anyone else want to take this on?

davidj
04-09-2007, 05:07 PM
<html>
<head>
<title>Vertical Scroller v3.5 - Free Javascript Vertical SlideShow Script</title>
<!-- STEP I: Goes between <HEAD> & </HEAD> tags
You may keep it, change or ignore it!
Or linking to an External Style Sheet:
<LINK REL=StyleSheet HREF="yourstyle.css">
without other style tags -->
<style type="text/css">
A { text-decoration:none;}
A:link {color:blue;}
A:visited{color: blue;}
A:hover {color: red;background-color:#66ffff;}
.tabb { font-weight:bold; font-size:14px; font-family:Arial,Helvetica;TEXT-ALIGN: center;}
.tan {FONT-SIZE: 12px; COLOR: navy; FONT-FAMILY: Arial,Helvetica; TEXT-ALIGN: center;}
.tann {FONT-WEIGHT: bold;FONT-SIZE: 18px; COLOR: navy; FONT-FAMILY: Arial,Helvetica; TEXT-ALIGN: center;}
.tanc {FONT-WEIGHT: bold;FONT-SIZE: 10px; COLOR: navy; FONT-FAMILY: Arial,Helvetica; TEXT-ALIGN: center;}
</style>
<!-- STEP II: Goes between <HEAD> & </HEAD> tags
Or linking to an External js file:
<script language="javascript" src="yourfile.js"></script>
without other script tags -->
<SCRIPT LANGUAGE="JavaScript">
/**************************************
* http://vertical-scroller.vbarsan.com/
* This notice may not be removed
**************************************/
//-- Begin Scroller's Parameters and messages -->
//scroller's width
var swidth=180;
//scroller's height
var sheight=160;

//scroller's speed
var sspeed=1;
var restart=sspeed;
var rspeed=sspeed;
//scroller's pause
var spause=2000;
//scroller's background
var sbcolor="#ccffcc";
//Messages: set your own; use as many as you'd like; set up Hyperlinks to
//URLs as you normally do: <a target=... href="... URL ...">..message..</a>;
//Preloading images is recommended:
preload1 = new Image();
preload1.src = "alfa_romeo_spider.jpg";
preload2 = new Image();
preload2.src = "alfa_romeo_spider.jpg";
preload3 = new Image();
preload3.src = "alfa_romeo_spider.jpg";
preload4 = new Image();
preload4.src = "alfa_romeo_spider.jpg";
preload5 = new Image();
preload5.src = "alfa_romeo_spider.jpg";
//When no preloading, use below the actual image path instead of '+preload...+';
var singletext=new Array();
singletext[0]='<table CELLSPACING="0" CELLPADDING="0" align="center"><tr><td height="160" valign="middle"><div class=tabb><a class="tabb" target="_self" href="http://vbarsan.com/"><img (http://vbarsan.com/%22%3E%3Cimg) src='+preload1.src+' width=140 height=100 alt="Vertical Scroller,Horizontal Scroller,Typewriter Scroller"><br>Javascript News Scrollers Site Map</a></div></td></tr></table>';
singletext[1]='<table CELLSPACING="0" CELLPADDING="0" align="center"><tr><td height="160" valign="middle"><div class="tabb"><a class="tabb" target="_self" href="http://vertical-scroller.vbarsan.com/"><img (http://vertical-scroller.vbarsan.com/%22%3E%3Cimg) src='+preload2.src+' width=160 height=120 alt="Dhtml Vertical News Scroller Javascript"><br>Vertical Scroller v7.0</a></div></td></tr></table>';
singletext[2]='<table CELLSPACING="0" CELLPADDING="0" align="center"><tr><td height="160" valign="middle"><div class="tabb"><a class="tabb" target="_self" href="http://news-scroller.vbarsan.com/"><img (http://news-scroller.vbarsan.com/%22%3E%3Cimg) src='+preload3.src+' width=160 height=120 alt="Dhtml Horizontal News Scroller Javascript"><br>Horizontal Scroller v7.0</a></div></td></tr></table>';
singletext[3]='<table CELLSPACING="0" CELLPADDING="0" align="center"><tr><td height="160" valign="middle"><div class="tabb"><a class="tabb" target="_self" href="http://news-ticker.vbarsan.com/"><img (http://news-ticker.vbarsan.com/%22%3E%3Cimg) src='+preload4.src+' width=160 height=120 alt="Dhtml Typewriter Vertical Text Scroller Javascript"><br>Typewriter Scroller v5.0</a></div></td></tr></table>';
singletext[4]='<table CELLSPACING="0" CELLPADDING="0" align="center"><tr><td height="160" valign="middle"><div class="tabb"><a class="tabb" target="_self" href="http://javascripts.vbarsan.com/"><img (http://javascripts.vbarsan.com/%22%3E%3Cimg) src='+preload5.src+' width=140 height=100 alt="Vertical Scroller,Horizontal Scroller,Typewriter Scroller"><br>Vertical,Horizontal & Typewriter Scrollers</a></div></td></tr></table>';
//singletext[...]='...';
//-- end Parameters and message -->
//-- begin: Scroller's Algorithm -->
var ii=0;
function goup(){if(sspeed!=rspeed*16){sspeed=sspeed*2;resta rt=sspeed;}}
function start(){
if(document.getElementById){ns6div=document.getEle mentById('iens6div');ns6div.style.top=sheight;ns6d iv.innerHTML=singletext[0];sizeup=ns6div.offsetHeight;ns6scroll();}
else
if(document.layers){ns4layer=document.ns4div.docum ent.ns4div1;ns4layer.top=sheight;ns4layer.document .write(singletext[0]);ns4layer.document.close();sizeup=ns4layer.docume nt.height;ns4scroll();}
else
if(document.all){iediv=iens6div;iediv.style.pixelT op=sheight;iediv.innerHTML=singletext[0];sizeup=iediv.offsetHeight;iescroll();}}
function iescroll(){if(iediv.style.pixelTop>0&&iediv.style.pixelTop<=sspeed){iediv.style.pixelTop=0;setTimeout("iescroll()",spause);}else
if(iediv.style.pixelTop>=sizeup*-1){iediv.style.pixelTop-=sspeed;setTimeout("iescroll()",100);}else{if(ii==singletext.length-1)ii=0;else ii++;iediv.style.pixelTop=sheight;iediv.innerHTML= singletext[ii];sizeup=iediv.offsetHeight;iescroll();}}
function ns4scroll(){if(ns4layer.top>0&&ns4layer.top<=sspeed){ns4layer.top=0;setTimeout("ns4scroll()",spause);}else
if(ns4layer.top>=sizeup*-1){ns4layer.top-=sspeed;setTimeout("ns4scroll()",100);}else{if(ii==singletext.length-1)ii=0;else ii++;ns4layer.top=sheight;ns4layer.document.write( singletext[ii]);ns4layer.document.close();sizeup=ns4layer.docume nt.height;ns4scroll();}}
function ns6scroll(){if(parseInt(ns6div.style.top)>0&&parseInt(ns6div.style.top)<=sspeed){ns6div.style.top=0;setTimeout("ns6scroll()",spause);}else
if(parseInt(ns6div.style.top)>=sizeup*-1){ns6div.style.top=parseInt(ns6div.style.top)-sspeed;setTimeout("ns6scroll()",100);}
else{if(ii==singletext.length-1)ii=0;else ii++;
ns6div.style.top=sheight;ns6div.innerHTML=singlete xt[ii];sizeup=ns6div.offsetHeight;ns6scroll();}}
//-- end Algorithm -->
</script>
<!-- End of Script between <head> & </head> tags-->
</HEAD>
<!-- STEP III: Make sure start() is loaded -->
<BODY onLoad="start()">
<!-- STEP IV: Goes between <BODY ... > & </BODY> tags
begin: body code -->
<!-- You may remove first cell below (<td> ... </td>) to get rid of Speed Up -->
<table align="center" border="1"><tr><td bgcolor="#ffffcc"><div class=tabb><a class=tabb href="#" onMouseOver="goup();">Speed<br>UP</a></div></td><td>
<script language="JavaScript">if(document.layers){document.write('<ilayer id="ns4div" width='+swidth+' height='+sheight+' bgcolor='+sbcolor+'><layer id="ns4div1" width='+swidth+' height='+sheight+' onmouseover="sspeed=0;" onmouseout="sspeed=rspeed;"></layer></ilayer>')}
if(document.getElementById||document.all){document .write('<div style="position:relative;overflow:hidden;width:'+swidth+' ;height:'+sheight+';clip:rect(0 '+swidth+' '+sheight+' 0);background-color:'+sbcolor+';" onmouseover="sspeed=0;" onmouseout="sspeed=rspeed"><div id="iens6div" style="position:relative;width:'+swidth+';"></div></div>');}</script>
</td></tr></table>
<!-- End of code between BODY tags -->
</body></html>


i have found this online

this is all i can offer at this time

Rich_A06
04-09-2007, 10:16 PM
I found from this site http://www.mediafax.ro/vlad.roman/scroller/

Copied the one in the top right but it's still initially blank so how can the start positions be set? It reads from the scroller.js file. Maybe it's not possible to do this with javascript?

/*
author: Vlad Roman (vlad@afian.com)
*/
var MyJSSscrollerHASDragging = false;

var MyJSScrollerHandler = {
scrollers : [],
intvals : [],

initByClassName : function(className) {
i = this.scrollers.length;
document.getElementsByClassName(className).each(fu nction(node) {
var orient, dir, speed;
MyJSScrollerHandler.scrollers[i] = new MyJSScroller(node, i, orient, dir, speed);
i++;
});
},

attachMouseWheel : function(el, index) {
if (window.addEventListener)
/** DOMMouseScroll is for mozilla. */
el.addEventListener('DOMMouseScroll', function(event){MyJSScrollerHandler.wheel(event, index);}, false);
/** IE/Opera. */
el.onmousewheel = function(event){MyJSScrollerHandler.wheel(event, index);};
},

handleWheelMovement : function(delta, index) {
MyJSScrollerHandler.scrollers[index].move(-(delta*10));
},

wheel : function(event, index){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
if (window.opera)
delta = -delta;
} else if (event.detail) { /** Mozilla case. */
delta = -event.detail/3;
}
if (delta)
MyJSScrollerHandler.handleWheelMovement(delta, index);
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}
};


function MyJSScroller(node, index, orient, dir, speed) {

if (MyJSScrollerHandler.scrollers[index]) {
return false;
}


if (node.getAttribute('myjsscroller') == 'true') {
return false;
}

node.setAttribute('myjsscroller', 'true');

this.pausePoints = [];
this.pauseTimer = 0;
this.node = node;
this.index = index;
this.orient = orient || node.getAttribute('orientation');
this.dir = dir || node.getAttribute('direction');
spd = speed || node.getAttribute('scrollspeed');
if (!spd) {
spd = 20;
}

this.speed = 1000/spd;
wraper = document.createElement('DIV');
//wraper.style.border = '1px solid red';
wraper.style.height = '100%';
node.style.overflow = 'hidden';
wraper.style.overflow = 'hidden';

wraper.style.position = 'relative';
wraper.style.top = '0px';
wraper.style.left = '0px';
this.wraper = wraper;
movingWraper = document.createElement('DIV');
if (this.orient == 'horizontal') {
movingWraper.style.whiteSpace = 'nowrap';
}

//movingWraper.style.border = '1px solid blue';
movingWraper.style.position='absolute';
this.movingWraper = movingWraper;
wraper.appendChild(movingWraper);
movingWraper.innerHTML = node.innerHTML;
node.innerHTML = '';
node.appendChild(wraper);
this.w = movingWraper.offsetWidth;
this.h = movingWraper.offsetHeight;

if (this.orient != 'horizontal' && this.dir == 'down') {
this.movingWraper.style.top = -this.h+'px';
}


if (MyJSSscrollerHASDragging) {
if (this.orient == 'horizontal') {
drg = Drag.init(movingWraper, null, -this.w, this.w, 0, 0);
} else {
drg = Drag.init(movingWraper, null, 0, 0, -this.h, this.h);
}
}




for (var i = 0 ; i < movingWraper.childNodes.length ; i++) {
ch = movingWraper.childNodes[i];
if (ch.className == 'scrollpauser') {


if (ch.getAttribute('scrollhide') == "1") {
ch.style.visibility = 'hidden';
ch.style.display ='inline';
ch.style.margin = '0px';
ch.style.border = '0px';
}
if (ch.getAttribute('scrolldelay') > 0) {
delay = ch.getAttribute('scrolldelay');
} else {
delay = 2000;
}
this.pausePoints.push([ch.offsetTop, ch.offsetLeft, delay]);
}
}




movingWraper.onDragStart = function(x,y) {
MyJSScrollerHandler.scrollers[index].dragged = true;
MyJSScrollerHandler.scrollers[index].pause();
}
movingWraper.onDragEnd = function() {
MyJSScrollerHandler.scrollers[index].dragged = false;
MyJSScrollerHandler.scrollers[index].resume();
}


node.onmouseover = function() {
MyJSScrollerHandler.scrollers[index].pause();
}
node.onmouseout = function() {
if (!MyJSScrollerHandler.scrollers[index].dragged) {
MyJSScrollerHandler.scrollers[index].resume();
}
}
MyJSScrollerHandler.attachMouseWheel(node, index);

this.start();

}

MyJSScroller.prototype.start = function() {

if (!MyJSScrollerHandler.intvals[this.index]) {
MyJSScrollerHandler.intvals[this.index] = window.setInterval('MyJSScrollerHandler.scrollers[\''+this.index+'\'].move()', this.speed);
}
}

MyJSScroller.prototype.move = function(delta) {

mw = this.movingWraper;
slf = this;

if (!delta) {
delta = 1
}

if (this.orient == 'horizontal') {
if (this.dir != "right") {
if (mw.offsetLeft < -this.w) {
mw.style.left = this.wraper.offsetWidth+'px';
} else {
mw.style.left = (mw.offsetLeft-delta)+'px';
}
} else {
if (mw.offsetLeft > this.wraper.offsetWidth) {
mw.style.left = -mw.offsetWidth+'px';
} else {
mw.style.left = (mw.offsetLeft+delta)+'px';
}
}
} else {
if (this.dir != "down") {
if (mw.offsetTop > -this.h) {

//pausers
this.pausePoints.each(function(point){
if (-point[0] == mw.offsetTop) {
slf.pause();
window.setTimeout('MyJSScrollerHandler.scrollers[\''+slf.index+'\'].start()', point[2]);
}
});

mw.style.top = (mw.offsetTop-delta)+'px';

} else {
mw.style.top = this.wraper.offsetHeight+'px';
}
} else {
if (-mw.offsetTop+this.wraper.offsetHeight > 0) {
mw.style.top = (mw.offsetTop+delta)+'px';
} else {
mw.style.top = -mw.offsetHeight+'px';
}
}
}
}

MyJSScroller.prototype.pause = function() {
window.clearInterval(MyJSScrollerHandler.intvals[this.index]);
MyJSScrollerHandler.intvals[this.index] = false;
}

MyJSScroller.prototype.resume = function() {
this.start();
}

//window.onload = function() {MyJSScrollerHandler.initByClassName('scrollable') ;}

Rich_A06
04-10-2007, 05:39 PM
Well having thought about it some more, it doesn't really make sense to have it rotating round and round - serves no purpose. So intead there will be pages that scroll in horizontally, like a kebab stand. Not sure how to do it yet, must look for a pausing horizontal scroller.