Facebook and Google Plus style of introducing new features using jQuery

• Tweet

• Tweet

Each time Facebook or Google Plus rolls out new features,they got a unique way of introducing it to the users by ‘blurring’ (ok to be more technical,by adding an overlay ) the whole user interface and turn it into a sort of demo mode.This article is just about how you can turn your site into a sort of demo mode to make your visitors aware that you got new features on your website.
Below are some screenshots that i captured when facebook introduced a bunch of new options to the wall a few weeks ago .

In this tutorial you’ll learn how to do the same stuff using jQuery .I will be using the html code in my previous tutorial on how to create a Facebook-style wall and Flowplayer’s jQuery Tooltip for displaying the description of the features on our page.

Adding and removing an Overlay

The first step will be to create an overlay that blocks the user interface and add focus on some parts on the website.Below is the css style for creating an overlay on the page :
The code is pretty simple.We create a css class that will add a black overlay.The opacity determine the level of darkness of the overlay.

.overlay {
	background-color: black;
	bottom: 0;
	left: 0;
	opacity: 0.3;/*Takes value between 0 and 1*/
	position: absolute;
	right: 0;
	top: 0;
}

The class .overlay will be assigned via jquery to a div with a class ‘overlaying’ :

 <div class="overlaying" ></div>

Below are 2 functions for adding and removing an overlay :

//This function removes overlay to free the UI
function spotlightoff() {
 $('.overlaying').animate({
        opacity: 0
    }, 100, function () {
        $('.overlaying').removeClass('overlay');
    });
}

//This function adds an overlay on the UI and add a
//white background to the html element id passed as an argument in the func
function spotlighton(element) {
    $(element).addClass('spotlight');
    $(element).css(" background-color", "white");
    $('.overlaying').css("opacity", "0.3");
    $('.overlaying').addClass('overlay');
}

At this stage,you should have something like this ( snapshot 1 ).

Creating tooltip message

The next step is to create the tool tip.As i previously mentioned i used Flowplayer’s jQuery Tooltip with a little bit of customization .Below is the code to initialize the first tooltip message .I highly recommend to have a look at the official page for a description of each of the tooltip property used below :

var wall_tooltip = $("#wall").tooltip({ // binding the tooltip to the html element with id = wall
        tip: '.tooltip#first',
        effect: 'slide',
        fadeOutSpeed: 100,
        predelay: 400,
        delay: 100000000,
        offset: [-15, -50],
        position: 'bottom center',
        events: {
            def: ",",
            input: ",",
            widget: ",",
            tooltip: ","
        },
        api: true
    });

    wall_tooltip.show();//then show the first tool tip when document is ready

At this stage , you should have something like this ( snapshot 2) .

Blending them together !

We are now just a few codes away to have a complete working demo application .I’ll just add more code (basically the same as above) to add a new tool tip message binded to the ’share’ button .

	// Second Tool Tip Initialisation - START
    var share_button_tooltip = $("#shareButton").tooltip({

        tip: '.tooltip#second',
        effect: 'fade',
        fadeOutSpeed: 100,
        predelay: 400,
        delay: 100000000,
        offset: [-15, 0],
        position: 'bottom center',
        events: {
            def: ",",
            input: ",",
            widget: " , ",
            tooltip: ","
        },
        api: true
    });

And some click events for each of the tooltip above .Comments are added inline with the code below :

    $("a.close#first").click(function () { //on Clicking the first tooltip 'OK' Button
	// hide the tooltip
        $(this).parents().find("#wall").tooltip().hide();
        //then show the second tool tip
        share_button_tooltip.show();

    });

    $("a.close#second").click(function () { //on Clicking the second tooltip 'Got it' Button
        $(this).parents().find("#shareButton").tooltip().hide(); // hide it
        spotlightoff();//This function 'frees' the blocked UI by removing the overlay

    });

Wrap up

So here’s a small tutorial how you can turn your website into a sort of demo mode to introduce new features to your users .You might want to use it also if you have a not-so-easy user interface in your web apps.Let me know in the comment section below how you find it and how you gonna use it :).

Related Posts

1. An Alternative to Pagination : Facebook and Twitter Style
2. Google Plus Click Animation effect on Stream Page using Jquery
3. Create a facebook post to wall system using PHP and jQuery Part 2
4. Create a facebook post to wall system using PHP and jQuery Part 1
5. Create Google Plus-Style Button using CSS3

After Post

Tagged as: demo, Facebook, Google Plus, Jquery