how can i make sign-in like in w3schoolforum

[jemz]

Hi, i just want to ask on how can i make like the sign-in in the w3school forum, when we click the sign it will show the small box colored green and then it will display the login form,is it okay to ask on this ?i just want to learn how.I hope you can help me. Thank you in advance.

[niche]

The page source should answer your question.

[jemz]

Is that a timer after the green box show in a couple of seconds,the form login will display?

[Don E]

jemz, Sometime ago I created the same thing. This is how it works or similar to: When you click on the link, you start a few things going on. First you will notice the "loader" bar( the green box) appear at the top center of the page. This is probably a gif image using CSS positioning to place it there and become visible by using display: block for example. A settimeout will cause this to be displayed for about a second or two. The settimeout's function parameter then calls the function that either 'sets up' the login box to appear or the actual function itself. Most likely a setup type function because with this function you set certain CSS properties of the login box in place for it to appear along with having the partially dimmed background element appear behind the login-box giving the impression that everything in the background is disabled(ie, by setting the z-index of the dimmed and login-box elements to their appropriate values) and the only thing you can do is type in the login-box. The last line in the function you have a setinterval where it's function parameter will be set to repeatedly call another function that makes the login-box fade in by it's CSS opacity property. Hopefully this gives you an idea.

Edited November 14, 2012 by Don E

[jemz]

jemz, Sometime ago I created the same thing. This is how it works or similar to: When you click on the link, you start a few things going on. First you will notice the "loader" bar( the green box) appear at the top center of the page. This is probably a gif image using CSS positioning to place it there and become visible by using display: block for example. A settimeout will cause this to be displayed for about a second or two. The settimeout's function parameter then calls the function that either 'sets up' the login box to appear or the actual function itself. Most likely a setup type function because with this function you set certain CSS properties of the login box in place for it to appear along with having the partially dimmed background element appear behind the login-box giving the impression that everything in the background is disabled(ie, by setting the z-index of the dimmed and login-box elements to their appropriate values) and the only thing you can do is type in the login-box. The last line in the function you have a setinterval where it's function parameter will be set to repeatedly call another function that makes the login-box fade in by it's CSS opacity property. Hopefully this gives you an idea.

Hi, Thank you for this, Okay i will make a try and i will write back to you if i get in trouble.thank you so much