Menu
I am hopeing that some of you have familiarity with the scriptaculous JavaScript framework. I posted about this issue on their Google Group, but I never got a response.
I am attempting to perform a DIV fading effect for some visual notifications in my AJAX scripts. Basically it consists of 3 DIVs. One as a container, a second as a transparent background, and a third with a 100% opacity message or image. The effect works great in FireFox and other standards browsers, but it fails miserably in IE6 and IE7. I need to figure out why IE has such a hard time with it. I know IE sucks as a browser, but I need cross browser compatibility.
I have tried just about everything I can think of, but I can’t seem to get it to work. If any of you know of a way of simulating this effect in IE, please let me know.
Below is a sample code page I put together to demo the problem. If you don’t want to download the libraries to get it to work use the provided link ([url]http://www.sanityloss.com/_test/
[CODE]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″>
<meta name=”author” content=”Kaleb”>
<title>Untitled 1</title>
<script src=”./scripts/js/prototype.js” type=”text/javascript”></script>
<script src=”./scripts/js/scriptaculous.js” type=”text/javascript”></script>
<script type=”text/javascript”>
function start() {
// JavaScript Document
var contact_cDiv = Builder.node(‘div’, {id:’contactContainerDiv’,style:’display:none; position:absolute’})
var contact_tDiv = Builder.node(‘div’, {id:’contactTransBackground’,style:’background-color:#FF0000; position:absolute’});
var contact_sDiv = Builder.node(‘div’, {id:’contactStatusMsg’,style:’position:absolute’});
contact_cDiv.appendChild(contact_tDiv);
contact_cDiv.appendChild(contact_sDiv);
document.body.appendChild(contact_cDiv);
Element.update($(contact_sDiv), “<table align=”center” border=”0″ cellpadding=”0″ height=”100%” valign=”middle” width=”100%”>” +
” <tr>” +
” <td><p id=”confirm_sent”>Test Message</p></td>” +
” </tr>” +
“</table>”);
Element.setStyle($(“confirm_sent”), {
color: “#000000”,
fontWeight: 900,
margin: “0px 0px 0px 0px”,
textAlign: “center”
});
Element.setOpacity(contact_sDiv, 1);
var mForm = $(‘mail’);
// window.alert(Element.getWidth(document.getElementsByName(“name”)[0])+”px”);
Element.setStyle(contact_cDiv, {
left: “10px”,
height: “500px”,
top: “10px”,
width: “500px”
});
Element.setStyle(contact_tDiv, {
height: “100%”,
width: “100%”
});
Element.setOpacity(contact_tDiv, 0.5);
Element.setStyle(contact_sDiv, {
height: “100%”,
width: “100%”
});
Effect.Appear(contact_cDiv, {duration:2.0, queue:’end’});
Effect.Fade(contact_cDiv, {duration:2.0, queue:’end’});
}
</script>
</head>
<body onload=”start()”>
</body>
</html>