Posts Tagged jquery
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.
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 VTop 10 Most Popular File Upload Scripts – Live Demo and Free Download(Part 1)
Posted by Praveen Gowda I V in Articles, General, Jquery, Others, PHP, Reviews, Tutorials, Web Design on August 15, 2011
A File upload script is essential for every website and there are a plenty of such ready file upload scripts available on the web, but with their own pros and cons, So I thought that It would be a great idea creating a post on the top ten file upload scripts ever and would serve as a very useful resource for all webmasters.For every script I have listed their advantages and disadvantages, so it would be easy for you to choose the right one. Below is my list of top ten File upload Scripts :
Since I want to give a detailed review about all the ten scripts i will be only revealing the top five Upload scripts in this post and in my next post I will be revealing the next five upload scripts
1.Plupload
Review
For those who know some of these scripts might be wondering how Plupload came on the first position in the list rather than SWFupload.What really brings Plupload to the top of this list is its support for HTML5 Gears, Silverlight, Flash, BrowserPlus. If the user’s browser doesn’t support any of these then a normal HTML4 file upload is implemented moreover it-seems to be very stable.
Description from official website
Allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads.Plupload is a highly usable upload handler for your Content Management Systems or similar. Plupload is currently separated into a Core API and a jQuery upload queue widget this enables you to either use it out of the box or write your own custom implementation.
Features
| Feature | Flash | Gears | HTML 5 | Silverlight | BrowserPlus | HTML 4 |
|---|---|---|---|---|---|---|
| Chunking | ||||||
| Drag/Drop | * | |||||
| PNG Resize | * | |||||
| JPEG Resize | ||||||
| Type filtering | * | |||||
| Stream upload | ||||||
| Multipart upload | * | |||||
| File size restriction | ||||||
| Upload progress |
Pros and Cons
| ADVANTAGES | DISADVANTAGES |
| Upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms | Lack of support, Forum is not very active |
| unique features such as upload progress, image resizing and chunked uploads. | |
| Highly usable and stable upload handler with custom implementation |
Live Demo and Download
 Download |
 Live Demo |
2.SWFUpload
Review
SWFUpload uses both JavaScript and Flash library to provide a great upload experience.It is exactly similar to the attachment uploading Gmail which is very popular.It is a great upload script with almost every feature we want except for one main disadvantage that it uses Flash library.
Description from official website
SWFUpload is a small JavaScript/Flash library to get the best of both worlds. It features the great upload capabilities of Flash and the accessibility and ease of HTML/CSS.
Features
| Features |
| Upload multiple files at once by ctrl/shift-selecting in dialog |
| Javascript callbacks on all events |
| Get file information before upload starts |
| Style upload elements with XHTML and css |
| Display information while files are uploading using HTML |
| No page reloads necessary |
| Works on all platforms/browsers that has Flash support. |
| Degrades gracefully to normal HTML upload form if Flash or JavaScript is unavailable |
| Control filesize before upload starts |
| Only display chosen file types in dialog |
| Queue uploads, remove/add files before starting upload |
Pros and Cons
| ADVANTAGES | DISADVANTAGES |
| Upload multiple files at once and JavaScript callbacks | Requires Flash and does not work in browsers with flash not been installed |
| Exactly similar to Plupload | Customization becomes difficult without proper knowledge of javascript |
| Unlike Plupload, the forums are very active. |
Live Demo and Download
|
Download |
Live Demo |
Welcome !
Posted by Praveen Gowda I V in Web Design on July 23, 2011
Welcome Everyone !
I am Praveen Gowda, a Computer Science Engineering Student from Bangalore, India.
Even some of my friends are going to teach some of the tutorials in their area of expertise.
In this blog you could find tutorials and demos focused on topics like Programming, Database, jQuery, Ajax, PHP, Demos, Web Design, CSS and web apps.
We will be presenting all the tutorials in an orderly manner, with all tutorials featuring a demo,
So bookmark my blog right away.
We will post at least two tutorials every week and we will present you a large number of examples, plugins and tutorials from all over the web.
Thanks a lot for visiting our blog.
Praveen Gowda I V
Recent Comments