Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 4 123 ... LastLast
Results 1 to 15 of 50
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    Modifying the functionality on a border-fading script

    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:
    Code:
    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[i].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 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
    Code:
    <!--
    // 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
    Last edited by canadianjameson; 07-17-2007 at 11:03 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    my script you posted should be considered obsolete!!

    however to change the speed

    Code:
    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.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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/Im...ageBrowser.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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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:
      Code:
      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)
      Code:
      // **** 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
      Code:
      <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
    Last edited by canadianjameson; 07-18-2007 at 02:41 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #6
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    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:
    Code:
    <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.

    Code:
    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.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #8
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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?
    Last edited by canadianjameson; 07-19-2007 at 12:44 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Q. Should I provide and example

    A. yes
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #10
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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 Essentially what I'm trying to do is wherever they are in the menu-tree, the path should have border-Top fade in onclick.
    Last edited by canadianjameson; 07-19-2007 at 02:28 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #12
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #13
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    also updated the Animator Application Notes

    Code:
    // 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.
    //
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #14
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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
      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
    Last edited by canadianjameson; 07-19-2007 at 06:01 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #15
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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)
    Last edited by canadianjameson; 07-19-2007 at 06:18 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  
    Page 1 of 4 123 ... LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •