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!

  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Dialog DIV with Transition Effects 2

Status
Not open for further replies.

BoulderBum

Programmer
Jul 11, 2002
2,179
US
I want to make sort of a pop-up dialog using transition effects, but I'm not sure how to do it.

Basically it will be like an alert() where it displays a message to the user, except it will fade in and out automatically.

Anyone know how to set that up?
 
Hmm, I'm not sure what you're after...However, I sloppily pieced this together, only works in IE:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<script type='text/javascript'>
function fadeIn(obj,tO)
{
if (obj.style.filter) 
	{
	if (obj.style.filter == "alpha(opacity=100)")
		{
		clearTimeout(tO);
		}
	obj.style.filter = "alpha(opacity="+(parseInt(obj.style.filter.split('=')[1].split(')')[0])+10)+")";
	}
else 	{alert ('Filters not supported');clearTimeout(tO);}
	}
function fadeOut(objz) 
{
obj = objz;
fTO = setInterval("obj.style.filter = \"alpha(opacity=\"+(parseInt(obj.style.filter.split('=')[1].split(')')[0])-10)+\")\"",75);
setTimeout("clearTimeout(fTO)",1000);
}
function fakeAlert(msg)
{
d = document.getElementById('aDiv');
d.style.display = 'block';
d.style.width = "200px";
d.style.height = "100px";
d.style.top = 10; //position the "alert"
d.style.left = 10; //position the "alert" again
d.getElementsByTagName("TD")[0].firstChild.data = msg;
fadeInt = setInterval("fadeIn(d,fadeInt)",50);
setTimeout("fadeOut(d)",2000);
}
</script>
<style type='text/css'>
#aDiv {
	height:0px;
	width:0px;
	filter:alpha(opacity=0);
	opacity:.0;
	font-family:tahoma,serif;
	font-size:11px;
	background-Color:#c0c0c0;
	position:absolute;
	left:0;
	top:0;
	z-index:50;
	}
</style>
<title>Fading thing</title>
</head>
<body>
<div><button onClick='fakeAlert("Alert!")'>Popup an Alert</button></div>
<div id='aDiv' style="filter:alpha(opacity=0)"><table style="width:100%;height:100%;"><TR><TD valign='middle' align='center' id='msgTd'>he</td></tr></table></div>
</body>
</html>

hope that helps

"It is the mark of an educated mind to be able to entertain a thought without accepting it." - Aristotle
 
Works great! The only bad thing is that it gets displayed under select boxes unless I use an iFrame instead of a div, and then (when it fades) the iFrame doesn't fully disappear (a white outline remains) and I can't get to the controls under it.

I'll have to dig into working that out, but in the meantime star for you! Thanks!
 
End the fade sequence with obj.style.display = 'none' and begin it with obj.style.display = 'block' (or alternatively obj.style.visibility = 'hidden' and obj.style.visibility = 'visible') to have the object disappear from the rendering (to be able to acquire the controls it obscures). The text/select box problem for any inline layer rendering is an endemic one for IE browsers (only) - I am not aware of any fix for this, and the typical workaround is simply to make sure that the layer doesn't overlay any controls which show up the effect.
 
I tried the hidden thing before and it didn't seem to fix the problem, but I'll definately give the style.display a whirl.

I know it's possible to do this because I've seen menus do it before so it's driving me nuts trying to figure out how it's done
 
Oh yeah, and the reason I'm worried about it is because I want the dialog to pop up in the middle of a data entry form on several pages that contain select boxes in random places. It sucks, but I'm afraid I have to find a way to use the iFrame solution. :-(
 
After further experimentation, I discovered both the display and visibility stuff worked great, I just must have been calling the visibility change in the wrong spot before.

The iFrame did the trick as far as getting on top of the select box, now I just need to play around with iFrames a little more to figure out the best way to get text into it.

Thanks again, guys!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top