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.
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 dynamically creating PDF file in websites using PHP
Posted by Praveen Gowda I V in Others, PHP, Tutorials, Web Design on September 10, 2011
There are many circumstances we come across where we need to create PDF files in our websites dynamically(like creating a PDF file from fetching data from a MySQL database or an external text file).But many don’t have any idea on how to create such PDF files, so I thought it will be a great idea to do a tutorial on this since there aren’t many tutorials on this topic on the web.
When it comes to creating dynamic PDF files in websites, there are two PHP classes available, They are
- TCPDF
- FPDF
What is TCPDF ?
TCPDF is a FLOSS PHP class for generating PDF documents.Started in 2002, TCPDF is now one of the world’s most active Open Source projects, used daily by millions of users and included in thousands of CMS and Web applications.You can generate PDF files for almost any application using TCPDF.
What is FPDF ?
FPDF is a PHP class which allows to generate PDF files with pure PHP, that is to say without using the PDFlib library. F from FPDF stands for Free: you may use it for any kind of usage and modify it to suit your needs.FPDF requires no extension (except zlib to activate compression and GD for GIF support). It works with PHP 4 and PHP 5 (the latest version requires at least PHP 4.3.10).
- no external libraries are required for the basic functions;

- all standard page formats, custom page formats, custom margins and units of measure;
- UTF-8 Unicode and Right-To-Left languages;
- TrueTypeUnicode, OpenTypeUnicode, TrueType, OpenType, Type1 and CID-0 fonts;
- font subsetting;
- methods to publish some XHTML + CSS code, JavaScript and Forms;
- images, graphic (geometric figures) and transformation methods;
- supports JPEG, PNG and SVG images natively, all images supported by GD (GD, GD2, GD2PART, GIF, JPEG, PNG, BMP, XBM, XPM) and all images supported via ImagMagick (http: www.imagemagick.org/www/formats.html)
- 1D and 2D barcodes: CODE 39, ANSI MH10.8M-1983, USD-3, 3 of 9, CODE 93, USS-93, Standard 2 of 5, Interleaved 2 of 5, CODE 128 A/B/C, 2 and 5 Digits UPC-Based Extention, EAN 8, EAN 13, UPC-A, UPC-E, MSI, POSTNET, PLANET, RMS4CC (Royal Mail 4-state Customer Code), CBC (Customer Bar Code), KIX (Klant index – Customer index), Intelligent Mail Barcode, Onecode, USPS-B-3200, CODABAR, CODE 11, PHARMACODE, PHARMACODE TWO-TRACKS, QR-Code, PDF417;
- Grayscale, RGB, CMYK, Spot Colors and Transparencies;
- automatic page header and footer management;
- document encryption up to 256 bit and digital signature certifications;
- transactions to UNDO commands;
- PDF annotations, including links, text and file attachments;
- text rendering modes (fill, stroke and clipping);
- multiple columns mode;
- no-write page regions;
- bookmarks and table of content;
- text hyphenation;
- text stretching and spacing (tracking/kerning);
- automatic page break, line break and text alignments including justification;
- automatic page numbering and page groups;
- move and delete pages;
- page compression (requires php-zlib extension);
- XOBject templates;

Dynamically Creating TCPDF files in websites using TCPDF
The live demo is hosted on our website and has been presented in a friendly layout which would easily let you understand how the code works.
If you need any support regarding this tutorial, then please leave your comment below and we will definitely respond to your question with a suitable solution.
TCPDF PHP class can be used to create almost any type of PDF file for all your purposes, but sometimes it is slight tricky to customize the script for our needs, if you ever run against any obstacles then please let us know and we will definitely help you.
Next week we will back with another unique and interesting tutorial in the meanwhile stay updated with all the tutorials at Geo Web Station by :
If you have any problems using the downloaded files, then leave a comment below.
Want more improvisations on this script ?, or 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.
3 Copies Of Standard WordPress Theme Giveaway From Themefuse
Posted by Praveen Gowda I V in Articles, General, Giveaways, Web Design on March 6, 2012
Themefuse who are known for their Stunning Original WordPress Themes have agreed to giveaway 3 copies of their Standard WordPress Themes to three lucky readers of our blog.
Themefuse offers stunning WordPress themes which would suit everyone’s need and If lucky you could go away with a standard theme license and you will have the option to choose any of their theme from their theme shop.
Below are a some of our favorites from each category, visit themefuse to browse through all of their themes.
VIDEOGRID
Showcase your lifetime work or blog like you never blogged before with this insanely great multimedia WordPress theme.
Sportedge
The versatile SportEdge Magazine is the best Sport WordPress theme we could have come up with, that’s a given! See for yourself.
Medica
Probably the best WordPress theme when it comes to Doctor’s websites, Health Clinics, Dentist’s Offices or anything medical related.
Writer
Writer has all it takes to be a really great option for bloggers that want a stylish and premium look for their personal WordPress blog.
Brand Crafters
The ultimate corporate WordPress theme that will guarantee to make your business website stand out from the crowd.
MobilityApp
A theme best suited for smartphone developers that need to promote their iPad, iPhone or Android mobile applications.
Qlassik
Be it your corporate business website or your personal web design portfolio, Qlassik will definitely deliver in both situations and more.
Lifestyle
An online magazine oriented WP theme that also fits perfectly as a news, fashion or even a celebrity & gossip blog.
Welcome Inn
If you need a hotel oriented wp theme, you have to try our latest project. It comes in 2 additional flavors: ski resort and spa. Enjoy!
Freshfolio
An original, awesome and efficient way for showcasing photography, design, illustration portfolios’ or even paintings and art.
Envision
Try our most complex wp theme to date. It has shortcodes, 5 different sliders and a bunch of awesome features. You name it, we’ve got it!
WebStudio
This theme can be used to showcase photography, illustration, design, paintings or art, in a simple, awesome and efficient way.
Exquisite Works
WP theme designed for someone who needs a classy and stylish presence on the web for their corporate website.
Clean Classy Corporate
Be it web products, cloud computing or SaaS, C3 has a clean corporate feel to it which caters to the new breed of web entrepreneurs.
Art Gallery
Showcase your art, photography, design work or even print. If you think of your work as art, this is the wp theme for you.
Creative Juice
We’ve crafted this wp theme with a showcase portfolio in mind. It can be easily used by web agencies / studios or small design firms.
SiliconApp
We’ve built this wp theme with a software application wordpress template in mind, be it a mobile or a standard desktop product.
Bon Apetit
This wp theme is destined for a restaurant or coffee shop website but it can be also used for a pastry, catering or recipes portal.
WINNERS
The Giveaway is now over and the winners are announced below in the widget.
Thanks for everyone who particiapted.
If you didn’t win , don’t worry we will be back very soon with some more awesome giveaways.
Do subscribe to your web development tutorials and more …
Get Awesome Stickers at Stickermule
Posted by Praveen Gowda I V in Articles, General, Reviews on January 25, 2012
If you haven’t heard about Stickermule yet then you should definitely check them out today. Stickermule makes awesome custom vinyl stickers and the quality of stickers they make are just the best I have ever come across.
Stickermule have got thousands of people, startups, bloggers, artists and companies awesome stickers printed beautifully.
Also they ship worldwide and if you are in the United States then they provide free shipping and ship all orders in just 5 business days. They also provide an online proof of your custom design before getting it to print and they also fix your low quality artworks for free.

With brands like GitHub, Shopify, Quora, AppSumo and Reddit trusting Stickermule, there is no reason you shouldn’t try them once
So Go Ahead and check out the custom stickers and custom skins.
You can order for the sample pack to test the quality of stickers before ordering.
You also get $10 of free credits to start you with your sticker shopping by clicking the link below
You should also check out the different stores that Stickermule offers.
Our favorite is the DuckDuckGo Sticker Store
If you haven’t heard of DuckDuckGo, then
DuckDuckGo is a general purpose search engine like Google or Bing with an important difference. It does not track you. It also works harder to reduce spam and clutter
The DuckDuckGo store features 18 community designed stickers (more to come!), as well as official logo stickers and iPhone skins. There’s even a reddit-inspired sticker that also serves as the logo for the official DuckDuckGo subreddit.
Vote For The Best Tutorial in 2011
Posted by Praveen Gowda I V in Articles, General on December 31, 2011
We would like to wish everyone a Happy New Year 2012, as we end the year 2011 and step in to 2012, we would like to have some feedback which would help us to provide you with better and useful web development tutorials in 2012.
So please take some time to vote for the best tuorial of 2011, and what tutorials you are expecting us to provide in 2012.
Survey has been closed, thanks for everyone who took the survey.
Thanks for taking the survey, we will be back in 2012 with some more great Web Development Tutorials, your feedback will definitely help us present the best tutorials for you.
Happy New Year 2012 and have a great year ahead.



























Recent Comments