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.
Results 1 to 15 of 15
  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

    need a quick hand extracting a script from my own page (lol, i know :-)

    hahaha, i can't beleive i'm actually doing this.

    I've spent the past 35 minutes trying to extract a script that I have from one page so i can drop it in on another, seperate page. no matter what i do, i CANT seem to get it out & working.

    the problem is that the script was written for me and was integrated into a dynamic menu. extracting it from the menu so that it can be used as a standalone script is proving difficult.

    here's the script (its an underline-fader script). i bolded the part i KNOW is needed, but wasn't sure about the stuff below.

    below is how i tried to impliment it without success. you can see it in action at www.enviromark.ca/english/products.html

    Code:
    <script type="text/javascript">
    startColor = "FFFFFF"; // MouseOut link color 
    endColor = "CC0000"; // MouseOver link color 
    
    stepIn = 15; // delay when fading in 
    stepOut = 30; // delay when fading out 
    
    var fading=new Array();
    fading['now']=startColor;
    
    function initLinkFade() {
      var links = document.getElementById('descriptions').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'>#descriptions 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); 
        } 
      }
    
    </script>
        
    <script>
    ... removed section
    .....
    
    function onLoadChangetext(){
    if (location.search){
    LS=location.search;
    TransferValue=eval(LS.substring(1,LS.length))
    changetext(TransferValue);
    }}
    
    function regenerate(){
    window.location.reload()
    }
    function regenerate2(){
    if (document.layers){
    appear()
    setTimeout("window.onresize=regenerate",450)
    }
    }
    
    function changetext(whichcontent){
      if (document.getElementsByTagName) {
        for(var i = 0;i < fading.length;i++){ 
          clearTimeout(fading[i]);  
          }
        }
      if (document.all||document.getElementById){
        cross_el=document.getElementById? document.getElementById("descriptions"):document.all.descriptions
        cross_el.innerHTML=whichcontent
        }
      else if (document.layers){
        document.d1.document.d2.document.write(whichcontent)
        document.d1.document.d2.document.close()
        }
      initLinkFade();
      }
    glueHand=changetext;
    function nullFunk(){return null};
    mousetime=null;
    
    function staticLoad(witchcontent){
      changetext=nullFunk;
      clearTimeout(mousetime);
      glueHand(witchcontent);
      mousetime=setTimeout('countDown(5)',0);
      }
    
    function countDown(n){
      if(!n){
        changetext=glueHand;
        document.getElementById('countD').style.visibility='hidden'
        }
      else{
        document.getElementById('countD').style.visibility='visible'
        document.getElementById('countD').innerHTML=n;
        mousetime=setTimeout('countDown('+(n-1)+')',1000);
        }
      }
      
    function appear(){
    document.d1.visibility='show'
    }
    
    if (document.layers){
    window.onload=regenerate2
    }
    
    //-->
    </script>
    my efforts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Shortbread By Gryphon</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script type="text/javascript">
    startColor = "FFFFFF"; // MouseOut link color 
    endColor = "CC0000"; // MouseOver link color 
    
    stepIn = 15; // delay when fading in 
    stepOut = 30; // delay when fading out 
    
    var fading=new Array();
    fading['now']=startColor;
    
    function initLinkFade() {
      var links = document.getElementById('languages').getElementsByTagName('A');
      for(var i=0;i<links.length;i++){
        links[i].onmouseover = domouseover;
        links[i].onmouseout = domouseout;
        }
      }
    
    if(document.getElementsByTagName){
      window.onload = initLinkFade;
      }
    
    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); 
        } 
      }
    
    </script>
    
    
    <style type="text/css"> 
    * { 
    padding: 0; 
    margin: 0; 
    } 
    html, body { 
    text-align: center; 
    font-family: "verdana", trebuchet ms, arial, sans-serif; 
    font-size: 11px; 
    background-color: white;
    } 
    
    #mainLogo { 
    height: 300px; 
    width: 261px; 
    border: 1px #ccc solid; 
    padding: 20px; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    margin-top: 100px; 
    } 
    #languages {
    width: 300px;
    clear: left;
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 50px;
    position: relative; 
    border-bottom: 1px #ccc solid; 
    }
    #languages a {
    padding-left: 25px;
    padding-right: 25px;
    text-decoration: none;
    }
    
    </style> 
    
    
    </head>
    
    <body>
    <div id="mainLogo"><img src="images/mainTest.jpg"></div>
    <div id="languages"><a href="#">English</a><a href="#">French</a><a href="#">Japanese</a></div>
    </body>
    </html>
    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,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    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
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    also the underline script does not appear to work(Moz FF) on your link

    also
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <style type="text/css">
    <!--
    .fred {text-decoration:none}
    .tom {text-decoration:none}
    -->
    </style><script language="JavaScript" type="text/javascript">
    <!--
    // by Vic Phillips (03-September-2006) http://www.vicsjavascripts.org.uk
    
    function zxcMseOver(zxcobj,zxcd){
     var zxcp=zxcobj.parentNode;
     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');
     var zxcary=[];
     for (var zxc0=0;zxc0<zxclks.length;zxc0++){
      if (zxclks[zxc0].className==zxccls){
       zxcary.push(zxclks[zxc0]);
      }
     }
     for (var zxc1=0;zxc1<zxcary.length;zxc1++){
      var zxcd=zxcStyle('DIV',{width:zxcary[zxc1].offsetWidth+'px',borderBottom:'solid '+zxccol1+' 1px'});
      zxcary[zxc1].parentNode.insertBefore(zxcd,zxcary[zxc1]);
      zxcd.appendChild(zxcary[zxc1].parentNode.removeChild(zxcary[zxc1]));
      zxcd.oop=new zxcOOP(zxcd,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>1)){
      this.obj.style.borderBottom='solid #'+this.ary[this.cnt+=this.d]+' 1px';
      this.setTimeOut("cng();",100);
     }
    }
    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);
    }
    
    
    //-->
    </script>
    
    </head>
    
    <body onload="zxcInit('fred','#CCFFFF','#000099',20);zxcInit('tom','#003300','#CCFF66',20);">
    <a class="fred"  href="#" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 1 Link 1 Link 1 </a>
    <br>
    <br>
    <a class="tom"  href="#" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 2 Link 2 Link 2 Link 2 </a>
    
    </body>
    
    </html>
    Last edited by vwphillips; 09-03-2006 at 12:32 PM.
    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/

  • #4
    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,

    Thanks for the help, both this year and last. I still have that fading script you wrote for me and i have used it... for some stupid reason i thought text was different but then I realised that infact its the div thats being bordered, not the text.

    It works well, but for one placement issue. you'll probably know exactly whats wrong:

    www.enviromark.ca/gryphon/index.html --> the three language choices are supposed to be side-by-side with a 25px gap in between them. for some reason after implementing your script they just stack one ontop of the other.

    any ideas?

    Code:
    <strong><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Shortbread By Gryphon</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script language="JavaScript" type="text/javascript">
    <!--
    // by Vic Phillips (03-September-2006) http://www.vicsjavascripts.org.uk
    
    function zxcMseOver(zxcobj,zxcd){
     var zxcp=zxcobj.parentNode;
     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');
     var zxcary=[];
     for (var zxc0=0;zxc0<zxclks.length;zxc0++){
      if (zxclks[zxc0].className==zxccls){
       zxcary.push(zxclks[zxc0]);
      }
     }
     for (var zxc1=0;zxc1<zxcary.length;zxc1++){
      var zxcd=zxcStyle('DIV',{width:zxcary[zxc1].offsetWidth+'px',borderTop:'solid '+zxccol1+' 1px'});
      zxcary[zxc1].parentNode.insertBefore(zxcd,zxcary[zxc1]);
      zxcd.appendChild(zxcary[zxc1].parentNode.removeChild(zxcary[zxc1]));
      zxcd.oop=new zxcOOP(zxcd,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>1)){
      this.obj.style.borderTop='solid #'+this.ary[this.cnt+=this.d]+' 1px';
      this.setTimeOut("cng();",100);
     }
    }
    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);
    }
    
    
    //-->
    </script>
    
    <style type="text/css"> 
    * { 
    padding: 0; 
    margin: 0; 
    } 
    html, body { 
    text-align: center; 
    font-family: "verdana", trebuchet ms, arial, sans-serif; 
    font-size: 11px; 
    background-color: white;
    } 
    
    #mainLogo { 
    height: 300px; 
    width: 261px; 
    border: 1px #ccc solid; 
    padding: 20px; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    margin-top: 100px; 
    } 
    #languages {
    width: 300px;
    clear: left;
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 50px;
    position: relative; 
    border-bottom: 1px #ccc solid; 
    }
    .languageLinks { 
    position: relative;
    text-decoration: none;
    padding: 25px 
    }
    
    </style> 
    
    
    </head>
    
    <body onload="zxcInit('languageLinks','#FFFFFF','#000000',15)">
    <div id="mainLogo"><img src="images/mainTest.jpg"></div>
    <div id="languages">
    	<a class="languageLinks" href="#" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">English</a>
    	<a class="languageLinks" href="#" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">French</a>
    	<a class="languageLinks" href="#" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Japanese</a>
    </div>
    </body>
    </html>
    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 :)

  • #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
    also vic, i am currently trying to apply the underline script that you wrote for me (the first link you provided).

    It isnt applicable in this case because it doesnt fade in the border, but rather draws it.

    if I were to go directly to using the script here: http://www.VicsJavaScripts.org.uk/Ad...dUnderLine.htm it would have to allow me to 'not draw the line'

    would this be difficult because for most applications of the script (as i forsee it), i will want the underline to 'fade in from 0 opacity and fade out to 0 opacity'
    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
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    try
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Shortbread By Gryphon</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script language="JavaScript" type="text/javascript">
    <!--
    // by Vic Phillips (03-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');
     var zxcary=[];
     for (var zxc0=0;zxc0<zxclks.length;zxc0++){
      if (zxclks[zxc0].className==zxccls){
       zxcary.push(zxclks[zxc0]);
      }
     }
     for (var zxc1=0;zxc1<zxcary.length;zxc1++){
      var zxcd=zxcStyle('DIV',{position:'absolute',overflow:'hidden',left:zxcary[zxc1].offsetLeft+'px',top:(zxcary[zxc1].offsetTop+20)+'px',width:zxcary[zxc1].offsetWidth+'px',height:'1px',backgroundColor:zxccol1});
      zxcary[zxc1].parentNode.appendChild(zxcd);
      zxcary[zxc1].oop=new zxcOOP(zxcd,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.backgroundColor='#'+this.ary[this.cnt+=this.d];
      this.setTimeOut("cng();",100);
     }
    }
    
    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);
    }
    
    
    //-->
    </script>
    
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    }
    html, body {
    text-align: center;
    font-family: "verdana", trebuchet ms, arial, sans-serif;
    font-size: 11px;
    background-color: white;
    }
    
    #mainLogo {
    height: 300px;
    width: 261px;
    border: 1px #ccc solid;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-top: 100px;
    }
    #languages {
    width: 320px;
    clear: left;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    position: relative;
    border-bottom: 1px #ccc solid;
    }
    .languageLinks {
    position: relative;
    text-decoration: none;
    padding: 25px
    }
    
    </style>
    
    
    </head>
    
    <body onload="zxcInit('languageLinks','#FFFFFF','#000000',15)">
    <div id="mainLogo"><img src="images/mainTest.jpg"></div>
    <div id="languages">
    	<a class="languageLinks" href="#" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">English</a>
    	<a class="languageLinks" href="#" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">French</a>
    	<a class="languageLinks" href="#" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Japanese</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/

  • #7
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thanks vic, that fixed the spacing problem

    I tried the script with a background image and noticed that the 'fade to transparent' effect didn't work... or was that part of another script?

    is it possible to set the script to work like this:
    <body onload="zxcInit('languageLinks','transparent','#000000',15)">

    so that if the script gets the parameter 'transparent' in either the start color or end color, it automatically knows to fade it via opacity and not from color X to color Y and back again?
    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 :)

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    better
    Code:
    <strong><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Shortbread By Gryphon</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script language="JavaScript" type="text/javascript">
    <!--
    // by Vic Phillips (03-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],{borderTop:'solid '+zxccol1+' 1px;'});
      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.borderTop='solid #'+this.ary[this.cnt+=this.d]+' 1px';
      this.setTimeOut("cng();",100);
     }
    }
    
    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);
    }
    
    
    //-->
    </script>
    
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    }
    html, body {
    text-align: center;
    font-family: "verdana", trebuchet ms, arial, sans-serif;
    font-size: 11px;
    background-color: white;
    }
    
    #mainLogo {
    height: 300px;
    width: 261px;
    border: 1px #ccc solid;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-top: 100px;
    }
    #languages {
    width: 320px;
    clear: left;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    position: relative;
    border-bottom: 1px #ccc solid;
    }
    .languageLinks {
    position: relative;
    text-decoration: none;
    padding-left: 25px;
    padding-right: 25px;
    }
    
    </style>
    
    
    </head>
    
    <body onload="zxcInit('languageLinks','#FFFFFF','#000000',15)">
    <div id="mainLogo"><img src="images/mainTest.jpg"></div>
    <div id="languages">
    	<a class="languageLinks" href="#" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">English</a>
    	<a class="languageLinks" href="#" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">French</a>
    	<a class="languageLinks" href="#" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Japanese</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/

  • #9
    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,

    i tested it out and it had the same effect....

    what exactly did you change to make it 'better'? / address the transparency issue?

    edit:

    i had an idea: maybe a quick workaround would be to change this
    Code:
    borderTop:'solid '+zxccol1+' 1px;'})
    to
    Code:
    borderTop:'solid '+zxccol1+' 0px;'})
    and then modify the onmouseover script to first set the border to 1px and THEN fade it in.

    i dunno... may not work but i figured i'd try to help somehow
    Last edited by canadianjameson; 09-04-2006 at 02:18 AM.
    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 :)

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    I tested in both IE and FF

    note the changes to the style sheet
    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/

  • #11
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    i see that you extended the #languages div by 20px (not sure y tho

    here's an example of why I wanted the transparency option:
    http://www.enviromark.ca/gryphon/bac...dImageDemo.htm

    the presence of a non-uniform background is problematic because the line is supposed to appear to fade out of nowhere... where here its 'start-color' is visible.

    Can this be fixed or is it just a limitation of the script?
    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 :)

  • #12
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    1) I chose a padding which did not effect the link height or wrap the link text

    2) If you have a transition between black and white the line is always going to show over a blue background.

    now 0px on fully mouseout


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Shortbread By Gryphon</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script language="JavaScript" type="text/javascript">
    <!--
    // 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],{borderTop:'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.borderTop='solid #'+this.ary[this.cnt+=this.d]+' 1px';
      this.setTimeOut("cng();",100);
     }
     else if (this.d<0) {
      this.obj.style.borderTop='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);
    }
    
    
    //-->
    </script>
    
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    }
    html, body {
    text-align: center;
    font-family: "verdana", trebuchet ms, arial, sans-serif;
    font-size: 11px;
    background-color: #CCFFFF;
    }
    
    #mainLogo {
    height: 300px;
    width: 261px;
    border: 1px #ccc solid;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-top: 100px;
    }
    #languages {
    width: 320px;
    clear: left;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    position: relative;
    border-bottom: 1px #ccc solid;
    }
    .languageLinks {
    position: relative;
    text-decoration: none;
    padding-left: 25px;
    padding-right: 25px;
    }
    
    </style>
    
    
    </head>
    
    <body onload="zxcInit('languageLinks','#FFFFFF','#000000',15)">
    <div id="mainLogo"><img src="images/mainTest.jpg"></div>
    <div id="languages">
    	<a class="languageLinks" href="#" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">English</a>
    	<a class="languageLinks" href="#" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">French</a>
    	<a class="languageLinks" href="#" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Japanese</a>
    </div>
    </body>
    </html>
    Last edited by vwphillips; 09-04-2006 at 09:16 PM.
    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
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Hey,

    I had to use the margin property or else the fade-in border appeared of all of the 'padded' area. it was either that or create a "spacer' div of 25px and place it in between the links to space them out.

    Thanks for the 0px addition. I had really only requested the transparency addition because I figured that you could just drop in some of the pre-coded opacity functions from the other script and simply call it when I chose to set one of the colors as 'transparent'. i didn't meant to make extra work for you.

    Thanks again, I think this should do fine for the current application
    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 :)

  • #14
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    can do opacity(as you know) but if it ok thats ok and think color has some avantages
    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/

  • #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, agreed.

    if i do end up needing the opacity i'll give you a shout. for now i wont make more work for someone whose already helped me a lot

    As always, thanks Vic
    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 :)


  •  

    Posting Permissions

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