Facebook style notification using jquery

In this post i will describe the facebook style notification, that looks nice cross browser seems tricky.

For example, different browsers seem to treat paddings differently, resulting in weird looking notifications. I have used HTML, CSS and Jquery for Facebook Notification application.

Html Code

<body>
<div style="background-color:#f2f2f2;">
<a style="float:left;" href="https://www.freewebmentor.com"><img src="images/logo.png"/></a>
<a style="float:right;margin:20px 50px 0 0;" href="http://freewebmentor.com/2014/05/facebook-style-notification-using-jquery.html"><h2>Tutorial Link for facebook beeper - The activity notifier</h2></a>
<div style="clear:both;">.</div>
</div>
<div align="center" >
<h1>Live Demo | facebook like notification using jQuery and CSS</h1>
<h4>In Facebook style notification there is a update entry in the updates table, it triggers the alert notification plugin using jQuery. In our case we will trigger it manually. Click on Get Notification Button bellow.</h4>
</div>
<div align="center" class="main">
	<a href="#" class="notify" id="notify">Get Notification</a>
</div>
<div id="beeperContainer"></div>

</body>

<body>

<a style="float:right;margin:20px 50px 0 0;" href="http://freewebmentor.com/2014/05/facebook-style-notification-using-jquery.html"><h2>Tutorial Link for facebook beeper - The activity notifier</h2></a>

</div>

<h1>Live Demo | facebook like notification using jQuery and CSS</h1>

<h4>In Facebook style notification there is a update entry in the updates table, it triggers the alert notification plugin using jQuery. In our case we will trigger it manually. Click on Get Notification Button bellow.</h4>

</div>

<a href="#" class="notify" id="notify">Get Notification</a>

</div>

</body>

Jquery Code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function($){
Beeper = $('#beeperContainer')
Beeper.setBeeper()
$('.notify').click(function(){
Beeper.callBeeper('<div id="NotificationBox" class="UINotification"><div class="UINotification_Full"><div class="Notis"><div class="UINoti UINoti_Top UINoti_Bottom UINoti_Selected" style="opacity: 1; "><a class="UINoti_NonIntentional" href="#"><div class="UINoti_Icon"><i class="Notification_icon image2"></i></div><span class="Notification_x">&nbsp;</span><div class="UINoti_Title"><span class="NotiContent">Ipsita Sahoo</span> added a new photo to the album <span class="NotiContent">Chilling Out</span>.</div></a></div></div></div></div>');
return false;
});
});
(function($){
$.fn.setBeeper = function( time ){
var el = $(this)
time = (time===undefined) ? 5000 : time;
el  .data('hover',false)
.data('time',time)
.find('div')
.live('mouseover',function(){
el.data('hover',true)
$(this).show()
clearTimeout( $(this).data('timeout') )
}).live('mouseout', function(){
el.data('hover',false)
var a = setTimeout(function(){
$(this).animate({'opacity':'hide','height':'hide'},'fast',
	function(){
	el.find('div:hidden').remove()
	})
},el.data('time'))
$(this).data('timeout',a)
})
el.find('span.Notification_x').live('click',function(e){
$(e.target).parent().parent().parent().parent().remove()
return false
})
return el
}
$.fn.callBeeper = function callBeeper(msg){
var el = $(this)
msg = (typeof msg != 'object') ? new Array(msg) : msg;
$.each(msg,function(i,m){

el.prepend('<div>'+m+'</div>')
.find('div:first').css({'position':'relative','display':'none'})
.animate({'opacity':'show','height':'show'},'slow')
var a = setTimeout(function(){
if(!el.data('hover'))
el.find('div:first').animate({'opacity':'hide','height':'hide'},'fast',
	function(){
	el.find('div:hidden').remove()
	})
},el.data('time'))
$(this).data('timeout',a)
})
return el
}       
})(jQuery);
</script>

jQuery(document).ready(function($){

Beeper = $('#beeperContainer')

Beeper.setBeeper()

$('.notify').click(function(){

Beeper.callBeeper('<div id="NotificationBox" class="UINotification"><div class="UINotification_Full"><div class="Notis"><div class="UINoti UINoti_Top UINoti_Bottom UINoti_Selected" style="opacity: 1; "><a class="UINoti_NonIntentional" href="#"><div class="UINoti_Icon"><i class="Notification_icon image2"></i></div><span class="Notification_x"> </span><div class="UINoti_Title"><span class="NotiContent">Ipsita Sahoo</span> added a new photo to the album <span class="NotiContent">Chilling Out</span>.</div></a></div></div></div></div>');

return false;

});

(function($){

$.fn.setBeeper = function( time ){

var el = $(this)

time = (time===undefined) ? 5000 : time;

el .data('hover',false)

.data('time',time)

.find('div')

.live('mouseover',function(){

el.data('hover',true)

$(this).show()

clearTimeout( $(this).data('timeout') )

}).live('mouseout', function(){

el.data('hover',false)

var a = setTimeout(function(){

$(this).animate({'opacity':'hide','height':'hide'},'fast',

function(){

el.find('div:hidden').remove()

})

},el.data('time'))

$(this).data('timeout',a)

})

el.find('span.Notification_x').live('click',function(e){

$(e.target).parent().parent().parent().parent().remove()

return false

})

return el

}

$.fn.callBeeper = function callBeeper(msg){

var el = $(this)

msg = (typeof msg != 'object') ? new Array(msg) : msg;

$.each(msg,function(i,m){

el.prepend('<div>'+m+'</div>')

.find('div:first').css({'position':'relative','display':'none'})

.animate({'opacity':'show','height':'show'},'slow')

var a = setTimeout(function(){

if(!el.data('hover'))

el.find('div:first').animate({'opacity':'hide','height':'hide'},'fast',

function(){

el.find('div:hidden').remove()

})

},el.data('time'))

$(this).data('timeout',a)

})

return el

}

})(jQuery);

</script>

CSS Code

@charset "utf-8";
body{
/* body*/
font-size: 11px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
color: #333;
line-height: 1.28;
text-align: left;
direction: ltr;
}
.top{
/* style for the div with notify button*/
font-size:15px;
background-color:#f2f2f2;
margin:3px auto;
height:80%;
padding:15px;
font-weight:normal;
/*border-radius*/
-webkit-border-radius:15px;
   -moz-border-radius:15px;
        border-radius:15px;

border:1px solid #E5E5E5;
/*box-shadow*/
-webkit-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
   -moz-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
        box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
}
.main{
/* style for the div with notify button*/
font-size:15px;
width:670px;
margin:30px auto;
height:80%;
padding:15px;
font-weight:normal;
/*border-radius*/
-webkit-border-radius:15px;
   -moz-border-radius:15px;
        border-radius:15px;
background:white;
border:1px solid #E5E5E5;
/*box-shadow*/
-webkit-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
   -moz-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
        box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
}
.notify{
color:#666;
width:150px;
font:bold 75% arial,sans-serif;
text-decoration:none;
padding:10px 10px 10px 10px;
display:inline-block;
text-align:center;
/*Background*/
background:#f3f3f3;
background:-webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
/*linear-gradient*/
background:-webkit-gradient(linear,left top,left bottom,from(from(#F5F5F5)),to(to(#F1F1F1)));
/*@@prefixmycss->No equivalent*/
background:-webkit-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background:   -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background:     -o-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background:        linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
border:solid 1px #dcdcdc;
/*border-radius*/
-webkit-border-radius:2px;
   -moz-border-radius:2px;
        border-radius:2px;
margin:25px auto;
}
.notify:hover{
color:#333;
border-color:#999;
/*box-shadow*/
-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.2) -webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);
   -moz-box-shadow:   0 2px 0 rgba(0,0,0,0.2) -moz-box-shadow:0 2px 5px rgba(0,0,0,0.2);
        box-shadow:        0 2px 0 rgba(0,0,0,0.2) box-shadow:0 2px 5px rgba(0,0,0,0.2);
}
.image2{
/* icon within the Notification */
background-image:url(images/like.png);
background-repeat:no-repeat;
display:inline-block;
height:16px;
width:16px;
}
.UINotification{
width:230px;
left:15px;
bottom:30px;
z-index:99;
}
.UINoti{
background:#E1E6EE;
border-bottom:1px solid #BFCADE;
overflow:hidden;
padding:3px 0;
clear:right;
}
.UINotification .UINotification_Full{
background-color:#E1E6EE;
border:1px solid #99A8C7;
/*border-radius*/
-webkit-border-radius:3px;
   -moz-border-radius:3px;
        border-radius:3px;
margin:0;
padding:3px;
}
.UINotification .UINotification_Full:hover{
/* change background color on mouseover */
background-color:#CAD1DE;
}
.UINotification .UINoti_Bottom{
border-bottom:none;
}
.UINotification .UINoti_Selected{
background:#CAD1DE;
}
.UINotification .UINoti_Top{
padding-top:0;
}
.UINotification .UINoti_Bottom{
padding-bottom:0;
}

a, a:hover{
cursor:pointer;
color:#3B5998;
text-decoration:none;
}
.UINoti .UINoti_NonIntentional .UINoti_Icon{
float:left;
width:20px;
height:20px;
text-align:center;
margin:5px 5px;
}
.UINoti_Selected .UINoti_Icon{
margin-right:2px;
}

.UINotification .UINoti .UINoti_NonIntentional .Notification_x{
/* close button */
float:right;
height:16px;
width:16px;
margin-top:6px;
background:url(images/close.gif) no-repeat;
/*visibility:hidden;*/
}
.UINoti .Notification_x:hover{
/* close button on mouseover */
background:url(images/closehover.gif) no-repeat !important;
}
.UINoti_Selected .Notification_x{
display:block !important;
visibility:visible !important;
margin-left:4px;
}
.UINoti .UINoti_NonIntentional .UINoti_Title{
margin:0 20px 0 30px;
}
.UINoti .UINoti_Title{
padding:5px 0;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

@charset "utf-8";

body{

/* body*/

font-size: 11px;

font-family: "lucida grande",tahoma,verdana,arial,sans-serif;

color: #333;

line-height: 1.28;

text-align: left;

direction: ltr;

}

.top{

/* style for the div with notify button*/

font-size:15px;

background-color:#f2f2f2;

margin:3px auto;

height:80%;

padding:15px;

font-weight:normal;

/*border-radius*/

-webkit-border-radius:15px;

-moz-border-radius:15px;

border-radius:15px;

border:1px solid #E5E5E5;

/*box-shadow*/

-webkit-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;

-moz-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;

box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;

}

.main{

/* style for the div with notify button*/

font-size:15px;

width:670px;

margin:30px auto;

height:80%;

padding:15px;

font-weight:normal;

/*border-radius*/

-webkit-border-radius:15px;

-moz-border-radius:15px;

border-radius:15px;

background:white;

border:1px solid #E5E5E5;

/*box-shadow*/

-webkit-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;

-moz-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;

box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;

}

.notify{

color:#666;

width:150px;

font:bold 75% arial,sans-serif;

text-decoration:none;

padding:10px 10px 10px 10px;

display:inline-block;

text-align:center;

/*Background*/

background:#f3f3f3;

background:-webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));

/*linear-gradient*/

background:-webkit-gradient(linear,left top,left bottom,from(from(#F5F5F5)),to(to(#F1F1F1)));

/*@@prefixmycss->No equivalent*/

background:-webkit-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));

background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));

background: -o-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));

