Skip to content

Instantly share code, notes, and snippets.

@lu1s
Created July 7, 2011 00:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lu1s/1068647 to your computer and use it in GitHub Desktop.
Save lu1s/1068647 to your computer and use it in GitHub Desktop.
jQuery Message Bar
/*
* jQuery Message Bar
* @author Luis Pulido <luis@luispulido.com>
* @params:
* what: String, the message to be displayed
* time (optional): Number, the time in milliseconds the bar will
* stay displaying. Default is 2000 ms
* opts (optional): Object, some optional values to customize the bar:
* - height: default 20px
* - fontSize: default 14px
* - background: default #2d2d2d
* - color: default #ff4a00
*
* Required the jQuery Library (found at code.jquery.com)
*
*
*/
var message = function(what,time,opts){
if($("#message").length == 0){
var w = $("<div/>").css({
position: "fixed",
top: "0px",
left: "0px",
width: "100%",
height: (opts.height ? opts.height : "20px"),
fontSize: (opts.fontSize ? opts.fontSize : "14px"),
textAlign: "center",
background: (opts.background ? opts.background : "#2D2D2D"),
color: (opts.color ? opts.color : "#FF4A00"),
fontWeight: "800",
padding: "10px",
display: "none"
}).attr("id","message")
$("body").append(w);
}
else if(opts){
opts.height ? $("#message").css({height:opts.height}) : null
opts.fontSize ? $("#message").css({fontSize:opts.fontSize}) : null
opts.background ? $("#message").css({background:opts.background}) : null
opts.color ? $("#message").css({color:opts.color}) : null
}
$("#message").html(what).slideDown()
window.setTimeout(function(){
$("#message").slideUp()
},(time ? time : 2000))
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment