Post image for Facebook and Google Plus style of introducing new features using jQuery

Facebook and Google Plus style of introducing new features using jQuery

by Hyder

in PHP

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 .
facebook demo jquery 1facebook demo jquery 2facebook demo jquery 3facebook demo jquery 4

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

{ 1 trackback }

evolvor.com
October 27, 2011 at 11:27 am

{ 11 comments… read them below or add one }

Tarlenan October 23, 2011 at 6:51 pm

I don’t think it even a little close to those facebook uses.

Reply

Tika November 25, 2011 at 2:30 am

Great tutorial, thanks for that I was looking for that, but one question how do you make that if done with introducing one part it goes to the other part and the part will be no overlayed and the one which has been introduced should be overlayed. Also is this possible to show only once, when the users takes the tour and its done?

Reply

Jack Desert March 8, 2012 at 9:58 pm

One thing to clarify about this example is that the

div is a standalone div that you can place anywhere, like below all your other content.

(Do not just add the class ‘overlaying’ to one of your existing divs)

Reply

Jack Desert March 8, 2012 at 9:59 pm

One thing to clarify about this example is that the

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

div is a standalone div that you can place anywhere, like below all your other content.

(Do not just add the class ‘overlaying’ to one of your existing divs)

Reply

Jack Desert March 8, 2012 at 10:05 pm

It also works better if you use
.overlay{
position: fixed;
}
instead of ‘position: absolute’. That way if you scroll after the javascript fires, the entire screen still shows the overlay.

Reply

Jack Desert March 8, 2012 at 10:14 pm

You must also set the z-index of the .spotlight div higher than the z-index of the overlay so it is not shrouded by the overlay.

.spotlight{
z-index: :
}

Reply

Comprar y vender April 20, 2012 at 11:49 am

What is the compatibility? Browsers?

Reply

Frank April 24, 2012 at 1:20 pm

Please thank you for this post. How can I make it show only once in that only newly registered members can see the message.

Thank you.

Reply

Abhishek June 7, 2012 at 11:41 am

Brilliant! Thanks a lot for sharing it. I was looking for some similar demo and saw your code. Today I am going to do it for my website http://www.amlabc.com and see how it ends up.

-Abhi

Reply

Ahmad September 4, 2012 at 8:25 pm

Hi
Nice and very very useful topic but I have just one problem:
when I try to make my site work ,the site work well on localhost but the servers says : “Warning: set_time_limit() has been disabled for security reasons” can any body help please

Reply

vigneshraj December 8, 2012 at 12:35 pm

nice tutorial.. sometimes the tool tip above jquer slider hides behind slider.. what to do..?!

Reply

Leave a Comment

Previous post:

Next post: