...

View Full Version : help with gradual highlight script (not from dd)



DooM_MonkeY
07-06-2004, 03:07 AM
ok I made this very easy script that I will modify better 4 non IE users, but here it is




<script>

var quikFade;

function fadeIn(theId) {

theobject=theId;


document.getElementById(theId).filters.alpha.opacity+=10;
quikFade=setInterval("fadeIn(theobject)",50);
}

function fadeOut(theId) {

theobject=theId;


document.getElementById(theId).filters.alpha.opacity-=10;
quikFade=setInterval("fadeOut(theobject)",50);
}

</script>

<body bgcolor="black">

<img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn('fade1');" onmouseout="fadeOut('fade1');" id="fade1" style="filter:alpha(opacity=30);">



I have the fadeIn down pat, but the fadeOut is really weird, so any smart IE users out there.... I NEED YOUR HELP!!! lol, but I dont want any really fancy stuff because Im new to the setInterval and setTimeout stuff, so plz reply

Willy Duitt
07-06-2004, 03:15 AM
I haven't run the script but your fadeOut function is most likely acting weird because you are using the same global variable (quikFade) and have failed to clear the other setInterval.

Try adding a clearInterval in your fadeOut function directly before you set the interval again and see if that helps.

IE: clearInterval(quikFade);

......Willy

DooM_MonkeY
07-06-2004, 03:19 AM
Ok Ill try that right now, thnx in advance (ps speedy reply lol)

DooM_MonkeY
07-06-2004, 03:53 AM
hmmmmmmmm..... doesnt seem to have any effect, I move my mouse off, then the image dulls a little, then a secnd later becomes 100 % opac
strange........

glenngv
07-06-2004, 05:44 AM
This is a cross-browser image fader (http://www.codingforums.com/showthread.php?t=33552) but the link of the script in that post is already broken. You can find it in this extension (http://www.codingforums.com/showthread.php?t=34623) of that script.

DooM_MonkeY
07-06-2004, 05:55 AM
....huh? Im sorry but that script makes no sence (remember im new lol), cant u just build off og my script? plz

DooM_MonkeY
07-06-2004, 06:20 PM
Ok, I got it finally, but there are two problems, first, whenever I move my mouse off, it fades until it is fully transparent, and I want it to be 30% transparent, second, when I have many images in a row that do this (see code below), when I move my mouse off of one to go to the other, the image I just moved my mouse off of would stop fading away because the code says that it will stop ALL quikFade's from fading. And just to see what would happen, I changed the setInterval to setTimeout (is there really a difference?). Well, here is the code now:




<script>

var quikFade;

function fadeIn(theId) {

theobject=theId;

document.getElementById(theId).filters.alpha.opacity+=10;
quikFade=setTimeout('fadeIn(theobject)',50);
}
function stopFade() {

clearTimeout(quikFade);
}
function fadeOut(theId) {

theobject=theId;


document.getElementById(theId).filters.alpha.opacity-=10;
quikFade=setTimeout('fadeOut(theobject)',50);
}

</script>

<body bgcolor="black">

<img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="stopFade();fadeIn('fade1');" onmouseout="stopFade();fadeOut('fade1');" id="fade1" style="filter:alpha(opacity=30);"><br>
<img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="stopFade();fadeIn('fade2');" onmouseout="stopFade();fadeOut('fade2');" id="fade2" style="filter:alpha(opacity=30);"><br>
<img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="stopFade();fadeIn('fade3');" onmouseout="stopFade();fadeOut('fade3');" id="fade3" style="filter:alpha(opacity=30);"><br>
<img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="stopFade();fadeIn('fade4');" onmouseout="stopFade();fadeOut('fade4');" id="fade4" style="filter:alpha(opacity=30);"><br>



And I know I could assign a var to every single fading image, but if I can find an easier way, I'll go for it. Please Reply!!

DooM_MonkeY
07-06-2004, 07:19 PM
I just was working on trying to get the fade out function so that it only faded until it got to 30 % opacity, I put: if(theId.filters.alpha.opacity<30)
on the fade out, but all I get is an error



<script>

var quikFade;

function fadeIn(theId) {

theobject=theId;
document.getElementById(theId).filters.alpha.opacity+=10;
clearTimeout(quikFade);
quikFade=setTimeout('fadeIn(theobject)',50);
}

function fadeOut(theId) {

if(theId.filters.alpha.opacity<30)
theobject=theId;
document.getElementById(theId).filters.alpha.opacity-=10;
clearTimeout(quikFade);
quikFade=setTimeout('fadeOut(theobject)',50);
}

</script>

<body bgcolor="black">

<img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn('fade1');" onmouseout="fadeOut('fade1');" id="fade1" style="filter:alpha(opacity=30);"><br>
<img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn('fade2');" onmouseout="fadeOut('fade2');" id="fade2" style="filter:alpha(opacity=30);"><br>
<img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn('fade3');" onmouseout="fadeOut('fade3');" id="fade3" style="filter:alpha(opacity=30);"><br>
<img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn('fade4');" onmouseout="fadeOut('fade4');" id="fade4" style="filter:alpha(opacity=30);"><br>

Willy Duitt
07-06-2004, 08:40 PM
The reason it is not working is this line:
if(theId.filters.alpha.opacity<30)

Should be:
if(document.getElementById(theId).filters.alpha.opacity<30)


I rewrote your codes without changing your code too much other than to give it some structure so it is easier to read, adding a status bar display to aide in debugging and converting all the variable to local variables other than the image id which I left global but could be made local as well.

I commented the script to help you understand what I did:



<script type="text/javascript">
function fadeIn(theId){
theObj = theId; // GLOABAL VARIABLE TO HOLD IMAGE ID //;
var image = document.getElementById(theId); // REUSABLE VARIABLE //;
image.filters.alpha.opacity += 10; // ADD 10 TO OPACITY EACH FUNCTION CALL //;
var quikFade = setTimeout('fadeIn(theObj)',50); // LOCAL VARIABLE USED TO CLEAR //;
if(image.filters.alpha.opacity >= 100){ // IF OPACITY AT LEAST 100 CLEAR TIMEOUT //;
clearTimeout(quikFade); // CLEAR TIMEOUT //;
} status = image.filters.alpha.opacity; // USED FOR DEBUGGING PURPOSES ONLY //;
}

function fadeOut(theId){
theObj = theId;
var image = document.getElementById(theId);
image.filters.alpha.opacity -= 10;
var quikFade = setTimeout('fadeOut(theObj)',50);
if(image.filters.alpha.opacity <= 30){
clearTimeout(quikFade);
} status = image.filters.alpha.opacity;
}

</script>
</head>

<body bgcolor="black">

<img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn(this.id);" onmouseout="fadeOut(this.id);" id="fade1"
style="filter:alpha(opacity=30);"><br>
<img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn(this.id);" onmouseout="fadeOut(this.id);" id="fade2"
style="filter:alpha(opacity=30);"><br>
<img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn(this.id);" onmouseout="fadeOut(this.id);" id="fade3"
style="filter:alpha(opacity=30);"><br>
<img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn(this.id);" onmouseout="fadeOut(this.id);" id="fade4"
style="filter:alpha(opacity=30);"><br>


Oh, I also changed your function call to pass the image id thru the function.

......Willy

DooM_MonkeY
07-06-2004, 09:52 PM
Wow, thank you very much, it works, there is just one problem, if I move my mouse straight off of one image to the other, the image I just moved my mouse off of doesnt finish fadeing out. That is the only problem I can find with your script (and a problem in mine too), but otherwise, it is a perfect script, but if you can fix that one thing, please do.

Once again, thank you very much

DooM_MonkeY
07-06-2004, 11:50 PM
Man this opens up so many possibilities for me, thank you again, now im working on the glow properties.




<script type="text/javascript">

var quikFade;

function fadeIn(theId){

IdObj = theId;
document.getElementById(theId).filters.glow.strength+=1;
document.getElementById(theId).filters.alpha.opacity+=10;
quikFade=setTimeout('fadeIn(IdObj)',50);
if(document.getElementById(theId).filters.alpha.opacity>=100&&document.getElementById(theId).filters.glow.strength<=13){
clearTimeout(quikFade);
}window.status="Opacity:" +document.getElementById(theId).filters.alpha.opacity +" Glow Strength:" +document.getElementById(theId).filters.glow.strength;
}

function fadeOut(theId){

IdObj = theId;
document.getElementById(theId).filters.glow.strength-=1;
document.getElementById(theId).filters.alpha.opacity-=10;
quikFade=setTimeout('fadeOut(IdObj)',50);
if(document.getElementById(theId).filters.alpha.opacity<=30&&document.getElementById(theId).filters.glow.strength<=1){
clearTimeout(quikFade);
}window.status="Opacity:" +document.getElementById(theId).filters.alpha.opacity +" Glow Strength:" +document.getElementById(theId).filters.glow.strength;
}
</script>
</head>
<style>

#fade1, #fade2, #fade3{filter:alpha(opacity=30) glow(color=red strength=0);}
</style>

<body bgcolor="black">

<img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn(this.id);" onmouseout="fadeOut(this.id);" id="fade1"><br>
<img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn(this.id);" onmouseout="fadeOut(this.id);" id="fade2"><br>
<img src="http://www.freewebs.com/death_by_monkeys/death by monkeys link.gif" onmouseover="fadeIn(this.id);" onmouseout="fadeOut(this.id);" id="fade3"><br>

Willy Duitt
07-07-2004, 12:06 AM
there is just one problem, if I move my mouse straight off of one image to the other, the image I just moved my mouse off of doesnt finish fadeing out.

theObj = theId; // GLOABAL VARIABLE TO HOLD IMAGE ID //;


That is because the global variable theObj which holds the image id is changed to focus the new image and leaves the last one hanging.

I was aware of this, but if you wish to write a script from scratch, you may well as well learn to debug and overcome unexpected results. ;)