background: linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));

border:solid 1px #dcdcdc;

/*border-radius*/

-webkit-border-radius:2px;

-moz-border-radius:2px;

border-radius:2px;

margin:25px auto;

}

.notify:hover{

color:#333;

border-color:#999;

/*box-shadow*/

-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.2) -webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);

-moz-box-shadow: 0 2px 0 rgba(0,0,0,0.2) -moz-box-shadow:0 2px 5px rgba(0,0,0,0.2);

box-shadow: 0 2px 0 rgba(0,0,0,0.2) box-shadow:0 2px 5px rgba(0,0,0,0.2);

}

.image2{

/* icon within the Notification */

background-image:url(images/like.png);

background-repeat:no-repeat;

display:inline-block;

height:16px;

width:16px;

}

.UINotification{

width:230px;

left:15px;

bottom:30px;

z-index:99;

}

.UINoti{

background:#E1E6EE;

border-bottom:1px solid #BFCADE;

overflow:hidden;

padding:3px 0;

clear:right;

}

.UINotification .UINotification_Full{

background-color:#E1E6EE;

border:1px solid #99A8C7;

/*border-radius*/

-webkit-border-radius:3px;

-moz-border-radius:3px;

border-radius:3px;

margin:0;

padding:3px;

}

.UINotification .UINotification_Full:hover{

/* change background color on mouseover */

background-color:#CAD1DE;

}

.UINotification .UINoti_Bottom{

border-bottom:none;

}

.UINotification .UINoti_Selected{

background:#CAD1DE;

}

.UINotification .UINoti_Top{

padding-top:0;

}

.UINotification .UINoti_Bottom{

padding-bottom:0;

}

a, a:hover{

cursor:pointer;

color:#3B5998;

text-decoration:none;

}

.UINoti .UINoti_NonIntentional .UINoti_Icon{

float:left;

width:20px;

height:20px;

text-align:center;

margin:5px 5px;

}

.UINoti_Selected .UINoti_Icon{

margin-right:2px;

}

.UINotification .UINoti .UINoti_NonIntentional .Notification_x{

/* close button */

float:right;

height:16px;

width:16px;

margin-top:6px;

background:url(images/close.gif) no-repeat;

/*visibility:hidden;*/

}

.UINoti .Notification_x:hover{

/* close button on mouseover */

background:url(images/closehover.gif) no-repeat !important;

}

.UINoti_Selected .Notification_x{

display:block !important;

visibility:visible !important;

margin-left:4px;

}

.UINoti .UINoti_NonIntentional .UINoti_Title{

margin:0 20px 0 30px;

}

.UINoti .UINoti_Title{

padding:5px 0;

}

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

Facebook style notification using jquery

Html Code

Recommended Posts:

webmentor