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.
Google Plus like Deleting a Circle Animation – Tutorial, Demo and Free Download
Posted by Praveen Gowda I V in Google Plus, Jquery, Others, Tutorials, Web Design on August 22, 2011
A few weeks back I has published a post “Creating Circle Effects as in Google Plus – Tutorial and Demo“. After publishing the topic I have received a lot of requests on publishing a tutorial on how to create the animation when a circle is deleted.
So here is the tutorial.If you are still not a member of Google Plus and wondering what really happens when you delete a circle, then here you go:
Whenever you delete a circle it first jerks down and rolls away gradually disappearing on reaching the end of browser screen
Cool effect isn’t it ?
I thought it will be a very nice effect to implement in any website for varied purposes.In the tutorial I have created when you hover your mouse across the circle it enlarges and if you want to delete the circle then right-click on the circle’s name(Eg: Friends or acquaintances) , a context menu with the delete option opens similarly to that found in Google+. Clicking on the delete option will delete the circle with exact animation we find in Google+.
So below is the link to Live Demo and Code Download, If you are interested in knowing how the code works you can continue reading the rest of this post.
 Download |
 Live Demo |
The Source code consists of the following files
HTML
Source code of index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Plus like Circle Animation | http://blog.geotitles.com</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jqcontextmenu.js"></script>
<script type="text/javascript" src="js/circle.js"></script>
</head>
<body>
<!--HTML for Context Menu to display delete circle option on right click-->
<ul id="contextmenu" class="jqcontextmenu">
<li>
<a class="circle_del" href="#">Delete Circle</a>
</li>
</ul>
<!--HTML for Context Menu to display delete circle option on right click ENDS here-->
<h3>This is a live demo of <a href="http://blog.geotitles.com/2011/08/google-plus-like-deleting-a-circle-animation-tutorial-demo-and-free-download">Google Plus like Circle animation</a> Tutorial at <a href="http://blog.geotitles.com">Geo Web Station</a>, Click <a href="http://blog.geotitles.com/2011/08/google-plus-like-deleting-a-circle-animation-tutorial-demo-and-free-download">here</a> to go to the <a href="http://blog.geotitles.com/2011/08/google-plus-like-deleting-a-circle-animation-tutorial-demo-and-free-download">tutorial page</a> to download source code</h3>
<div id="circle">
<div class="outer_circle">
<div class="inner_circle">
<div class="circle_label">
<p><a style="color:#FFF; text-decoration:none;" class="mylinks" href="#">Friends</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
Source code of style.css
CSS for creating the circle animation
body{ text-align: center;margin:0; padding:0; color:#000; font-family: "Times, serif", "Helvetica" , "Arial";font-size:12px;background: #FFF; }
h1{padding:30px;color:#000;}
#circle{ position: relative;vertical-align: top;position: relative;display: -moz-inline-box; display: inline-block;line-height: normal;text-align:center}
.outer_circle
{
background: url('../images/circle_closed.png') no-repeat left top;
height: 125px;width: 125px; margin: 31px;position: relative;vertical-align: top;z-index: 5;
-webkit-border-radius: 63px;-moz-border-radius: 63px;border-radius: 63px;cursor: pointer;
}
.outer_circle_open
{
text-decoration:underline;
background:url('../images/circle_open.png') no-repeat left top !important;
height: 183px;width: 183px;
margin: 2px;z-index: 2; -webkit-border-radius: 92px;-moz-border-radius: 92px;border-radius: 92px;
}
.inner_circle{
display: block; color: white; cursor: pointer;font-size: 13px; position: relative; cursor: pointer; text-align: center;
vertical-align: center; width: 88px;left: 18px; top: 47px;line-height: normal;
}
.circle_label
{
font:Arial, Helvetica, sans-serif;color: white;cursor: pointer;font-size: 13px;cursor: pointer;text-align: center
}
.rotate_label {
-webkit-animation-name: rotateThis;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}
@-webkit-keyframes rotateThis {
from {-webkit-transform:scale(1) rotate(0deg);}
to {-webkit-transform:scale(1) rotate(360deg);}
}
CSS for creating the context menu on right clicking on circle
.jqcontextmenu, .jqcontextmenu ul{ /*topmost and sub ULs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 0px;
visibility: hidden;
display: none; /*collapse all sub menus to begin with*/
box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 3px 3px 8px #818181;
-moz-box-shadow: 3px 3px 8px #818181;
z-index:1000;
}
.jqcontextmenu li{
position: relative;
}
.jqcontextmenu li a{
display: block;
width: 100px; /*width of menu (not including side paddings)*/
color: black;
background: #F5F5F5;
text-decoration: none;
padding: 4px 5px;
}
* html .jqcontextmenu li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
.jqcontextmenu li a:hover{
background: #e0e0e0;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
JavaScript
Source code of circle.js
JavaScript for google plus like circle animation
$(document).ready(function(){
$(function() {
$('.outer_circle').mouseover(function() {
$('.outer_circle').addClass('outer_circle_open');
$('.inner_circle').animate({left:'47px',top:'76px'},0);
});
$('.outer_circle').mouseout(function() {
$('.outer_circle').removeClass('outer_circle_open');
$('.inner_circle').animate({left:'18px',top:'47px'},0);
});
});
$(function() {
$('.jqcontextmenu').mouseover(function() {
$('.outer_circle').addClass('outer_circle_open');
$('.inner_circle').animate({left:'47px',top:'76px'},0);
});
});
$('.circle_del').click(function(){
$('.circle_del').remove();
$('.outer_circle').addClass('outer_circle_open').animate({height: '183px', width: '183px'},100);
$('.inner_circle').animate({left:'47',top:'76'},0)
$('.circle_label').addClass('rotate_label');
$('.outer_circle').animate({"top":"150px"},300).animate({"bottom":"20px"}, 100, function(){ });
$('.outer_circle').animate({"opacity":"0","margin-left":"600px"}, 800, 'linear');});
});
jQuery(document).ready(function($){
$('a.mylinks').addcontextmenu('contextmenu') //apply context menu to links with class="mylinks"
})
Other JavaScript files required are :
- jqcontextmenu.js
- jquery.min.js
That’s it for this week and next week we will be back one more unique tutorial, In the meanwhile you can stay updated with your blog 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.
Creating a stylish HTML5 & AJAX Contact Form
Posted by Praveen Gowda I V in Jquery, Others, PHP, Tutorials, Web Design on August 29, 2011
It has taken more time than I expected to complete this tutorial, because I kept on adding more and more features to our contact form.
Starting with the idea of just a simple HTML5 contact form, later thought of adding AJAX form submission and later came the idea of supporting JavaScript disabled browsers and much more.
What is HTML5 ? Can we use it in our project ?
HTML5 is the next generation of HTML.
HTML5 supports all the form controls from HTML 4, but it also includes new input controls. Some of these are long-overdue additions like sliders ,date pickers and color pickers; others are more subtle.
For example, the
In our contact form we are going to use input controls namely email ,required, url and phone. Yeah That’s it, but its good enough to make a really good contact form.
What is AJAX ?
AJAX can create a highly responsive web interface and increase the user experience.Using AJAX the form can be submitted without Page reload which makes our form much more friendly.
Browser Support
The CSS styling has been coded in such a way that the page looks exactly same in all popular web browsers.Although the form uses AJAX form submission, if JavaScript has been disabled in a web browser then a normal contact form will be rendered.
To sum up this is an ultimate contact form which can be seamlessly integrated to any web
site and works totally fine in any browser providing a cool user interface.
Including the code on this page would make the very post very long, so please download the source code and refer to it.The code has been heavily commented and would pose no difficulty to use it in your website.
Installation Instructions |
After downloading the Source code, open config.phpin a text editor and enter your email address
<?php $to = "your_email_address";//enter your email address ?> |
|
Download |
Live Demo |
Next tutorial will be back with an interesting tutorial, meanwhile keep updated with all our tutorials 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.
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
|
Download |
Live Demo |
 Documentation |
 Support Forum |
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.
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 VCreating Top Fixed Menu Bar With CSS3 Buttons and Dropdown Found in Gmail
Posted by Praveen Gowda I V in Gmail, Google, Google Plus, Tutorials, Web Design on October 26, 2011
Our previous tutorial was on creating the top fixed black menu bar with CSS drop down menu found in Google products, and in this tutorial I would like to teach creating the fixed menu bar with CSS3 buttons found in Gmail along with the dropdown which contains buttons for common functions like Archive, Spam, Delete, Mark as Important, Mark as not Important, Move to, Labels, Refresh and many more functions which is displayed right above the message list.
If you haven’t observed the new CSS3 button designs on this menu bar then it is because you are still struck with an old theme which does not support the new buttons.
If you want to have a look at these new menu bar with the CSS3 buttons that we are going to design in this tutorial, please change your theme to Preview or Preview(Dense).
Or else the below image will give you a better idea what we are going to be left at the end of this tutorial.
Fixed bar with CSS buttons and dropdown found in Gmail
Gmail uses JavaScript for the dropdown which is displayed when the button is clicked but I am not using JavaScript instead CSS is used and the dropdown is displayed on hovering over the buttons, but if you want the actual JavaScript dropdown found in Gmail you can easily modify the source code.
Goals of this this tutorial:
- Make the bar static so it remains fixed even when the page is scrolled
- create the buttons exactly the way they look in Gmail
- getting the same style of dropdown menu as in Gmail
Go forward have a look at the live demo and download the source code and use it anyway you like it.
|
DOWNLOAD |
LIVE DEMO |
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"/> <link rel="stylesheet" href="style.css" type="text/css"/> <title>Live Demo Of Creating Top Fixed Menu Bar With CSS3 Buttons Found in Gmail | http://blog.geotitles.com</title> </head> <body> <div class="container"> <div id="content"> <div class="menu"> <ul> <li><a class="check dropdown" href="#"><input type="checkbox"/><span class="arrow"></span></a> <ul class="width-1"> <li><a href="#">All</a></li> <li><a href="#">None</a></li> <li><a href="#">Read</a></li> <li><a href="#">Unread</a></li> <li><a href="#">Starred</a></li> <li><a href="#">Unstarred</a></li> </ul> </li> <li><a class="left" href="#">Archive</a> </li> <li><a class="middle" href="#">Spam</a></li> <li><a class="right" href="#">Delete</a> </li> <li><a class="left dropdown" href="#">Move to<span class="arrow"></span></a> <ul class="width-2"> <li><a href="#">Personal</a></li> <li><a href="#">Work</a></li> <li><a href="#">Travel</a></li> <li><a href="#">Insurance</a></li> <li><a href="#">Insurance/Vehicle</a></li> <li><a href="#">Receipts</a></li> <li><a href="#">Educational</a></li> <li><a href="#">Spam</a></li> </ul> </li> <li><a class="right dropdown" href="#">Labels<span class="arrow"></span></a> <ul class="width-2"> <li><a href="#">Personal</a></li> <li><a href="#">Work</a></li> <li><a href="#">Travel</a></li> <li><a href="#">Insurance</a></li> <li><a href="#">Insurance/Vehicle</a></li> <li><a href="#">Receipts</a></li> <li><a href="#">Educational</a></li> </ul> </li> <li><a class="dropdown" href="#">More<span class="arrow"></span></a> <ul class="width-3"> <li><a href="#">Mark all as read</a></li> <li><a href="#">Mark as read</a></li> <li><a href="#">Mark as unread</a></li> <li><a href="#">Add to tasks</a></li> <li><a href="#">Add star</a></li> <li><a href="#">Remove star</a></li> <li><a href="#">Create event</a></li> <li><a href="#">Filter messages like these</a></li> <li><a href="#">Mute</a></li> <li><a href="#">Unmute</a></li> </ul> </li> <li><a class="refresh" href="#"> </a></li> <li><a class="num"><b>1</b>–<b>50</b> of <b>52</b></a></li> <li><a class="previous" href="#"> </a></li> <li><a class="next" href="#"> </a></li> </ul> </div> <!--end menu--> </div> <!--end content--> </div> <!--end container--> </div> </body> </html>
CSS
* {
margin:0;
padding:0;
}
.menu {
position:fixed;
height:30px;
font-size:14px;
color:#FFF;
margin:0 auto;
margin-top:20px;
margin-left:20px;
}
.menu ul {
list-style:none;
color:#FFF;
width:auto;
}
.menu ul li {
float:left;
position: relative;
}
.menu ul li a {
color:#666;
font:bold 75% arial,sans-serif;
text-decoration:none;
padding:7px 12px;
position:relative;
display:inline-block;
/*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)));
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-right:10px;
}
.menu ul li a: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);
}
/* styling for the left buttons(buttons which are joined)*/
.menu ul li a.left {
-webkit-border-top-right-radius:0;
-moz-border-radius-topright:0;
border-top-right-radius:0;
-webkit-border-bottom-right-radius:0;
-moz-border-radius-bottomright:0;
border-bottom-right-radius:0;
margin: 0;
}
/* styling for the middle buttons(buttons which are joined)*/
.menu ul li a.middle {
/*border-radius*/
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
border-left:solid 1px #f3f3f3;
margin:0;
border-left:solid 1px rgba(255,255,255,0);
}
.menu ul li a.middle:hover,.menu ul li a.right:hover {
border-left: solid 1px #999;
}
/* styling for the right buttons(buttons which are joined)*/
.menu ul li a.right {
-webkit-border-top-left-radius:0;
-moz-border-radius-topleft:0;
border-top-left-radius:0;
-webkit-border-bottom-left-radius:0;
-moz-border-radius-bottomleft:0;
border-bottom-left-radius:0;
border-left:solid 1px #f3f3f3;
border-left: solid 1px rgba(255,255,255,0);
}
/*style for the arrow pointing downward*/
.arrow {
border:thick;
border-color:#777777 transparent white;
border-style:solid dashed dashed;
margin-left:5px;
position:relative;
top: 10px;
}
/* button with checkbox*/
.menu ul li a.check {
padding:6px 6px 7px 12px;
position:relative;
display:inline-block;
margin-right: 10px;
}
/*refresh button*/
.menu ul li a.refresh {
background:url(images/refresh.png) 10px 4px no-repeat #f3f3f3;
width: 17px;
}
/* previous button*/
.menu ul li a.previous {
background:url(images/previous.png) 10px 4px no-repeat #f3f3f3;
width: 17px;
}
/*next button */
.menu ul li a.next {
background:url(images/next.png) 10px 4px no-repeat #f3f3f3;
width: 17px;
}
/*showing the number of emails in inbox(eg:1–50 of 52)*/
.menu ul li a.num {
color:#000;
font:normal 80% arial,sans-serif;
text-decoration:none;
padding:7px 12px;
position:relative;
display:inline-block;
text-shadow:none;
background:#FFF;
margin-right:10px;
border: none;
}
/* hide the dropdown*/
.menu ul li ul {
display: none;
}
/*changing the background of the button(which has a dropdown) to creyish gradient when we hover the mouse over it*/
.menu ul li:hover a.dropdown {
background:#888888;
/* Old browsers */
background:-moz-linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
/* FF3.6+*/
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#888888),color-stop(43%,#8e8e8e),color-stop(45%,#7a7a7a),color-stop(100%,#989898));
/* Chrome,Safari4+*/
background:-webkit-linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
/* Chrome10+,Safari5.1+*/
background:-o-linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
/* Opera 11.10+*/
background:-ms-linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
/* IE10+*/
background:linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888',endColorstr='#989898',GradientType=0 );
/* IE6-9 */ border:1px solid #989898;
color:#000;
}
.menu ul li:hover ul {
display:block;
position:absolute;
margin-left:0px;
margin-top:-1px;
-webkit-box-shadow:0 4px 10px #8b8b8b;
-moz-box-shadow:0 4px 10px #8b8b8b;
box-shadow:0 4px 10px #8b8b8b;
padding:1px;
}
.menu ul li:hover ul li a {
display:block;
color:#000000;
background:#ffffff;
border:none;
margin-right:1px;
}
.menu ul li:hover ul li a:hover {
background: #EEEEEE;
}
/*the first item in dropdown must not have a border on top */
.menu ul li ul li:first-child a {
border-top: none;
}
/* now let us define the widths of various dropdown*/
.width-1 li a {
width:55px;
}
.width-2 li a {
width: 125px;
}
.width-3 li a {
width: 165px;
}
Hope this tutorial was helpful for you and has helped you learning something new, next week I will be back with another interesting web design tutorial, until then please subscribe with our blog to remain updated with all the new tutorials and articles:
- 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.
promise to respond to everyone who asks 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.
Wishing everyone a Merry Christmas and A Happy New Year 2012
Posted by Praveen Gowda I V in General, Others on December 25, 2011
Just a quick post to wish you all a Merry Christmas and A Happy New Year 2012.
Merry Christmas
I would like to thank you all for visiting our Web Development Tutorial blog and we hope you enjoyed each of the tutorials we have published in the last year.
We launched our blog in the july of 2011 and we are just excited to have received so much support from you all.
Thanks for making this year great and we wish you all have a great year ahead in 2012.
We will love to know what tutorials you would like us to publish in the year 2012.
We all are having a great time over the holidays and we hope you all are having a great one too!!.
Thank you for helping us along the way by making us one of the prominent websites on the web and in return we wanted to let you know that we will never forget that you are the reason for our success!
May your holidays be blessed and the year 2012 be plentiful.
We would love to hear how you are celebrating Christmas and the new year ?, let us know by commenting below
So please go and have a wonderful time 
Happy New Year 2012
Recent Comments