Posts Tagged web labs
Coming Soon - Premium WordPress Theme Giveaway To All Our Email Subscribers
Facebook like Beeper for Alerting Notifications Live
Posted by Praveen Gowda I V in Facebook, Jquery, Others, Tutorials, Web Design on December 11, 2011
Whenever you are online on Facebook and if there are any notifications then you would have noticed the small blue box on the left bottom alerting you the notification live, this is what Facebook calls as the beeper.
In this tutorial I am going to teach you to create such a beeper found on Facebook.
If you are still wondering on what beeper I am talking about, then look at the below image to know what we are going to create at the end of this tutorial
Bepper Found In Facebook
Notification Box In Facebook
We are going to use CSS and jQuery to create the notification box.
Check out the live demo or download the source code if you are in a hurry ( it is heavily commented) or else check how the code works below.
|
DOWNLOAD |
LIVE DEMO |
Now Let Us Look at the Source Code:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Live Demo Of Creating Facebook like Beeper Tutorial | http://blog.geotitles.com</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.facebookBeeper.js" type="text/javascript"></script>
</head>
<body>
<div align="center" class="main">
<p>This is the live demo of creating <strong><a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live">Facebook like Beeper Box</a></strong><a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live"> for Alerting Notification</a> on <strong><a href="http://blog.geotitles.com">Geo Web Station</a></strong><br /><br />
Click <strong><a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live">Here</a></strong> For The <strong><a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live">Tutorial Link</a></strong> To Have A Look At The <a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live">Tutorial </a>And Download The Source Code </p>
<p>
Click Below To Display Beeper
</p>
<a href="#" class="control" id="control">DISPLAY BEEPER</a>
</div>
<div id="BeeperBox" class="UIBeeper">
<div class="UIBeeper_Full">
<div class="Beeps">
<div class="UIBeep UIBeep_Top UIBeep_Bottom UIBeep_Selected" style="opacity: 1; ">
<!-- Below Is The Link To Which Bepper Will Point To (replace # with the required link) -->
<a class="UIBeep_NonIntentional" href="#">
<div class="UIBeep_Icon">
<i class="beeper_icon image2"></i>
</div>
<span class="beeper_x"> </span>
<div class="UIBeep_Title">
<span class="blueName">Praveen Gowda</span> likes your comment on <span class="blueName">Hitherto Web Labs</span>.
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
@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;
}
.main{
/* style for the div with control 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;
}
.control{
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;
}
.control: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);
}
.UIBeeper{
width:230px;
left:15px;
bottom:30px;
position:fixed;
z-index:99;
display:none;
}
.UIBeeper .UIBeeper_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;
}
.UIBeeper .UIBeeper_Full:hover{
/* change background color on mouseover */
background-color:#CAD1DE;
}
.UIBeeper .UIBeep_Bottom{
border-bottom:none;
}
.UIBeeper .UIBeep_Selected{
background:#CAD1DE;
}
.UIBeeper .UIBeep_Top{
padding-top:0;
}
.UIBeeper .UIBeep_Bottom{
padding-bottom:0;
}
.UIBeep{
background:#E1E6EE;
border-bottom:1px solid #BFCADE;
overflow:hidden;
padding:3px 0;
clear:right;
}
a, a:hover{
cursor:pointer;
color:#3B5998;
text-decoration:none;
}
.UIBeep .UIBeep_NonIntentional .UIBeep_Icon{
float:left;
width:20px;
height:20px;
text-align:center;
margin:5px 5px;
}
.UIBeep_Selected .UIBeep_Icon{
margin-right:2px;
}
.image2{
/* icon within the beeper */
background-image:url(images/like.png);
background-repeat:no-repeat;
display:inline-block;
height:16px;
width:16px;
}
.UIBeeper .UIBeep .UIBeep_NonIntentional .beeper_x{
/* close button */
float:right;
height:16px;
width:16px;
margin-top:6px;
background:url(images/close.gif) no-repeat;
visibility:hidden;
}
.UIBeep .beeper_x:hover{
/* close button on mouseover */
background:url(images/closehover.gif) no-repeat !important;
}
.UIBeep_Selected .beeper_x{
display:block !important;
visibility:visible !important;
margin-left:4px;
}
.UIBeep .UIBeep_NonIntentional .UIBeep_Title{
margin:0 20px 0 30px;
}
.UIBeep .UIBeep_Title{
padding:5px 0;
}
JavaScript
We use jQuery to:
- display the beeper on clicking on the button
- hide the beeper after five seconds
- prevent the hiding of beeper on mouseover
- hide the beeper after five seconds of mouseout
$(document).ready(function () {
// set the time for the beeper to be displayed as 5000 milli seconds (5 seconds)
var timerId, delay = 5000;
var a = $("#BeeperBox"),
b = $("a.control");;
//function to destroy the timeout
function stopHide() {
clearTimeout(timerId);
}
//function to display the beeper and hide it after 5 seconds
function showTip() {
a.show();
timerId = setTimeout(function () {
a.hide();
}, delay);
}
//function to hide the beeper after five seconds
function startHide() {
timerId = setTimeout(function () {
a.hide();
}, delay);
}
//display the beeper on cliking the "show beeper" button
b.click(showTip);
//Clear timeout to hide beeper on mouseover
//start timeout to hide beeper on mouseout
a.mouseenter(stopHide).mouseleave(startHide);
$('.beeper_x').click(function () {
//hide the beeper when the close button on the beeper is clicked
$("#BeeperBox").hide();
});
});
I believe that the Facebook Beeper is one of the most effective way to grab the attention of visitors to your website, and everyone is free to use our script any of your projects. Do let us know in what way this tutorial has helped you by commenting below:
Next Week we will be back with another interesting tutorial in the meanwhile stay updated with all our tutorials by :
Subscribing to RSS feeds
Subscribing by email
Subscribing by SMS(currently limited to Indian Users)
Want to request a new tutorial, then please Contact me right-away or leave a comment below.
I promise to respond to everyone who asks for support or new tutorials.
Tutorial on creating Google Plus Brand pages
Posted by Praveen Gowda I V in Articles, Google, Google Plus, Tutorials, Web Design on November 8, 2011
Google plus has rolled out its brand pages for Businesses, Products, Brands, Companies, bands, etc., and creating a page brings you closer to your customers, fans and followers on Google+. In this tutorial we are going to teach you the steps involved in creating a Google Plus brand pages. So lets go ahead and go through the different steps involved.
In this tutorial we will alongside create our Hitherto Web Labs fan page.
Step 1: Filling Up the Basic Info
Visit this link below to start with creating your Google+ Page
Start Creating your Google+ Page
Then select what category of page you want to create in the left hand side of the page as shown in the below figure
Step 1: Select Category
then fill up the Information page with the details of Page Name, Website (optional), Category and Page Visibility and agree to terms and conditions and then click the CREATE PAGE button.
Step 1: Fill in the Google Plus Page Information
Step 2: Customize your page’s public profile
In this page you can add more details to help people find your page
Please enter the TAGLINE (The 10 words that describe your page best) and upload a Profile Photo
Step 2: Enter Tagline for Your Google+ Page
Now click on Change Profile Photo button to upload a profile photo for your Google+ Page
After uploading the photo you can do actions like Rotating The Image or Cropping The Image, for more customizing option like playing with playing with colors, exposure, sharpness and other effects click on Creative Kit button.
Step 2: Customize Profile Photo
You can observe that the profile photo we have used is the one we have used for Facebook Page(We are still in the construction of a creative a Facebook Page for our blog) Profile Photo, hence we used the crop tool to crop the image.
After getting the right affect with the profile picture click on Set As Profile Photo button.
Click Continue.
Step 3: Tell everyone about your new page
Now Your Google Plus Brand Page is ready, Yes, In just three steps!!
Now Go ahead and share with everyone about your Google Plus Brand Page.
Step 3: Share Your Google+ Brand Page
Now your Google+ Brand Page is ready for your customers, fans and everyone…..
Take a look at the Google+ Brand Page we created for our blog and do add our page to your circles
Visit hitherto Web Labs on Google+
Do create your own Google+ pages and let us know by posting your comments belowr.
You can also add a badge to your own blog or website to advertise your Google+ brand pages as given below:
After you create the Fan page you will get the link to creating this type of badges, it is also stated that other badge designs are also coming soon.
Hope this tutorial was useful for you, Stay updated with all the tutorials of our blog by:
- Subscribing to RSS feeds
- Subscribing by email
- Subscribing by SMS(currently limited to Indian Users)
Want to request a new tutorial, then please Contact me right-away or leave a comment below.
We promise to respond to all tutorial requests
Creating The New Top Black Menu Bar Found in Google Search and all its Products
Posted by Praveen Gowda I V in Google Plus, Jquery, Others, Tutorials, Web Design on September 25, 2011
Google has come up with a new look with the launch of Google Plus and one of the prominent changes we can observe is the black menu bar found on the top of Google Search Page and every other Google product like Google Plus(obviously), Google reader, etc. Almost every Google product by now has been integrated with the top black menu bar.
Introducing this menu bar looks like a move by Google to integrate Google Plus with all other Google products.
I thought it would be a great idea to make a tutorial on how to create this black menu bar using simple jQuery and CSS.
Some of the features we are going to cover in this tutorial of making Top Menu Bar found in Google products is :
- Creating the red ribbon like effect for the current page
- creating the drop down menu when more button is clicked
- keeping the bar fixed even when the rest of the page is scrolled
- Styling the elements of the menu exactly to those found on Google
Top Menu Bar Found in Google+
|
DOWNLOAD |
LIVE DEMO |
HTML
| Source Code Of index.html |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Creating Google Plus Top Black Menu Bar Live Demo | http://blog.geotitles.com</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.google_menu.js"></script>
<link rel="stylesheet" type="text/css" href="google_menu.css"/>
<script>
$('document').ready(function(){
$('.menu').fixedMenu();
});
</script>
</head>
<body>
<div class="menu">
<ul>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
<a target="_blank" href="http://plus.google.com">+You</a>
</li>
<!-- Using class="current" for the link of the current page -->
<li class="current">
<a target="_blank" href="http://www.google.co.in/">Web</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
<a target="_blank" href="http://orkut.com">Orkut</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
<a target="_blank" href="http://gmail.com">Gmail</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
<a target="_blank" href="https://www.google.com/calendar">Calendar</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
<a target="_blank" href="https://docs.google.com">Documents</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
<a target="_blank" href="http://picasaweb.google.co.in/home">Photos</a>
</li>
<li><!-- Do not add any class for links with dropdown -->
<a href="#">More<span class="arrow"></span></a>
<!-- Drop Down menu Items -->
<ul>
<li><a href="http://www.google.co.in/reader">Reader</a></li>
<li><a href="https://sites.google.com">Sites</a></li>
<li><a href="http://groups.google.co.in">Groups</a></li>
<li><a href="http://www.youtube.com">YouTube</a></li>
<li>
<div class="mid-line">
</div>
</li>
<li><a href="http://www.google.co.in/imghp?hl=en&tab=wi">Images</a></li>
<li><a href="http://maps.google.co.in/maps?hl=en&tab=wl">Maps</a></li>
<li><a href="http://translate.google.co.in/">Translate</a></li>
<li><a href="http://books.google.co.in">Books</a></li>
<li><a href="http://scholar.google.co.in/">Scholar</a></li>
<li><a href="http://blogsearch.google.co.in">Blogs</a></li>
<li>
<div class="mid-line">
</div>
</li>
<li><a href="http://www.google.co.in/intl/en/options/">even more >></a></li>
<li>
<div class="mid-line">
</div>
</li>
</ul>
</li>
</ul>
</div>
<div align="center">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<h2>THIS IS THE LIVE DEMO OF CREATING GOOGLE LIKE TOP BLACK MENU BAR TUTORIAL AT <a href="http://blog.geotitles.com">HITHERTO WEB LABS</a></h2>
<h2> </h2>
<h2>CLICK HERE TO GO TO THE TUTORIAL LINK TO DOWNLOAD THE SOURCE CODE</h2>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</body>
</html>
CSS
| Source Code Of google_menu.css |
body{
padding:0;
margin:0;
}
.menu{
position:fixed;
top:0;
left:0;
width:100%;
font:13px/27px Arial,sans-serif;
color:#3366cc;
height:30px;
background:#2D2D2D;
}
.menu a:hover{
background-color:#676767;
color:#CCCCCC;
}
.menu a{
text-decoration:none;
padding:6px 8px 7px;
color:#CCCCCC;
outline:none;
}
.menu ul{
list-style:none;
margin:0;
padding:0 0 0 10px;
}
.menu ul li{
padding:0;
float:left;
}
.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
}
.menu ul li ul{
position:absolute;
border:1px solid #C3D1EC;
/*box-shadow*/
-webkit-box-shadow:0 1px 5px #CCCCCC;
-moz-box-shadow:0 1px 5px #CCCCCC;
box-shadow:0 1px 5px #CCCCCC;
margin-top:-1px;
display:none;
padding:0px 16px 0px 0;
}
.active ul{
display:block !important;
}
.single ul{
display:block !important;
}
.active a{
background-color:white;
border:1px solid #C3D1EC;
border-bottom:0;
/*box-shadow*/
-webkit-box-shadow:0 -1px 5px #CCCCCC;
-moz-box-shadow:0 -1px 5px #CCCCCC;
box-shadow:0 -1px 5px #CCCCCC;
display:block;
height:29px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#3366CC;
}
/*Styling for the link of the current page*/
.current a{
background-color:#2D2D2D;
border-top:2px solid #DD4B39;/*red ribbon at top*/
border-bottom:0;
display:block;
height:25px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#FFFFFF;
font-weight:bold;
}
.active a:hover{
background-color:white;
color:#3366CC;
}
.active ul a:hover{
background-color:#e4ebf8;
}
.active ul a{
border:0 !important;
/*box-shadow*/
-webkit-box-shadow:0 0 0 #CCCCCC;
-moz-box-shadow:0 0 0 #CCCCCC;
box-shadow:0 0 0 #CCCCCC;
border:0;
width:100%;
}
.arrow{
border-color:#C0C0C0 transparent white;
border-style:solid dashed dashed;
margin-left:5px;
position:relative;
top:10px;
}
.mid-line{
background-color:#FFF;
border-top:1px solid #e5e5e5;
font-size:0;
}
Javascript
| Source Code Of jquery.google_menu.js |
$(function ($) {
$.fn.fixedMenu = function () {
return this.each(function () {
var menu = $(this);
//close dropdown when clicked anywhere else on the document
$("html").click(function () {
menu.find('.active').removeClass('active');
});
menu.find('ul li > a').bind('click', function (event) {
event.stopPropagation();
//check whether the particular link has a dropdown
if (!$(this).parent().hasClass('single-link') && !$(this).parent().hasClass('current')) {
//hiding drop down menu when it is clicked again
if ($(this).parent().hasClass('active')) {
$(this).parent().removeClass('active');
} else {
//displaying the drop down menu
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active');
}
} else {
//hiding the drop down menu when some other link is clicked
$(this).parent().parent().find('.active').removeClass('active');
}
})
});
}
})(jQuery);
Hope this tutorial helped you, next week we will be back with another interesting tutorial, until then stay updated with our blog by:
- Subscribing to RSS feeds
- Subscribing by email
- Subscribing by SMS(currently limited to Indian Users)
Want to request a new tutorial, then please Contact me right-away.
I promise to respond to everyone who contacts asking for support or new tutorials.
Copyright protected by Digiprove © 2011 Praveen Gowda I V
Recent Comments