asked on

DIV Popup in a Textarea Box similar to YouTube

If you visit any video on YouTube while not logged in, check out the textarea where you can post a comment. As you mouse-over the box, the textarea is disabled and a DIV window saying to "Register or Log In" is displayed over the textarea box.

I viewed the source and they're using an onfocus and onblur on the textarea to display the DIV which is located just below the textarea. This makes perfect sense, what I'm having a hard time with is how to position the div directly over the textarea disabling the textarea in the process. Any help on this would be greatly appreciated.

syedarifbadsha80

both the DIV and the text area must be inside another div.
i believe you must user css properties with javascript to do the same.

scrathcyboy

This is their code that calls the javascript routines to change the DIVs --

Do you want me to pull up that code, or can you find the routines in the Javascript libraries?

				<form id="comments-post-form"
						class="input-collapsed">

					<textarea class="comments-textarea"
							onfocus="_addclass(_gel('comments-post-form'), 'input-focused');"
							onblur="_removeclass(_gel('comments-post-form'), 'input-focused');">
Respond to this video...
					</textarea>
					
	
	<div id="comments-post-form-alert" class="yt-alert yt-alert-warn yt-rounded">
		<div class="yt-alert-icon master-sprite"></div>
		<div id="" class="yt-alert-content">

Open in new window

scrathcyboy

Well, check the bottom of that page code, most of the javascript is there, and I think the addclass and remove class libraries are in here --"http://s.ytimg.com/yt/jsbin/www-core-vfl170539.js"

Check em out, good learning experience to go through the code to see how this is done.

DragXSlay

ASKER

I see how the div and form pieces line up but that javascript file is scattered at best. I'm having trouble making heads or tails of how the JS function aligns the DIV in the textarea.

scrathcyboy

Of course it is extremely complex and deliberately obfuscated by Youtube -- after all, they paid $1000's to develop this code, and they are merely trying to protect their intellectual property. The lesson to be learned here is that if you want to copy a feature of one of the MOST HIT sites on the internet, you might want to be prepared for weeks of research and debugging. If you just want an average popup over textarea, see
http://www.google.com/search?num=30&q=popup+DIV+over+text+area

ASKER CERTIFIED SOLUTION

cresQ

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

DragXSlay

ASKER

scrathcyboy

Clearly it's complicated, thus the reason for my post - to see if anyone had experience in this area and could help with the JS coding portion of it. I could have viewed the source on the page, I didn't need it copied into this thread. I would have assumed anyone looking into this problem would be able to do the same thing. If you didn't have the answer, why waste your time commenting? Thanks for wasting room in this thread.

DragXSlay

ASKER

Thanks for your help.