...

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



canadianjameson
09-02-2006, 08:51 PM
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



<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


<!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>

vwphillips
09-02-2006, 09:57 PM
did this for you last year

http://www.VicsJavaScripts.org.uk/AddUnderLine/AddUnderLine.htm

vwphillips
09-03-2006, 12:56 PM
also the underline script does not appear to work(Moz FF) on your link

also


<!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>

canadianjameson
09-03-2006, 07:29 PM
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?



<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>

canadianjameson
09-03-2006, 09:08 PM
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'

vwphillips
09-03-2006, 09:56 PM
try

<!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>

canadianjameson
09-03-2006, 10:35 PM
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?

vwphillips
09-03-2006, 10:48 PM
better


<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>

canadianjameson
09-04-2006, 03:14 AM
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

borderTop:'solid '+zxccol1+' 1px;'})
to

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 :o

vwphillips
09-04-2006, 09:05 AM
I tested in both IE and FF

note the changes to the style sheet

canadianjameson
09-04-2006, 08:51 PM
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:
www.enviromark.ca/gryphon/backgroundImageDemo.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?

vwphillips
09-04-2006, 09:50 PM
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




<!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>

canadianjameson
09-04-2006, 10:53 PM
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 :)

vwphillips
09-04-2006, 11:12 PM
can do opacity(as you know) but if it ok thats ok and think color has some avantages

canadianjameson
09-05-2006, 12:39 AM
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 :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum