How do I Google Plus and Facebook Demo opacity Javascript?

Question

Recently Google+ and Facebook have added a nice feature that when a user first logs in and there are new features available it displays it as a demo mode of some sort highlighting the element in question and darkening or changing opacity on the rest of the screen as a means to focus on that element. It also shows step by step tooltips for the demo.

Does anybody know of an open source script or jquery plugin that does this already?

score 2 · Answer 1 · answered Aug 30 '11 at 23:55

2

They basically block the UI and show an overlay on top of the whole page. You can try jQuery blockUI plugin it will help you block the page and then you can show an overlay on top of it.

http://plugins.jquery.com/project/blockUI

answered Aug 30 '11 at 23:55

ShankarSangoli

69,612
13
93
124

Thanks for the reply this may be useful as well for a few other needs on my current project – lagrz Sep 02 '11 at 20:16

score 1 · Answer 2 · answered Aug 31 '11 at 00:03

1

I don't know of one, so I made one: http://jsfiddle.net/minitech/A9AAa/

It's pretty simple, call spotlightOn and pass the element on which the "spotlight" should "shine" as an argument. Call spotlightOff to turn the spotlight off.

It should degrade gracefully.

answered Aug 31 '11 at 00:03

Ry-

218,210
55
464
476

Thanks I didn't know it could be made so easily – lagrz Sep 02 '11 at 20:15

How do I Google Plus and Facebook Demo opacity Javascript?

2 Answers2