// Continuous Scroll Banner (31-August-2006) // by Vic Phillips http://www.vicsjavascripts.org.uk // To provide a continuous Scroll any number of images or HTML messages in a banner of any length // For both Vertical or Horizontal Applications. // With event call functions to Stop or Start the scroll // and to change the direction between scroll left and right. // The images or HTML content, and optional links may specified in an array // or within HTML Coded

s // The images or HTML content width and scroll speed are specified in the initialisation call. // Optionally the Default // width, height, background color, text color, text align, and font size // may be assigned for each element in the array. // // There may be as many independent application as required on a page // Application Notes // **** The HTML Code // // The Banner parent is defined in the HTML code // e.g. // If the content is defined in an array //

//

// // If the content is defined in within HTML Coded

s //

//

// testing testing0
// testing testing1
// testing testing2
// testing testing3
// ........ //

//

// // This

must be assigned a unique ID name // and must be assigned style attributes of 'position:relative;overflow:hidden;' // // // **** The Content Array // // The Content Array defines each element of the banner in a field dimensioned array // e.g. // Field 0 defines a common directory path to the images, use '' if not required // var ContentAry=['http://www.vicsjavascripts.org.uk/StdImages/'] // // Subsequent fields are arrays defining the content data // type, content, link url, width, height, bgcol, txtcol, txtalign, fontsize // 0 1 2 3 4 5 6 7 8 // ContentAry[1]=['TXT','Some Text to Display','' ,'' ,'' ,'#FFCC66','#9966FF','center' ,'13px']; // ContentAry[2]=['IMG','Zero.gif','',100 ,80 ,]; // // Fields 0 and 1 are mandatory // Fields 2 to 8 may be null(omitted if last) or assigned '' to use the defaults. // Elements with link urls assigned are also assigned with a cursor 'hand' or 'pointer' // Note: // see **** External Function) // **** Initialisation // // Each Banner must be initialised from a or window onload event // e.g. // // where 'zxcCSBanner(' parameters are: // parameter 0 = the unique ID name of the Banner

(string) // parameter 1 = the type of banner 'H' = horizontal, 'V' = vertical. (string, 'H' or 'V') // parameter 2 = (optional) the default width of each element. (digits or null) // parameter 3 = (optional) the scroll speed (1 = fast, 500 = slow). (digits or null) // parameter 4 = (optional) the Content Array name. (array variable name, or omit) // // Optional parameters may be omitted from the right. // // **** Start Scroll // // The event call to start the scroll is // from an external call // or onmouseout="zxcBannerStart('fred1');" // // where // parameter 0 = the unique ID name of the Banner

(string) // parameter 1 = (optional) the scroll direction (1 = right, -1 = left) (digits, 1 or -1) // // **** Stop Scroll // // The event call to stop the scroll is // // or onmouseout="zxcBannerStop('fred1');" // // where // parameter 0 = the unique ID name of the Banner

(string) // // **** Changing Direction // // The Scroll Direction may be changed by calling function 'zxcCngDirection(' // e.g. // // // // where 'zxcCngDirection(' parameters are: // parameter 0 = the unique ID name of the Banner

(string) // parameter 2 = the scroll direction (1 = right, -1 = left, omit or 0 = toggle) (digits, 1, 0, -1 or omit) // **** External Function (Array Applications) // // The Default action when a link url is clicked is to replace the current window with the specified url. // The Function 'zxcExternal' is provided for other requirements. // To access this function the url field must include the character '^|^' // Clicking the frame will now call function 'zxcExternal' passing the url text to the function. // This test may now be split using var zxcdata=zxcfun.split('|'); and the split fields used // to meet the specific requirement function zxcExternal(zxcfun){ // Example to call a function where the obj.url(field 2 of the array) is 'FunctionName^|^functionparameter' // function 'FunctionName' will be called passing 'functionparameter' as a parameter var zxcdata=zxcfun.split('^|^'); window[zxcdata[0]](zxcdata[1]); } // **** General // // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts // These character are easily changed to characters of choice using global find and replace. // // The Functional Code(about (4.75K) is best as an External JavaScript // // Tested with IE6 and Mozilla FireFox // // **** Customising Variables var zxcBGColor='#FFFFCC'; // The default background color of banner elements (string) var zxcTxtColor='black'; // The default text color of banner elements (string) var zxcTxtAlign='center'; // The default text alignment of banner elements (string) var zxcFontSize='22px'; // The default font size of banner elements (string) // **** Example Image Path and Content Array var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/'; var ContentAry=[ImgPath] ContentAry[1]=['IMG','Zero.gif','']; ContentAry[2]=['IMG','One.gif','',100 ,80 ,]; // type, content, link, width, height, bgcol, txtcol, txtalign, fontsize // 0 1 2 3 4 5 6 7 8 ContentAry[3]=['TXT','Some Text to Display','' ,'' ,'' ,'#FFCC66','#9966FF','center' ,'13px']; ContentAry[4]=['IMG','Three.gif','']; ContentAry[5]=['IMG','Four.gif','']; ContentAry[6]=['IMG','Five.gif','']; ContentAry[7]=['IMG','Six.gif','']; ContentAry[8]=['IMG','Seven.gif','']; ContentAry[9]=['IMG','Eight.gif','']; ContentAry[10]=['IMG','Nine.gif','',100 ,80 ,]; var ImgPath2='../StdImages/'; var ContentAry2=[ImgPath] ContentAry2[1]=['TXT','

Views from Egypt

MouseOver & Out to Stop and Start

','' ,'298' ,'' ,'#FFCC66','#000000','center' ,'11px']; ContentAry2[2]=['TXT','
The river Nile','' ,'' ,'' ,'','','center' ,'13px']; ContentAry2[3]=['IMG','Egypt1.jpg','FunctionName^|^functionparameter']; ContentAry2[4]=['TXT',' ','' ,20 ,'' ,'#FFCC66','','center' ,'13px']; ContentAry2[5]=['IMG','Egypt2.jpg','http://www.vicsjavascripts.org.uk/ImageSliceViewer/Slice3/DSCF0087.htm']; ContentAry2[6]=['TXT','
The Entrance
to
Luxor Temple','' ,'' ,'' ,'','','center' ,'13px']; ContentAry2[7]=['TXT',' ','' ,20 ,'' ,'#FFCC66','','center' ,'13px']; ContentAry2[8]=['IMG','Egypt3.jpg','http://www.vicsjavascripts.org.uk/ImageSliceViewer/Slice4/DSCF0059.htm']; ContentAry2[9]=['TXT','
Massive Pillars
at
Karnak Temple','' ,'' ,'' ,'','','center' ,'13px']; ContentAry2[10]=['IMG','Egypt4.jpg','http://www.vicsjavascripts.org.uk/ImageSliceViewer/Slice1/DSCF0058.htm']; ContentAry2[11]=['TXT',' ','' ,20 ,'' ,'#FFCC66','','center' ,'13px']; ContentAry2[12]=['IMG','WinterPalace.jpg','http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg']; ContentAry2[13]=['TXT','
The
WinterPalace
Luxor','' ,'' ,'' ,'','','center' ,'13px']; // **** Functional Code - NO NEED to Change function zxcCSBanner(zxcid,zxcvh,zxcw,zxcspd,zxcaary){ var zxcp=document.getElementById(zxcid); var zxcary=[] if (zxcaary){ var zxcpth=zxcaary[0]; for (var zxc0=1;zxc00){ zxcoop.dir=1; } else { zxcoop.dir=-1; } zxcoop.rotate(); } function zxcBannerStop(zxcid){ var zxcoop=document.getElementById(zxcid).oopbr; if (!zxcoop){ return; } clearTimeout(zxcoop.to); } function zxcBannerStart(zxcid,zxcdir){ var zxcoop=document.getElementById(zxcid).oopbr; if (!zxcoop){ return; } clearTimeout(zxcoop.to); zxcoop.dir=zxcdir||zxcoop.dir; zxcoop.rotate(); } function zxcLink(zxcobj){ if (zxcobj.url.match('^|^')){ zxcExternal(zxcobj.url); return; } window.top.location=zxcobj.url; } function zxcStyle(zxcele,zxcstyle){ if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); } for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; } return zxcele; } function zxcOOPBannerRotate(zxcp,zxcvh,zxcspd,zxchw){ this.ref='zxcoobr'+zxcp.id; this.wh=(zxcvh=='H')?'left':'top'; window[this.ref]=this; this.ary=zxcp.ary; this.spd=zxcspd||100; this.to=null; this.dir=1; this.h=zxchw; } zxcOOPBannerRotate.prototype.rotate=function(){ this.ary[1].style[this.wh]=(parseInt(this.ary[1].style[this.wh])+this.dir)+'px'; this.ary[0].style[this.wh]=(parseInt(this.ary[1].style[this.wh])-this.h)+'px'; this.ary[2].style[this.wh]=(parseInt(this.ary[2].style[this.wh])+this.dir)+'px'; this.ary[3].style[this.wh]=(parseInt(this.ary[2].style[this.wh])+this.h*2)+'px'; if (this.dir<0&&parseInt(this.ary[1].style[this.wh])+this.h<0){ this.ary[1].style[this.wh]=(parseInt(this.ary[2].style[this.wh])+this.h)+'px'; this.ary.reverse(); } if (this.dir>0&&parseInt(this.ary[1].style[this.wh])>this.h){ this.ary[1].style[this.wh]=(parseInt(this.ary[2].style[this.wh])-this.h)+'px'; this.ary.reverse(); } this.setTimeOut('rotate();',this.spd); } zxcOOPBannerRotate.prototype.setTimeOut=function(zxcf,zxcd){ this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd); }