Darken the page and set focus on the user input

Since the ajax/atlas days came into the play lot’s of times we need a simple input from user and don’t want to redirect user to another page. The obvious question is how to show user that his input is necessary and stay at the same page…

This is a trick I’ve seen on several web sites and I just adore it. I don’t know how other people do it, but here is my version of it.

Personally, I’ve used it while developing the upcoming version 4 of reBlogger to allow users to insert their comments on post, without leaving the page where they were reading the post.

EXAMPLE : First image is showing the page in normal mode. Second image is that same page, but user is prompted for input (her email address in this particular case). This an imaginary example, so don’t go to reblogger.com and try to see it working

So the basic idea here is that you have one div element that you’ll use as a screen (it’ll darken the page) and obviously, you can have any number of input panels that you’ll show when the main page darkens.

You’ll be using the same DarkenPage() javascript function every time you need some input from user and then you would show the input panel (another div element).

Let me just briefly explain the function that shows the input panel here :

function ShowNewsletterPanel()
{
var newsletter_panel = document.getElementById('newsletter_panel');
// w is a width of the newsletter panel
w = 300;
// h is a height of the newsletter panel
h = 300;
// get the x and y coordinates to center the newsletter panel
xc = Math.round((document.body.clientWidth/2)-(w/2))
yc = Math.round((document.body.clientHeight/2)-(h/2))
// show the newsletter panel
newsletter_panel.style.left = xc + "px";
newsletter_panel.style.top = yc + "px";
newsletter_panel.style.display = 'block';
}

As you can see we are first determining the coordinates that will center our input panel on the page. The width and height of the update panel can be changed to whatever suits your needs, but bear in mind that you need to change those values in CSS as well as in this function.

For the dark screen itself, the trick is to use

filter:alpha(opacity=80);
opacity: 0.8;

in css. The two values are here because of the browser issues. Obviously 100 is no opacity at all and 0 is complete opacitiy (the element is invisible). Feel free to play with those values until you find something you like.

Here is the link from reBlogger lab where you can download the HTML page example.

---

This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”

---

About these ads