Cross Fade one time then stop. 1

pdldavis · Jul 30, 2008

Hi, I would like to add to this code I found to where it performs the cross fade one time and then stops.

The idea is to display a logo on my web page on load and then fade to the picture of the month.

I know very little about js and would appreciate the help.

This is the code:

Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@test.com

Please leave this notice intact.

Rewrite of old code found here:

http://slayeroffice.com/code/imageCrossFade/index.html

*****/

window.addEventListener?window.addEventListener("load",so_init,false)
:window.attachEvent("onload",so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
if(!d.getElementById || !d.createElement)return;

// DON'T FORGET TO GRAB THIS FILE AND PLACE IT ON YOUR SERVER IN THE SAME DIRECTORY AS THE JAVASCRIPT!
//

http://slayeroffice.com/code/imageCrossFade/xfade2.css

css = d.createElement("link");
css.setAttribute("href","xfade2.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
d.getElementsByTagName("head")[0].appendChild(css);

imgs = d.getElementById("imageContainer").getElementsByTagName("img");
for(i=1;i<imgs.length;i++) imgs.xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;

setTimeout(so_xfade,2500);
}

function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;

nOpacity = imgs[nIndex].xOpacity;

cOpacity-=.05;
nOpacity+=.05;

imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;

setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);

if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,2500);
} else {
setTimeout(so_xfade,50);
}

function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}

}

Thanks, Dan

BabyJeffy · Jul 31, 2008

Here is a quick bit of javascript and associated HTML that should do what you want cross-browser. I have commented the mysterious numbers (and made them bold so you know what I am talking about) - you may want to turn them into variables for easy modification later on.

Code:

<script type="text/javascript">
function initPage() {
  setTimeout('fadeLogo()', [!]2500[/!]); // start fading in 2500 milliseconds from page load
}

function fadeLogo() {
  var logo = document.getElementById('logo');
  if (logo.filters) {
    var currentOpacity = logo.filters.alpha.opacity;
    var newOpacity = (currentOpacity <= 0) ? 0 : currentOpacity - 10;
    logo.filters.alpha.opacity = newOpacity;
  } else {
    var currentOpacity = logo.style.opacity;
    var newOpacity = (currentOpacity <= 0) ? 0 : currentOpacity - 0.1;
    logo.style.opacity = newOpacity;
  }
  if (newOpacity > 0) setTimeout('fadeLogo()', [!]500[/!]); // fade out one step every 500 millliseconds
}

window.addEventListener?window.addEventListener("load", initPage, false):window.attachEvent("onload", initPage);
</script>

... (the HTML follows) ...

<div id="container" style="position:relative;width:200px;height:123px;">
  <img src="[!]logo.jpg[/!]" width="200" height="123" alt="" style="position:absolute;top:0;left:0;" id="logo"/>
  <img src="[!]picture.jpg[/!]" width="200" height="123" alt="" style="position:absolute;top:0;left:0;"/>
</div>

...

You will have to update the source of the HTML images... I've bolded them, too. Let us know how you go.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

pdldavis · Jul 31, 2008

Hi Jeff, thanks for the reply and the help.

I loaded the new code and it seems to skip the logo and goes directly to the picture with no cross fading. I flipped the pictures and renamed them to ensure I got that right with the same results.

I thought maybe to body onload tag needed something added to execute the js, which didn't work either. I marked in red what I added.

Am I implementing this incorrectly?

