2
   

Fading links script loop problem

Forums: Web Development, Javascript
Email this Topic • Print this Page
 
 
chevalier
 
Reply Sun 1 Feb, 2004 01:46 pm
Code:<html><head><script language="JavaScript">

var colours=new Array("#780000", "#830000", "#880000", "#930000", "#990000", "#9f050d","#af150d",

"#bf250d", "#cf350d", "#df450d", "#ef550d", "#ff650d");


var aaa = "";
var ccc = "";
var ddd = "";

function defade(iii) {

ccc=eval("document.all." + iii + ".style");

for (i=11; i>0; i--) {

if (colours[i]==ccc.color) {

ccc.color=colours[i-1];
aaa=setTimeout("defade("+ iii +");", 100); }}}



function fade(iii) {

ccc=eval("document.all." + iii + ".style");

for (i=0; i<=10; i++) {

if (colours[i]==ccc.color) {

ccc.color=colours[i+1];
aaa=setTimeout("fade("+ iii +");", 100); }}}


</script>

</head><body>


<a href="#" name="link1" onmouseover="fade(this.name)" onmouseout="defade(this.name)"

style="color:#780000">Test link</a>

</body>
</html>


It works just one step, like a usual a:hover rollover in CSS. IE returns a /";" sign required/ error in lines with "eval()". Without "eval()" it doesn't work at all. What's wrong? Thanks in advance for any help.
  • Topic Stats
  • Top Replies
  • Link to this Topic
Type: Discussion • Score: 2 • Views: 2,066 • Replies: 5
No top replies

 
chevalier
 
  1  
Reply Sun 1 Feb, 2004 02:02 pm
On more thing, it's the Timeout line that's the devil. Without it, it works without returning errors. What am I missing?
0 Replies
 
chevalier
 
  1  
Reply Sun 1 Feb, 2004 05:04 pm
Another attempt:

Code:<html><head><script language="JavaScript">

var colours=new Array("#780000", "#830000", "#880000", "#930000", "#990000", "#9f050d","#af150d",

"#bf250d", "#cf350d", "#df450d", "#ef550d", "#ff650d")


var aaa;
var ccc = "";
var ddd = "";
var eee = 0;
var ggg = 1;
var hhh = 1;
var lll;

function defade(iii) {

ggg=0
hhh=1
clearTimeout(aaa)

ccc=eval("document.all." + iii + ".style")

function defade1() {

if (ccc.color==colours[11] & hhh==1) {
ccc.color=colours[10];
lll=setTimeout("defade1()", 100)
}

if (ccc.color==colours[10] & hhh==1) {
ccc.color=colours[9];
lll=setTimeout("defade1()", 100)
}

if (ccc.color==colours[9] & hhh==1) {
ccc.color=colours[8];
lll=setTimeout("defade1()", 100)
}

if (ccc.color==colours[8] & hhh==1) {
ccc.color=colours[7];
lll=setTimeout("defade1()", 100)
}

if (ccc.color==colours[7] & hhh==1) {
ccc.color=colours[6];
lll=setTimeout("defade1()", 100)
}

if (ccc.color==colours[6] & hhh==1) {
ccc.color=colours[5];
lll=setTimeout("defade1()", 100)
}

if (ccc.color==colours[5] & hhh==1) {
ccc.color=colours[4];
lll=setTimeout("defade1()", 100)
}

if (ccc.color==colours[4] & hhh==1) {
ccc.color=colours[3];
lll=setTimeout("defade1()", 100)
}

if (ccc.color==colours[3] & hhh==1) {
ccc.color=colours[2];
lll=setTimeout("defade1()", 100)
}


if (ccc.color==colours[2] & hhh==1) {
ccc.color=colours[1];
lll=setTimeout("defade1()", 100)
}

if (ccc.color==colours[1] & hhh==1) {
ccc.color=colours[0];
lll=setTimeout("defade1()", 100)
}

if (ccc.color==colours[0] & hhh==1) {
hhh=0;
clearTimeout(lll)
}


}}



function fade(iii) {

clearTimeout(lll)

ggg=1;
hhh=0

ccc=eval("document.all." + iii + ".style")

function fade1() {

if (ccc.color==colours[0] & ggg==1) {
ccc.color=colours[11];
aaa=setTimeout("fade1()", 100)
}

if (ccc.color==colours[1] & ggg==1) {
ccc.color=colours[2];
aaa=setTimeout("fade1()", 100)
}

if (ccc.color==colours[2] & ggg==1) {
ccc.color=colours[3];
aaa=setTimeout("fade1()", 100)
}

if (ccc.color==colours[3] & ggg==1) {
ccc.color=colours[4];
aaa=setTimeout("fade1()", 100)
}

if (ccc.color==colours[4] & ggg==1) {
ccc.color=colours[5];
aaa=setTimeout("fade1()", 100)
}

if (ccc.color==colours[5] & ggg==1) {
ccc.color=colours[6];
aaa=setTimeout("fade1()", 100)
}

if (ccc.color==colours[6] & ggg==1) {
ccc.color=colours[7];
aaa=setTimeout("fade1()", 100)
}

if (ccc.color==colours[7] & ggg==1) {
ccc.color=colours[8];
aaa=setTimeout("fade1()", 100)
}

if (ccc.color==colours[8] & ggg==1) {
ccc.color=colours[9];
aaa=setTimeout("fade1()", 100)
}

if (ccc.color==colours[9] & ggg==1) {
ccc.color=colours[10];
aaa=setTimeout("fade1()", 100)
}

if (ccc.color==colours[10] & ggg==1) {
ccc.color=colours[11];
aaa=setTimeout("fade1()", 100)
}

if (ccc.color==colours[0] & ggg==1) {
ggg=0;
clearTimeout(aaa)
}


}}


</script>

</head><body>


<a href="#" name="link1" onmouseover="fade(this.name)" onmouseout="defade(this.name)"

style="color:#780000">Test link</a>

</body>
</html>


No effect, no error, nothing. Crying or Very sad Confused Shocked
0 Replies
 
Craven de Kere
 
  1  
Reply Sun 1 Feb, 2004 06:55 pm
What is it that you are trying to do?
I have a fade script but it'll fade all links and with the same colours. Would that work?
0 Replies
 
chevalier
 
  1  
Reply Mon 2 Feb, 2004 07:51 am
It works one step up and down on mouseover and mouseout while I'd like it to work all steps and each sequence just once. In this case, it would be from #780000 to #FF650D and stopping there on mouseouver and from #FF650D to #78000 and stopping there on mouseout. Something is wrong with the setTimeouts in my script and I can't achieve that.
0 Replies
 
h9k
 
  1  
Reply Fri 13 Feb, 2004 08:49 pm
Test this script, I added -1 in the color array to mark the end (Just add colors and put -1 last). Then set "speedin" for the speed of onmouseover fade and "speedout" for onmouseout. The script will fade more then one link up/down, drag the mouse over the 4 testlinkes and you will see. It will also start fade/defade from the current color if you leave the link and reenter before it has faded down. And added onfocus/onblur since I like to browse with keys and not the mouse.

Hope it will work as you wanted.

Code:<html>
<head>
<script type="text/javascript">

var colours=new Array("#780000", "#830000", "#880000", "#930000", "#990000", "#9f050d","#af150d",
"#bf250d", "#cf350d", "#df450d", "#ef550d", "#ff650d",-1)
var timers=new Array();
var speedin=1;
var speedout=200;

function getElement(id) {
return document.getElementById ? document.getElementById(id) :
document.all ? document.all(id) : null;
}

function fade(id,now) {
clearTimeout(timers[id]);
myobj=getElement(id);
if (isNaN(now)){
now=0;
for (i=0;colours[i]!=-1;i++){
if (myobj.style.color==colours[i]) { now=i; }
}
}
myobj.style.color=colours[now];
now++;
if (colours[now]!=-1){
timers[id]=setTimeout("fade('"+id+"',"+now+")",speedin);
}
}

function defade(id,now) {
clearTimeout(timers[id]);
myobj=getElement(id);
if (isNaN(now)){
now=-1;
for (i=0;colours[i]!=-1;i++){
if (myobj.style.color==colours[i]) { now=i; }
}
if (now==-1) { now=i; }
}
myobj.style.color=colours[now];
now--;
if (now!=-1){
timers[id]=setTimeout("defade('"+id+"',"+now+")",speedout);
}
}

</script>
</head>
<body style="background-color: #000000;">

<a href="#" id="link1" onfocus="fade(this.id);" onblur="defade(this.id);" onmouseover="fade(this.id);" onmouseout="defade(this.id)" style="color:#780000">Test link</a>
<a href="#" id="link2" onfocus="fade(this.id);" onblur="defade(this.id);" onmouseover="fade(this.id);" onmouseout="defade(this.id)" style="color:#780000">Test link</a>
<a href="#" id="link3" onfocus="fade(this.id);" onblur="defade(this.id);" onmouseover="fade(this.id);" onmouseout="defade(this.id)" style="color:#780000">Test link</a>
<a href="#" id="link4" onfocus="fade(this.id);" onblur="defade(this.id);" onmouseover="fade(this.id);" onmouseout="defade(this.id)" style="color:#780000">Test link</a>

</body>
</html>
0 Replies
 
 

Related Topics

.NET web application development and the application server - Question by carebear1
phpBB Search Engine Optimization - Sessions, static ( SEO ) - Discussion by Craven de Kere
Webdevelopment and hosting - Question by harisit2005
Showing an Ico File - Discussion by Brandon9000
how to earn money in internet - Discussion by rizwanaraj
The version 10 bug. Worse then Y2K! - Discussion by Nick Ashley
CSS Border style colors - Question by meesa
There is no Wisdom in Crowds - Discussion by ebrown p
THANK YOU CRAVEN AND NICK!!! - Discussion by dagmaraka
I'm the developer - Discussion by Nick Ashley
IIS-compatible mod_rewrite software (URL rewriting; ISAPI) - Discussion by Monger
 
  1. Forums
  2. » Fading links script loop problem
Copyright © 2024 MadLab, LLC :: Terms of Service :: Privacy Policy :: Page generated in 0.03 seconds on 04/24/2024 at 02:55:50
▲ ▼