Facebook style notification using jquery

Prem Tiwari - December 7, 2016 - Facebook, JavaScript

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>

<a style="float:right;margin:20px 50px 0 0;" href="https://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

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

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

170

@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;

}

About: Prem Tiwari

Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari

Tags: Facebook, facebook notification using jquery, facebook style notification, facebook style notification message, Jquery

Facebook style notification using jquery

Html Code

Share this post:

Related Tutorials

About: Prem Tiwari

Over 20,000+ Readers

Popular Categories

Programs With Output