how to do a floater

[sallam]

Hi

PowWeb has a nice floatr little window in whih they announce their hosting offers.
How can that floater be done? is it a javascript?
Its interesting because its not considered a popup.
I'd appreciate any help in that regard. I need to do one for my website.

[Sietse]

The "window" is a div with absolute positioning. In your HTML, place the following:<div class="advertisement">
<p>This text will float on top of your other content.</p>
</div>
Now, put the following in your CSS file:.advertisement {
width: 20em; /* This window is 20 characters wide */
padding: 0.5em;
background-color: #fff; /* Make window non-transparent */
position: absolute; /* Fix div position on canvas */
top: 200px; /* Top position of window */
left: 30%; /* Left position of window */
border: 2px solid #f00;
/* The following lines make the window semi-transparent */
opacity: 0.9; /* Modern browsers */
filter: alpha(opacity=90); /* IE */
}
All this info can be found in the HTML and CSS sources of the PowWeb site, by the way.

[sallam]

Great! I didnt imagine it would be that easy!
Question: if I want to be able to control what's said in that floating window, from an external text or other sort of file, can you show me what code to use?
I ask because I want to do this in my forum, and use it as an announcement window, but I have lots of skins, so it would be much easier if I can just type the text once in a file, instead of editing all the skins' wrappers.

edit:
when trying the cade you gave me, it displays a transparent window, so its text conficts with the page text. How do I make it with a bockground color please?

[Sietse]

I revised the CSS code in my above post. This works nicely on Firefox and IE.

[tgoode]

heheh, lurking in the background, how about the part that closes the window ?
on powweb page it refers to javascript ?

[Sietse]

Closing the positioned div can only be done with JavaScript. Basically it's just a matter of replacing the class of the div with another that contains display: none.

Or, do this (horror!):<div class="advertisement" onclick="this.className='advertisement-hide';">
<p>Place ad here.</p>
</div>

[tgoode]

oooook, pardon the stupidity, got an example ?, or mabie a "timer function " to remove it?

[Sietse]

got an example ?
Was working on a quick edit, the example is now above your reply.

Last CSS resource:.advertisement-hide {
display: none;
}

[tgoode]

Just tried it and works grate, much thanks.
now i wonder if it would work inside of a "include" ?

[sallam]

yes it works great Sietse, thanks so much.
How can I make the ad float along the page, while scrolling. Currently its showing in a fixed place.

Also I'd appreciate a clue regarding how to use an external file to feed the html that would show in the ad, because my forum uses lots of skins.

[Skunkboy]

<!--#include virtual="/file.txt"-->
Assuming that file.txt is located at /www/u/username/htdocs/

[sallam]

I've managed to pull the html from an external javascript file.
named it floater.js:
document.write("type your text here, plain or formatted. Also any html (table, whatever..) code could be typed here. Just make sure when using any quotes to use only single not double quotes, to avoid confusing the javascript tag");
in web page's html code, add:
<div class="advertisement" onclick="this.className='advertisement-hide';"> <p><script type="text/javascript" src="URL_to_your_floater.js"></script></p></div>

and of course adding the 2 css rules, that Sietse gave us above, to our external css file
Now I can control the content of the floater windows in all skins by editing one external js file.