Forum Moderators: open

Message Too Old, No Replies

Flash Floating pop ups

         

macz_g

5:02 pm on Oct 8, 2005 (gmt 0)

10+ Year Member



Does anybody know how of a good tutorial or how to create the flash pop ups that float on top of the base page?

I have seen them on a few sites and they just "float" down the screen on the index page and have their own close button.

Any ideas

Longhaired Genius

5:12 pm on Oct 8, 2005 (gmt 0)

10+ Year Member



Today, I turned off flash in my browser. I think more and more people will be doing that as flash ads get more and more irritating.

macz_g

5:20 pm on Oct 8, 2005 (gmt 0)

10+ Year Member



It is a university club site that I am working on and not a commercial site. They want to promote club events as they come up.

whoisgregg

11:10 pm on Oct 12, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It's actually got nothing to do with flash, just some javascript and CSS and you are all set. Where this example code has a broken image, just paste in your flash code. :)

Really, this code is a decent base for any kind of javascript animation project. The basis for the code shown below is available from Apple [developer.apple.com].

<script>
var timeout;
function appear(){
var the_style = getStyle("floatingFlash");
if (the_style) {
var current_top = parseInt(the_style.top);
var new_top = current_top + 5;
if (document.layers) {
the_style.top = new_top;
} else {
the_style.top = new_top + "px";
}
if (new_top < 150) {
the_timeout = setTimeout('appear();',10);
}
}
} // appear
function disappear() {
var the_style = getStyle("floatingFlash");
the_style.display = 'none';
} // disappear
function getStyle(ref) {
if(document.getElementById && document.getElementById(ref)) {
return document.getElementById(ref).style;
} else if (document.all && document.all(ref)) {
return document.all(ref).style;
} else if (document.layers && document.layers[ref]) {
return document.layers[ref];
} else {
return false;
}
} // getStyle
</script>
<style>
#floatingFlash {
position:absolute;
border:1px solid red;
background:white;
}
</style>
<body onload="appear();">
<div id="floatingFlash" style="top:-400px;left:-150px;margin-left:50%;">
<a href="javascript:disappear();">X</a>
<img src="/example.gif" style="width:300px;height:240px;" />
</div>
</body>