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

supernatural_247 · #1 (**permalink**) 05-22-2007, 04: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, 06: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, 05: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, 08: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, 10: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, 02: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, 02: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

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Whatever:Hover doesn't work in IE7	trancehead	Graphics & Design Discussion Forum	8	11-12-2008 08:32 PM
IE Hover	PARoss	Web Programming Discussion Forum	10	05-18-2007 05:37 AM
How do I make a membership page for customer login & det	cjhardy	Web Programming Discussion Forum	1	07-04-2006 06:56 AM
CSS HOVER-IE	candlese	Graphics & Design Discussion Forum	3	12-10-2005 10:17 AM
CSS hover links	justinw	Graphics & Design Discussion Forum	9	03-20-2004 03:48 PM