i need some tweaking advice since i’m not familiar with javascript and jquery. i want to add a notification on top of my page when it loads. for example when i load my home page (index.html) i want the notification to appear.
the current example only pop up the notification when i click the button. i want it to appear when i load the page. can someone help me out? im kinda interested in this notification bar.
i got it from http://tympanus.net/Development/jbar/
my current code is like this (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery Plugin jBar</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
</head>
<body>
<div class="content">
<a id="msgup" class="button">Demo Top</a>
</div>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery.bar.js" type="text/javascript"></script>
<script>
$("#msgup").bar({
color : '#1E90FF',
background_color : '#FFFFFF',
removebutton : false,
message : 'Your profile customization has been saved!',
time : 4000
});
</script>
</body>
</html>
and the jquery.bar.js file :
(function($) {
$.fn.bar = function(options) {
var opts = $.extend({}, $.fn.bar.defaults, options);
return this.each(function() {
$this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
$this.click(function(e){
if(!$('.jbar').length){
timeout = setTimeout('$.fn.bar.removebar()',o.time);
var _message_span = $(document.createElement('span')).addClass('jbar-content').html(o.message);
_message_span.css({"color" : o.color});
var _wrap_bar;
(o.position == 'bottom') ?
_wrap_bar = $(document.createElement('div')).addClass('jbar jbar-bottom'):
_wrap_bar = $(document.createElement('div')).addClass('jbar jbar-top') ;
_wrap_bar.css({"background-color" : o.background_color});
if(o.removebutton){
var _remove_cross = $(document.createElement('a')).addClass('jbar-cross');
_remove_cross.click(function(e){$.fn.bar.removebar();})
}
else{
_wrap_bar.css({"cursor" : "pointer"});
_wrap_bar.click(function(e){$.fn.bar.removebar();})
}
_wrap_bar.append(_message_span).append(_remove_cross).hide().insertBefore($('.content')).fadeIn('fast');
}
})
});
};
var timeout;
$.fn.bar.removebar = function(txt) {
if($('.jbar').length){
clearTimeout(timeout);
$('.jbar').fadeOut('fast',function(){
$(this).remove();
});
}
};
$.fn.bar.defaults = {
background_color : '#FFFFFF',
color : '#000',
position : 'top',
removebutton : true,
time : 5000
};
})(jQuery);
Im certain the index.html is in need of change as to how it loads the notification. but i dont know what to edit. please help as i want to learn this.
The quick and dirty way would be to call
right after you do all of your
stuff.