...

View Full Version : Modifying the functionality on a border-fading script



canadianjameson
07-17-2007, 11:00 PM
Hi all,

I have been using a border-fading script to give the impression of onmouseover fading underline, and I wish to tweak it a bit to give a slightly different effect

I have two scripts that do virtually the same thing, although the second has a display bug in FF:( both have their advantages and I don't have my heart set on using either one, although Vic's scripts are being used all over the page i'm creating so his has first dibs :)

here they are, and I will describe what I need to do below:
first script:

startColor = "FFFFFF"; // MouseOut link color
endColor = "000000"; // MouseOver link color

stepIn = 20; // delay when fading in
stepOut = 30; // delay when fading out

var fading=new Array();
fading['now']=startColor;

function initLinkFade() {
var links = document.getElementById('pageHolder').getElementsByTagName('A');
for(var i=0;i<links.length;i++){
links.onmouseover = domouseover;
links[i].onmouseout = domouseout;
}
}

if(document.getElementsByTagName){
window.onload = initLinkFade;
document.write("<style type='text/css'>#pageHolder a{text-decoration:none}</style>");
}

function domouseover() {
var target=arguments[0]?arguments[0].target:event.srcElement;
if(target.nodeName!='A')return;
for(var i=0;i<fading.length;i++)
clearTimeout(fading[i]);
if(fading['el']!=target && fading['el']){
fading['el'].style.borderBottom = "1px solid #"+startColor;
linkFade(startColor,endColor,target,stepIn);
}
else
linkFade(fading['now'],endColor,target,stepIn);
}

function domouseout() {
var target=arguments[0]?arguments[0].target:event.srcElement;
if(target.nodeName!='A')return;
for(var i=0;i<fading.length;i++)
clearTimeout(fading[i]);
if(fading['el']!=target && fading['el']){
fading['el'].style.borderBottom = "1px solid #"+startColor;
linkFade(endColor,startColor,target,stepOut);
}
else
linkFade(fading['now'],startColor,target,stepOut);
}

function hex(i) {
var s=Math.floor(i).toString(16);
return s.length==2?s:"0"+s;
}

function linkFade(s,e,element,step){
fading['el']=element;
var sr=parseInt(s.substr(0,2),16);
var sg=parseInt(s.substr(2,2),16);
var sb=parseInt(s.substr(4,2),16);
var er=parseInt(e.substr(0,2),16);
var eg=parseInt(e.substr(2,2),16);
var eb=parseInt(e.substr(4,2),16);
for(var i = 0; i <= step; i++) {
var r=hex((sr*(step-i)+er*i)/step);
var g=hex((sg*(step-i)+eg*i)/step);
var b=hex((sb*(step-i)+eb*i)/step);
fading[i]=setTimeout("fading['now']='"+r+g+b+"';fading['el'].style.borderBottom = '1px solid #'+fading['now']",i*step);
}
}
What I like about this one is that you can specify both the fade in [I]and fade out speeds, allowing you a bunch of flexibility in how it looks also, I like how it allows you to set it to 'apply to all links in a given div... however that can have certain downfalls you can seethis script in action here: www.enviromark.ca/head/YPP.htm

the second script

<!--
// by Vic Phillips (04-September-2006) http://www.vicsjavascripts.org.uk

function zxcMseOver(zxcobj,zxcd){
var zxcp=zxcobj;
if (!zxcp.oop){ return; }
clearTimeout(zxcp.oop.to);
zxcp.oop.d=zxcd||0;
zxcp.oop.cng();
}

function zxcInit(zxccls,zxccol1,zxccol2,zxcstps){
var zxclks=document.getElementsByTagName('BODY')[0].getElementsByTagName('A');
for (var zxc0=0;zxc0<zxclks.length;zxc0++){
if (zxclks[zxc0].className==zxccls){
zxcStyle(zxclks[zxc0],{borderBottom:'solid '+zxccol1+' 0px;'});
zxclks[zxc0].oop=new zxcOOP(zxclks[zxc0],zxccol1,zxccol2,zxcstps);
}
}
}

var zxcCnt=0;

function zxcOOP(zxcd,zxccol1,zxccol2,zxcstps){
this.obj=zxcd;
this.ary=zxcSTxtColors([zxccol1,zxccol2],zxcstps||10);
this.cnt=0;
this.d=1
this.to=null;
this.ref='zxcoop'+zxcCnt;
window[this.ref]=this;
zxcCnt++;
}

zxcOOP.prototype.cng=function(){
if ((this.d>0&&this.cnt<this.ary.length-1)||(this.d<0&&this.cnt>0)){
this.obj.style.borderBottom='solid #'+this.ary[this.cnt+=this.d]+' 1px';
this.setTimeOut("cng();",100);
}
else if (this.d<0) {
this.obj.style.borderBottom='0px';

}
}

zxcOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.obj.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
}



function zxcStyle(zxcele,zxcstyle){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
return zxcele;
}


function zxcSTxtColors(zxcc,zxcnu){
var zxcary=[];
zxcc1=zxcc[0].replace('#',''); zxcc2=zxcc[1].replace('#','');
var zxcr=zxcHexToInt(zxcc1.substring(0,2));
var zxcg=zxcHexToInt(zxcc1.substring(2,4));
var zxcb=zxcHexToInt(zxcc1.substring(4,6));
var zxcr2=zxcHexToInt(zxcc2.substring(0,2));
var zxcg2=zxcHexToInt(zxcc2.substring(2,4));
var zxcb2=zxcHexToInt(zxcc2.substring(4,6));
var zxcrstep=Math.round((zxcr2-zxcr)/zxcnu);
var zxcgstep=Math.round((zxcg2-zxcg)/zxcnu);
var zxcbstep=Math.round((zxcb2-zxcb)/zxcnu);
for (zxc0=0;zxc0<zxcnu;zxc0++){
zxcary[zxc0]=zxcIntToHex(zxcr)+zxcIntToHex(zxcg)+zxcIntToHex(zxcb);
zxcr+=zxcrstep; zxcg+=zxcgstep; zxcb+=zxcbstep;
}
zxcary[zxcnu-1]=zxcc[1].substring(1);
return zxcary;
}

function zxcIntToHex(zxcn){
zxcn=(zxcn>255)?255:(zxcn<0)?0:zxcn;
var zxcresult=zxcn.toString(16);
if (zxcresult.length==1){ zxcresult="0"+zxcresult; }
return zxcresult;
}

function zxcHexToInt(zxchex){
return parseInt(zxchex,16);
}


//-->

activated by:
<body onload="zxcInit('mainLinks','#FFFFFF','#000000',15);">
...
<a class="mainLinks" href="#advantagesRisks" onmouseover="zxcMseOver(this,1);" onmouseout="zxcMseOver(this,-1);"><img src="images/EN_advantages_risks.gif" name="imageLinkNoTouchy"></a>

I like this script because it allows you to set the fade on a per-link basis, not on a per-div basis... more control :)

alrighty, here are the minor modifications I am hoping to get help with

The fade-out effects stop when a second link is onmouseover'd. I would like to be able to set both the fade-in and fade-out delays (like in the first script), but have the fade-out continue for "Link A" even if "Link B" is onmouse'd over. Basically getting the smooth-fade effect seen here: www.enviromark.ca/head/ --> the gray icons.
When a link is clicked, I would like the top border of the link to fade in and stay solid until another link is clicked. When another link is clicked, I would like it's top border to fade in (like the first link) a have the first link's top border fade out. Again you can see the effect I'm going for at the link above by clicking on a few of the vertical links and seeing it's effect on the horizontal images

I know this might be a lot to ask, so I suppose I could live with the script I have... but I figured there was no harm in asking :o

vwphillips
07-18-2007, 01:38 AM
my script you posted should be considered obsolete!!

however to change the speed


onmouseover="zxcMseOver(this,1);" onmouseout="zxcMseOver(this,-1);">

change the -1 to -2 and will change color twice as fast
I would consider that applying to all links in a div is an add on and would be simple to implement.

However I would now use my animator. This is about 3-4K but can animate many style attributes.

I may have a look tomorrow.

canadianjameson
07-18-2007, 05:20 AM
Hi Vic, i looked through your page but was unable to find the animator script, however i noticed that this script link didnt work: http://www.vicsjavascripts.org.uk/ImageBrowser/ImageBrowser.htm

I may use one of your image gallery scripts to show thumbnails above and below a main display div, but that is for another thread at another time :)

I look forward to getting the link for that animator script :)

Cheers

vwphillips
07-18-2007, 08:56 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.test {
border-Bottom:solid #ffffff 1px;
}
* a {
color: #0000A0;
text-decoration: none; --> accounted for on line 20 of underline_fade.js*/
}

/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
<!--
// Element Animator (06-March-2007) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height, Color, Opacity style
// (or otherproperties) of an element over a specified period of time.

// **** 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;'
// If not assigned the style position of the element will be assigned as 'position:absolute;' by the script.
//
// The element would normally be assigned a unique ID name.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcChangeLTWHCO('left','tst1',20,260,2000);'
// where:
// parameter 0 = 'left', 'top', 'width', 'height', 'color', 'background-Color', 'opacity' etc. (string)
// Note: the first character after the hyphen must be be upper case, all others lower case.
// With the exception of opacity and color the property value units is in 'px'.
// 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) there are two types of progressive change 'sin' and 'cos' plus a liner change. ('sin', 'cos' or liner, defaults to liner)
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
// parameter 5 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
//
// The function may be re-executed with a different set of parameters (start/finish time, progression type or period)
// whenever required, say from an onclick/mouseover/out event. The original progression type and period parameters
// will be retained unless re-specified, the start and finish parameters must be specified.
//

// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code (about 3.7K) is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//



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

var zxcOOPCnt=0;

function zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxccurve,zxctime,zxcplot){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (zxcoop) zxcoop.cngparameters(zxcmde,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
else zxcobj[zxcmde.replace('-','')+'oop']=new zxcAnimatorOOP(zxcmde,zxcobj,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
}

function zxcAnimatorOOP(zxcmde,zxcobj,zxcsrtfin,zxccurve,zxctime,zxcborder){
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
if (zxcStyleValue(zxcobj,'position')=='static'&&(zxcmde=='left'||zxcmde=='top')) zxcobj.style.position='absolute';
this.to=null;
this.ref='zxcltwhco'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj;
this.cngparameters(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcborder);
}

zxcAnimatorOOP.prototype.cngparameters=function(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcborder){
clearTimeout(this.to);
this.mde=this.mde||zxcmde;
zxccurve=zxccurve||this.curve||'';
this.time=zxctime||this.time||2000;
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
for (var zxc0=0;zxc0<zxcsrtfin.length;zxc0++){
var zxcobj=document.getElementById(zxcsrtfin[zxc0]);
if (zxcobj){ zxcsrtfin[zxc0]=zxcStyleValue(zxcobj,zxcmde); if (!this.mde.match('olor')) zxcsrtfin[zxc0]=parseInt(zxcsrtfin[zxc0]); }
if (zxcsrtfin[zxc0]==0) zxcsrtfin[zxc0]=0.00001;
}
if (this.mde=='opacity'&&(zxcsrtfin[0]<0||zxcsrtfin[0]>100||zxcsrtfin[0]<0||zxcsrtfin[0]>100)) return;
if (zxcborder) this.brd=zxcborder.split(' ');
this.curve=zxccurve.charAt(0).toLowerCase();
this.sf=[(!zxcsrtfin[0].match('#'))?[zxcsrtfin[0]]:zxcRGBSplit(zxcsrtfin[0]),(!zxcsrtfin[0].match('#'))?[zxcsrtfin[1]]:zxcRGBSplit(zxcsrtfin[1]),[]];
this.srttime=new Date().getTime();
this.inc=Math.PI/(2*this.time);
this.cngltwhco();
}

zxcAnimatorOOP.prototype.cngltwhco=function(){
var zxcms=new Date().getTime()-this.srttime;
for (var zxc0 in this.sf[1]){ this.sf[2][zxc0]=(this.curve=='s')?Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.sin(this.inc*zxcms)+this.sf[0][zxc0]):(this.curve=='c')?(this.sf[1][0])-Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.cos(this.inc*zxcms)):(this.sf[1][zxc0]-this.sf[0][zxc0])/this.time*zxcms+this.sf[0][zxc0]; }
this.cngstyle(this.sf[2]);
if (zxcms<this.time) this.setTimeOut('cngltwhco();',10);
else this.cngstyle(this.sf[1]);
}

zxcAnimatorOOP.prototype.cngstyle=function(zxcpar){
if (this.mde.match('border')){
if (zxcpar.length==1) this.obj.style[this.mde.replace('-','')]=this.brd[0]+' '+this.brd[1]+' '+zxcpar[0]+'px';
if (zxcpar.length==3) this.obj.style[this.mde.replace('-','')]=this.brd[0]+' rgb('+zxcpar[0]+','+zxcpar[1]+','+zxcpar[2]+') '+this.brd[2];
}
else if (this.mde.match('olor')) this.obj.style[this.mde.replace('-','')]='rgb('+zxcpar[0]+','+zxcpar[1]+','+zxcpar[2]+')';
else if (this.mde!='opacity') this.obj.style[this.mde.replace('-','')]=zxcpar[0]+'px';
else this.opacity(zxcpar[0]);
}

zxcAnimatorOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100) return;
if (this.obj.style.MozOpacity!=null) this.obj.style.MozOpacity=(zxcopc/100)-.001;
else if (this.obj.style.opacity!=null) this.obj.style.opacity=(zxcopc/100)-.001;
else if (this.obj.style.filter!=null) this.obj.style.filter='alpha(opacity='+zxcopc+')';
else if (this.obj.KHTMLOpacity!=null) this.obj.KHTMLOpacity=(zxcopc/100)-.001;
}

zxcAnimatorOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}

function zxcStyleValue(zxcel,zxcp){
if (zxcel.currentStyle) return zxcel.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcel,null).getPropertyValue(zxcp.toLowerCase());
}

function zxcRGBSplit(zxccol){
if (zxccol.match('#')){ zxccol=parseInt(zxccol.substring(1,3),16)+','+parseInt(zxccol.substring(3,5),16)+','+parseInt(zxccol .substring(5,7),16); }
zxccol=zxccol.replace(/[rgb()\s]/g,'').split(',');
return [parseInt(zxccol[0]),parseInt(zxccol[1]),parseInt(zxccol[2])];
}


//-->
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// parameter 0 = border, border-Top, border-Bottom, border-Left or border-Right. (string)
// parameter 1 = the object or object ID to apply the string. (object or string)
// parameter 2 = the duration in milli seconds to apply the effect. (digits)
// parameter 3 = for color the start color in HEX. (string, prefix '#')
// for size the start size in px (digits). (digits)
// parameter 4 = for color the finish color in HEX. (string, prefix '#')
// for size the finish size in px (digits). (digits)
// parameter 5 = the defult border value. (string)
// example: 'solid white 1px'. Note type, color in HEX and size separated by spaces.

// The first event call(mouseover) must include all parameters.
// For subsequent event calls parameters 2 to 5 are optional


function zxcBorder(zxcmde,zxcobj,zxctime,zxcsrt,zxcfin,zxcborder){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
var zxcevt=window.event||arguments.callee.caller.arguments[0];
if (!zxcobj.srtfin) zxcobj.srtfin=[zxcsrt,zxcfin];
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (!zxcoop) zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,'sin',zxctime,zxcborder);
else zxcAnimator(zxcmde,zxcobj,zxcRGBtoHex(zxcoop.sf[2][0],zxcoop.sf[2][1],zxcoop.sf[2][2]),(zxcevt.type=='mouseover')?zxcobj.srtfin[1]:zxcobj.srtfin[0],'sin',zxctime)
}

function zxcInitBorderGrp(zxcid,zxcmde,zxctag,zxctimeover,zxctimeout,zxcsrt,zxcfin,zxcborder){
var zxcp=document.getElementById(zxcid);
var zxcels=document.getElementById(zxcid).getElementsByTagName(zxctag);
zxcels[0].style.borderBottom='solid black 1px';
for (var zxc0=0;zxc0<zxcels.length;zxc0++){
var zxcobj=zxcels[zxc0]
zxcels[zxc0].onmouseover=function(){ zxcBorder(zxcmde,this,zxctimeover,zxcsrt,zxcfin,zxcborder); }
zxcels[zxc0].onmouseout=function(){ zxcBorder(zxcmde,this,zxctimeout); }
}
}

function zxcRGBtoHex(zxcr,zxcg,zxcb){ return '#'+zxcToHex(zxcr)+zxcToHex(zxcg)+zxcToHex(zxcb); }

function zxcToHex(zxcnu) {
if (zxcnu==null) return '00';
if (zxcnu==0||isNaN(zxcnu)) return '00';
zxcnu=Math.max(0,zxcnu); zxcnu=Math.min(zxcnu,255); zxcnu=Math.round(zxcnu);
return '0123456789ABCDEF'.charAt((zxcnu-zxcnu%16)/16)+'0123456789ABCDEF'.charAt(zxcnu%16);
}


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

<body onload="zxcInitBorderGrp('fred','border-Bottom','A',1000,2000,'#FFFFFF','#000000','solid #000000 1px')">
<div style="width:100px;height:100px;background-Color:#FF9966;border-Bottom:solid white 1px;"
onmouseover="zxcBorder('border-Bottom',this,1000,'#FFFFFF','#000000','solid #000000 1px')"
onmouseout="zxcBorder('border-Bottom',this,1000);"
>
</div>
<br />
<br />
<div id="fred" >
<a href="#" style="width:100px;height:30px;border:solid black 0px;" >Link 1</a> <a >Link 2</a> <a >Link 3</a> <a >Link 4</a>
</div>
</body>

</html>

canadianjameson
07-18-2007, 02:37 PM
Hi Vic,

This is perfect, it will allow me the flexibility I need :)

I do have a few questions on getting the code to function as needed:


You currently have the script split into two javascripts. If I want to use external .js files should I put them both in the same file or name them 'animator1.js & animator2.js? (or what other names would be appropriate?)
I noticed this in the body tag:
onload="zxcInitBorderGrp('pageHolder','border-Bottom','A',1000,2000,'#FFFFFF','#000000','solid #000000 1px')" and I was just wondering if you could explain what the ,1000,2000, were, because i didn't see a list of parameters associated with this function
(i assume that the onload isn't related to this... although I don't see any function called zxcChangeLTWHCO <body> code you gave me)
// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcChangeLTWHCO('left','tst1',20,260,2000);'
// where:
// parameter 0 = 'left', 'top', 'width', 'height', 'color', 'background-Color', 'opacity' etc. (string)
// Note: the first character after the hyphen must be be upper case, all others lower case.
// With the exception of opacity and color the property value units is in 'px'.
// 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) there are two types of progressive change 'sin' and 'cos' plus a liner change. ('sin', 'cos' or liner, defaults to liner)
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
// parameter 5 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)

I don't exactly know why, but the first 'A' in the div always has a black bottom border, no matter what I do. (even when I move the script into my own page where it isn't set like it was with
<a href="#" style="width:100px;height:30px;border:solid black 0px;" >Link 1</a> Any idea why?


All in all this is a very cool and dynamic script, it will be put to very good use :)

Thanks Vic :)

canadianjameson
07-18-2007, 02:42 PM
as an afterthought I had an idea:

although I don't know how feasible it is, I figured it would be a neat way to give users an idea of where they are in my link links. This idea would require integration with the div toggler you just finished helping me with, so i don't know if you want to do that...

When a link is clicked, I would like the top border of the link to fade in and stay solid until another link is clicked.
When another link is clicked, I would like it's top border of that to fade in (like the first link), a have the first link's top border fade out.

I think it would help, but maybe I'm wrong. What do you think?

vwphillips
07-18-2007, 07:03 PM
was just wondering if you could explain what the ,1000,2000, were, because i didn't see a list of parameters associated with this function
&

I noticed this in the body tag:

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Application of script 'Element Animator' for border color and border size

// function call to zxcBorder(zxcmde,zxcobj,zxctime,zxcsrt,zxcfin,zxcborder)
//
// parameter 0 = border, border-Top, border-Bottom, border-Left or border-Right. (string)
// parameter 1 = the object or object ID to apply the string. (object or string)
// parameter 2 = the duration in milli seconds to apply the effect. (digits)
// parameter 3 = for color the start color in HEX. (string, prefix '#')
// for size the start size in px (digits). (digits)
// parameter 4 = for color the finish color in HEX. (string, prefix '#')
// for size the finish size in px (digits). (digits)
// parameter 5 = the defult border value. (string)
// example: 'solid white 1px'. Note type, color in HEX and size separated by spaces.

// The first event call(mouseover) must include all parameters.
// For subsequent event calls parameters 2 to 5 are optional

function zxcBorder(zxcmde,zxcobj,zxctime,zxcsrt,zxcfin,zxcborder){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
var zxcevt=window.event||arguments.callee.caller.arguments[0];
if (!zxcobj.srtfin) zxcobj.srtfin=[zxcsrt,zxcfin];
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (!zxcoop) zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,'sin',zxctime,zxcborder);
else zxcAnimator(zxcmde,zxcobj,(zxcobj.srtfin[0].match('#'))?zxcRGBtoHex(zxcoop.sf[2][0],zxcoop.sf[2][1],zxcoop.sf[2][2]):zxcoop.sf[2],(zxcevt.type=='mouseover')?zxcobj.srtfin[1]:zxcobj.srtfin[0],'sin',zxctime)
}

// function call to function zxcInitBorderGrp(zxcid,zxcmde,zxctag,zxctimeover,zxctimeout,zxcsrt,zxcfin,zxcborder){
// Called by an 'onload' event.
//
// parameter 0 = the unique ID name of the parent element. (string)
// parameter 1 = border, border-Top, border-Bottom, border-Left or border-Right. (string)
// parameter 2 = the the tag Name of the child elements to a[[ly the effect. (object or string)
// parameter 3 = the duration in milli seconds to apply the mouseover effect. (digits)
// parameter 4= the duration in milli seconds to apply the mouseout effect. (digits)
// parameter 5 = for color the start color in HEX. (string, prefix '#')
// for size the start size in px (digits). (digits)
// parameter 6 = for color the finish color in HEX. (string, prefix '#')
// for size the finish size in px (digits). (digits)
// parameter 7 = the defult border value. (string)
// example: 'solid white 1px'. Note type, color in HEX and size separated by spaces.

// The first event call(mouseover) must include all parameters.
// For subsequent event calls parameters 2 to 5 are optional

function zxcInitBorderGrp(zxcid,zxcmde,zxctag,zxctimeover,zxctimeout,zxcsrt,zxcfin,zxcborder){
var zxcp=document.getElementById(zxcid);
var zxcels=document.getElementById(zxcid).getElementsByTagName(zxctag);
for (var zxc0=0;zxc0<zxcels.length;zxc0++){
var zxcobj=zxcels[zxc0]
zxcels[zxc0].onmouseover=function(){ zxcBorder(zxcmde,this,zxctimeover,zxcsrt,zxcfin,zxcborder); }
zxcels[zxc0].onmouseout=function(){ zxcBorder(zxcmde,this,zxctimeout); }
}
}

function zxcRGBtoHex(zxcr,zxcg,zxcb){ return '#'+zxcToHex(zxcr)+zxcToHex(zxcg)+zxcToHex(zxcb); }

function zxcToHex(zxcnu) {
if (zxcnu==null) return '00';
if (zxcnu==0||isNaN(zxcnu)) return '00';
zxcnu=Math.max(0,zxcnu); zxcnu=Math.min(zxcnu,255); zxcnu=Math.round(zxcnu);
return '0123456789ABCDEF'.charAt((zxcnu-zxcnu%16)/16)+'0123456789ABCDEF'.charAt(zxcnu%16);
}


/*]]>*/
</script>


ame them 'animator1.js & animator2.js? (

the first script is intended as a ' common use' script the section a more specialised application of the first. I would not combine them.


t see any function called zxcChangeLTWHCO <b

The application notes and naming convention need looking at, it does say draft but works well enough.


actly know why, but the first 'A' in the div always has a black bottom border, no matter what I do. (even when I move the script into my own page where it isn't

Fixed


as an afterthought I had an idea:

The animation can be applied to each 'style parameter' of an object can be applied concurrently. eg the script can be used to draw a circle while changing the color.


so for what you suggest use it for both the Top and Bottom borders by calling the function for border-Top and for border-Bottom from the same event.

canadianjameson
07-19-2007, 08:45 AM
Hey Vic,

Thanks for the fixes and added comments, they really helped me get a grasp on how to use the script.

I implimented your last solution with this:

<body onload="zxcInitBorderGrp('pageHolder','border-Bottom','A',1000,2000,'#FFFFFF','#000000','solid c#000000 1px')">
<div id="pageHolder">
<div id="linksYPP">
<a href="#mainPointsYPP" onclick="zxcToggle('mainPointsYPP',0,0); zxcBorder('border-Top','this',1000,'#FFFFFF','#000000','solid black 1px'); return false;">main points</a>...

and it worked for one click, however in order to keep a border-Top hierarchy within the levels of the div-toggles, wouldn't that scripts 'history' need to be referenced? Perhaps that isn't very clear :( Should I provide and example?

vwphillips
07-19-2007, 01:20 PM
Q. Should I provide and example

A. yes

canadianjameson
07-19-2007, 02:26 PM
www.enviromark.ca/head/YPP.htm

What I would like is
Click 'main points'
Click 'Eligibility'
Now click 'Parental Benefits' The border-Top of Eligibility should fade out as 'this' border-Top fades in
Now click 'Comments' (of the first menu group). The border-Top of 'Main Points' should fade out as 'this' border-Top fades in As well, the border-Top of 'Parental Benefits' should not remain faded-in if that sub-menu is re-activated

I think that was a better explanation :D Essentially what I'm trying to do is wherever they are in the menu-tree, the path should have border-Top fade in onclick.

vwphillips
07-19-2007, 04:37 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/pages.css" type="text/css">
<style type="text/css">
<!--
/* CSS Document */
html, body {
height:100%;
font-family: "verdana", trebuchet ms, arial, sans-serif;
font-size: 12px;
}
* img {
border: 0
}
* a {
color: #0000A0;
text-decoration: none;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
#pageHolder {
margin-top: 40px;
margin-left: 40px;
}
#mainPointsYPP a {
margin-left: 10px;
margin-right: 10px;
}
#mainPointsYPP ul {
list-style:url(../images/bullet.gif) none outside;
padding:20px 0px 1px 15px;
margin:5px 0px 2px 0px;
}
#mainPointsYPP ul ul {
list-style:url(../images/bullet.gif) none outside;
padding:1px 0px 1px 15px;
margin:5px 20px 2px 0px;
}
#eligibilityYPP, #parentBenefitsYPP, #childBenefitsYPP, #timeOffYPP, #commentsYPP, #mainPointsYPP, #whenWhereYPP{
display: none
}
#commentsYPP p {
margin-bottom: 10px
}
#linksYPP {
margin-bottom: 40px;
text-align: center
}
#linksYPP a {
margin-left: 10px;
margin-right: 10px
}
#locationYPP {
float: left;
display: inline
}
#hoursYPP {
float: right;
display: inline
}
#YPPmain {
display: none;
margin-left: 65px;
margin-right: 65px;
}

/*#descriptions ul ul {
list-style: url(../images/smallBull1.gif) none outside;
margin:0px;
}
#descriptions ul ul ul {
list-style: url(images/smallBull2.gif) none outside;
margin:0px;
}*/


-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
// Element Animator (06-March-2007) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height, Color, Opacity style
// (or otherproperties) of an element over a specified period of time.

// **** 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;'
// If not assigned the style position of the element will be assigned as 'position:absolute;' by the script.
//
// The element would normally be assigned a unique ID name.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcChangeLTWHCO('left','tst1',20,260,2000);'
// where:
// parameter 0 = 'left', 'top', 'width', 'height', 'color', 'background-Color', 'opacity' etc. (string)
// Note: the first character after the hyphen must be be upper case, all others lower case.
// With the exception of opacity and color the property value units is in 'px'.
// 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) there are two types of progressive change 'sin' and 'cos' plus a liner change. ('sin', 'cos' or liner, defaults to liner)
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
// parameter 5 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
//
// The function may be re-executed with a different set of parameters (start/finish time, progression type or period)
// whenever required, say from an onclick/mouseover/out event. The original progression type and period parameters
// will be retained unless re-specified, the start and finish parameters must be specified.
//

// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code (about 3.7K) is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//



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

var zxcOOPCnt=0;

function zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxccurve,zxctime,zxcplot){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (zxcoop) zxcoop.cngparameters(zxcmde,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
else zxcobj[zxcmde.replace('-','')+'oop']=new zxcAnimatorOOP(zxcmde,zxcobj,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
}

function zxcAnimatorOOP(zxcmde,zxcobj,zxcsrtfin,zxccurve,zxctime,zxcborder){
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
if (zxcStyleValue(zxcobj,'position')=='static'&&(zxcmde=='left'||zxcmde=='top')) zxcobj.style.position='absolute';
this.to=null;
this.ref='zxcltwhco'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj;
this.cngparameters(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcborder);
}

zxcAnimatorOOP.prototype.cngparameters=function(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcborder){
clearTimeout(this.to);
this.mde=this.mde||zxcmde;
zxccurve=zxccurve||this.curve||'';
this.time=zxctime||this.time||2000;
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
for (var zxc0=0;zxc0<zxcsrtfin.length;zxc0++){
var zxcobj=document.getElementById(zxcsrtfin[zxc0]);
if (zxcobj){ zxcsrtfin[zxc0]=zxcStyleValue(zxcobj,zxcmde); if (!this.mde.match('olor')) zxcsrtfin[zxc0]=parseInt(zxcsrtfin[zxc0]); }
if (zxcsrtfin[zxc0]==0) zxcsrtfin[zxc0]=0.00001;
}
if (this.mde=='opacity'&&(zxcsrtfin[0]<0||zxcsrtfin[0]>100||zxcsrtfin[0]<0||zxcsrtfin[0]>100)) return;
if (zxcborder) this.brd=zxcborder.split(' ');
this.curve=zxccurve.charAt(0).toLowerCase();
this.sf=[(!zxcsrtfin[0].match('#'))?[zxcsrtfin[0]]:zxcRGBSplit(zxcsrtfin[0]),(!zxcsrtfin[0].match('#'))?[zxcsrtfin[1]]:zxcRGBSplit(zxcsrtfin[1]),[]];
this.srttime=new Date().getTime();
this.inc=Math.PI/(2*this.time);
this.cngltwhco();
}

zxcAnimatorOOP.prototype.cngltwhco=function(){
var zxcms=new Date().getTime()-this.srttime;
for (var zxc0 in this.sf[1]){ this.sf[2][zxc0]=(this.curve=='s')?Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.sin(this.inc*zxcms)+this.sf[0][zxc0]):(this.curve=='c')?(this.sf[1][0])-Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.cos(this.inc*zxcms)):(this.sf[1][zxc0]-this.sf[0][zxc0])/this.time*zxcms+this.sf[0][zxc0]; }
this.cngstyle(this.sf[2]);
if (zxcms<this.time) this.setTimeOut('cngltwhco();',10);
else this.cngstyle(this.sf[1]);
}

