canadianjameson
03-11-2005, 04:39 AM
Hey.
I've been working on this script (and i got it to do what i need). it allows me to fade in an underline.
My question is whether it is possible to add in a line within the script telling it that "If there is more that one 'space', dont underline until the start of the next character" ?
maybe using something like value.replace(/\s/g,'')
i ask only because within the page i am using it on sometimes i have a link that spans two lines (because the area it is in is small, width wise). When this occurs the underline looks odd because it spans a bunch of spaces that have no text in them. For example: Scaletron --> RadarTron ...
have a look here:
www.enviromark.ca/english/Products_fade.htm
also, i noticed that when the mouse goes from one link to the other, the fadeOut is cancelled on the first link... sorta rendering the variable "stepOut" useless. any ideas on how to make the fadeOut aspect of the script last on the previous link even when the mouse is over a new link?
here's the script. The script below is a standalone version of the script used on the page. the one on the link above has been modified to work with another script on the page. it may be worth it to look at the source of the link above
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
body {
background-color: #fff;
}
#description a {
text-decoration: none;
color: #33f;
}
</style>
<script type="text/javascript"><!--
startColor = "#FFFFFF"; // MouseOut link color
endColor = "#FFB903"; // MouseOver link color
stepIn = 22; // delay when fading in
stepOut = 22; // delay when fading out
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
window.onload = function() {
if(!document.all || !document.getElementsByTagName) return;
var links = document.getElementById('description').getElementsByTagName('A');
for(var i=0;i<links.length;i++){
links[i].onmouseover = domouseover;
links[i].onmouseout = domouseout;
}
}
startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());
var fadeId = new Array();
function dehexize(Color){
var colorArr = new makearray(3);
for (i=1; i<7; i++){
for (j=0; j<16; j++){
if (Color.charAt(i) == hexa[j]){
if (i%2 !=0)
colorArr[Math.floor((i-1)/2)]=eval(j)*16;
else
colorArr[Math.floor((i-1)/2)]+=eval(j);
}
}
}
return colorArr;
}
function domouseover() {
if(window.event){
var El = event.srcElement;
} else return;
if (El.tagName.toUpperCase() == "A")
fade(startColor,endColor,El.uniqueID,stepIn);
}
function domouseout() {
if(window.event){
var El = event.srcElement;
} else return;
if (El.tagName.toUpperCase() == "A")
fade(endColor,startColor,El.uniqueID,stepOut);
}
function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;
}
function hex(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else
return "" + hexa[Math.floor(i/16)] + hexa[i%16];}
function setColor(r, g, b, element) {
var hr = hex(r); var hg = hex(g); var hb = hex(b);
//element.style.color = "#"+hr+hg+hb;
element.style.borderBottom = "1px solid #"+hr+hg+hb;
}
function fade(s,e, element,step){
var sr = s[0]; var sg = s[1]; var sb = s[2];
var er = e[0]; var eg = e[1]; var eb = e[2];
if (fadeId[0] != null && fade[0] != element){
setColor(sr,sg,sb,eval(fadeId[0]));
var i = 1;
while(i < fadeId.length){
clearTimeout(fadeId[i]);
i++;
}
}
for(var i = 0; i <= step; i++) {
fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
}
fadeId[0] = element;
}
// -->
</script>
</head>
<body>
<p><a href="#" class="normal">test link</a></p>
<p id="description"><a href="#">test link</a> <a href="#">test link X</a></p>
<p><a href="#" class="fade">test link</a></p>
</body>
</html>
I've been working on this script (and i got it to do what i need). it allows me to fade in an underline.
My question is whether it is possible to add in a line within the script telling it that "If there is more that one 'space', dont underline until the start of the next character" ?
maybe using something like value.replace(/\s/g,'')
i ask only because within the page i am using it on sometimes i have a link that spans two lines (because the area it is in is small, width wise). When this occurs the underline looks odd because it spans a bunch of spaces that have no text in them. For example: Scaletron --> RadarTron ...
have a look here:
www.enviromark.ca/english/Products_fade.htm
also, i noticed that when the mouse goes from one link to the other, the fadeOut is cancelled on the first link... sorta rendering the variable "stepOut" useless. any ideas on how to make the fadeOut aspect of the script last on the previous link even when the mouse is over a new link?
here's the script. The script below is a standalone version of the script used on the page. the one on the link above has been modified to work with another script on the page. it may be worth it to look at the source of the link above
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
body {
background-color: #fff;
}
#description a {
text-decoration: none;
color: #33f;
}
</style>
<script type="text/javascript"><!--
startColor = "#FFFFFF"; // MouseOut link color
endColor = "#FFB903"; // MouseOver link color
stepIn = 22; // delay when fading in
stepOut = 22; // delay when fading out
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
window.onload = function() {
if(!document.all || !document.getElementsByTagName) return;
var links = document.getElementById('description').getElementsByTagName('A');
for(var i=0;i<links.length;i++){
links[i].onmouseover = domouseover;
links[i].onmouseout = domouseout;
}
}
startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());
var fadeId = new Array();
function dehexize(Color){
var colorArr = new makearray(3);
for (i=1; i<7; i++){
for (j=0; j<16; j++){
if (Color.charAt(i) == hexa[j]){
if (i%2 !=0)
colorArr[Math.floor((i-1)/2)]=eval(j)*16;
else
colorArr[Math.floor((i-1)/2)]+=eval(j);
}
}
}
return colorArr;
}
function domouseover() {
if(window.event){
var El = event.srcElement;
} else return;
if (El.tagName.toUpperCase() == "A")
fade(startColor,endColor,El.uniqueID,stepIn);
}
function domouseout() {
if(window.event){
var El = event.srcElement;
} else return;
if (El.tagName.toUpperCase() == "A")
fade(endColor,startColor,El.uniqueID,stepOut);
}
function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;
}
function hex(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else
return "" + hexa[Math.floor(i/16)] + hexa[i%16];}
function setColor(r, g, b, element) {
var hr = hex(r); var hg = hex(g); var hb = hex(b);
//element.style.color = "#"+hr+hg+hb;
element.style.borderBottom = "1px solid #"+hr+hg+hb;
}
function fade(s,e, element,step){
var sr = s[0]; var sg = s[1]; var sb = s[2];
var er = e[0]; var eg = e[1]; var eb = e[2];
if (fadeId[0] != null && fade[0] != element){
setColor(sr,sg,sb,eval(fadeId[0]));
var i = 1;
while(i < fadeId.length){
clearTimeout(fadeId[i]);
i++;
}
}
for(var i = 0; i <= step; i++) {
fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
}
fadeId[0] = element;
}
// -->
</script>
</head>
<body>
<p><a href="#" class="normal">test link</a></p>
<p id="description"><a href="#">test link</a> <a href="#">test link X</a></p>
<p><a href="#" class="fade">test link</a></p>
</body>
</html>