...

View Full Version : applying the fade transition to an object



canadianjameson
10-29-2004, 04:26 PM
there was a thread about it here but i didnt know how to apply it.
http://www.codingforums.com/showthread.php?t=14358&highlight=transition+object

basically i want this transition (timing)


blendtrans(duration=1.75)">


but i would like it on on object. (i.e i want an specific image on the page to fade in when the page loads)

how can i do this? (even if it only works for I.E 5.5+ users)

*EDIT*
i basically want the red rectangles to fade in (or blendtrans in, whatever) onload

www.enviromark.ca/english/index.html

canadianjameson
11-01-2004, 12:11 AM
I got it working, now i just need a final tweak.

i have this


<script type="text/javascript">
function fadeIn() {
var fObj = document.getElementById("fDiv");
if (typeof fDiv.filters !="unknown" && typeof fDiv.filters[0] !="undefined") { fDiv.filters[0].Apply(); }
fDiv.style.visibility="visible";
if (typeof fDiv.filters !="unknown" && typeof fDiv.filters[0] !="undefined") { fDiv.filters[0].Play(); }
}
</script>

<body onload="fadeIn">
....
<td><a href="index.html" onmouseover="on1();" onmouseout="off1();"><img src="images/butt_1_red.gif" width="23" height="37" border="0" name="a" id="fDiv" style="visibility:hidden;filter:progid:DXImageTransform.Microsoft.Fade(1.5)"></a></td>

this works. now the only thing i need to do is as follows.

