I have found a new solution
actually two of them.
1) After Ryan’s suggestion, I thought it would be OK to change the class name also with Javascript. In case a visitor has it disabled, the image will show up normally. If Javascript is enabled, the initial image opacity is set to zero.
$('image3').className = 'opacity-workaround';
new Effect.Opacity('image3', {duration:0.9, from:0.0, to:1.0});
Where the CSS styling is like before:
.opacity-workaround
{
opacity: 0.0;
} To have the onload effect working even when using the "back" button in the browser, you can disable the browser cache with PHP. Works also with HTML meta tags.
I have used in this example PHP because it’s easy and you could write a simple plugin for your MODx powered website.
Just add following code on top of your file and you should be OK, no need for other Javascript workarounds:
<?php
@ header ('Expires: Mon, 14 Oct 2002 05:00:00 GMT'); //Date in the past
@ header ('Last-Modified: ' . gmdate ("D, d M Y H:i:s") . ' GMT'); //Always modified
@ header ('Cache-Control: no-store, no-cache, must-revalidate'); //HTTP 1.1
@ header ('Cache-Control: post-check=0, pre-check=0', false);
@ header ('Pragma: no-cache'); //HTTP 1.0
?>
With HTML meta tags is goes like this:
<meta http-equiv="Pragma" content="no-cache" />
...and so on...
A full working example you can find here:
http://www.frozenminds.com/lab-files/davidm/ (updated)
Here is also full source
What I have also added is an IF clause before executing something on an item, so it will run only if the item is on the page. This was a useful method for some IE bugs/errors on my
first AJAX script (for another software).
<?php
@ header ('Expires: Mon, 14 Oct 2002 05:00:00 GMT'); // Date in the past
@ header ('Last-Modified: ' . gmdate ("D, d M Y H:i:s") . ' GMT'); // Always modified
@ header ('Cache-Control: no-store, no-cache, must-revalidate'); // HTTP 1.1
@ header ('Cache-Control: post-check=0, pre-check=0', false);
@ header ('Pragma: no-cache'); // HTTP 1.0
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A simple workaround for Effect.Opacity</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="javascripts/prototype/prototype.js"></script>
<script type="text/javascript" src="javascripts/scriptaculous/scriptaculous.js"></script>
<style type="text/css">
/* <![CDATA[ */
/* We set the initial opacity of the element
that we'll later transfor with Effect.Opacity to 0.0 (zero) */
.opacity-workaround
{
opacity: 0.0;
}
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
/* Observe when page loads and run the "init" function */
Event.observe(window, 'load', init, false);
/* When page is loaded, this function is called */
function init()
{
//Incorrect example
if ($('image1'))
{
new Effect.Opacity('image1', {duration:0.9, from:0.0, to:1.0}); //Run effect
}
//Correct examples
if ($('image2'))
{
$('image2').className = 'opacity-workaround'; //Change class
new Effect.Opacity('image2', {duration:0.9, from:0.0, to:1.0}); //Run effect
}
if ($('image3'))
{
$('image3').className = 'opacity-workaround'; //Change class
new Effect.Opacity('image3', {duration:0.9, from:0.0, to:1.0}); //Run effect
}
}
/* ]]> */
</script>
</head>
<body>
<h4>Image will show up first, then dissapear and fade in (NOT GOOD)</h4>
<div id="image1">
<img src="images/leaf.jpg" alt="Leaf on rocks" />
</div>
<h4>Image won't show up first but fade in nicely (GOOD)</h4>
<div id="image2">
<img src="images/leaf.jpg" alt="Leaf on rocks" />
</div>
<div id="image3">
<img src="images/leaf.jpg" alt="Leaf on rocks" />
</div>
</body>
</html>
Maybe there are other ways to solve this, but I haven’t found any other
Quote from: davidm at Sep 11, 2006, 10:32 AMAgain you’re saving me !
If you drop by Paris, I owe you a bunch of drinks and a good meal 
Relax man
I owe you more than a simple workaround for script.aculo.us because you gaved me a great CMS
Hope this helps!
Boby
!
MODX Staff
