Posts Tagged geo web
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+.
jerks down and rolls away gradually disappearing on reaching the end of browser screen
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.
GEO WEB STATION is now available as an application on NOKIA OVI Store
Posted by Praveen Gowda I V in Web Design on July 28, 2011
It is an New Era of Smart Tablets and Handheld Mobile Internet Devices.
Although tablets have been in the industry for quite a while it is the year 2011 where tablets and handheld mobile devices took over the web as a storm
These devices are targeted for those are those who are willing to spend, need mobility, and have a nearly insatiable appetite for staying connected to the information, people, and entertainment important to them. When consumers want to get connected, web developers are also have rushed into creating mobile apps.
Download our application from NOKIA OVI STORE
Not to fall behind, as a first initiative I have created a mobile application which is now available at NOKIA OVI STORE.
Using this application you can access all the contents of the blog right through the application
Now you can follow updates on jQuery, AJAX, PHP, MySQL, JavaScript, web design tutorials & demos presented in our blog through this application
DOWNLOAD
This is just the beginning since I will be very soon launching an application of our blog for Blackberry devices
And later I am planning to have applications on other platforms as well.
What next?
I will be very soon publishing my first tutorial
Its going to be on creating a login script with advanced features like Forgot Password, Easy Customization, Sticky Forms, Admin Center, User levels, E-Mail Support, Remember Me and many more great features…..
So subscribe to our RSS Feeds or get updated via Email or SMS.
Recent Comments