<html>
<head>
<script><endnote><head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Another Test with Tek-Tips Code</title>
<script type="text/javascript">
function initPage() {
setTimeout('fadeLogo()', 2500); // start fading in 2500 milliseconds from page load}
function fadeLogo() {
var logo = document.getElementById('logo');
if (logo.filters) {
var currentOpacity = logo.filters.alpha.opacity;
var newOpacity = (currentOpacity <= 0) ? 0 : currentOpacity - 10;
logo.filters.alpha.opacity = newOpacity;
} else {
var currentOpacity = logo.style.opacity;
var newOpacity = (currentOpacity <= 0) ? 0 : currentOpacity - 0.1;
logo.style.opacity = newOpacity;
}
if (newOpacity > 0) setTimeout('fadeLogo()', 500); // fade out one step every 500 millliseconds
}
window.addEventListener?window.addEventListener("load", initPage, false):window.attachEvent("onload", initPage);
</script>
<title></title>
</head>
<body onload="fadelogo()">
<div id="container"
style="position: relative; width: 200px; height: 123px;">
<img src="logo.jpg" alt=""
style="position: absolute; top: 0pt; left: 0pt;" id="logo"
height="123" width="200"><img src="picture.jpg"
alt="" style="position: absolute; top: 0pt; left: 0pt;"
height="123" width="200"></div>
</body>
</html>

Thanks, Dan

BabyJeffy · Jul 31, 2008

You do not need to add in the onload for the body element (in fact take it off - it's handled by the window.addEventListener line.

I think the problem is that you have removed carriage returns, and the end result is that a close brace is being commented out:

Code:

setTimeout('fadeLogo()', 2500); // start fading in 2500 milliseconds from page load[!]}[/!]

The bold part should be on a new line. Anything after the comment (//) is considered a comment.

At least I reckon that's the problem

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

pdldavis · Aug 1, 2008

Ok, I fixed that and then did a side by side comparison of the original and darned if I can see anything different. The page load goes directly to the picture and skips the logo.

This all started when one of my kids said he thought my index page looked rather cheesy and it needed a logo. I said fine, build a logo that looks good and I'll use it but it is going to fade out to the pic of the month, which leads me to the problem at hand.

Anyway, here is a link:

http://www.ddgnevada.com/fadelogo/fadelogo.html

Thanks, Dan

BillyRayPreachersSon · Aug 1, 2008

Your markup is a bit dodgy, though... For example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html><head><meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
[!]<script><endnote><head>[/!]
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Another Test with Tek-Tips Code</title>

What's with the "endnote", and duplicate "head" tags?

Try getting your markup to validate before worrying about any errors.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

pdldavis · Aug 1, 2008

Yes, got in a bit of a hurry this morning.

BabyJeffy · Aug 1, 2008

So if you get your page to validate (using the w3 validation service), does the code work for you? I had a simple test harness and tested it with no problems in Firefox last night.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

pdldavis · Aug 1, 2008

Ok, I fixed the validation errors (should have paid attention to the 'Make sure your web page' message) and it passes validation.

When I run it only the owl pops up in IE and FF. In IE the logo flickers very briefly. Maybe I need to increase the seconds for fading?

BabyJeffy · Aug 1, 2008

Sorry for the delay... I got a bit more interested in this problem, and reworked the code on the page you have online. I was missing the initial opacity setting in the intial code I posted - this new code gracefully deals with this problem. I added some code to test that the logo was fully loaded before any fading starts. I also added a few more comments that might help you tweak it.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>FadeLogo Test</title>
<script type="text/javascript">
function fadeLogo() {
	var logo = document.getElementById('logo');
	var numberOfSteps = 50; // the number of steps to fade from full opacity to nothing
	if (logo.filters) {
		var currentOpacity = !logo.filters.alpha ? 100 : logo.filters.alpha.opacity;
		var newOpacity = currentOpacity <= 0 ? 0 : currentOpacity - 100 / numberOfSteps;
		logo.style.filter = 'alpha(opacity=' + newOpacity + ')';
	} else {
		var currentOpacity = logo.style.opacity == '' ? 1 : logo.style.opacity;
		var newOpacity = currentOpacity <= 0 ? 0 : currentOpacity - 1 / numberOfSteps;
		logo.style.opacity = newOpacity;
	}
	if (newOpacity > 0) setTimeout('fadeLogo()', 50); // fade out one step every 50 milliseconds
}
function initPage() {
	if (document.getElementById('logo').loaded == true) {
		document.getElementById('picture').style.visibility = 'visible';
		setTimeout('fadeLogo()', 1500); // start fading in 1500 milliseconds from page load
	} else {
		setTimeout('initPage()', 100); // give the logo another 100 milliseconds to load and try again
	}
}
// attach the initPage() function to the onload event of the page gracefully
window.addEventListener ? window.addEventListener("load", initPage, false) : window.attachEvent("onload", initPage);
</script>
<meta content="Tek Tips Test" name="description">
</head>

<body style="width: 577px;">
<div id="container" style="position: relative; width: 502px; height: 256px;">
	<img src="picture.jpg" alt="" style="position: absolute; top: 0pt; left: 0pt; visibility: hidden;" id="picture" height="256" width="502">
	<img src="logo.jpg" alt="" style="position: absolute; top: 0pt; left: 0pt;" id="logo" height="256" width="502" onload="this.loaded=true">
</div>
</body>
</html>

I've tested this code in Safari (MacOSX) and Firefox 3 (MacOSX) and Firefox 2 (Windows) and IE6 (Windows)... all works fine. Hopefully you can integrate it into your site alright.

Watch out for the styles in the two images... and the ids (if you change them, they need to change in the javascript too)... and the onload that I added to the logo image.

Let us know how you go!

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

pdldavis · Aug 2, 2008

That is a work of art. Thank You. It works beautifully.
Unfortunately I am traveling so I won't get to work on this for a few days but when I do, I will ensure the proper credits are included.

Awesome job and worth more than just one star.

Thanks again for all your help,

Dan

pdldavis · Aug 7, 2008

Well, I got it hooked in and it works very well and of course this is giving me a couple other ideas that I can probably figure out on my own now:

http://www.ddgnevada.com

I do learn my lessons and I ran the web page validator thing and came up with this:

Validation Output: 1 Error

1. Error Line 134, Column 382: there is no attribute "ONLOAD".

…px; height: 256px;" id="logo" onload="this.loaded =true"> </div>

I don't know that this is even worth worrying about because it works like a charm.

Is it?

Thanks, Dan

BillyRayPreachersSon · Aug 8, 2008

Does putting a complete DOCTYPE in change that?

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

pdldavis · Aug 8, 2008

I have to admit ignorance here. I don't quite know what you mean. I looked it up and if it means include the type of validation with the doc type - the verification URL, every one I tried gave me more errors than what I currently have. Interestingly, if I used the transitional URL then I got two errors on "this.loaded", instead of just the one error without it.

Dan

BillyRayPreachersSon · Aug 8, 2008

Try this handy resource:

http://www.coderambler.com/how-do-i-choose-a-doctype/

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

pdldavis · Aug 10, 2008

Yes, I have seen that handy resource but it doesn't answer the basic question (to me) about what exactly a basic doctype is. There seem to be about a half dozen of them and their definition seems to based on validation service they use which means to me - six of one, half a dozen of the other and the one which produces the least errors works fine for me.

Anyway since it works and this doctype thing doesn't seem to be that important in the big scheme of things, I will leave it as is.

johnwm · Aug 10, 2008

Depends if you want you site to look consistent across browser. A doctype tells the client's browser how to interpret the text that it is about to receive. Dan's reference gives fairly clear guidance on which to use - might be worth a re-read if it isn't obvious which you should use.

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Cross Fade one time then stop. 1

pdldavis

Technical User

BabyJeffy

Programmer

pdldavis

Technical User

BabyJeffy

Programmer

pdldavis

Technical User

BillyRayPreachersSon

Programmer

pdldavis

Technical User

BabyJeffy

Programmer

pdldavis

Technical User

BabyJeffy

Programmer

pdldavis

Technical User

pdldavis

Technical User

BillyRayPreachersSon

Programmer

pdldavis

Technical User

BillyRayPreachersSon

Programmer

pdldavis

Technical User

johnwm

Programmer

Similar threads

Part and Inventory Search

Sponsor