zxcAnimatorOOP.prototype.cngstyle=function(zxcpar){
if (this.mde.match('border')){
if (zxcpar.length==1) this.obj.style[this.mde.replace('-','')]=this.brd[0]+' '+this.brd[1]+' '+zxcpar[0]+'px';
if (zxcpar.length==3) this.obj.style[this.mde.replace('-','')]=this.brd[0]+' rgb('+zxcpar[0]+','+zxcpar[1]+','+zxcpar[2]+') '+this.brd[2];
}
else if (this.mde.match('olor')) this.obj.style[this.mde.replace('-','')]='rgb('+zxcpar[0]+','+zxcpar[1]+','+zxcpar[2]+')';
else if (this.mde!='opacity') this.obj.style[this.mde.replace('-','')]=zxcpar[0]+'px';
else this.opacity(zxcpar[0]);
}

zxcAnimatorOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100) return;
if (this.obj.style.MozOpacity!=null) this.obj.style.MozOpacity=(zxcopc/100)-.001;
else if (this.obj.style.opacity!=null) this.obj.style.opacity=(zxcopc/100)-.001;
else if (this.obj.style.filter!=null) this.obj.style.filter='alpha(opacity='+zxcopc+')';
else if (this.obj.KHTMLOpacity!=null) this.obj.KHTMLOpacity=(zxcopc/100)-.001;
}

zxcAnimatorOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}

function zxcStyleValue(zxcel,zxcp){
if (zxcel.currentStyle) return zxcel.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcel,null).getPropertyValue(zxcp.toLowerCase());
}

function zxcRGBSplit(zxccol){
if (zxccol.match('#')){ zxccol=parseInt(zxccol.substring(1,3),16)+','+parseInt(zxccol.substring(3,5),16)+','+parseInt(zxccol .substring(5,7),16); }
zxccol=zxccol.replace(/[rgb()\s]/g,'').split(',');
return [parseInt(zxccol[0]),parseInt(zxccol[1]),parseInt(zxccol[2])];
}


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

// zxcToggle('eligibilityYPP',0,1)
// parameter 0 = the unique ID name of the element to open (string)
// parameter 1 = the menu group (digit)
// parameter 2 = the sub menu level (digit)


var zxcGrpAry=[];

function zxcToggle(zxcid,zxcgrp,zxclevel) {
var zxcobj=document.getElementById(zxcid);
if (!zxcGrpAry[zxcgrp]) zxcGrpAry[zxcgrp]=[];
for (var zxc0=0;zxc0<zxcGrpAry[zxcgrp].length;zxc0++){
if (zxcGrpAry[zxcgrp][zxc0][0]==zxcobj) zxcGrpAry[zxcgrp].splice(zxc0,1);
}
zxcGrpAry[zxcgrp].push([zxcobj,zxclevel]);
zxcobj.style.display ='block';
// zxcobj.style.display =(zxcStyleValue(zxcobj,'display')=='none')?'block':'none'; // replace above to hide all submenus onclick
for (var zxc1=0;zxc1<zxcGrpAry.length;zxc1++){
if (zxcGrpAry[zxc1]){
for (var zxc1a=0;zxc1a<zxcGrpAry[zxc1].length;zxc1a++){
if (((zxc1==zxcgrp&&(zxcGrpAry[zxc1][zxc1a][0]!=zxcobj&&zxcGrpAry[zxc1][zxc1a][1]>=zxclevel))||(zxc1!=zxcgrp))&&zxcobj!=zxcGrpAry[zxc1][zxc1a][0]){
zxcGrpAry[zxc1][zxc1a][0].style.display='none';
}
}
}
}
}

function zxcStyleValue(zxcobj,zxcp){ // pass object and property, returns property value
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}

//-->
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Application of script 'Element Animator' for border color and border size

// function call to zxcBorder(zxcmde,zxcobj,zxctime,zxcsrt,zxcfin,zxcborder) //zxcBorder('border-Top','this','1000','#FFFFFF','#000000','solid white 1px')
//
// parameter 0 = border, border-Top, border-Bottom, border-Left or border-Right. (string)
// parameter 1 = the object or object ID to apply the string. (object or string)
// parameter 2 = the duration in milli seconds to apply the effect. (digits)
// parameter 3 = for color the start color in HEX. (string, prefix '#')
// for size the start size in px (digits). (digits)
// parameter 4 = for color the finish color in HEX. (string, prefix '#')
// for size the finish size in px (digits). (digits)
// parameter 5 = the defult border value. (string)
// example: 'solid white 1px'. Note type, color in HEX and size separated by spaces.

// The first event call(mouseover) must include all parameters.
// For subsequent event calls parameters 2 to 5 are optional
var zxcTBAry=[];

function zxcBorder(zxcmde,zxcobj,zxctime,zxcsrt,zxcfin,zxcborder,zxcgrp,zxclevel){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
var zxcevt=window.event||arguments.callee.caller.arguments[0];
if (!zxcobj.srtfin) zxcobj.srtfin=[zxcsrt,zxcfin];
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (!zxcoop) zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,'sin',zxctime,zxcborder);
else zxcAnimator(zxcmde,zxcobj,(zxcobj.srtfin[0].match('#'))?zxcRGBtoHex(zxcoop.sf[2][0],zxcoop.sf[2][1],zxcoop.sf[2][2]):zxcoop.sf[2],(zxcevt.type=='mouseover')?zxcobj.srtfin[1]:zxcobj.srtfin[0],'sin',zxctime)
if (!zxcTBAry[zxcgrp]) zxcTBAry[zxcgrp]=[];
for (var zxc0=0;zxc0<zxcTBAry[zxcgrp].length;zxc0++){
if (zxcTBAry[zxcgrp][zxc0][0]==zxcobj) zxcTBAry[zxcgrp].splice(zxc0,1);
}
if (zxcevt.type=='click'){
if (!zxcTBAry[zxcgrp]) zxcTBAry[zxcgrp]=[];
for (var zxc0=0;zxc0<zxcTBAry[zxcgrp].length;zxc0++){
if (zxcTBAry[zxcgrp][zxc0][0]==zxcobj) zxcTBAry[zxcgrp].splice(zxc0,1);
}
zxcTBAry[zxcgrp].push([zxcobj,zxclevel]);
for (var zxc0=0;zxc0<zxcTBAry.length;zxc0++){
if (zxcTBAry[zxc0]){
for (var zxc0a=0;zxc0a<zxcTBAry[zxc0].length;zxc0a++){
if (zxc0!=zxcgrp||(zxcTBAry[zxc0][zxc0a][1]>=zxclevel&&zxcTBAry[zxc0][zxc0a][0]!=zxcobj)){
var zxcnobj=zxcTBAry[zxc0][zxc0a][0];
var zxcoop=zxcnobj[zxcmde.replace('-','')+'oop'];
zxcAnimator(zxcmde,zxcnobj,(zxcnobj.srtfin[0].match('#'))?zxcRGBtoHex(zxcoop.sf[2][0],zxcoop.sf[2][1],zxcoop.sf[2][2]):zxcoop.sf[2],zxcsrt,'sin',zxctime)
}
}
}
}
}
}

// function call to function zxcInitBorderGrp(zxcid,zxcmde,zxctag,zxctimeover,zxctimeout,zxcsrt,zxcfin,zxcborder){
// Called by an 'onload' event.
//
// parameter 0 = the unique ID name of the parent element. (string)
// parameter 1 = border, border-Top, border-Bottom, border-Left or border-Right. (string)
// parameter 2 = the the tag Name of the child elements to a[[ly the effect. (object or string)
// parameter 3 = the duration in milli seconds to apply the mouseover effect. (digits)
// parameter 4 = the duration in milli seconds to apply the mouseout effect. (digits)
// parameter 5 = for color the start color in HEX. (string, prefix '#')
// for size the start size in px (digits). (digits)
// parameter 6 = for color the finish color in HEX. (string, prefix '#')
// for size the finish size in px (digits). (digits)
// parameter 7 = the defult border value. (string)
// example: 'solid white 1px'. Note type, color in HEX and size separated by spaces.

// The first event call(mouseover) must include all parameters.
// For subsequent event calls parameters 2 to 5 are optional

function zxcInitBorderGrp(zxcid,zxcmde,zxctag,zxctimeover,zxctimeout,zxcsrt,zxcfin,zxcborder){
var zxcp=document.getElementById(zxcid);
var zxcels=document.getElementById(zxcid).getElementsByTagName(zxctag);
for (var zxc0=0;zxc0<zxcels.length;zxc0++){
var zxcobj=zxcels[zxc0]
zxcels[zxc0].onmouseover=function(){ zxcBorder(zxcmde,this,zxctimeover,zxcsrt,zxcfin,zxcborder); }
zxcels[zxc0].onmouseout=function(){ zxcBorder(zxcmde,this,zxctimeout); }
}
}

function zxcRGBtoHex(zxcr,zxcg,zxcb){ return '#'+zxcToHex(zxcr)+zxcToHex(zxcg)+zxcToHex(zxcb); }

function zxcToHex(zxcnu) {
if (zxcnu==null) return '00';
if (zxcnu==0||isNaN(zxcnu)) return '00';
zxcnu=Math.max(0,zxcnu); zxcnu=Math.min(zxcnu,255); zxcnu=Math.round(zxcnu);
return '0123456789ABCDEF'.charAt((zxcnu-zxcnu%16)/16)+'0123456789ABCDEF'.charAt(zxcnu%16);
}

/*]]>*/
</script>

<script language="JavaScript" type="text/javascript" src="js/toggler.js"></script>
</head>
<body onload="zxcInitBorderGrp('pageHolder','border-Bottom','A',1000,2000,'#FFFFFF','#000000','solid #000000 1px')">
<div id="pageHolder">

<div id="linksYPP">
<a href="#mainPointsYPP" onclick="zxcToggle('mainPointsYPP',0,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',0,0); return false;">main points</a>
<a href="#commentsYPP" onclick="zxcToggle('commentsYPP',1,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,0); return false">comments</a>
<a href="#YPPmain" onclick="zxcToggle('YPPmain',2,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',2,0); return false">pics</a>
<a href="#whenWhereYPP" onclick="zxcToggle('whenWhereYPP',3,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',3,0); return false">operating info</a>
</div>
<div id="mainPointsYPP">

<a href="#eligibilityYPP" onclick="zxcToggle('eligibilityYPP',0,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',0,1); return false">Eligibility</a>
<a href="#parentBenefitsYPP" onclick="zxcToggle('parentBenefitsYPP',0,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',0,1); return false">Parental Benefits</a>
<a href="#childBenefitsYPP" onclick="zxcToggle('childBenefitsYPP',0,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',0,1); return false">Child Benefits</a>
<a href="#timeOffYPP" onclick="zxcToggle('timeOffYPP',0,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',0,1); return false">"Time Off For Mum"</a>

<ul id="eligibilityYPP">
<li>Under 25? Have kids? Pregnant? Then come check out the Young Parents Program!
<br><br>
We are a group of parents who meet for coffee, snacks, support and workshops twice a week. The atmosphere is a very casual, friendly, and inviting one where young parents come to share their hopes, fears and problems with like-minded people. Lunch is also prepared for everyone.
</li>

</ul>
<ul id="parentBenefitsYPP"><li>Parents are also offered a wide array of activities to participate in such as art therapy, dancing, and cooking. Also, there are workshops exploring parenting issues, health, wellbeing, etc. And on the last Friday of every month, access to free furniture, toys and clothing is available. 2 Bus tickets are given out at the end of every session</li></ul>
<ul id="childBenefitsYPP"><li>Children aged six months to five years are cared for within two separate groups. They are animated and entertained with age appropriate activities, such as arts and crafts, singing and stories. They get a chance to meet new friends and socialize with children their own age</li></ul>
<ul id="timeOffYPP"><li>Schedule for Mondays (Registration required)
<ul>
<li>Time off for Mum is coordinated by the group "Women on the Rise" in collaboration with the YPP, 10.30-3.30 stimulating activities for children age 2-5, hot lunch included for $2</li>
</ul>
<font color="#990099" size="5"><a href="#YPPmain" onclick="zxcToggle('YPPmain',0,2); return false">pics</a></font>

</ul>
</div>
<div id="commentsYPP">
<strong>Comments from Young Parents Program participants:</strong>
<br>
<br>
<br>
<p>"So many doors have opened up for me because of this program I highly recommend it to anyone who is a young parent." &nbsp;<font color="#990099">Jasmine</font></p>

<p>"I come here to get a break." &nbsp;<font color="#990099">Lina</font></p>
<p>"The new friendships I've made are great." &nbsp;<font color="#990099">Melanie</font></p>
<p>"This young parents program gives me confidence about becoming a new parent." &nbsp;<font color="#990099">Penelope</font></p>
<p>"Sometimes I just need someone to talk to. At YPP I find those people who all have felt the same at some time and can help." &nbsp;<font color="#990099">Paula</font></p>
<p>"YPP let s me feel good about being a young mother, and I LOVE it." &nbsp;<font color="#990099">Sara</font></p>

<p>"I come for the snacks." &nbsp;<font color="#990099">Jenni</font></p>
</div>
<img id="YPPmain" src="images/YPP/main.jpg">
<div id="whenWhereYPP">
<div id="locationYPP">
The Young Parents Program Center<br>
5775 St. Jacques Corner of Melrose<br>

Métro Vendôme / Bus # 90 west or 104
</div>
<div id="hoursYPP">
Opening Hours:<br>
Wednesday 1:00 p.m. to 4:30 p.m.<br>
Friday 1:00 p.m. to 4:30 p.m.<br>
Tel/Tél : 514.482.7910
</div>

</div>
</div>
</body>
</html>

vwphillips
07-19-2007, 05:26 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/pages.css" type="text/css">
<style type="text/css">
<!--
/* CSS Document */
html, body {
height:100%;
font-family: "verdana", trebuchet ms, arial, sans-serif;
font-size: 12px;
}
* img {
border: 0
}
* a {
color: #0000A0;
text-decoration: none;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
#pageHolder {
margin-top: 40px;
margin-left: 40px;
}
#mainPointsYPP a {
margin-left: 10px;
margin-right: 10px;
}
#mainPointsYPP ul {
list-style:url(../images/bullet.gif) none outside;
padding:20px 0px 1px 15px;
margin:5px 0px 2px 0px;
}
#mainPointsYPP ul ul {
list-style:url(../images/bullet.gif) none outside;
padding:1px 0px 1px 15px;
margin:5px 20px 2px 0px;
}
#eligibilityYPP, #parentBenefitsYPP, #childBenefitsYPP, #timeOffYPP, #commentsYPP, #mainPointsYPP, #whenWhereYPP{
display: none
}
#commentsYPP p {
margin-bottom: 10px
}
#linksYPP {
margin-bottom: 40px;
text-align: center
}
#linksYPP a {
margin-left: 10px;
margin-right: 10px
}
#locationYPP {
float: left;
display: inline
}
#hoursYPP {
float: right;
display: inline
}
#YPPmain {
display: none;
margin-left: 65px;
margin-right: 65px;
}

/*#descriptions ul ul {
list-style: url(../images/smallBull1.gif) none outside;
margin:0px;
}
#descriptions ul ul ul {
list-style: url(images/smallBull2.gif) none outside;
margin:0px;
}*/


-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
// Element Animator (19-July-2007) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk


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

var zxcOOPCnt=0;

function zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxccurve,zxctime,zxcplot){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (zxcoop) zxcoop.cngparameters(zxcmde,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
else zxcobj[zxcmde.replace('-','')+'oop']=new zxcAnimatorOOP(zxcmde,zxcobj,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
}

function zxcAnimatorOOP(zxcmde,zxcobj,zxcsrtfin,zxccurve,zxctime,zxcborder){
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
if (zxcStyleValue(zxcobj,'position')=='static'&&(zxcmde=='left'||zxcmde=='top')) zxcobj.style.position='absolute';
this.to=null;
this.ref='zxcltwhco'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj;
this.cngparameters(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcborder);
}

zxcAnimatorOOP.prototype.cngparameters=function(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcborder){
clearTimeout(this.to);
this.mde=this.mde||zxcmde;
zxccurve=zxccurve||this.curve||'';
this.time=zxctime||this.time||2000;
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
for (var zxc0=0;zxc0<zxcsrtfin.length;zxc0++){
var zxcobj=document.getElementById(zxcsrtfin[zxc0]);
if (zxcobj){ zxcsrtfin[zxc0]=zxcStyleValue(zxcobj,zxcmde); if (!this.mde.match('olor')) zxcsrtfin[zxc0]=parseInt(zxcsrtfin[zxc0]); }
if (zxcsrtfin[zxc0]==0) zxcsrtfin[zxc0]=0.00001;
}
if (this.mde=='opacity'&&(zxcsrtfin[0]<0||zxcsrtfin[0]>100||zxcsrtfin[0]<0||zxcsrtfin[0]>100)) return;
if (zxcborder) this.brd=zxcborder.split(' ');
this.curve=zxccurve.charAt(0).toLowerCase();
this.data=[(!zxcsrtfin[0].match('#'))?[zxcsrtfin[0]]:zxcRGBSplit(zxcsrtfin[0]),(!zxcsrtfin[0].match('#'))?[zxcsrtfin[1]]:zxcRGBSplit(zxcsrtfin[1]),[]];
this.srttime=new Date().getTime();
this.inc=Math.PI/(2*this.time);
this.cngltwhco();
}

zxcAnimatorOOP.prototype.cngltwhco=function(){
var zxcms=new Date().getTime()-this.srttime;
for (var zxc0 in this.data[1]){ this.data[2][zxc0]=(this.curve=='s')?Math.floor((this.data[1][zxc0]-this.data[0][zxc0])*Math.sin(this.inc*zxcms)+this.data[0][zxc0]):(this.curve=='c')?(this.data[1][0])-Math.floor((this.data[1][zxc0]-this.data[0][zxc0])*Math.cos(this.inc*zxcms)):(this.data[1][zxc0]-this.data[0][zxc0])/this.time*zxcms+this.data[0][zxc0]; }
this.cngstyle(this.data[2]);
if (zxcms<this.time) this.setTimeOut('cngltwhco();',10);
else this.cngstyle(this.data[1]);
}

zxcAnimatorOOP.prototype.cngstyle=function(zxcpar){
if (this.mde.match('border')){
if (zxcpar.length==1) this.obj.style[this.mde.replace('-','')]=this.brd[0]+' '+this.brd[1]+' '+zxcpar[0]+'px';
if (zxcpar.length==3) this.obj.style[this.mde.replace('-','')]=this.brd[0]+' rgb('+zxcpar[0]+','+zxcpar[1]+','+zxcpar[2]+') '+this.brd[2];
}
else if (this.mde.match('olor')) this.obj.style[this.mde.replace('-','')]='rgb('+zxcpar[0]+','+zxcpar[1]+','+zxcpar[2]+')';
else if (this.mde!='opacity') this.obj.style[this.mde.replace('-','')]=zxcpar[0]+'px';
else this.opacity(zxcpar[0]);
}

zxcAnimatorOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100) return;
if (this.obj.style.MozOpacity!=null) this.obj.style.MozOpacity=(zxcopc/100)-.001;
else if (this.obj.style.opacity!=null) this.obj.style.opacity=(zxcopc/100)-.001;
else if (this.obj.style.filter!=null) this.obj.style.filter='alpha(opacity='+zxcopc+')';
else if (this.obj.KHTMLOpacity!=null) this.obj.KHTMLOpacity=(zxcopc/100)-.001;
}

zxcAnimatorOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}

function zxcStyleValue(zxcel,zxcp){
if (zxcel.currentStyle) return zxcel.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcel,null).getPropertyValue(zxcp.toLowerCase());
}

function zxcRGBSplit(zxccol){
if (zxccol.match('#')){ zxccol=parseInt(zxccol.substring(1,3),16)+','+parseInt(zxccol.substring(3,5),16)+','+parseInt(zxccol .substring(5,7),16); }
zxccol=zxccol.replace(/[rgb()\s]/g,'').split(',');
return [parseInt(zxccol[0]),parseInt(zxccol[1]),parseInt(zxccol[2])];
}


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

// zxcToggle('eligibilityYPP',0,1)
// parameter 0 = the unique ID name of the element to open (string)
// parameter 1 = the menu group (digit)
// parameter 2 = the sub menu level (digit)


var zxcGrpAry=[];

function zxcToggle(zxcid,zxcgrp,zxclevel) {
var zxcobj=document.getElementById(zxcid);
if (!zxcGrpAry[zxcgrp]) zxcGrpAry[zxcgrp]=[];
for (var zxc0=0;zxc0<zxcGrpAry[zxcgrp].length;zxc0++){
if (zxcGrpAry[zxcgrp][zxc0][0]==zxcobj) zxcGrpAry[zxcgrp].splice(zxc0,1);
}
zxcGrpAry[zxcgrp].push([zxcobj,zxclevel]);
zxcobj.style.display ='block';
// zxcobj.style.display =(zxcStyleValue(zxcobj,'display')=='none')?'block':'none'; // replace above to hide all submenus onclick
for (var zxc1=0;zxc1<zxcGrpAry.length;zxc1++){
if (zxcGrpAry[zxc1]){
for (var zxc1a=0;zxc1a<zxcGrpAry[zxc1].length;zxc1a++){
if (((zxc1==zxcgrp&&(zxcGrpAry[zxc1][zxc1a][0]!=zxcobj&&zxcGrpAry[zxc1][zxc1a][1]>=zxclevel))||(zxc1!=zxcgrp))&&zxcobj!=zxcGrpAry[zxc1][zxc1a][0]){
zxcGrpAry[zxc1][zxc1a][0].style.display='none';
}
}
}
}
}

function zxcStyleValue(zxcobj,zxcp){ // pass object and property, returns property value
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}

//-->
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Application of script 'Element Animator' for border color and border size

// function call to zxcBorder(zxcmde,zxcobj,zxctime,zxcsrt,zxcfin,zxcborder) //zxcBorder('border-Top','this','1000','#FFFFFF','#000000','solid white 1px')
//
// parameter 0 = border, border-Top, border-Bottom, border-Left or border-Right. (string)
// parameter 1 = the object or object ID to apply the string. (object or string)
// parameter 2 = the duration in milli seconds to apply the effect. (digits)
// parameter 3 = for color the start color in HEX. (string, prefix '#')
// for size the start size in px (digits). (digits)
// parameter 4 = for color the finish color in HEX. (string, prefix '#')
// for size the finish size in px (digits). (digits)
// parameter 5 = the defult border value. (string)
// example: 'solid white 1px'. Note type, color in HEX and size separated by spaces.
// parameter 6 = the menu group. (string)
// parameter 7 = the sebmenu level. (string)

// The first event call(mouseover) must include all parameters.
// For subsequent event calls parameters 2 to 5 are optional
var zxcTBAry=[];

function zxcBorder(zxcmde,zxcobj,zxctime,zxcsrt,zxcfin,zxcborder,zxcgrp,zxclevel){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
var zxcevt=window.event||arguments.callee.caller.arguments[0];
if (!zxcobj.srtfin) zxcobj.srtfin=[zxcsrt,zxcfin];
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (!zxcoop) zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,'sin',zxctime,zxcborder);
else zxcAnimator(zxcmde,zxcobj,(zxcobj.srtfin[0].match('#'))?zxcRGBtoHex(zxcoop.data[2][0],zxcoop.data[2][1],zxcoop.data[2][2]):zxcoop.data[2],(zxcevt.type=='mouseover')?zxcobj.srtfin[1]:zxcobj.srtfin[0],'sin',zxctime)
if (!zxcTBAry[zxcgrp]) zxcTBAry[zxcgrp]=[];
for (var zxc0=0;zxc0<zxcTBAry[zxcgrp].length;zxc0++){
if (zxcTBAry[zxcgrp][zxc0][0]==zxcobj) zxcTBAry[zxcgrp].splice(zxc0,1);
}
if (zxcevt.type=='click'){
if (!zxcTBAry[zxcgrp]) zxcTBAry[zxcgrp]=[];
for (var zxc0=0;zxc0<zxcTBAry[zxcgrp].length;zxc0++){
if (zxcTBAry[zxcgrp][zxc0][0]==zxcobj) zxcTBAry[zxcgrp].splice(zxc0,1);
}
zxcTBAry[zxcgrp].push([zxcobj,zxclevel]);
for (var zxc0=0;zxc0<zxcTBAry.length;zxc0++){
if (zxcTBAry[zxc0]){
for (var zxc0a=0;zxc0a<zxcTBAry[zxc0].length;zxc0a++){
if (zxc0!=zxcgrp||(zxcTBAry[zxc0][zxc0a][1]>=zxclevel&&zxcTBAry[zxc0][zxc0a][0]!=zxcobj)){
var zxcnobj=zxcTBAry[zxc0][zxc0a][0];
var zxcoop=zxcnobj[zxcmde.replace('-','')+'oop'];
zxcAnimator(zxcmde,zxcnobj,(zxcnobj.srtfin[0].match('#'))?zxcRGBtoHex(zxcoop.data[2][0],zxcoop.data[2][1],zxcoop.data[2][2]):zxcoop.data[2],zxcsrt,'sin',zxctime)
}
}
}
}
}
}

// function call to function zxcInitBorderGrp(zxcid,zxcmde,zxctag,zxctimeover,zxctimeout,zxcsrt,zxcfin,zxcborder){
// Called by an 'onload' event.
//
// parameter 0 = the unique ID name of the parent element. (string)
// parameter 1 = border, border-Top, border-Bottom, border-Left or border-Right. (string)
// parameter 2 = the the tag Name of the child elements to a[[ly the effect. (object or string)
// parameter 3 = the duration in milli seconds to apply the mouseover effect. (digits)
// parameter 4 = the duration in milli seconds to apply the mouseout effect. (digits)
// parameter 5 = for color the start color in HEX. (string, prefix '#')
// for size the start size in px (digits). (digits)
// parameter 6 = for color the finish color in HEX. (string, prefix '#')
// for size the finish size in px (digits). (digits)
// parameter 7 = the defult border value. (string)
// example: 'solid white 1px'. Note type, color in HEX and size separated by spaces.

// The first event call(mouseover) must include all parameters.
// For subsequent event calls parameters 2 to 5 are optional

function zxcInitBorderGrp(zxcid,zxcmde,zxctag,zxctimeover,zxctimeout,zxcsrt,zxcfin,zxcborder){
var zxcp=document.getElementById(zxcid);
var zxcels=document.getElementById(zxcid).getElementsByTagName(zxctag);
for (var zxc0=0;zxc0<zxcels.length;zxc0++){
var zxcobj=zxcels[zxc0]
zxcels[zxc0].onmouseover=function(){ zxcBorder(zxcmde,this,zxctimeover,zxcsrt,zxcfin,zxcborder); }
zxcels[zxc0].onmouseout=function(){ zxcBorder(zxcmde,this,zxctimeout); }
}
}

function zxcRGBtoHex(zxcr,zxcg,zxcb){ return '#'+zxcToHex(zxcr)+zxcToHex(zxcg)+zxcToHex(zxcb); }

function zxcToHex(zxcnu) {
if (zxcnu==null) return '00';
if (zxcnu==0||isNaN(zxcnu)) return '00';
zxcnu=Math.max(0,zxcnu); zxcnu=Math.min(zxcnu,255); zxcnu=Math.round(zxcnu);
return '0123456789ABCDEF'.charAt((zxcnu-zxcnu%16)/16)+'0123456789ABCDEF'.charAt(zxcnu%16);
}

/*]]>*/
</script>

<script language="JavaScript" type="text/javascript" src="js/toggler.js"></script>
</head>
<body onload="zxcInitBorderGrp('pageHolder','border-Bottom','A',1000,2000,'#FFFFFF','#000000','solid #000000 1px')">
<div id="pageHolder">

<div id="linksYPP">
<a href="#mainPointsYPP" onclick="zxcToggle('mainPointsYPP',0,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',0,0); return false;">main points</a>
<a href="#commentsYPP" onclick="zxcToggle('commentsYPP',1,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,0); return false">comments</a>
<a href="#YPPmain" onclick="zxcToggle('YPPmain',2,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',2,0); return false">pics</a>
<a href="#whenWhereYPP" onclick="zxcToggle('whenWhereYPP',3,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',3,0); return false">operating info</a>
</div>
<div id="mainPointsYPP">

<a href="#eligibilityYPP" onclick="zxcToggle('eligibilityYPP',0,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',0,1); return false">Eligibility</a>
<a href="#parentBenefitsYPP" onclick="zxcToggle('parentBenefitsYPP',0,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',0,1); return false">Parental Benefits</a>
<a href="#childBenefitsYPP" onclick="zxcToggle('childBenefitsYPP',0,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',0,1); return false">Child Benefits</a>
<a href="#timeOffYPP" onclick="zxcToggle('timeOffYPP',0,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',0,1); return false">"Time Off For Mum"</a>

<ul id="eligibilityYPP">
<li>Under 25? Have kids? Pregnant? Then come check out the Young Parents Program!
<br><br>
We are a group of parents who meet for coffee, snacks, support and workshops twice a week. The atmosphere is a very casual, friendly, and inviting one where young parents come to share their hopes, fears and problems with like-minded people. Lunch is also prepared for everyone.
</li>

</ul>
<ul id="parentBenefitsYPP"><li>Parents are also offered a wide array of activities to participate in such as art therapy, dancing, and cooking. Also, there are workshops exploring parenting issues, health, wellbeing, etc. And on the last Friday of every month, access to free furniture, toys and clothing is available. 2 Bus tickets are given out at the end of every session</li></ul>
<ul id="childBenefitsYPP"><li>Children aged six months to five years are cared for within two separate groups. They are animated and entertained with age appropriate activities, such as arts and crafts, singing and stories. They get a chance to meet new friends and socialize with children their own age</li></ul>
<ul id="timeOffYPP"><li>Schedule for Mondays (Registration required)
<ul>
<li>Time off for Mum is coordinated by the group "Women on the Rise" in collaboration with the YPP, 10.30-3.30 stimulating activities for children age 2-5, hot lunch included for $2</li>
</ul>
<font color="#990099" size="5"><a href="#YPPmain" onclick="zxcToggle('YPPmain',0,2); return false">pics</a></font>

</ul>
</div>
<div id="commentsYPP">
<strong>Comments from Young Parents Program participants:</strong>
<br>
<br>
<br>
<p>"So many doors have opened up for me because of this program I highly recommend it to anyone who is a young parent." &nbsp;<font color="#990099">Jasmine</font></p>

<p>"I come here to get a break." &nbsp;<font color="#990099">Lina</font></p>
<p>"The new friendships I've made are great." &nbsp;<font color="#990099">Melanie</font></p>
<p>"This young parents program gives me confidence about becoming a new parent." &nbsp;<font color="#990099">Penelope</font></p>
<p>"Sometimes I just need someone to talk to. At YPP I find those people who all have felt the same at some time and can help." &nbsp;<font color="#990099">Paula</font></p>
<p>"YPP let s me feel good about being a young mother, and I LOVE it." &nbsp;<font color="#990099">Sara</font></p>

<p>"I come for the snacks." &nbsp;<font color="#990099">Jenni</font></p>
</div>
<img id="YPPmain" src="images/YPP/main.jpg">
<div id="whenWhereYPP">
<div id="locationYPP">
The Young Parents Program Center<br>
5775 St. Jacques Corner of Melrose<br>

Métro Vendôme / Bus # 90 west or 104
</div>
<div id="hoursYPP">
Opening Hours:<br>
Wednesday 1:00 p.m. to 4:30 p.m.<br>
Friday 1:00 p.m. to 4:30 p.m.<br>
Tel/Tél : 514.482.7910
</div>

</div>
</div>
</body>
</html>

vwphillips
07-19-2007, 05:28 PM
also updated the Animator Application Notes


// Element Animator (19-July-2007) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height, Color, Opacity, border style
// (or otherproperties) of an element over a specified period of time.

// **** 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;'
// If not assigned the style position of the element will be assigned as 'position:absolute;' by the script.
//
// The element would normally be assigned a unique ID name.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcAnimator('left','tst1',20,260,'sin',2000);'
// where:
// parameter 0 = 'left', 'top', 'width', 'height', 'color', 'background-Color', 'opacity' etc. (string)
// Note: the first character after the hyphen must be be upper case, all others lower case.
// With the exception of opacity and color the property value units is in 'px'.
// 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) there are two types of progressive change 'sin' and 'cos' plus a liner change. ('sin', 'cos' or liner, defaults to liner)
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
// parameter 5 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
// parameter 6 = The script may be used to animate border color and size for 'border' (string)
// parameter 0 = border, border-Top, border-Bottom, border-Left or border-Right. (string)
// parameter 6 is required the defult border value.
// example: 'solid white 1px'. Note type, color in HEX and size separated by spaces.
//
// The function may be re-executed with a different set of parameters (start/finish time, progression type or period)
// whenever required, say from an onclick/mouseover/out event.
// The original progression type and period parameters
// Parameters 4 to 6 will be retained unless re-specified.
//

// **** Advanced Applications
//
// It may be required to access the current value of the effect.
// The element effect is accessable from the element property
// element effect = elementobject[mode.replace('-','')+'oop'];
// where mode is parameter 0 of the initial call.
// An array storing the start, finish and current value of the element effect may be accessed
// from the element effect.data as fields 0, 1 and 2
// For color each field is an array storing the R, B, G values.
//

// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code (about 3.7K) is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//

canadianjameson
07-19-2007, 05:57 PM
FANTASTIC!

That is exactly what I needed :)

a few small questions:


Just so i know for later: all I have to do is remove the (new) two last parameters on the zxcBorder() function call and it will work without problem if the div toggler isn't being used (for future reference -- it seemed to work when i tested it but i wanted to be sure :)


I noticed a small bug :o
The script works perfectly for links that haven't already been clicked, but if you click a link a second time for ex: you go into 'main points' then go to 'comments' then click on 'main points' again

the border-Top fade on 'main points' doesn't happen again


also, but this isnt a bug because I didn't specify it (lol), can you add the same thing we put on the main navigation which checks to see if the link being clicked is already active, and if so it doesn't fade it out? Right now if you double click a link it fades border-Top in and then out right away :)

Lastly, and this is only if it is a simple copy & paste (because i know you spent a lot of time on it and i think it would look nice here too...), is there any way easily apply the 'minimum fade in before fading out' function to this onouseover border fade script

Vic, this is fantastic... I can't thank you enough

canadianjameson
07-19-2007, 06:04 PM
lol vic i think you posted again ahead of me :)

lemme have a look at what you did, it may address some points i just raised

edit: small but i figure i should prove that I read the application notes :)

// parameter 6 is required the defult border value.

you write well by the way.

another idea for the notes -- something that I do but might help your users too:
// function call to zxcBorder(zxcmde,zxcobj,zxctime,zxcsrt,zxcfin,zxcborder)
// ex: zxcBorder('border-Top','this','1000','#FFFFFF','#000000','solid white 1px',0,0)

for us non-sophisticated coders it helps to have when viewing a parameter list... if for nothing else then to see which parameters require ' ' (lol)

vwphillips
07-20-2007, 12:05 AM
cross over posts are confusing

please repost any remaining anomalies.

canadianjameson
07-20-2007, 12:18 AM
all points raised in Post #14 seem to still be valid

vwphillips
07-20-2007, 11:25 AM
one at a time


* Just so i know for later: all I have to do is remove the (new) two last parameters on the zxcBorder()
function call and it will work without problem if the div toggler isn't being used
(for future reference -- it seemed to work when i tested it but i wanted to be sure


and


* I noticed a small bug

and


* also, but this isnt a bug because I didn't specify it (lol),



// function call to zxcBorder(zxcmde,zxcobj,zxctime,zxcsrt,zxcfin,zxcborder) //zxcBorder('border-Top','this','1000','#FFFFFF','#000000','solid white 1px')
//
// parameter 0 = border, border-Top, border-Bottom, border-Left or border-Right. (string)
// parameter 1 = the object or object ID to apply the string. (object or string)
// parameter 2 = the duration in milli seconds to apply the effect. (digits)
// parameter 3 = for color the start color in HEX. (string, prefix '#')
// for size the start size in px (digits). (digits)
// parameter 4 = for color the finish color in HEX. (string, prefix '#')
// for size the finish size in px (digits). (digits)
// parameter 5 = the defult border value. (string)
// example: 'solid white 1px'. Note type, color in HEX and size separated by spaces.
// parameters 6 & 7 are for use with div toggler
// parameter 6 = the menu group(from 1 to n). (digits)
// parameter 7 = the sebmenu level. (digits)

// The first event call(mouseover) must include all parameters.
// For subsequent event calls parameters 2 to 5 are optional
var zxcTBAry=[];

function zxcBorder(zxcmde,zxcobj,zxctime,zxcsrt,zxcfin,zxcborder,zxcgrp,zxclevel){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
var zxcevt=window.event||arguments.callee.caller.arguments[0];
if (!zxcobj.srtfin) zxcobj.srtfin=[zxcsrt,zxcfin];
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (!zxcoop) zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,'sin',zxctime,zxcborder);
else zxcAnimator(zxcmde,zxcobj,(zxcobj.srtfin[0].match('#'))?zxcRGBtoHex(zxcoop.data[2][0],zxcoop.data[2][1],zxcoop.data[2][2]):zxcoop.data[2],(zxcevt.type=='mouseout')?zxcobj.srtfin[0]:zxcobj.srtfin[1],'sin',zxctime)
// section for use with div toggle
if (zxcevt.type=='click'&&zxcgrp){
if (!zxcTBAry[zxcgrp]) zxcTBAry[zxcgrp]=[];
for (var zxc0=0;zxc0<zxcTBAry[zxcgrp].length;zxc0++){
if (zxcTBAry[zxcgrp][zxc0][0]==zxcobj) zxcTBAry[zxcgrp].splice(zxc0,1);
}
zxcTBAry[zxcgrp].push([zxcobj,zxclevel]);
for (var zxc0=1;zxc0<zxcTBAry.length;zxc0++){
if (zxcTBAry[zxc0]){
for (var zxc0a=0;zxc0a<zxcTBAry[zxc0].length;zxc0a++){
if (zxc0!=zxcgrp||(zxcTBAry[zxc0][zxc0a][1]>=zxclevel&&zxcTBAry[zxc0][zxc0a][0]!=zxcobj)){
var zxcnobj=zxcTBAry[zxc0][zxc0a][0];
var zxcoop=zxcnobj[zxcmde.replace('-','')+'oop'];
zxcAnimator(zxcmde,zxcnobj,(zxcnobj.srtfin[0].match('#'))?zxcRGBtoHex(zxcoop.data[2][0],zxcoop.data[2][1],zxcoop.data[2][2]):zxcoop.data[2],zxcsrt,'sin',zxctime)
}
}
}
}
}
// end section for use with div toggle
}




Note change to HTML Required

// parameter 6 = the menu group(from 1 to n). (digits)



* Lastly, and this is only if it is a simple copy & paste


At this time this is not possible using the animator.

canadianjameson
07-20-2007, 05:56 PM
Hi Vic,

Thanks, I made the appropriate HTML changes to the menu levels.

Maybe I implemented your changes wrong, but the two bugs I described don't seem to be gone




I noticed a small bug :o
The script works perfectly for links that haven't already been clicked, but if you click a link a second time for ex: you go into 'main points' then go to 'comments' then click on 'main points' again

the border-Top fade on 'main points' doesn't happen again


also, but this isnt a bug because I didn't specify it (lol), can you add the same thing we put on the main navigation which checks to see if the link being clicked is already active, and if so it doesn't fade it out? Right now if you double click a link it fades border-Top in and then out right away :)


I have uploaded the code here: www.enviromark.ca/head/tests.htm (i think the source will be too large to post here :D

vwphillips
07-20-2007, 10:08 PM
You need the previously posted modified Function


function zxcBorder(zxcmde,zxcobj,zxctime,zxcsrt,zxcfin,zxcborder,zxcgrp,zxclevel){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
var zxcevt=window.event||arguments.callee.caller.arguments[0];
if (!zxcobj.srtfin) zxcobj.srtfin=[zxcsrt,zxcfin];
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (!zxcoop) zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,'sin',zxctime,zxcborder);
else zxcAnimator(zxcmde,zxcobj,(zxcobj.srtfin[0].match('#'))?zxcRGBtoHex(zxcoop.data[2][0],zxcoop.data[2][1],zxcoop.data[2][2]):zxcoop.data[2],(zxcevt.type=='mouseout')?zxcobj.srtfin[0]:zxcobj.srtfin[1],'sin',zxctime)
// section for use with div toggle
if (zxcevt.type=='click'&&zxcgrp){
if (!zxcTBAry[zxcgrp]) zxcTBAry[zxcgrp]=[];
for (var zxc0=0;zxc0<zxcTBAry[zxcgrp].length;zxc0++){
if (zxcTBAry[zxcgrp][zxc0][0]==zxcobj) zxcTBAry[zxcgrp].splice(zxc0,1);
}
zxcTBAry[zxcgrp].push([zxcobj,zxclevel]);
for (var zxc0=1;zxc0<zxcTBAry.length;zxc0++){
if (zxcTBAry[zxc0]){
for (var zxc0a=0;zxc0a<zxcTBAry[zxc0].length;zxc0a++){
if (zxc0!=zxcgrp||(zxcTBAry[zxc0][zxc0a][1]>=zxclevel&&zxcTBAry[zxc0][zxc0a][0]!=zxcobj)){
var zxcnobj=zxcTBAry[zxc0][zxc0a][0];
var zxcoop=zxcnobj[zxcmde.replace('-','')+'oop'];
zxcAnimator(zxcmde,zxcnobj,(zxcnobj.srtfin[0].match('#'))?zxcRGBtoHex(zxcoop.data[2][0],zxcoop.data[2][1],zxcoop.data[2][2]):zxcoop.data[2],zxcsrt,'sin',zxctime)
}
}
}
}
}
// end section for use with div toggle
}

canadianjameson
07-20-2007, 10:23 PM
This may be a stupid question, but I was supposed to replace the older zxcBorder function with your new one... because thats what I did and the changes didn't work


<script language="JavaScript" type="text/javascript">
<!--
// Element Animator (19-July-2007) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height, Color, Opacity, border style
// (or otherproperties) of an element over a specified period of time.

// **** 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;'
// If not assigned the style position of the element will be assigned as 'position:absolute;' by the script.
//
// The element would normally be assigned a unique ID name.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcAnimator('left','tst1',20,260,'sin',2000);'
// where:
// parameter 0 = 'left', 'top', 'width', 'height', 'color', 'background-Color', 'opacity' etc. (string)
// Note: the first character after the hyphen must be be upper case, all others lower case.
// With the exception of opacity and color the property value units is in 'px'.
// 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) there are two types of progressive change 'sin' and 'cos' plus a liner change. ('sin', 'cos' or liner, defaults to liner)
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
// parameter 5 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
// parameter 6 = The script may be used to animate border color and size for 'border' (string)
// parameter 0 = border, border-Top, border-Bottom, border-Left or border-Right. (string)
// parameter 6 is required the defult border value.
// example: 'solid white 1px'. Note type, color in HEX and size separated by spaces.
//
// The function may be re-executed with a different set of parameters (start/finish time, progression type or period)
// whenever required, say from an onclick/mouseover/out event.
// The original progression type and period parameters
// Parameters 4 to 6 will be retained unless re-specified.
//

// **** Advanced Applications
//
// It may be required to access the current value of the effect.
// The element effect is accessable from the element property
// element effect = elementobject[mode.replace('-','')+'oop'];
// where mode is parameter 0 of the initial call.
// An array storing the start, finish and current value of the element effect may be accessed
// from the element effect.data as fields 0, 1 and 2
// For color each field is an array storing the R, B, G values.
//

// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code (about 3.7K) is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//

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

var zxcOOPCnt=0;

function zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxccurve,zxctime,zxcplot){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (zxcoop) zxcoop.cngparameters(zxcmde,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
else zxcobj[zxcmde.replace('-','')+'oop']=new zxcAnimatorOOP(zxcmde,zxcobj,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
}

function zxcAnimatorOOP(zxcmde,zxcobj,zxcsrtfin,zxccurve,zxctime,zxcborder){
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
if (zxcStyleValue(zxcobj,'position')=='static'&&(zxcmde=='left'||zxcmde=='top')) zxcobj.style.position='absolute';
this.to=null;
this.ref='zxcltwhco'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj;
this.cngparameters(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcborder);
}

zxcAnimatorOOP.prototype.cngparameters=function(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcborder){
clearTimeout(this.to);
this.mde=this.mde||zxcmde;
zxccurve=zxccurve||this.curve||'';
this.time=zxctime||this.time||2000;
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
for (var zxc0=0;zxc0<zxcsrtfin.length;zxc0++){
var zxcobj=document.getElementById(zxcsrtfin[zxc0]);
if (zxcobj){ zxcsrtfin[zxc0]=zxcStyleValue(zxcobj,zxcmde); if (!this.mde.match('olor')) zxcsrtfin[zxc0]=parseInt(zxcsrtfin[zxc0]); }
if (zxcsrtfin[zxc0]==0) zxcsrtfin[zxc0]=0.00001;
}
if (this.mde=='opacity'&&(zxcsrtfin[0]<0||zxcsrtfin[0]>100||zxcsrtfin[0]<0||zxcsrtfin[0]>100)) return;
if (zxcborder) this.brd=zxcborder.split(' ');
this.curve=zxccurve.charAt(0).toLowerCase();
this.data=[(!zxcsrtfin[0].match('#'))?[zxcsrtfin[0]]:zxcRGBSplit(zxcsrtfin[0]),(!zxcsrtfin[0].match('#'))?[zxcsrtfin[1]]:zxcRGBSplit(zxcsrtfin[1]),[]];
this.srttime=new Date().getTime();
this.inc=Math.PI/(2*this.time);
this.cngltwhco();
}

zxcAnimatorOOP.prototype.cngltwhco=function(){
var zxcms=new Date().getTime()-this.srttime;
for (var zxc0 in this.data[1]){ this.data[2][zxc0]=(this.curve=='s')?Math.floor((this.data[1][zxc0]-this.data[0][zxc0])*Math.sin(this.inc*zxcms)+this.data[0][zxc0]):(this.curve=='c')?(this.data[1][0])-Math.floor((this.data[1][zxc0]-this.data[0][zxc0])*Math.cos(this.inc*zxcms)):(this.data[1][zxc0]-this.data[0][zxc0])/this.time*zxcms+this.data[0][zxc0]; }
this.cngstyle(this.data[2]);
if (zxcms<this.time) this.setTimeOut('cngltwhco();',10);
else this.cngstyle(this.data[1]);
}

zxcAnimatorOOP.prototype.cngstyle=function(zxcpar){
if (this.mde.match('border')){
if (zxcpar.length==1) this.obj.style[this.mde.replace('-','')]=this.brd[0]+' '+this.brd[1]+' '+zxcpar[0]+'px';
if (zxcpar.length==3) this.obj.style[this.mde.replace('-','')]=this.brd[0]+' rgb('+zxcpar[0]+','+zxcpar[1]+','+zxcpar[2]+') '+this.brd[2];
}
else if (this.mde.match('olor')) this.obj.style[this.mde.replace('-','')]='rgb('+zxcpar[0]+','+zxcpar[1]+','+zxcpar[2]+')';
else if (this.mde!='opacity') this.obj.style[this.mde.replace('-','')]=zxcpar[0]+'px';
else this.opacity(zxcpar[0]);
}

zxcAnimatorOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100) return;
if (this.obj.style.MozOpacity!=null) this.obj.style.MozOpacity=(zxcopc/100)-.001;
else if (this.obj.style.opacity!=null) this.obj.style.opacity=(zxcopc/100)-.001;
else if (this.obj.style.filter!=null) this.obj.style.filter='alpha(opacity='+zxcopc+')';
else if (this.obj.KHTMLOpacity!=null) this.obj.KHTMLOpacity=(zxcopc/100)-.001;
}

zxcAnimatorOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}

function zxcStyleValue(zxcel,zxcp){
if (zxcel.currentStyle) return zxcel.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcel,null).getPropertyValue(zxcp.toLowerCase());
}

function zxcRGBSplit(zxccol){
if (zxccol.match('#')){ zxccol=parseInt(zxccol.substring(1,3),16)+','+parseInt(zxccol.substring(3,5),16)+','+parseInt(zxccol .substring(5,7),16); }
zxccol=zxccol.replace(/[rgb()\s]/g,'').split(',');
return [parseInt(zxccol[0]),parseInt(zxccol[1]),parseInt(zxccol[2])];
}


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

// zxcToggle('eligibilityYPP',0,1)
// parameter 0 = the unique ID name of the element to open (string)
// parameter 1 = the menu group (digit)
// parameter 2 = the sub menu level (digit)


var zxcGrpAry=[];

function zxcToggle(zxcid,zxcgrp,zxclevel) {
var zxcobj=document.getElementById(zxcid);
if (!zxcGrpAry[zxcgrp]) zxcGrpAry[zxcgrp]=[];
for (var zxc0=0;zxc0<zxcGrpAry[zxcgrp].length;zxc0++){
if (zxcGrpAry[zxcgrp][zxc0][0]==zxcobj) zxcGrpAry[zxcgrp].splice(zxc0,1);
}
zxcGrpAry[zxcgrp].push([zxcobj,zxclevel]);
zxcobj.style.display ='block';
// zxcobj.style.display =(zxcStyleValue(zxcobj,'display')=='none')?'block':'none'; // replace above to hide all submenus onclick
for (var zxc1=0;zxc1<zxcGrpAry.length;zxc1++){
if (zxcGrpAry[zxc1]){
for (var zxc1a=0;zxc1a<zxcGrpAry[zxc1].length;zxc1a++){
if (((zxc1==zxcgrp&&(zxcGrpAry[zxc1][zxc1a][0]!=zxcobj&&zxcGrpAry[zxc1][zxc1a][1]>=zxclevel))||(zxc1!=zxcgrp))&&zxcobj!=zxcGrpAry[zxc1][zxc1a][0]){
zxcGrpAry[zxc1][zxc1a][0].style.display='none';
}
}
}
}
}

function zxcStyleValue(zxcobj,zxcp){ // pass object and property, returns property value
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}

//-->
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Application of script 'Element Animator' for border color and border size

// function call to zxcBorder(zxcmde,zxcobj,zxctime,zxcsrt,zxcfin,zxcborder)
//zxcBorder('border-Top','this','1000','#FFFFFF','#000000','solid white 1px')
//
// parameter 0 = border, border-Top, border-Bottom, border-Left or border-Right. (string)
// parameter 1 = the object or object ID to apply the string. (object or string)
// parameter 2 = the duration in milli seconds to apply the effect. (digits)
// parameter 3 = for color the start color in HEX. (string, prefix '#')
// for size the start size in px (digits). (digits)
// parameter 4 = for color the finish color in HEX. (string, prefix '#')
// for size the finish size in px (digits). (digits)
// parameter 5 = the defult border value. (string)
// example: 'solid white 1px'. Note type, color in HEX and size separated by spaces.
// The first event call(mouseover) must include all parameters.
// For subsequent event calls parameters 2 to 5 are optional

/* parameters 6 & 7 are for use with div toggler
ex: zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',0,0); */
// parameter 6 = the menu group(from 1 to n). (digits)
// parameter 7 = the submenu level. (digits)


var zxcTBAry=[];

function zxcBorder(zxcmde,zxcobj,zxctime,zxcsrt,zxcfin,zxcborder,zxcgrp,zxclevel){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
var zxcevt=window.event||arguments.callee.caller.arguments[0];
if (!zxcobj.srtfin) zxcobj.srtfin=[zxcsrt,zxcfin];
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (!zxcoop) zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,'sin',zxctime,zxcborder);
else zxcAnimator(zxcmde,zxcobj,(zxcobj.srtfin[0].match('#'))?zxcRGBtoHex(zxcoop.data[2][0],zxcoop.data[2][1],zxcoop.data[2][2]):zxcoop.data[2],(zxcevt.type=='mouseover')?zxcobj.srtfin[1]:zxcobj.srtfin[0],'sin',zxctime)
if (!zxcTBAry[zxcgrp]) zxcTBAry[zxcgrp]=[];
for (var zxc0=0;zxc0<zxcTBAry[zxcgrp].length;zxc0++){
if (zxcTBAry[zxcgrp][zxc0][0]==zxcobj) zxcTBAry[zxcgrp].splice(zxc0,1);
}
// section for use with div toggle
if (zxcevt.type=='click'&&zxcgrp){
if (!zxcTBAry[zxcgrp]) zxcTBAry[zxcgrp]=[];
for (var zxc0=0;zxc0<zxcTBAry[zxcgrp].length;zxc0++){
if (zxcTBAry[zxcgrp][zxc0][0]==zxcobj) zxcTBAry[zxcgrp].splice(zxc0,1);
}
zxcTBAry[zxcgrp].push([zxcobj,zxclevel]);
for (var zxc0=1;zxc0<zxcTBAry.length;zxc0++){
if (zxcTBAry[zxc0]){
for (var zxc0a=0;zxc0a<zxcTBAry[zxc0].length;zxc0a++){
if (zxc0!=zxcgrp||(zxcTBAry[zxc0][zxc0a][1]>=zxclevel&&zxcTBAry[zxc0][zxc0a][0]!=zxcobj)){
var zxcnobj=zxcTBAry[zxc0][zxc0a][0];
var zxcoop=zxcnobj[zxcmde.replace('-','')+'oop'];
zxcAnimator(zxcmde,zxcnobj,(zxcnobj.srtfin[0].match('#'))?zxcRGBtoHex(zxcoop.data[2][0],zxcoop.data[2][1],zxcoop.data[2][2]):zxcoop.data[2],zxcsrt,'sin',zxctime)
}
}
}
}
}
// end section for use with div toggle
}
// function call to function zxcInitBorderGrp(zxcid,zxcmde,zxctag,zxctimeover,zxctimeout,zxcsrt,zxcfin,zxcborder){
// Called by an 'onload' event.
//
// parameter 0 = the unique ID name of the parent element. (string)
// parameter 1 = border, border-Top, border-Bottom, border-Left or border-Right. (string)
// parameter 2 = the the tag Name of the child elements to a[[ly the effect. (object or string)
// parameter 3 = the duration in milli seconds to apply the mouseover effect. (digits)
// parameter 4 = the duration in milli seconds to apply the mouseout effect. (digits)
// parameter 5 = for color the start color in HEX. (string, prefix '#')
// for size the start size in px (digits). (digits)
// parameter 6 = for color the finish color in HEX. (string, prefix '#')
// for size the finish size in px (digits). (digits)
// parameter 7 = the default border value. (string)
// example: 'solid white 1px'. Note type, color in HEX and size separated by spaces.

// The first event call(mouseover) must include all parameters.
// For subsequent event calls parameters 2 to 5 are optional

function zxcInitBorderGrp(zxcid,zxcmde,zxctag,zxctimeover,zxctimeout,zxcsrt,zxcfin,zxcborder){
var zxcp=document.getElementById(zxcid);
var zxcels=document.getElementById(zxcid).getElementsByTagName(zxctag);
for (var zxc0=0;zxc0<zxcels.length;zxc0++){
var zxcobj=zxcels[zxc0]
zxcels[zxc0].onmouseover=function(){ zxcBorder(zxcmde,this,zxctimeover,zxcsrt,zxcfin,zxcborder); }
zxcels[zxc0].onmouseout=function(){ zxcBorder(zxcmde,this,zxctimeout); }
}
}

function zxcRGBtoHex(zxcr,zxcg,zxcb){ return '#'+zxcToHex(zxcr)+zxcToHex(zxcg)+zxcToHex(zxcb); }

function zxcToHex(zxcnu) {
if (zxcnu==null) return '00';
if (zxcnu==0||isNaN(zxcnu)) return '00';
zxcnu=Math.max(0,zxcnu); zxcnu=Math.min(zxcnu,255); zxcnu=Math.round(zxcnu);
return '0123456789ABCDEF'.charAt((zxcnu-zxcnu%16)/16)+'0123456789ABCDEF'.charAt(zxcnu%16);
}

/*]]>*/
</script>

vwphillips
07-21-2007, 08:50 AM
replace your zxcBorder function with the one posted in post 20

canadianjameson
07-22-2007, 08:28 PM
Fantastic vic!

Thank you do much :)!!

canadianjameson
07-23-2007, 03:45 PM
Please do send me a link when / if you add the min fade delay to the script :D

Thanks again Vic, works beautifully

canadianjameson
07-23-2007, 04:37 PM
Hey,

well, it looks like I spoke too soon :(

It appears that two of your scripts are interfering with each other :o

When I tried to integrate the YPP.htm page back into the main page (i.e opening it through index.htm instead of on its own), the following display errors happened

on YPP.htm the onmouseover underline-fade disappears
This one will be a little bit tough to explain, it might work best if you test it out (www.enviromark.ca/head/index.htm)
on index.htm: the onlick fade out of the image buttons (purple heart) breaks -- once you click it it will never unfade even if you click other links {EDIT} Also if you click it as another vertical image is unfading it freezes it permanently semi-faded. (this may be the same as the point above, just activated differently

The conflicts are occurring between
www.enviromark.ca/head/js/nav_fade.js
and
(www.enviromark.ca/head/js/effects/animator.js and www.enviromark.ca/head/js/effects/border_fade.js)

The last two (as well as www.enviromark.ca/head/js/toggler.js) are the external versions of the script in this thread.

I suspect it may just be conflicting function names, but I feel safer leaving it up to you. :)

here is how I have the html (if you need to see it)

index.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" href="css/rightNav.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="js/dynamic_content.js"></script>
<script language="JavaScript" type="text/javascript" src="js/nav_fade.js"></script>
<script language="JavaScript" type="text/javascript" src="js/toggler.js"></script>

</head>

<body onload="zxcInitImages('logoC','links_BW')">
<div id="pageContainer">
<div id="topText"><img src="images/logoButtons/top_text.gif"></div>
<div id="logoC">
<img src="images/logoButtons/info_C.gif" >
<img src="images/logoButtons/YPP_C.gif" >
<img src="images/logoButtons/social_C.gif" >
<img src="images/logoButtons/med_C.gif" >
<img src="images/logoButtons/legal_C.gif" >
<img src="images/logoButtons/J2K_C.gif" >
<img src="images/logoButtons/street_C.gif" >
</div>
<div id="bottomText"><img src="images/logoButtons/bottom_text.gif"></div>
<div id="links_BW">
<img src="images/logoButtons/info_BW.jpg">
<img src="images/logoButtons/YPP_BW.jpg" onclick="ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css', 'js/effects/animator.js', 'js/effects/border_fade.js');">
<img src="images/logoButtons/social_BW.jpg" >
<img src="images/logoButtons/med_BW.jpg" >
<img src="images/logoButtons/legal_BW.jpg" >
<img src="images/logoButtons/J2K_BW.jpg" >
<img src="images/logoButtons/street_BW.jpg" >
</div>
<div class="clear"></div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#" id="current" onclick="ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css', 'js/animator', 'js/animator2.js');">About Us</a></li>
<li><a href="#">People:<br>Past and Present</a></li>
<li><a href="#">Media / Press</a></li>
<li><a href="#">Get Involved</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Forums</a></li>
</ul>
</div>
<div id="contentarea"></div>
</div>
</body>
</html>


YPP.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/pages.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="js/toggler.js"></script>
<script language="JavaScript" type="text/javascript" src="js/effects/animator.js"></script>
<script language="JavaScript" type="text/javascript" src="js/effects/border_fade.js"></script>


</head>
<body onload="zxcInitBorderGrp('pageHolder','border-Bottom','A',1000,2000,'#FFFFFF','#000000','solid #000000 1px')">
<div id="pageHolder">
<div id="linksYPP">
<a href="#mainPointsYPP" onclick="zxcToggle('mainPointsYPP',1,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,0); return false;">main points</a>
<a href="#commentsYPP" onclick="zxcToggle('commentsYPP',2,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',2,0); return false">comments</a>
<a href="#YPPmain" onclick="zxcToggle('YPPmain',3,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',3,0); return false">pics</a>
<a href="#whenWhereYPP" onclick="zxcToggle('whenWhereYPP',4,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',4,0); return false">operating info</a>
</div>
<div id="mainPointsYPP">
<a href="#eligibilityYPP" onclick="zxcToggle('eligibilityYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,1); return false">Eligibility</a>
<a href="#parentBenefitsYPP" onclick="zxcToggle('parentBenefitsYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,1); return false">Parental Benefits</a>
<a href="#childBenefitsYPP" onclick="zxcToggle('childBenefitsYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,1); return false">Child Benefits</a>
<a href="#timeOffYPP" onclick="zxcToggle('timeOffYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,1); return false">"Time Off For Mum"</a>
<ul id="eligibilityYPP">
<li>Under 25? Have kids? Pregnant? Then come check out the Young Parents Program!
<br><br>
We are a group of parents who meet for coffee, snacks, support and workshops twice a week. The atmosphere is a very casual, friendly, and inviting one where young parents come to share their hopes, fears and problems with like-minded people. Lunch is also prepared for everyone.
</li>
</ul>
<ul id="parentBenefitsYPP"><li>Parents are also offered a wide array of activities to participate in such as art therapy, dancing, and cooking. Also, there are workshops exploring parenting issues, health, wellbeing, etc. And on the last Friday of every month, access to free furniture, toys and clothing is available. 2 Bus tickets are given out at the end of every session</li></ul>
<ul id="childBenefitsYPP"><li>Children aged six months to five years are cared for within two separate groups. They are animated and entertained with age appropriate activities, such as arts and crafts, singing and stories. They get a chance to meet new friends and socialize with children their own age</li></ul>
<ul id="timeOffYPP"><li>Schedule for Mondays (Registration required)
<ul>
<li>Time off for Mum is coordinated by the group "Women on the Rise" in collaboration with the YPP, 10.30-3.30 stimulating activities for children age 2-5, hot lunch included for $2</li>
</ul>
<font color="#990099" size="5"><a href="#YPPmain" onclick="zxcToggle('YPPmain',1,2); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,2); return false">pics</a></font>
</ul>
</div>
<div id="commentsYPP">
<strong>Comments from Young Parents Program participants:</strong>
<br>
<br>
<br>
<p>"So many doors have opened up for me because of this program I highly recommend it to anyone who is a young parent." &nbsp;<font color="#990099">Jasmine</font></p>
<p>"I come here to get a break." &nbsp;<font color="#990099">Lina</font></p>
<p>"The new friendships I've made are great." &nbsp;<font color="#990099">Melanie</font></p>
<p>"This young parents program gives me confidence about becoming a new parent." &nbsp;<font color="#990099">Penelope</font></p>
<p>"Sometimes I just need someone to talk to. At YPP I find those people who all have felt the same at some time and can help." &nbsp;<font color="#990099">Paula</font></p>
<p>"YPP let s me feel good about being a young mother, and I LOVE it." &nbsp;<font color="#990099">Sara</font></p>
<p>"I come for the snacks." &nbsp;<font color="#990099">Jenni</font></p>
</div>
<img id="YPPmain" src="images/YPP/main.jpg">
<div id="whenWhereYPP">
<div id="locationYPP">
The Young Parents Program Center<br>
5775 St. Jacques Corner of Melrose<br>
Métro Vendôme / Bus # 90 west or 104
</div>
<div id="hoursYPP">
Opening Hours:<br>
Wednesday 1:00 p.m. to 4:30 p.m.<br>
Friday 1:00 p.m. to 4:30 p.m.<br>
Tel/Tél : 514.482.7910
</div>
</div>
</div>
</body>
</html>

you can see them together at www.enviromark.ca/head/index.htm or YPP alone at www.enviromark.ca/head/YPP.htm

Thanks Vic, and sorry about this :o

vwphillips
07-24-2007, 10:58 PM
I have reconstructed your page without the ajax bit

and the mouseout mouseout border fade seems ok.

also the heart mouseover/out/click appears to function as expected.

see

http://www.vicsjavascripts.org.uk/Animator/070724.htm

PLEASE NOTE

The animator has an update to fix a bug that I only found when in an external JavaScript. This update does not effect your application but best you are aware.

Best to use a page containing ALL code (no external files) until all is well.

canadianjameson
07-24-2007, 11:20 PM
Thank you Vic, I will try this out now.

Did I understand you correctly when you said that the problem was being caused by the ajax script? If so I have a small problem because the only firm request made of me when I was asked to remodel the website was that each link be loadable from a seperate .html file (because of editing purposes later -- they arent coders and want to sift through the least amount of code possible when updating the text for example). otherwise I would used a div-toggling system from the start, like on fvjones.ca

Can you confirm that this is indeed the problem, and perhaps suggest where to go from here (if it is)?

canadianjameson
07-24-2007, 11:30 PM
Alright, I have tested it out with the ajax script and it seems that whatever you have done it fixed the heart onmouseover/out/click issue... However the border-bottom fade doesn't seem to work at all.

Is it really incompatible with the ajax script?

EDIT: could the error be occurring because I have two <body onload..> statements? one on the main page (index.htm) and one on the page being loaded into the div (YPP.htm)??? -- because it is the onload on the 'inner page (YPP.htm) that doesn't seem to be working...

just a thought

EDIT 2I really do think that is the only problem left to tackle... because everything else seems to work and further testing is showing that that might be the problem.

could we get around it by changing the onload on YPP.htm to onmouseover of the pageHolder div ? I know it isn't ideal but unless we can figure out how to fix the onload problem...

vwphillips
07-25-2007, 12:16 AM
you said that the problem was being caused by the ajax script?

I did not say that, just that I was not using it


ccurring because I have two <body onload..> statements? one on the main page (index.htm)

Well done, This is a problem.


ging the onload on YPP.htm to onmouseover of the pageHolder div

let me think, think best to init on the first mouseover, but must prevent multiple initialisations by removing the mouseover event. Easy enough but tomorrow.

vwphillips
07-25-2007, 02:12 PM
<div id="pageHolder" onmouseover="zxcInitBorderGrp('pageHolder','border-Bottom','A',1000,2000,'#FFFFFF','#000000','solid #000000 1px')" >

and

function zxcInitBorderGrp(zxcid,zxcmde,zxctag,zxctimeover,zxctimeout,zxcsrt,zxcfin,zxcborder){
var zxcp=document.getElementById(zxcid);
var zxcels=document.getElementById(zxcid).getElementsByTagName(zxctag);
for (var zxc0=0;zxc0<zxcels.length;zxc0++){
var zxcobj=zxcels[zxc0]
zxcels[zxc0].onmouseover=function(){ zxcBorder(zxcmde,this,zxctimeover,zxcsrt,zxcfin,zxcborder); }
zxcels[zxc0].onmouseout=function(){ zxcBorder(zxcmde,this,zxctimeout); }
}
zxcp.onmouseover=null;
}

Is simplest an should be fine

If there are problems we can try a watch dog.
i.e. on the ajax call set a timeout loop until document.getElementById('pageHolder') exists then initialise.

canadianjameson
07-25-2007, 04:29 PM
Hey Vic,

Thanks for the help, i really appreciate it.

The div onmouseover approach seems to have worked, but I'm still getting a few bugs. One aspect that may be causing it is that unfortunately I have to make the script into external .js' because with the ajax script you have to load any js or css via the onclick call


<img src="images/logoButtons/YPP_BW.jpg" onclick="ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css', 'js/effects/animator.js', 'js/effects/border_fade.js');">

You had mentioned that it was best to leave it internal until all the bugs were out, so maybe that is causing a problem.

I notice more of the errors occur in IE than FF, one in particular occurs when I onmouseover the first link when I've loaded YPP.htm into the main DIV (clicked the purple heart on index.htm). I get the error "srtfin.0 is null or not an object" -- This causes the underline to not fade out and the overline to sometimes stay stuck aswell

When this happens it also messes with the fading navigation, sometimes causing two to fade out on the top, or a vertical image to get stuck mid-fade

Any idea what might be causing the srtfin.0 error?

www.enviromark.ca/head/ if you need a look :o

vwphillips
07-25-2007, 06:42 PM
the start and finish colors are defined by zxcBorder arguments zxcsrt,zxcfin
The first time this function is called the values are stored as an array in the object parameter zxcobj.srtfin
These values are passed the the animation function,
zxcobj.srtfin[0],zxcobj.srtfin[1] for mouseover
and
zxcobj.srtfin[1],zxcobj.srtfin[0] for mouseout.

cant see why this property has not been established(which is what it is saying). I have never seen the problem.


function zxcBorder(zxcmde,zxcobj,zxctime,zxcsrt,zxcfin,zxcborder,zxcgrp,zxclevel){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
var zxcevt=window.event||arguments.callee.caller.arguments[0];
if (!zxcobj.srtfin) zxcobj.srtfin=[zxcsrt,zxcfin];
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (!zxcoop) zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,'sin',zxctime,zxcborder);
else zxcAnimator(zxcmde,zxcobj,(zxcobj.srtfin[0].match('#'))?zxcRGBtoHex(zxcoop.data[2][0],zxcoop.data[2][1],zxcoop.data[2][2]):zxcoop.data[2],(zxcevt.type=='mouseout')?zxcobj.srtfin[0]:zxcobj.srtfin[1],'sin',zxctime)
// section for use with div toggle
if (zxcevt.type=='click'&&zxcgrp){
if (!zxcTBAry[zxcgrp]) zxcTBAry[zxcgrp]=[];
for (var zxc0=0;zxc0<zxcTBAry[zxcgrp].length;zxc0++){
if (zxcTBAry[zxcgrp][zxc0][0]==zxcobj) zxcTBAry[zxcgrp].splice(zxc0,1);
}
zxcTBAry[zxcgrp].push([zxcobj,zxclevel]);
for (var zxc0=1;zxc0<zxcTBAry.length;zxc0++){
if (zxcTBAry[zxc0]){
for (var zxc0a=0;zxc0a<zxcTBAry[zxc0].length;zxc0a++){
if (zxc0!=zxcgrp||(zxcTBAry[zxc0][zxc0a][1]>=zxclevel&&zxcTBAry[zxc0][zxc0a][0]!=zxcobj)){
var zxcnobj=zxcTBAry[zxc0][zxc0a][0];
var zxcoop=zxcnobj[zxcmde.replace('-','')+'oop'];
zxcAnimator(zxcmde,zxcnobj,(zxcnobj.srtfin[0].match('#'))?zxcRGBtoHex(zxcoop.data[2][0],zxcoop.data[2][1],zxcoop.data[2][2]):zxcoop.data[2],zxcsrt,'sin',zxctime)
}
}
}
}
}


back later

canadianjameson
07-25-2007, 07:03 PM
Hey Vic,

I noticed that when I onmouseover the first link after clicking on the purple heart, no underline fades in... and it's when I onmouseover the second link that I get the error message.

Also the border-Top seems to get affected by this as well because the border-Top above the first link (described above) doesn't fade out when another link is clicked.

Finally the nav_fade script (the color / BW image fader) gets affected as well

I though it might help, so I have uploaded a screenshot of the error message, and a screenshot of the effects I described above

www.enviromark.ca/head/images/msg.jpg
www.enviromark.ca/head/images/screenshot.jpg --> notice the half faded purple heart
Edit: I managed to get the horizontal images to go wonky too :o
www.enviromark.ca/head/images/screen2.jpg

Thanks again Vic, and sorry for breaking your script (:D)

p.s: was I supposed to use the code you just posted, or was it to show me where the error was occurring?

vwphillips
07-25-2007, 08:39 PM
Not an answer to your last post but have uploaded a version to

http://www.vicsjavascripts.org.uk/Animator/070724.htm

complete with the ajax bit

tested it with IE and Moz

only problem I can see is that the moseover/out is sometimes not initialised until the second mouseover, not unexpected, needs the watchdog.

Please have a look at my link but I will not be doing much more tonight or tomorrow as I'm going out.

canadianjameson
07-25-2007, 09:08 PM
Very cool Vic,

I will integrate it into my page and post back what occurs. I won't expect a response before friday.

Thank you for all your help, once again :D

canadianjameson
07-25-2007, 09:19 PM
I think the watchdog is needed because I copied the source into a new .htm and without even altering it i preview the page and i get an error saying 'document.getElementById(...) is null or not an object (which according to the line # was var zxcels=document.getElementById(zxcid).getElementsByTagName(zxctag);

Edit: I fixed that by removing that from the body onload on the main page... however I'm still getting the error zxnfin.0 is null or not an object.

I removed my last comment because i re-read your post :)

canadianjameson
07-25-2007, 10:40 PM
I doubt this has any effect at all but I just got a new set of images (better quality) so i replaced the old ones and, i dont know if it's my imagination (quite possible), but the script seems 'more broken'... but it may just be me.



<div id="logoC">
<img src="images/logoButtons/info_C.gif" >
<img src="images/logoButtons/YPP_C.gif" >
<img src="images/logoButtons/social_C.gif" >
<img src="images/logoButtons/health_C.gif" >
<img src="images/logoButtons/legal_C.gif" >
<img src="images/logoButtons/J2K_C.gif" >
<img src="images/logoButtons/streetwork_C.gif" >
</div>
<div id="bottomText"><img src="images/logoButtons/bottom_text.gif"></div>
<div id="links_BW">
<img src="images/logoButtons/info_BW.gif">
<img src="images/logoButtons/YPP_BW.gif" onclick="ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css', 'js/effects/animator.js', 'js/effects/border_fade.js');">
<img src="images/logoButtons/social_BW.gif" >
<img src="images/logoButtons/health_BW.gif" >
<img src="images/logoButtons/legal_BW.gif" >
<img src="images/logoButtons/J2K_BW.gif" >
<img src="images/logoButtons/streetwork_BW.gif" >

They're all gif's now. I doubt it matters but I thought you should know

canadianjameson
07-26-2007, 04:52 PM
I think i've isolated the problem...

All errors seems to stop when I remove this from my links:
loadobjs('css/pages.css', 'js/effects/animator.js', 'js/effects/border_fade.js');

it's the section of the ajax script that imports the external .js and css files into the page you're loading, because for some reason you can't declare them inside the .htm file itself (they dont explain, it just says so: http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm)

This poses a problem because I need to be able to apply css and .js to the .htm files being loaded into the div.

Is it possible that the animator script / fade script is somehow interfering with the nav_fade script because there are two <body> tags in existence? Would giving an ID or CLASS to the <body> tag of each page being loaded by the AJAX script and then having the script target only what is in that <body class=".."> be a good way of avoiding the conflicts?

I don't know if it will help, but I am going to zip the entire site (without anything unused) and put it up at www.enviromark.ca/head/vic.zip -- perhaps having the site laid out exactly as I do might help (if not that's okay... i just figured why not, its <150kb).

Thanks Vic.

Oh, and if I am right and it is the ajax script... if you have another way of doing what it does that wont conflict, I'm all ears :) (well, eyes, lol)

vwphillips
07-26-2007, 06:06 PM
have a look at this before I look at your last post

http://www.vicsjavascripts.org.uk/Animator/070726.htm

canadianjameson
07-26-2007, 06:37 PM
I'm testing it out now.

Just so i'm clear, you want me to use the span concept like so:


<span id="linksYPP">
<a href="#mainPointsYPP" onclick="zxcToggle('mainPointsYPP',1,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,0); return false;">main points</a>
<a href="#commentsYPP" onclick="zxcToggle('commentsYPP',2,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',2,0); return false">comments</a>
<a href="#YPPmain" onclick="zxcToggle('YPPmain',3,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',3,0); return false">pics</a>
<a href="#whenWhereYPP" onclick="zxcToggle('whenWhereYPP',4,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',4,0); return false">operating info</a>
</span>
<div id="mainPointsYPP">
<span class="centerLinks">
<a href="#eligibilityYPP" onclick="zxcToggle('eligibilityYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,1); return false">Eligibility</a>
<a href="#parentBenefitsYPP" onclick="zxcToggle('parentBenefitsYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,1); return false">Parental Benefits</a>
<a href="#childBenefitsYPP" onclick="zxcToggle('childBenefitsYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,1); return false">Child Benefits</a>
<a href="#timeOffYPP" onclick="zxcToggle('timeOffYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,1); return false">"Time Off For Mum"</a>
</span>


and did i need to re-download your scripts or have they not been changed?

canadianjameson
07-26-2007, 06:50 PM
I can't explain it, I can't seem to get it to work :(

I changed the order of the loadobj functions, I changed the divs to spans (as seen above) and I included the watchdog and it wont work.

What am I doing wrong?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" href="css/rightNav.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="js/dynamic_content.js"></script>
<script language="JavaScript" type="text/javascript" src="js/nav_fade.js"></script>
<script language="Javascript" type="text/javascript" src="js/rightNav_switcher.js"></script>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcWatchDog(){
if (document.getElementById('pageHolder')) zxcInitBorderGrp('pageHolder','border-Bottom','A',1000,2000,'#FFFFFF','#000000','solid #000000 1px');
else setTimeout('zxcWatchDog()',20);
}
/*]]>*/
</script>

</head>

<body onload="zxcInitImages('logoC','links_BW')">
<div id="pageContainer">
<div id="topText"><img src="images/logoButtons/top_text.gif"></div>
<div id="logoC">
<img src="images/logoButtons/info_C.gif" >
<img src="images/logoButtons/YPP_C.gif" >
<img src="images/logoButtons/social_C.gif" >
<img src="images/logoButtons/health_C.gif" >
<img src="images/logoButtons/legal_C.gif" >
<img src="images/logoButtons/J2K_C.gif" >
<img src="images/logoButtons/streetwork_C.gif" >
</div>
<div id="bottomText"><img src="images/logoButtons/bottom_text.gif"></div>
<div id="links_BW">
<img src="images/logoButtons/info_BW.gif">
<img src="images/logoButtons/YPP_BW.gif" onclick="loadobjs('css/pages.css', 'js/effects/animator.js', 'js/effects/border_fade.js', 'js/toggler.js'); ajaxpage('YPP.htm', 'contentarea'); mClear()">
<img src="images/logoButtons/social_BW.gif" >
<img src="images/logoButtons/health_BW.gif" >
<img src="images/logoButtons/legal_BW.gif" >
<img src="images/logoButtons/J2K_BW.gif" >
<img src="images/logoButtons/streetwork_BW.gif" >
</div>
<div class="clear"></div>
<div id="navcontainer" onclick="zxcResetImages('links_BW')">
<ul id="navlist">
<li><a id="about" class="default" href="#" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this); ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css', 'js/effects/animator.js', 'js/effects/border_fade.js');">About Us</a></li>
<li><a id="people" class="default" href="#" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this); ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css', 'js/effects/animator.js', 'js/effects/border_fade.js');">People:<br>Past and Present</a></li>
<li><a id="media" class="default" href="#" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this); ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css', 'js/effects/animator.js', 'js/effects/border_fade.js');">Media / Press</a></li>
<li><a id="getinvolded" class="default" href="#" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this); ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css', 'js/effects/animator.js', 'js/effects/border_fade.js');">Get Involved</a></li>
<li><a id="donate" class="default" href="#" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this); ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css', 'js/effects/animator.js', 'js/effects/border_fade.js');">Donate</a></li>
<li><a id="forums" class="default" href="#" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this); ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css', 'js/effects/animator.js', 'js/effects/border_fade.js');">Forums</a></li>
</ul>
</div>
<div id="contentarea"></div>
</div>
</body>
</html>


ypp


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Young Parents Program</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/pages.css" type="text/css">

</head>
<body>
<div id="pageHolder">
<span id="linksYPP">
<a href="#mainPointsYPP" onclick="zxcToggle('mainPointsYPP',1,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,0); return false;">main points</a>
<a href="#commentsYPP" onclick="zxcToggle('commentsYPP',2,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',2,0); return false">comments</a>
<a href="#YPPmain" onclick="zxcToggle('YPPmain',3,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',3,0); return false">pics</a>
<a href="#whenWhereYPP" onclick="zxcToggle('whenWhereYPP',4,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',4,0); return false">operating info</a>
</span>
<div id="mainPointsYPP">
<span class="centerLinks">
<a href="#eligibilityYPP" onclick="zxcToggle('eligibilityYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,1); return false">Eligibility</a>
<a href="#parentBenefitsYPP" onclick="zxcToggle('parentBenefitsYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,1); return false">Parental Benefits</a>
<a href="#childBenefitsYPP" onclick="zxcToggle('childBenefitsYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,1); return false">Child Benefits</a>
<a href="#timeOffYPP" onclick="zxcToggle('timeOffYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,1); return false">"Time Off For Mum"</a>
</span>
<ul id="eligibilityYPP">
<li>Under 25? Have kids? Pregnant? Then come check out the Young Parents Program!
<br><br>
We are a group of parents who meet for coffee, snacks, support and workshops twice a week. The atmosphere is a very casual, friendly, and inviting one where young parents come to share their hopes, fears and problems with like-minded people. Lunch is also prepared for everyone.
</li>
</ul>
<ul id="parentBenefitsYPP"><li>Parents are also offered a wide array of activities to participate in such as art therapy, dancing, and cooking. Also, there are workshops exploring parenting issues, health, wellbeing, etc. And on the last Friday of every month, access to free furniture, toys and clothing is available. 2 Bus tickets are given out at the end of every session</li></ul>
<ul id="childBenefitsYPP"><li>Children aged six months to five years are cared for within two separate groups. They are animated and entertained with age appropriate activities, such as arts and crafts, singing and stories. They get a chance to meet new friends and socialize with children their own age</li></ul>
<ul id="timeOffYPP"><li>Schedule for Mondays (Registration required)
<ul>
<li>Time off for Mum is coordinated by the group "Women on the Rise" in collaboration with the YPP, 10.30-3.30 stimulating activities for children age 2-5, hot lunch included for $2</li>
</ul>
</ul>
</div>
<div id="commentsYPP">
<strong>Comments from Young Parents Program participants:</strong>
<br>
<br>
<br>
<p>"So many doors have opened up for me because of this program I highly recommend it to anyone who is a young parent." &nbsp;<font color="#990099">Jasmine</font></p>
<p>"I come here to get a break." &nbsp;<font color="#990099">Lina</font></p>
<p>"The new friendships I've made are great." &nbsp;<font color="#990099">Melanie</font></p>
<p>"This young parents program gives me confidence about becoming a new parent." &nbsp;<font color="#990099">Penelope</font></p>
<p>"Sometimes I just need someone to talk to. At YPP I find those people who all have felt the same at some time and can help." &nbsp;<font color="#990099">Paula</font></p>
<p>"YPP let s me feel good about being a young mother, and I LOVE it." &nbsp;<font color="#990099">Sara</font></p>
<p>"I come for the snacks." &nbsp;<font color="#990099">Jenni</font></p>
</div>
<div id="YPPmain"><img src="images/YPP/main.jpg"></div>
<div id="whenWhereYPP">
<div id="locationYPP">
The Young Parents Program Center<br>
5775 St. Jacques Corner of Melrose<br>
M&eacute;tro Vend&ocirc;me / Bus # 90 west or 104
</div>
<div id="hoursYPP">
Opening Hours:<br>
Wednesday 1:00 p.m. to 4:30 p.m.<br>
Friday 1:00 p.m. to 4:30 p.m.<br>
Tel/T&eacute;l : 514.482.7910
</div>
</div>
</div>
</body>
</html>


Even with the spans I still seem to be getting the srtfin.0 error, and their positioning is all off... :(

vwphillips
07-27-2007, 10:46 AM
see
http://www.vicsjavascripts.org.uk/Animator/070727.htm

I had much trouble linking to your images so have them in directory Pics.
Appears the problem is loadObjs so all external files are in the header.
Think the only problem left is the border-Bottom in IE until the link is clicked.

canadianjameson
07-27-2007, 07:20 PM
Hey Vic,

Thank you, It seems to be working better, although when I start moving the files into the directories (js/ css/ etc) they seem to cause the script to go a little funny. It's the weirdest thing though... sometimes when I open the page the script gets errors and other times it doesnt but it feels like i'm doing the same thing every time

EDIT: I FOUND IT!!!!!!!!!! I RELIABLY CAUSED THE GLITCH! (I think)
It occurs when you load the page and without onmouseover'ing any of the other images in links_BW before you click the purple heart, the error srtfin.0 will occur on the YPP.htm page with the links. It may have something to do with clicking the heart before it is totally faded in. SWEET!

Is there a reason why we should be having so many problems with something as simple as directory location? What is the coding logic behind errors like that?

oh, how should we fix the IE border-bottom issue?

vwphillips
07-28-2007, 10:35 AM
how should we fix the IE border-bottom issue?

define the link parent height.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="Page.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="Toggle.js"></script>
<script language="JavaScript" type="text/javascript" src="Animator.js"></script>
<script language="JavaScript" type="text/javascript" src="BorderFade.js"></script>

</head>
<body>
<div id="pageHolder" >
<div id="linksYPP" style="height:20px;" >
<a href="#mainPointsYPP" onclick="zxcToggle('mainPointsYPP',1,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,0); return false;">main points</a>
<a href="#commentsYPP" onclick="zxcToggle('commentsYPP',2,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',2,0); return false">comments</a>
<a href="#YPPmain" onclick="zxcToggle('YPPmain',3,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',3,0); return false">pics</a>
<a href="#whenWhereYPP" onclick="zxcToggle('whenWhereYPP',4,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',4,0); return false">operating info</a>
</div>
<div id="mainPointsYPP" style="height:20px;" >
<a href="#eligibilityYPP" onclick="zxcToggle('eligibilityYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,1); return false">Eligibility</a>
<a href="#parentBenefitsYPP" onclick="zxcToggle('parentBenefitsYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,1); return false">Parental Benefits</a>
<a href="#childBenefitsYPP" onclick="zxcToggle('childBenefitsYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,1); return false">Child Benefits</a>
<a href="#timeOffYPP" onclick="zxcToggle('timeOffYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,1); return false">"Time Off For Mum"</a>
<ul id="eligibilityYPP">
<li>Under 25? Have kids? Pregnant? Then come check out the Young Parents Program!
<br><br>
We are a group of parents who meet for coffee, snacks, support and workshops twice a week. The atmosphere is a very casual, friendly, and inviting one where young parents come to share their hopes, fears and problems with like-minded people. Lunch is also prepared for everyone.
</li>
</ul>
<ul id="parentBenefitsYPP"><li>Parents are also offered a wide array of activities to participate in such as art therapy, dancing, and cooking. Also, there are workshops exploring parenting issues, health, wellbeing, etc. And on the last Friday of every month, access to free furniture, toys and clothing is available. 2 Bus tickets are given out at the end of every session</li></ul>
<ul id="childBenefitsYPP"><li>Children aged six months to five years are cared for within two separate groups. They are animated and entertained with age appropriate activities, such as arts and crafts, singing and stories. They get a chance to meet new friends and socialize with children their own age</li></ul>
<ul id="timeOffYPP"><li>Schedule for Mondays (Registration required)
<ul>
<li>Time off for Mum is coordinated by the group "Women on the Rise" in collaboration with the YPP, 10.30-3.30 stimulating activities for children age 2-5, hot lunch included for $2</li>
</ul>
<font color="#990099" size="5"><a href="#YPPmain" onclick="zxcToggle('YPPmain',1,2); zxcBorder('border-Top',this,1000,'#FFFFFF','#000000','solid black 1px',1,2); return false">pics</a></font>
</ul>
</div>
<div id="commentsYPP">
<strong>Comments from Young Parents Program participants:</strong>
<br>
<br>
<br>
<p>"So many doors have opened up for me because of this program I highly recommend it to anyone who is a young parent." &nbsp;<font color="#990099">Jasmine</font></p>
<p>"I come here to get a break." &nbsp;<font color="#990099">Lina</font></p>
<p>"The new friendships I've made are great." &nbsp;<font color="#990099">Melanie</font></p>
<p>"This young parents program gives me confidence about becoming a new parent." &nbsp;<font color="#990099">Penelope</font></p>
<p>"Sometimes I just need someone to talk to. At YPP I find those people who all have felt the same at some time and can help." &nbsp;<font color="#990099">Paula</font></p>
<p>"YPP let s me feel good about being a young mother, and I LOVE it." &nbsp;<font color="#990099">Sara</font></p>
<p>"I come for the snacks." &nbsp;<font color="#990099">Jenni</font></p>
</div>
<img id="YPPmain" src="images/YPP/main.jpg">
<div id="whenWhereYPP">
<div id="locationYPP">
The Young Parents Program Center<br>
5775 St. Jacques Corner of Melrose<br>
Métro Vendôme / Bus # 90 west or 104
</div>
<div id="hoursYPP">
Opening Hours:<br>
Wednesday 1:00 p.m. to 4:30 p.m.<br>
Friday 1:00 p.m. to 4:30 p.m.<br>
Tel/Tél : 514.482.7910
</div>
</div>
</div>
</body>
</html>


having so many problems with something as simple as directory location? What is the coding logic behind errors like that?

Don't know, perhaps because they are in a remote directory.
may look at this some time but you have a working solution and I would prefer to move on. You could remind me in a week or so if it is a problem.


It occurs when you load the page and without onmouseover'ing any of the other images in links_B

I have not seen a problem with all external scripts in the header of the main page.

canadianjameson
08-01-2007, 08:42 PM
i'm trying to use the animator script to fade an object out onmouseover, but so that it never fades back in again

how I have it set up (as a test) is:



<img src="images/logoButtons/titles/warning.gif" id="blanky">
<div id="links_BW" onclick="mClear()" onmouseover="zxcAnimator('opacity','blanky',100,0,'linear',1000)">

I had tried (but failed) to modify a code that you had once given me to do this with the old 'obsolete' code, which was



var loadedfor5seconds=false;
var fadeOnceOnly=(function(i){
return function(){
if(loadedfor5seconds && 0<i--)
zxcFadeLink('navHelper',null);};})(1);


and this was activated by:


onload="setTimeout(function(){loadedfor5seconds=true},5000);" // to prevent accidental onmouseover before it is read

and

onmouseover="fadeOnceOnly();"


Can the animator script do the same thing?

p.s: i noticed in your application notes the following error (red):
// parameter 4 = (optional) there are two types of progressive change 'sin' and 'cos' plus a liner change. ('sin', 'cos' or liner, defaults to liner)

vwphillips
08-01-2007, 10:14 PM
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/


function zxcOnce(zxcid){
if (!document.getElementById(zxcid)['opacityoop']) zxcAnimator('opacity',zxcid,100,0,'linear',1000);
}


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

<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" id="blanky">
<div id="links_BW" onclick="mClear()" onmouseover="zxcOnce('blanky');">

canadianjameson
08-01-2007, 10:24 PM
Thanks Vic :):)

I may not need it for this application, but if it is super easy can you show me how to use this with the onload timer (for future use).

if not it's perfectly alright :) Thank you for this

vwphillips
08-01-2007, 11:19 PM
do you mean


<!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>
<script language="JavaScript" src="http://www.vicsjavascripts.org.uk/Animator/Animator.js" type="text/javascript">

</head>


<body onload="setTimeout(function(){ zxcAnimator('opacity','blanky',100,0,'linear',1000); },5000);">
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" id="blanky">

</html>

canadianjameson
08-01-2007, 11:34 PM
Hey Vic,

Thank you, that's great. I'll play around with it sometime if ever I need it to only activate the onclick function after the 5 seconds, however for now this is perfect :)

I don't know if you saw it but I posted about a conflict between the onmouseover aspect of the fadeImages script and the link_titles.js script you had helped me with. the post was the last two of this thread.(posts 5 & 6)
http://www.codingforums.com/showthread.php?t=120066

Thanks again for the help, I appreciate it :)

(oh, p.s, your urls for one.gif and the animator script provided aren't functional, I had to substitute in my own to test it)


p.p.s: if in the distant future you have a chance, this would be cool too but isn't a necessity right now... lol plus i feel bad enough using your response to one post as a lead in to another :o
http://www.codingforums.com/showthread.php?t=118728

canadianjameson
08-02-2007, 01:07 AM
actually Vic I apologize, I was running out the door when I made my last post and I didn't check it properly. What I needed it to do is




<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/


function zxcOnce(zxcid){
if (!document.getElementById(zxcid)['opacityoop']) zxcAnimator('opacity',zxcid,100,0,'linear',1000);
}


/*]]>*/
</script>


<body onload="setTimeout(function(){ zxcOnce('nav_helper') },5000);">

so that in the first 5 seconds after the page is loaded, zxcOnce does not work. Anytime after that first five seconds zxcOnce works

Thanks, and sorry for the mixup



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum