Simple facebook type jquery search engine lightning fast

Dear Friends,

I'm Swadesh, a young software engineer who is always fascinated about facebook applications.

Once i came across facebook search bar which search for friends, communities, applications, etc.



I was always wondering how the search is so quick (The result comes instantly). After a long period of research and study, i was finally able to simulate the amazing feature.

Here is the trick that worked for me

Step-1: Include Jquery and some css into your page

<script src="js/jquery.min.js">

<link href="search_style.css" rel="stylesheet" type="text/css"/>

Step-2: We will now write javascript which will collect data available at DOM, if necessary it will search through the whole database.

The javascript search idea
on page load, “Load all data of friends from database into DOM”
 Declare an array which will hold the DOM data
Push the DOM data into the javascript array
Handle the keyup event which will subsequently search for the javascipt array object. If not found it will call the ajax function which will collect data from database.
Push the retrieved data again into the DOM and search from there

Step-3: The div tag to hold the loaded result & the place to display the result

<input type="text" id="ipi"></input>
<div id="search_result" style="display:none;">

</div>
<div id="sr">

</div>

jquery visitors flip counter like digital clock

I was visiting a website called stepout.com. I came across this members counter which seem to be cool. So here i explain it for you, how it is done.

Step-1 : We start by adding some jquery plugins and css to our page

 <!-- jQuery from Google CDN, REQUIRED -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <!-- My flip counter script, REQUIRED -->
    <script type="text/javascript" src="js/flipcounter.min.js"></script>
    <!-- Style sheet for the counter, REQUIRED -->
    <link rel="stylesheet" type="text/css" href="css/counter.css" />

    <!-- jQueryUI from Google CDN, used only for the fancy demo controls, NOT REQUIRED for the counter itself -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
    <!-- Style sheet for the jQueryUI controls, NOT REQUIRED for the counter itself -->
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" />
    <!-- Style sheet for the demo page, NOT REQUIRED for the counter itself -->
    <link rel="stylesheet" type="text/css" href="css/demo.css" />

Step-2 : Next job is to put some div tags where it will be displayed

<li>Increment:
            <span id="inc_value">123</span> <a href="#">[?]</a><div id="inc_slider"></div>
            <div>
                <p>This slider controls the counter increment by using the <b>setIncrement</b> method:</p>
                <code>myCounter.setIncrement(value);</code>
            </div>
        </li>

Step-3 : Our next job is to have some javascript customization

<script type="text/javascript">
    //<![CDATA[

    // Initialize a new counter
    var myCounter = new flipCounter('counter', {value:10000, inc:123, pace:800, auto:true});

    $(function(){

        /**
         * Demo controls
         */

        var smartInc = 0;

        // Increment
        $("#inc_slider").slider({
            range: "max",
            value: 123,
            min: 1,
            max: 1000,
            slide: function( event, ui ) {
                myCounter.setIncrement(ui.value);
                $("#inc_value").text(ui.value);
            }
        });

        // Pace
        $("#pace_slider").slider({
            range: "max",
            value: 800,
            min: 100,
            max: 1000,
            step: 100,
            slide: function( event, ui ) {
                myCounter.setPace(ui.value);
                $("#pace_value").text(ui.value);
            }
        });

        // Auto-increment
        $("#auto_toggle").buttonset();
        $("input[name=auto]").change(function(){
            if ($("#auto1:checked").length == 1){
                $("#counter_step").button({disabled: true});
                $(".auto_off_controls").hide();
                $(".auto_on_controls").show();

                myCounter.setPace($("#pace_slider").slider("value"));
                myCounter.setIncrement($("#inc_slider").slider("value"));
                myCounter.setAuto(true);
            }
            else{
                $("#counter_step").button({disabled: false});
                $(".auto_off_controls").show();
                $(".auto_on_controls").hide();
                $("#add_sub").buttonset();
                $("#set_val, #inc_to, #smart").button();
                myCounter.setAuto(false).stop();
            }
        });
        $("#counter_step").button({disabled: true});
        $("#counter_step").button().click(function(){
            myCounter.step();
            return false;
        });

        // Addition/Subtraction
        $("#add").click(function(){
            myCounter.add(567);
            return false;
        });
        $("#sub").click(function(){
            myCounter.subtract(567);
            return false;
        });

        // Set value
        $("#set_val").click(function(){
            myCounter.setValue(12345);
            return false;
        });

        // Increment to
        $("#inc_to").click(function(){
            myCounter.incrementTo(12345);
            return false;
        });

        // Get value
        $("#smart").click(function(){
            var steps = [12345, 17, 4, 533];

            if (smartInc < 4) runTest();

            function runTest(){
                var newVal = myCounter.getValue() + steps[smartInc];
                myCounter.incrementTo(newVal, 10, 400);
                smartInc++;
                if (smartInc < 4) setTimeout(runTest, 10000);
            }
            $(this).button("disable");
            return false;
        });

        // Expand help
        $("a.expand").click(function(){
            $(this).parent().children(".toggle").slideToggle(200);
            return false;
        });

    });

    //]]>
    </script>
</body>

How to track online status of a user in my website like facebook

I came across this when i was developing 1 of my social website aFriend.in.

I found out a very simple solution using jQuery or Javascript

setInterval("update()", 10000); // Update every 10 seconds 
function update() 
{ 
$.post("update.php"); // Sends request to update.php 
} 

Your update.php file would have a bit of code like this:

session_start(); 
if ($_SESSION["userid"]) 
updateUserStatus($_SESSION["userid"]); 

This all assumes that you store your userid as a session-variable when users login to your website. The updateUserStatus() function is just a simple query, like the following:

UPDATE users SET lastActiveTime = NOW() WHERE userid = $userid 

So that takes care of your storage. Now to retrieve the list of users who are "online." For this, you'll want another jQuery-call, and another setInterval() call:

setInterval("getList()", 10000) // Get users-online every 10 seconds 
function getList() 
{ 
$.post("getList.php", function(list) 
{ $("listBox").html(list); }); 
} 

This function requests a bit of HTML form the server every 10 seconds. The getList.php page would look like this:

session_start(); 
if (!$_SESSION["userid"]) die; // Don't give the list to anybody not logged in 
$users = getOnlineUsers(); /* Gets all users with lastActiveTime within the last 1 minute */ 
$output = "<ul>"; 
foreach ($users as $user) 
{ 
$output .= "<li>".$user["userName"]."</li>"; 
} 
$output .= "</ul>"; 
print $output; 

That would output the following HTML:

<ul> <li>Jonathan Sampson</li> 
<li>Paolo Bergantino</li> 
<li>John Skeet</li> </ul> 

That list is included in your jQuery variable named "list." Look back up into our last jQuery block and you'll see it there.

jQuery will take this list, and place it within a div having the classname of "listBox."

<div></div> 

Creating a Simple Photo Album with jQuery Similar to Facebook

For the javascript part, I’ve decided to use jQuery as well as the jquery.cycle and jquery.lightbox plugins.

HTML structure

The HTML code needed for a gallery like this is actually rather simple. All we have to do, is to print the images as plain old linked HTML images and wrap image collections in container elements (DIVs).

<h1>My Photo Collection</h1>

<p id="intro">

  This is my photo album...yaddi-yaddi-ya...

</p>

<div class="album">

  <h2>Wicked Album</h2>

  <a href="photos/image1.jpg">

    <img src="photos/thumb_image1.jpg" alt="Lorem" />

  </a>

  <a href="photos/image2.jpg">

    <img src="photos/thumb_image2.jpg" alt="Ipsum" />

  </a>

  <a href="photos/image3.jpg">

    <img src="photos/thumb_image3.jpg" alt="Lorem" />

  </a>

</div>

<div class="album">

  <h2>Wickier Album</h2>

  <a href="photos/image4.jpg">

    <img src="photos/thumb_image4.jpg" alt="Ipsum" />

  </a>

  <a href="photos/image5.jpg">

    <img src="photos/thumb_image5.jpg" alt="Yadi" />

  </a>

  <a href="photos/image6.jpg">

    <img src="photos/thumb_image6.jpg" alt="Yadi" />

  </a>

  <a href="photos/image7.jpg">

    <img src="photos/thumb_image7.jpg" alt="Ya" />

  </a>

</div>

<div class="album">

  <h2>Wickiestest Album</h2>

  <a href="photos/image8.jpg">

    <img src="photos/thumb_image8.jpg" alt="Lorem" />

  </a>

  <a href="photos/image9.jpg">

    <img src="photos/thumb_image9.jpg" alt="Ipsum" />

  </a>

</div>

The Magic of jQuery Plug-Ins

In order to turn this into something a bit more exciting than a bunch of linked images with a blue border, we add some JavaScript and CSS to the page.

First, make sure to include jQuery, jQuery Cycle and jQuery Lightbox to the page. Then add the following JavaScript code to another .js-file that is loaded into the same page:

$(document).ready( function() {

  // Dynamically add nav buttons as these are not needed in non-JS browsers

  var prevNext = '<div id="album-nav"><button ' +

                   'class="prev">« Previous' +

                   '</button><button>' +

                   'Next &raquo;</button></div>';

  $(prevNext).insertAfter('.album:last');

  // Add a wrapper around all .albums and hook jquery.cycle onto this

  $('.album').wrapAll('<div id="photo-albums"></div>');

  $('#photo-albums').cycle({

    fx:     'turnDown',

    speed:  500,

    timeout: 0,

    next:   '.next',

    prev:   '.prev'

  });

  // Remove the intro on first click -- just for the fun of it

  $('.prev,.next').click(function () {

    $('#intro:visible').slideToggle();

  });

  // Add lightbox to images

  $('.album a').lightBox();

});

You may of course remove the cycling effect.
The only JavaScript you’d then need is $('.album a').lightBox();.

Adding Style Info

Last, we add some style info to make our albums look at least somewhat good.

/** for this example, I don't give a rats (*) about IE */

.album {

  width: 600px !important;

  clear: both;

}

.album h2 {

  clear: both;

}

.album a {

  display: block;

  float: left;

  margin-right: 1em;

  padding: 0.5em;

  border: 1px solid black;

  background-color: #eee;

  text-align: center;

}

.album a:hover {

  border-color: blue;

}

.album img {

  width: 72px;

  height: 100px;

  border: 0;

}

#album-nav {

  margin-top: 1em;

  max-width: 500px;

}

.prev, .next {

  border: 1px outset #ccc;

  color: #000075;

  background-color: white;

  font-weight:bold;

  padding: 0.25em;

}

.prev:hover,.next:hover {

  border-style: inset;

}

.prev {

  float: left;

}

.next {

  float: right;

}

Finish!

Lets see how facebook search is so fast

Some days before i came across a very well known website called facebook. And i was always wondering how can such a heavily loaded website be so seamlessly fast.

After a continuous google search, i found that they use AJAX and JQuery extensively with differnet caching technologies along with the following latest technologies.

1. Bigpipe
2. Comet (programming) or "Reverse Ajax"

I have implemented a simple reverse ajax in my website fb.walletchange.com/profile.php @ the search portion. You can mark a remarkable change in search time after implementing the same.

The trick goes like this

a) Load a static page first

b) Pull the data as soon as the page loads using ajax into a hidden div

c) Use jQuery to organise the data for perfect user interactivity

 

    

 

a) Lets create our page layout div first

<DIV id=main>
<H1>Facebook type instant search engine - super speed
</H1>
Filter friends list : <INPUT id=filter>
<DIV id=container>
<DIV>
<UL>
<?php
while($row=mysql_fetch_array($sql_res))
{
$username=$row['username'];

?>
<LI>
<DIV>
<DIV><?=$username?></DIV></DIV></LI>
<?php
}

?>
</UL></DIV></DIV></DIV>

b) We will proceed now by adding jQuery and instant search script and some style attributes to the page

<SCRIPT src="jquery.js"></SCRIPT>

<SCRIPT src="instant-search.js"></SCRIPT>

<STYLE>BODY {
FONT-WEIGHT: 300; FONT-SIZE: 16px; MARGIN: 0px 10%; COLOR: #333; FONT-STYLE: normal; FONT-FAMILY: 'Helvetica Neue', Helvetica, Arial, sans-serif
}
.name SPAN {
BACKGROUND: #fbffc6
}
UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
UL LI {
BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ddd 1px solid; PADDING-LEFT: 5px; FONT-SIZE: 20px; BACKGROUND: #eee; FLOAT: left; PADDING-BOTTOM: 5px; MARGIN: 3px; BORDER-LEFT: #ddd 1px solid; WIDTH: 150px; LINE-HEIGHT: 70px; PADDING-TOP: 5px; BORDER-BOTTOM: #ddd 1px solid; LIST-STYLE-TYPE: none; HEIGHT: 70px; TEXT-ALIGN: center
}
#container {
BORDER-RIGHT: #b9b9b9 1px solid; BORDER-TOP: #b9b9b9 1px solid; MARGIN-TOP: 20px; BORDER-LEFT: #b9b9b9 1px solid; WIDTH: 100%; BORDER-BOTTOM: #b9b9b9 1px solid; HEIGHT: 440px; webkit-box-shadow: 0 0 15px #aaa; moz-box-shadow: 0 0 15px #aaa; box-shadow: 0 0 15px #aaa
}
#container .content {
OVERFLOW: auto; HEIGHT: 440px
}
#main {
MARGIN: 0px auto; WIDTH: 100%;
}
INPUT {
BORDER-RIGHT: #ddd 1px solid; BORDER-TOP: #ddd 1px solid; FONT-SIZE: 20px; BORDER-LEFT: #ddd 1px solid; BORDER-BOTTOM: #ddd 1px solid
}
A {
COLOR: #31499c; TEXT-DECORATION: none
}
H1 {
FONT-WEIGHT: normal; TEXT-ALIGN: center
}
</STYLE>

Facebook loads Web Pages Faster using BigPipe Technology

What is the motivation for this technology?

For an SNS such as Facebook, the major contents must be processed based on personalized data. This means that there is always an inevitable limit to any improvement in performance that is achieved only by improving the speed of the server, such as the cache application and system structure. Facebook found the solution to this limit on performance in a new transfer format, and parallel processing between the server and the client. The solution is particularly focused on reducing the delay in showing the page that is requested.

Problems related to the existing dynamic Web service system

When the Web server is overloaded while generating a page, in most cases the browser becomes idle and does nothing. When the server finishes generating the page and sends it to the browser at once, it cause a bottleneck effect, both in traffic and in performance. Therefore, the server that has already completed transfer cannot be helpful any more. By overlapping the time taken for the server to generate pages and for the browser to render, you can not only reduce the end-to-end latency but also the initial response time for the Web page, consequently reducing overall loading time. The problem in which a single slow query holds back the entire loading process can be addressed as well.

Why BigPipe?

As mentioned earlier, BigPipe is a technology that combines existing Web technologies to allow the parallel processing to generate Web pages and render browsers simultaneously (just as AJAX did). It is named because its mechanism is similar to Pipelining which is common for microprocessors. For this reason, Facebook calls BigPipe technology a Web page pipeline for better performance.

Something you need to know first

In order to understand the BigPipe technology, it is necessary to understand Chunked Encoding, which is supported in version 1.1 of HTTP protocol, and the Script Flush method which is based on Chunked Encoding.

Chunked Encoding

Chunked Encoding is an encoding method of transfer supported in HTTP 1.1 and higher, which allows the server to ignore the header value and divide the response result from HTTP into a series of chunks, and then transfer each chunk of the result. The size of each chunk is transferred along with the content. With this feature, the server can send a response to the Web browser in the middle of a process (Flush transfer) so that the user can see at least partial content.

The figure below shows an example of HTTP responses with a Chunked Encoding format which named Transfer-Encoding from header values as chunked. The sizes of individual chunked text which are transferred sequentially are expressed in hexadecimal instead of the Content-Length header value. You can also see it is ended with 0.

Login with Facebook and Twitter

Facebook and Twitter have become large in the social network world and both networks offering oAuth support. We developed a system to login with Twitter and Facebook. Nowadays web users not interested to filling the big registration forms. This script helps you to avoid registration forms, It’s is very useful and simple to integrate.



   

Database

Sample database users table columns id, email, oauth_uid, oauth_provider
and username.

    CREATE TABLE users
    (
    id INT PRIMARY 
    KEY AUTO_INCREMENT,
    email VARCHAR(70),
    
    oauth_uid VARCHAR(200),
    oauth_provider VARCHAR(200),
    username VARCHAR(100),
    
    twitter_oauth_token VARCHAR(200),
    
    twitter_oauth_token_secret VARCHAR(200)
    
    );

The tutorial contains three folders called facebook,twitter and
config with PHP files.

facebook //Facebook
OAUTH library

twitter //Twitter
OAUTH library

config
-- functions.php 
-- dbconfig.php
//Database connection

-- fbconfig.php
//Facebook API connection
-- twconfig.php
//Twitter API connection
index.php
home.php
login-twitter.php
login-facebook.php
getTwitterData.php

Facebook Setup

You have to create a application. Facebook will provide you app
id and app secret id, just modify following code

fcconfig.php

    <?php
    define('APP_ID', 'Facebook 
    APP ID');
    define('APP_SECRET', 'Facebook 
    Secret ID');
    ?>
 

Twitter Setup

Create a twitter application click here. Some like Facebook Twitter provide you
consumer key amd consumer secret key using these modify following code.

twconfig.php

    <?php
    define('YOUR_CONSUMER_KEY', 'Twitter Key');
    define('YOUR_CONSUMER_SECRET', 'Twitter Secret Key');
    ?>
 

dbconfig.php
Database configuration file.

    <?php
    define('DB_SERVER', 'localhost');
    define('DB_USERNAME', 'User 
    Name');
    define('DB_PASSWORD', 'Password');
    define('DB_DATABASE', 'DATABASE');
    $connection = mysql_connect(DB_SERVER, 
    DB_USERNAME, DB_PASSWORD) or 
    die(mysql_error());
    $database = mysql_select_db(DB_DATABASE) 
    or die(mysql_error());
    ?>
 

login-twitter.php
In root directory find out the below line at i>login-twitter.php code and
replace yourwebsite.

    $request_token = 
    $twitteroauth->getRequestToken('http://yourwebsite.com/getTwitterData.php');
 
 

index.php


If you want to modify your web project existing login or index pages, just use
following code.

    <?php
    session_start();
    if (isset($_SESSION['id'])) {
    // Redirection to login 
    page twitter or facebook
    header("location: home.php");
    }
    if (array_key_exists("login", $_GET))
    
    {
    $oauth_provider = $_GET['oauth_provider'];
    if ($oauth_provider == 'twitter')
    {
    header("Location: login-twitter.php");
    }
    else if ($oauth_provider == 'facebook')
     {
    header("Location: 
    login-facebook.php");
    }
    }
    ?>
    //HTML Code
    <a href="?login&oauth_provider=twitter">Twitter_Login</a>
    <a href="?login&oauth_provider=facebook">Facebook_Login</a>

Facebook Style Alert Confirm Box with jQuery and CSS

                 

Create a facebook style alert box with jquery plug-in jquery.alert.js. Bellow is the complete tutorial

HTML / Javascript Code
Contains javascript and HTML Code.

<link href="facebook.alert.css" rel="stylesheet" type="text/css">
<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.0/jquery.min.js"></script>

<script type="text/javascript" src="jquery.alert.js"></script>

<script type="text/javascript"> $(document).ready( function()

{ $("#delete_confirm").click( function()

{ jConfirm('Are you sure you want ot delete this thread?', '', function(r)

{ if(r==true) { $("#box").fadeOut(300); } }); }); });

</script>
<div id="box" style=" background-color:#ffffcc;">
<a href="#" id="delete_confirm">Delete</a>
</div>

facebook.alert.css
Contains CSS code.

#popup_container 
{

font-family:'Lucida Grande',arial;

font-weight:bold;

text-align:left;

font-size: 12px;

width: 364px;

height: 86px;

background: #F3F3F3;

border:solid 1px #dedede;

border-bottom: solid 2px #456FA5;

color: #000000; }
#popup_title 
{ display:none; }
#popup_message 
{ padding-top: 15px; padding-left: 15px; }
#popup_panel 
{ text-align: left; padding-left:15px; }
input
{

background-color:#476EA7;

padding:3px; color:#FFFFFF;

margin-top:20px;

margin-right:10px;

}

Facebook Style Footer Admin Panel

                 

The popularity of social media has been booming in the past few years and Facebook definitely has climbed high to the top of the social network rankings. Facebook has many Ajax driven features and applications that are very impressive, and one of the things I particularly like is the footer admin panel, where it neatly organizes frequently used links and applications.

This week I would like to cover part 1 of how to recreate the Facebook footer admin panel with CSS and jQuery.

Step 1. Wireframe and Tooltip Bubbles – HTML & CSS

Lay out the wireframe of the admin panel using an unordered list for the foundation. The last two list items (Alert Panel & Chat Panel) will have sub-panels nested within them. Since these two panels will float to the right, the order in the markup will be reversed.



Notice that there is a <small> tag nested within the <a> tag, this is how we will achieve our tooltip bubble on the navigation.

HTML

<div id="footpanel">
    <ul id="mainpanel">
        <li><a href="#">Inspiration <small>
        Design Bombs</small></a></li>
        <li><a href="#">View Profile <small>
        View Profile</small></a></li>
        <li><a href="#">Edit Profile <small>
        Edit Profile</small></a></li>
        <li><a href="#">Contacts <small>
        Contacts</small></a></li>
        <li><a href="#">Messages (10) <small>
        Messages</small></a></li>
        <li><a href="#">Play List <small>
        Play List</small></a></li>
        <li><a href="#">Videos <small>
        Videos</small></a></li>
        <li id="alertpanel"><a href="#">
        Alerts</a></li>
        <li id="chatpanel"><a href="#">
        Friends (<strong>18</strong>)</a></li>
    </ul>
</div>

CSS

First start by fixing the panel to the bottom of the viewport.

#footpanel {
	position: fixed;
	bottom: 0; left: 0;
	z-index: 9999;
/*--Keeps the panel on top of all other elements--*/
	background: #e3e2e2;
	border: 1px solid #c3c3c3;
	border-bottom: none;
	width: 94%;
	margin: 0 3%;
}

As you may already know, IE6 does not understand fixed positioning. I stumbled across a tutorial that fixed this problem*.

*html #footpanel { /*--IE6 Hack - Fixed Positioning to the Bottom--*/
	margin-top: -1px;
/*--Prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/
	position: absolute;
	top:expression(eval(
document.compatMode &&document.compatMode=='CSS1Compat')
?documentElement.scrollTop+(
documentElement.clientHeight-this.clientHeight)
: document.body.scrollTop +(
document.body.clientHeight-this.clientHeight));
}

*Note: Due to heavy loading on the browser, an alternative solution would be to either use an position: absolute; or if the situation/client allows it use display: none; for those with IE6.

Style the unordered list which will be the foundation of this panel.

#footpanel ul {
	padding: 0; margin: 0;
	float: left;
	width: 100%;
	list-style: none;
	border-top: 1px solid #fff;
/*--Gives the bevel feel on the panel--*/
	font-size: 1.1em;
}
#footpanel ul li{
	padding: 0; margin: 0;
	float: left;
	position: relative;
}
#footpanel ul li a{
	padding: 5px;
	float: left;
	text-indent: -9999px;
/*--For text replacement - Shove text off of the page--*/
	height: 16px; width: 16px;
	text-decoration: none;
	color: #333;
	position: relative;
}
html #footpanel ul li a:hover{	background-color: #fff; }
html #footpanel ul li a.active {
/*--Active state when sub-panel is open--*/
	background-color: #fff;
	height: 17px;
	margin-top: -2px;
/*--Push it up 2px to attach the active button to sub-panel--*/
	border: 1px solid #555;
	border-top: none;
	z-index: 200;
/*--Keeps the active link on top of the sub-panel--*/
	position: relative;
}

Declare the text replacement for each link.
You can download these great icons by Pinvoke here.

#footpanel a.home{
	background: url(home.png) no-repeat 15px center;
	width: 50px;
	padding-left: 40px;
	border-right: 1px solid #bbb;
	text-indent: 0;
/*--Reset text indent since there will be a
combination of both text and image--*/
}
a.profile{ background: url(user.png)
no-repeat center center;  }
a.editprofile{ background: url(wrench_screwdriver.png)
no-repeat center center; }
a.contacts{ background: url(address_book.png)
no-repeat center center; }
a.messages{ background: url(mail.png)
no-repeat center center; }
a.playlist{ background: url(document_music_playlist.png)
no-repeat center center; }
a.videos{ background: url(film.png)
no-repeat center center; }
a.alerts{ background: url(newspaper.png)
no-repeat center center; }
#footpanel a.chat{
	background: url(balloon.png)
no-repeat 15px center;
	width: 126px;
	border-left: 1px solid #bbb;
	border-right: 1px solid #bbb;
	padding-left: 40px;
	text-indent: 0;
/*--Reset text indent since there will be
a combination of both text and image--*/
}
#footpanel li#chatpanel, #footpanel li#alertpanel {
 float: right; }
/*--Right align the chat and alert panels--*/

Style the tooltip bubble, by default the <small> tag will be hidden with a display:none;. On hover over, allow the tooltip to appear with a display:block;

#footpanel a small {
	text-align: center;
	width: 70px;
	background: url(pop_arrow.gif) no-repeat center bottom;
	padding: 5px 5px 11px;
	display: none; /*--Hide by default--*/
	color: #fff;
	font-size: 1em;
	text-indent: 0;
}
#footpanel a:hover small{
	display: block; /*--Show on hover--*/
	position: absolute;
	top: -35px;
/*--Position tooltip 35px above the list item--*/
	left: 50%;
	margin-left: -40px; /*--Center the tooltip--*/
	z-index: 9999;
}

The Best jQuery Plugins Inspired from Facebook and Twitter

jQuery Plugins For Twitter

jQuery plugin for Twitter

A simple, unobtrusive and customisable client-side method for easily embedding a Twitter feed into a web page. You can add alternative content to the container element. This will be replaced by your tweets when the plugin is executed by jQuery. 3 new customisation options: slideDuration (if slideIn is true, this will change the duration of the slide effect), showProfileLink (set to false if you want to hide the link), showTimestamp (set to false if you want to remove the timestamp from tweets – the timestamp is then added as a title on the individual tweet list items).

jQuery Twitter API plugin

Plugin provides you with an easy Twitter API to access Twitter user information by twitter username. The first parameter is a Twitter username and the second is a callback function that will be called after jQuery gets user details from the Twitter servers.

Making Our Own Twitter Timeline

With this plugin and tutorial you will create your own twitter-like timeline, where you can view and post your tweets. You can use the code that you can find on tutorial page for all kinds of purposes and be sure that the possibilities are endless.

A Twitter List Powered Fan Page

Recently, Twitter rolled out a great new feature on their site – lists. You can now create and compile a list of twitter users and make it easier for others to follow all at once. Also, at the same time, they expanded their API to include list management functionality. This allows us to use these new tools to create a widget that flips lists the other way around – a fan page you can put in your sidebar, that allows your visitors to fill in their twitter name and join a specially crafted fan list in your twitter account.

Twitter Friends & Followers Widget – A jQuery Plugin

There is a Facebook fans widget, Google friends widget, what about a Twitter friends widget?! Here is a jQuery plugin that you can embed anywhere to display pictures of your Twitter followers or friends (whom you follow) and their latest tweets if you like. By featuring your Twitter friends or followers on your blog, you will encourage others to become friends too..

Who-Tweet Button : Fancy jQuery Plugin for Twitter

Author took the Topsy retweet button and jQuery-fied it, then added the “Who” part to it using the awesome Topsy API. To create this fancy share count button for your stories on twitter. that’s it! The Who part is about attributing the people who tweet your story by showing their Twitter pictures inside the retweet button. Topsy keeps a completehistory about Twitter trackbacks of your links which Author utilized in another jQuery plugin.

A jQuery Twitter Ticker

In this tutorial Author are going to create a pure jQuery & CSS twitter ticker which utilizes Twitter’s Search API. It will show your or your friends’ latest tweets, and will not require any server side code or databases. As a result, the ticker will be easily included into any web page and easily modified to your likings.

