I've created a simple Chrome/ium-style notification bar using jQuery and JavaScript. It's not perfect, but it's functional. The idea is to make it seem like it's part of the browser window, not the page. Notice how it pushes the page down but stays attached to the window when you scroll.
You can pass a message, action (URL), and (optionally) text for the Cancel and Continue buttons. Right now the CSS references an image from my server, but you can customize it to have whatever background image or color you want.
The "Cancel" button simply closes the notification, while the "Continue" button goes to whatever URL was passed to the function.
Click here to toggle the notification bar.
You can use the code below on your own site if you'd like. The JavaScript and CSS can either be inline on the page or linked as separate files. If you want to see exaclty how I've implemented it here, view the source of this page.
Simply call chromificationBar() via JavaScript. Make sure you pass at least the message and your action URL. An easy way to do this is with something like:
<a href="#" onClick="chromificationBar('Your message','http://example.com')">A Link</a>
View or Download chromificationBar.js
var chromificationBarShowing = 0;
function chromificationBar(message, action, cancelText, continueText){
/* Creates a Chrome/ium-like notification bar at the top of the page.
*
* Usage:
* chromificationBar(message, cancelText, continueText, )
*
* Where:
* 1. message (required) is the text to display on the bar,
* 2. action (required eventually) is the location to load when the Continue (right-most) button is clicked,
* 3. cancelText (optional) is the text to display on the Cancel (left-most) button (default "Cancel"), and
* 4. continueText (optional) is the text to display on the Continue (left-most) button (default "Continue").
*
* Notes:
* - Starting CSS is yet to be implemented.
* - Place the HTML right after the opening tag, before your wrapper (if any).
*/
if(chromificationBarShowing == 0){ //If the bar's hidden
globalAction = action;
if(cancelText){
$("#cancelButton").html(cancelText);
} else {
$("#cancelButton").html('Cancel');
}
if(continueText){
$("#continueButton").html(continueText);
} else {
$("#continueButton").html('Continue');
}
chromificationBarShowing = 1;
$("#chromificationBar .text").html(message);
$("#chromificationBar").animate({
display: "block",
height: "20px",
padding: "8px"
}, 100, "linear");
$("#chromificationBarHelper").animate({
display: "block",
height: "20px"
}, 100, "linear");
} else { //If the bar's showing
chromificationBarShowing = 0;
$("#chromificationBar").animate({
height: "0",
padding: "0"
}, 100, "linear");
$("#chromificationBar").hide();
$("#chromificationBarHelper").hide();
}
}
function continueButton(){
if(globalAction){
window.location = globalAction;
}
}
View or Download chromificationBar.css
#chromificationBar{
background-color:#dd4814;
background-image:url(http://ubuntu-guide.org/styles/images/header.png);
display:none;
height:0;
overflow:hidden;
position:fixed;
width:100%;
}
#chromificationBar .text{
color:#fff;
text-shadow:1px 1px 1px #000;
font-weight:bold;
}
#chromificationBar .button-container{
float:right;
height:30px;
margin-top:-5px;
margin-right:12px;
}
#chromificationBar button{
height:100%;
}
#chromificationBarHelper{
background-color:transparent;
display:none;
height:0;
padding:8px;
overflow:hidden;
}
Put this right after the opening <body> tag.
<div id="chromificationBar"> <span class="text"></span> <span class="button-container"> <button id="cancelButton" onClick="chromificationBar()"></button> <button id="continueButton" onClick="continueButton()"></button> </span> </div> <div id="chromificationBarHelper"> <span class="text"> </span> </div>