....Willy

BTW: If you look in the Post A Javascript forum you will find a fader script that JAVECO posted. Take a look at that.....

glenngv
07-07-2004, 06:58 AM
BTW: If you look in the Post A Javascript forum you will find a fader script that JAVECO posted. Take a look at that.....
That is exactly the link I posted here but DooM_MonkeY ignored it.

DooM_MonkeY
07-13-2004, 09:00 PM
Ok, I'm moving on from that script right now, but since the script im working on now relates to the fading in thing I guess... I'm going to post it here so as not to take up much space..... Anyway, I'm trying to get somewhat of the effect here (http://www.n-son.com/1/) (click a link to see the div slide out of view, then right back again), but I need to know if I can do the same thing with this sort of script..... I've tried




var quikFade;
var DivVar= new Array();
DivVar[0]="blah";


function SlideOut(theId,theVar){

IdObj = theId;
document.getElementById(theId).style.left-=1;

quikFade=setTimeout('SlideOut(IdObj)',50);
if(document.getElementById(theId).style.left>=-100){
clearTimeout(quikFade);
document.getElementById(theId).innerHTML=theVar;
document.getElementById(theId).style.left+=1;
quikFade=setTimeout('SlideOut(IdObj)',50);
if(document.getElementById(theId).style.left<=200){
clearTimeout(quikFade);
}
}
}


then 4 the html I have:




<div id="mainDiv" style="position:relative;height:100px;width:100px;border:1px solid black;">
Foo
</div>

<br>

<a href="#" onclick="SlideOut('mainDiv',DivVar[0]);">Slide to home</a>



I keep getting the error




Invalid Argument


Plz help!

Oh and ps:

I did reply to your post glen, right here:


....huh? Im sorry but that script makes no sence (remember im new lol), cant u just build off og my script? plz

I'm sorry, but I didn't get that code, I'm trying to learn something, not copy and paste

DooM_MonkeY
07-14-2004, 03:01 AM
should it be document.getELementById(theId).style.position.left+=1; ?

because I already described that the position was relative in the css coding.

glenngv
07-14-2004, 03:25 AM
The CSS left property includes the unit like px so it's not a pure number.
You must convert it to number in order to do mathematical operations.


function SlideOut(theId,theVar){
var theObj = document.getElementById(theId);
theObj.style.left = (parseInt(theObj.style.left) - 1) + "px";
quikFade=setTimeout('SlideOut(IdObj)',50);
if (parseInt(theObj.style.left)>=-100){
clearTimeout(quikFade);
theObj.innerHTML=theVar;
theObj.style.left = (parseInt(theObj.style.left) + 1) + "px";
quikFade=setTimeout(function(){SlideOut(theId)}, 50);
if (parseInt(theObj.style.left)<=200){
clearTimeout(quikFade);
}
}
}

DooM_MonkeY
07-14-2004, 06:24 PM
Thank you for the reply but it still says

"invalid argument line: 11 char:3"

that is the line with the "quikFade=setTimeout('........"

That is the same line that the argument was on before.

hmmm :\

glenngv
07-15-2004, 04:23 AM
Does the div have the initial left property declared inline like this?

<div id="mainDiv" style="left:10px;">Foo</div>

It needs to be inline because style.left gets its value in inline styles. You need currentStyle.left (I think IE only) if you're using internal or external CSS.

<style>
div {left:10px;}
</style>

DooM_MonkeY
07-15-2004, 07:18 AM
Oh that might be it, thank you very much



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum