How to make a hover login box like this...

supernatural_247 · #1 (**permalink**) 05-22-2007, 03:41 AM

Go to www.ilike.com and click on the "Sign in" link under the logo.

The login form should expand in a nice box with a faded background. I want to create a box just like that one... where someone clicks a link, and it opens a box that overlaps the rest of the page and has a link to close it.

But the code for the text within the expanding box must be on the same page as the rest of the page's code - I found some javascript examples that call a separate page, but this won't do.

Do any of you know how this is done? Any tutorials on how to do this?

Thanks in advance!

le_gber · #2 (**permalink**) 05-22-2007, 05:08 AM

Everything you need is on that page.

Look for the div called 'login_dialog', that's where the login forms are.

Then look at the javascripts and see how it's been done.

You have no other choice but to use javascript / dom scripting to achieve this effect to switch on and off the form overlay.

If the code is too complicated and you can't find what you want, try google search for 'css javascript hide show divs'. It should return examples/tutorials on how to do it.

calmdesign · #3 (**permalink**) 05-23-2007, 04:45 AM

Have a look at these to see if they help you with what you're trying to do.

http://jquery.com/demo/thickbox/

http://particletree.com/examples/lightbox/

http://stickmanlabs.com/lightwindow/

Coris

spooky69 · #4 (**permalink**) 05-23-2007, 07:42 AM

The jQuery thickbox method is very easy to use - did a similar thing on my site. Why do you say calling a different page will not do and that the text for the login box must be on the same page?

supernatural_247 · #5 (**permalink**) 05-23-2007, 09:19 PM

Quote:

Originally Posted by spooky69

The jQuery thickbox method is very easy to use - did a similar thing on my site. Why do you say calling a different page will not do and that the text for the login box must be on the same page?

The code for the login fields (username /password) and submit button must be on the same page as the code that processes the login. I tried putting the login form code on a separate file and then used the javascript to call the loginBox.asp page (that has the login form code). And although it logged me in, it did not refresh properly.

This jQuery Thickbox looks really cool, and I'd like to use it for the login area. However, I want to use Lightbox for the listing images, and I read in the FAQ that it will conflict. Is this true?

also, is the Compressed version of jQuery ok for the single purpose that I need it for - the login box? I'm not too familiar with javascript, and my main priority is a quick loading site.

Thanks for all the help guys!

supernatural_247 · #6 (**permalink**) 05-24-2007, 01:09 AM

btw, I installed Thickbox for the images here:

Apartments For Rent By Agent - Listing #2435587

but I notice that if I refresh the page and I click an image as soon as I do that, it sometimes goes to the actual image link

i.e. http://www.ihomeconnect.com/images/2792_1.jpg

instead of opening the viewer.

Any ideas as to why this is happening? If it has something to do with loading of the js file, is there a way to load it before everything else and have it "stick" for the rest of the user's time on the site?

supernatural_247 · #7 (**permalink**) 05-24-2007, 01:29 AM

ahh... for those of you using Thickbox, I found the Thickbox forum, and someone asked a similar question to which is the following solution:

<body style="display:none;" onload="javascript:document.body.style.display=''; ">

Now I don't have this problem!

I do wish to be certain in implementing this solution, so is this the best solution available?

ThickBox Forum - PLEASE REPLY ASAP LOADING PROBLEM