Twit – Display Twitter Tweets on a Blog

Twit is a jQuery Plugin to Display Twitter Tweets on a Blog.

Tweetquote

A simple JavaScript plugin, that pulls the latest Twitter Tweets, based on your search terms, and shows them on your website.

jQuery LiveTwitter

Lightweight, live updating Twitter search plugin for jQuery. LiveTwitter is a lightweight, live updating Twitter search plugin for jQuery.

Juitter

Juitter has a live mode which can display the latest tweets with an Ajaxed interface. It can display tweets from/to a user and containing any keywords. Optionally, this jQuery Twitter plugin can display the avatars & can be styled easily with CSS.

Tweetable – A jQuery plugin

Tweetable is a lightweight jQuery plugin which enables you to display your twitter feed on your site quickly and easily. More than just displaying the feeds you can highlight @replys as well as links being dynamically generated for ease of use.

Veetter

Veetter is a jQuery Twitter plugin that allows you to easily display your tweets on your own site or blog.

Realtime Related Tweets Bar: Another jQuery Plugin

Put up instant tweets related to a content of your choice with the Realtime Related Tweets Bar.

Tweet – jQuery plugin for Twitter

Put twitter on your website with tweet!, an unobtrusive javascript plugin for jquery.

Facebook inspired jQuery plugins

Facebox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

Tipsy – Facebook-style tooltip plugin for jQuery

Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.

FCBKcomplete

Fancy facebook-like dynamic inputs with auto complete & pre added values.

jQuery Plugin: Tokenizing Autocomplete Text Entry

This is a jQuery plugin to allow users to select multiple items from a predefined list, using autocompletion as they type to find each item. You may have seen a similar type of text entry when filling in the recipients field sending messages on facebook.

Facybox

A jQuery-based, Facebook/Fancybox-style lightbox which can display images, divs, or entire remote pages. It’s simple to use and easy on the eyes. Fancybox is great, but programmatically dealing with it is hard (you have to create an element on the fly and trigger a click on it).

Facebook Style Alert Confirm Box with jQuery and CSS

Author had designed Facebook Style Alert Confirm Box with jquery plug-in jquery.alert.js. It’s simple just changing some line of CSS code.

Facebook like Autosuggestion with jQuery, Ajax and PHP

Do you want know how to implement Autosuggestion search with jquery. Author had developed Facebook like Autosuggestion user search with jQuery, Ajax and PHP. It’s simple and clean just you have to change the database details.

Creating a Facebook-like Registration Form with jQuery

Facebook is a showcase of great UI design. And as it has become a major part of our lives, it has also raised the bar for web development, pushing developers to meet higher expectations. This however has a good side – it challenges web developers and designers to better themselves and constantly improve their work. In this tutorial, we are going to learn from the best, and create a facebook-like sign up form.

Ajaxflagmenu

AjaxFlagMenu is a simple vertical menu developed JavaScript, design is inspired from a social website Facebook, this menu is dynamically through functionality of Ajax by the XMLHttpRequest object.

FcbkListSelection

FcbkListSelection – fancy item selector (like facebook friends selector) with wide range of options.

Facebook Like Datetime Picker – Jquery Plugin

Jquery provide datetime picker UI that really awesome. And many other developer like to develop datetime picker like that. But sometime we need a simple style that match with our website style. And we can see it on Facebook Login page. And Author inspired by that create simple datetime picker with Jquery. It is a very simple plugin and maybe usefull for simple interface too.

Facebook Style jQuery Chat

This jquery chat implements all those features of gmail or facebook chat. Its so simple to integrate into your website.

Elastic

This Jquery plugin makes your textareas grow and shrink to fit its content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and its competitors is its weight.

jQuery Plugin : edit Image FaceBook Style

Author first jQuery Plugin – the FaceBook Style Image Editing jQuery Plugin. It is not so hard after all. This will add a link when hover on image. For instance, if you hover on your profile image on facebook. This Plugin meanwhile works on Div only.

Boxy

Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I’ve seen by providing an object interface to control dialogs after they’ve been created. And for simple usage scenarios, boxy also provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user.