2005
Creating FireFox-styled Status Line with CSS
Sponsored Links
If you’re using FireFox, sometimes you’ll see a status message on the top of your currently opened page. That’s the status line. It contains important message related to the current browsing progress, for example, when a certain plugins is required and you don’t have it installed, or when a pop-up window is blocked automatically, or when the page trying to install something. In the right part of the status line, there’s a close button image, and when you click on it, the status line is gone. Cool, isn’t it? Now, let’s try to create the same status line effect in our website using CSS and JavaScript DOM.
- First off, add the following CSS code inside your document HEAD section (between <HEAD> and </HEAD> tag)
[css]
[/css]
- Below the above code, add the following JavaScript (still inside the HEAD section)
[js][/js] - Download this image and put it on your server.
(right click and choose “Save As”) - Now we’re ready
) If you want to display the status line, just add the following HTML code:
[html]
Put your message here
[/html]
It doesn’t matter where you put these code, it will automatically shifted into the top of the page.
The explanation is quite simple. We displayed the status line inside the DIV section where this DIV is positioned on the top left of the page (left: 0px and top: 0px) and full width (width: 100%). We also prepare a style-class for the close button image to float it on the right-side of the status line. With the JavaScript function, we handle the mouse click event by hiding the status line and restoring the document’s BODY padding style.
The sample result is below:
Have fun with CSS )
Creating FireFox-styled Status Line with CSS is written by cosa and posted under Web & Graphic Design , css, design, firefox, javascript. If you like it, you might consider subscribing to our feed, follows us on Twitter, or receive our latest posts via email. Or else, you could also or store it to your favourite social bookmark sites. Further information about this article can be found.
And while you're here, why don't you check out our other articles:
Pssst! Most people are coming to this page searching for: css status message,status message css,css status messages,css status line,status,css status,javascript status line,line with css,gadget computer status,creating a line in css,Computer Status gadgets,status messages css,firefox status message,create line in css,css suppress the status message,making a line with css,best status line,status line css,status message firefox,css + create line, 