currently the script fades in the butt_1_red.gif.... but it fades it in after making it visible. I would like to have the script fade it in over another image (so it doesnt look like it pops out of nowhere and just fades in.

the butt_1_red.gif has a black border and a red interior. i want to put a dummy image called butt_blank.gif that ONLY has the black border... but no red interior. then have the butt_1_red fade in in its place. this would maintain the black border and give the illusion of only the red middle fading in.

you can see the images i'm talking about on the enviromark link above.

how can i modify the script above to change the source of the image, then fade it in?

canadianjameson
11-01-2004, 09:55 PM
why wont anyone touch this thread?

here's a thought as to how i would accomplish what i want to do, however i stress that i NEED some feedback.

i need to change the .src of the image. i mean, a simple explanation of what i want is that i want to have one image fade in over another. doing this requires having one image in place, then changing the .src of the image and applying the fade in... or am i wrong.

here's how it works now
http://www.enviromark.ca/english/indexFadeTest.html

any ideas?

this is what i tried: i bolded what i added


<script type="text/javascript">
function fadeIn() {
var fObj = document.getElementById("fDiv");
var turnOff = document.getElementById("blank");

if (typeof fDiv.filters !="unknown" && typeof fDiv.filters[0] !="undefined") { fDiv.filters[0].Apply(); }
turnOff.style.display="none";
fDiv.style.visibility="visible";
if (typeof fDiv.filters !="unknown" && typeof fDiv.filters[0] !="undefined") { fDiv.filters[0].Play(); }
}
</script>

<body onload="fadeIn()">

...
<td><img src="images/butt_blank.gif" width="23" height="37" border="0" id="blank"><a href="index.html" onmouseover="on1();" onmouseout="off1();"><img src="images/butt_1_red.gif" width="23" height="37" border="0" name="a" id="fDiv" style="visibility:hidden;filter:progid:DXImageTransform.Microsoft.Fade(1.5)"></a></td>


however this still shows a line going down the middle of the red image as it loads.... any ideas

is my approach even going to do what i want it to? (which is maintain the black border while the red fades in)

you can see the butt_blank.gif here if you need:
http://www.enviromark.ca/english/images/butt_blank.gif

Willy Duitt
11-02-2004, 03:49 AM
Try this:



<style type="text/css">
.fade{ filter:alpha(opacity=0) }
</style>

<script type="text/javascript">
function fadeIn(){
fade = setTimeout('fadeIn()',50);
for(var i=0; i<document.images.length; i++){
var image = document.images[i];
if(image.className.match(/fade/i) && image.filters.alpha.opacity < 100){
image.filters.alpha.opacity = image.filters.alpha.opacity += 1;
} if(image.filters.alpha.opacity >= 100){ clearTimeout(fade) };
status = image.filters.alpha.opacity; // TESTING PURPOSES ONLY.... PLEASE REMOVE
}
}
</script>
</head>

<body bgcolor="black" onload="fadeIn()">
<img src="http://www.enviromark.ca/english/images/butt_1_red.gif" class="fade"><br>
<img src="http://www.enviromark.ca/english/images/butt_1_red.gif" class="fade"><br>


.....Willy

canadianjameson
11-02-2004, 04:19 AM
Thank you LORD

thanks for the responce willy.

its odd... it worked when i used it as you posted, but when i tried to put it into my page i got the following JS error.

Error: 'filters.alpha.opacity' is a null or not an object'

then beleive it or not somehow pressing previour error, then next actually causes an error in the dialog box and forces it to close.

you killed my dialog box!!!

hehe, here's my code:



....
<style type="text/css">
.fade{ filter:alpha(opacity=0) }
</style>

<script type="text/javascript">
function fadeIn(){
fade = setTimeout('fadeIn()',50);
for(var i=0; i<document.images.length; i++){
var image = document.images[i];
if(image.className.match(/fade/i) && image.filters.alpha.opacity < 100){
image.filters.alpha.opacity = image.filters.alpha.opacity += 1;
} if(image.filters.alpha.opacity >= 100){ clearTimeout(fade) };
// status = image.filters.alpha.opacity; // TESTING PURPOSES ONLY.... PLEASE REMOVE
}
}
</script>

</head>

<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" onload="postLoad();fadeIn()"><a name="top"></a>
.....
<td><a href="index.html" onmouseover="on1();" onmouseout="off1();"><img src="images/butt_1_red.gif" class="fade" width="23" height="37" border="0" name="a"></a></td>
....


if you need more of my page code to figure out where the mistery error is comming from, let me know.

Thanks again btw.

p.s, is your script compatible with more than just I.E?

hemebond
11-02-2004, 04:53 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>46792</title>
<script type="text/javascript">
var txt = window.navigator.appName;
var ie = (txt == "Microsoft Internet Explorer") ? true : false;
var opera = (txt == "Opera") ? true : false;
</script>
</head>
<body>
<img id="img1" src="images/1.jpeg">
<img id="img2" src="images/2.jpeg">
</body>
<script type="text/javascript">
var images = new Array();
images[0] = document.getElementById("img1");
images[1] = document.getElementById("img2");

var opacity = 0.0;

for(var i = 0; i < images.length; i++)
{
if(ie)
{
images[i].style.filter="alpha(opacity=0)";
}
setOpacity(images[i],0.0);
}

function fade()
{
opacity += 0.1;

if(opacity > 0.9)
{
return;
}

for(i = 0; i < images.length; i++)
{
setOpacity(images[i],opacity);
}

setTimeout("fade()", 500);
}

function setOpacity(obj, val)
{
if(ie)
{
obj.filters.alpha.opacity = val * 100;
}
else
{
obj.style.MozOpacity = val;
}
}

fade();
</script>
</html>Works in Firefox and IE, but not Opera. Why? Who the crap knows?

Willy Duitt
11-02-2004, 05:06 AM
p.s, is your script compatible with more than just I.E?

What happened to: "how can i do this? (even if it only works for I.E 5.5+ users)"

I don't know what conflicts could have occured when you added my script to your document... But you will need to spend more than 20 minutes or so to debug your own scripts before asking me to delve thru all of your code which I am unfamilar with.... If you still have problems with it tommorrow, feel free to post back and if I have time, I will take a look...

But, fading images cross-browser is too much of a PITA which is why most people probably shied away from this topic.... If hemebond script works for both Firefox and IE... I would suggest using that....

.....Willy

hemebond
11-02-2004, 05:44 AM
I didn't post earlier because I've already posted similar scripts at least twice already in these forums, and it's very easy to do with a little research.

Mr J
11-02-2004, 01:51 PM
Please try the following



<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<SCRIPT language=JavaScript>
<!--

time=1 // seconds
moz=document.getElementById&&!document.all
function startBlend(id,p){

if(!moz){id.filters[0].Apply()}

id.src = p

if(!moz){id.filters[0].Play(time)}

}
//-->
</SCRIPT>
</HEAD>
<BODY>

<IMG id="img1" src="butt_blank.gif" width="105" height="160" alt="" style="filter: progid:DXImageTransform.Microsoft.fade(duration=1, overlap=1)" onmouseover="startBlend(this,'butt_1_red.gif')" onmouseout="startBlend(this,'butt_blank.gif')">

</BODY>
</HTML>

OR

<SCRIPT language="javascript">
<!--
var blendtime=1.0 // blend time, in seconds
var pausetime=2000 // pause time, in milliseconds

function blendme2(id,n){
document.getElementById(id).filters.blendTrans.Apply()
document.getElementById(id).src = n
document.getElementById(id).filters.blendTrans.Play(blendtime)
}

// add onload="blendme2()" to the opening BODY tag

// -->
</SCRIPT>

<img id="divB" src="butt_blank.gif" style="filter:blendTrans()" onmouseover="blendme2(this.id,'butt_1_red.gif')" onmouseout="blendme2(this.id,'butt_blank.gif')">

canadianjameson
11-03-2004, 12:24 AM
Wow. Thanks guys for all your help. I've analysed all the scripts provided to me and decided that for the purposes of me learning i should try one last time to modify my original script to suit my needs. low and behold, i found a way to do exactly what i needed.

i set the background of the table cell to a blank version of the red button i wanted to fade in, then i had the red button fade in over it; giving the illuision that only the middle was fading in! i'm quite proud of myself. But i needed to look at the other options that you all provided for me to come to my proper conclusion, so thank you very much.

Hemebond: i did a forum search with the words "object transition" and only came up with one relevant post. what keywords would have brought me to your scripts?

here's what i did in code:


<script type="text/javascript">
function fadeIn() {
var fObj = document.getElementById("fDiv");
if (typeof fDiv.filters !="unknown" && typeof fDiv.filters[0] !="undefined") { fDiv.filters[0].Apply(); }
fDiv.style.visibility="visible";
if (typeof fDiv.filters !="unknown" && typeof fDiv.filters[0] !="undefined") { fDiv.filters[0].Play(); }
}
</script>
...
<body onload="fadeIn()">
....
<td background="images/butt_not1_blank.gif"><a href="quoteformFadeTest.html" onmouseover="on5();" onmouseout="off5();"><img src="images/butt_5_red.gif" id="fDiv" width="23" height="40" border="0" name="e" style="visibility:hidden;filter:progid:DXImageTransform.Microsoft.Fade(1.5)"></a></td>
....


here's the link so you can all see it :)
http://www.enviromark.ca/english/indexFadeTest.html

please tell me if you think it offers more than the simpler approach (no fade)
http://www.enviromark.ca/english/index.html

Thanks again guys.

-- Jay

a message to Willy (and others who want to help)
you mentioned that you'd be willing to help me go through my code and find where the random error was occuring. if you still want to help me with that, this page will not do the fade! :(
http://www.enviromark.ca/english/quoteformFadeTest.html
... it say Error: 'fDiv is undefined'

its really odd. This page is very JS heavy (i think i have 6 onloads... :() .... i have one by one removed all the onloads except fadeIn() and i cant find the culprit. would you be willing to give it a look?
i dont see what could cause the id="fDiv" to be ignored.... its really weird.

Thats the final step before i can impliment the script :)
Thanks man, i really appreciate it

hemebond
11-03-2004, 12:38 AM
Hemebond: i did a forum search with the words "object transition" and only came up with one relevant post. what keywords would have brought me to your scripts?image fade

BTW, your code doesn't work in Firefox, my default browser. In fact I don't even see the red box now.

canadianjameson
11-03-2004, 12:57 AM
crap!

what do you see? dude that aint good!

i didnt use yours because it faded in choppy! arg!

but that doesnt make sense... the code takes into account incompatible browsers and just doesnt apply the transition if they cant handle it! (blue) and unhides the fDiv object regardless! (red)



<script type="text/javascript">
function fadeIn() {
var fObj = document.getElementById("fDiv");
if (typeof fDiv.filters !="unknown" && typeof fDiv.filters[0] !="undefined") { fDiv.filters[0].Apply(); }
fDiv.style.visibility="visible";
if (typeof fDiv.filters !="unknown" && typeof fDiv.filters[0] !="undefined") { fDiv.filters[0].Play(); }
}
</script>


how is this possible hemebond?

unless you only looked at the quoteformFadeTest.html... which is broken and i need help fixing. is this the link that doesnt work? http://www.enviromark.ca/english/indexFadeTest.html

Willy Duitt
11-03-2004, 01:31 AM
The variable name is fObj but you are checking the properties of fDiv....

canadianjameson
11-03-2004, 03:40 AM
wow....

okay, but then why would it have worked on all my other pages except for the quoteformFadeTest?

if what you pointed out is the error i think it is, then the script should not work at all......

i'm not at home so i cant test it, but are you saying that the script should be this?



<script type="text/javascript">
function fadeIn() {
var fObj = document.getElementById("fDiv");
if (typeof fObj.filters !="unknown" && typeof fObj.filters[0] !="undefined") { fObj.filters[0].Apply(); }
fObj.style.visibility="visible";
if (typeof fObj.filters !="unknown" && typeof fObj.filters[0] !="undefined") { fObj.filters[0].Play(); }
}
</script>


?

If so i still dont get why it worked on the other pages

EDIT
i mean, i'm confused....
as i'm reading the script... fObj could be changed to the following with no effect as it is never called in the actual script....



var lookAtMeI'mAUselessVariable = document.getElementById("fDiv");

hemebond
11-03-2004, 04:43 AM
i didnt use yours because it faded in choppy! arg!Did you try adjusting the fade step delay? How about the size of the steps? I made the fade obvious so you could see it clearly.

brothercake
11-03-2004, 12:34 PM
Works in Firefox and IE, but not Opera. Why? Who the crap knows?
Because you're using two proprietary properties - one for IE, and one for moz. Opera doesn't support either.

But you could add to that - "obj.style.opacity" is the standard, and "obj.style.KhtmlOpacity" is for Safari 1.2

canadianjameson
11-03-2004, 02:41 PM
:(

I may revisit your script heme... i just wanted to see if i could get mine (or brothercakes rather) to work... i guess i just wanted to see if i had actually learnt anything on these forums over the past 8 months.

guess not.

hemebond
11-03-2004, 09:24 PM
Because you're using two proprietary properties - one for IE, and one for moz. Opera doesn't support either.Oh duh. /slaps self
But you could add to that - "obj.style.opacity" is the standard, and "obj.style.KhtmlOpacity" is for Safari 1.2Actually, opacity is in CSS3, and isn't a standard yet. Does Opera have a prefix?

canadianjameson
11-03-2004, 09:51 PM
heme, i decided to use your script. sorry for the hassle... i got it fading right.

if you make any changes based on brothercake's comments, please post the modified script here so i can make the updates

Thanks

p.s, why does the script only work if you place it at the bottom of the page below the </body>?

brothercake
11-09-2004, 02:45 AM
Actually, opacity is in CSS3, and isn't a standard yet
Well noted :) It is nevertheless implemented in mozilla already (1.7 iirc)

Does Opera have a prefix?
Opera-proprietary CSS properties are prefixed "-o-", but there isn't one for this - it doesn't support opacity at all, apart from PNGs.

hemebond
11-09-2004, 04:22 AM
p.s, why does the script only work if you place it at the bottom of the page below the </body>?Because the elements don't exist yet.

canadianjameson
11-14-2004, 06:53 PM
heme, sometimes when the connection is slow or whatever, the fade trasition is lost in the loading of the page

is there any way to have it start after the images have fully downloaded ?

hemebond
11-14-2004, 08:13 PM
is there any way to have it start after the images have fully downloaded ?Yes, using the onload event handler.

canadianjameson
11-14-2004, 08:25 PM
in other words, instead of putting your script under the </body>, put it above and toss it in the onload?

hemebond
11-14-2004, 11:10 PM
No, leave the code where it is, and replace
fade();with
window.onload = fade;

codegoboom
11-14-2004, 11:34 PM
instead of putting your script under the </body>


Bump it up a notch.

The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document.

canadianjameson
11-15-2004, 03:22 AM
didnt work heme, it killed the image load entirely.

anyways, not a big deal, i was just being anal



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum