We help IT Professionals succeed at work.

DIV Popup in a Textarea Box similar to YouTube

DragXSlay
DragXSlay asked
on
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.
Comment
Watch Question

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.

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

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.

Author

Commented:
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.
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
Commented:
Well, it is actulay pretty easy to make!
ill try to make little example,

You got a div that is a commentbox, in that div you put an other div wich is the div we will see with onmouseover!

Ofc, the snippet code i gave is just basic, i you give an example of your code, i can try to work it out!

Greetz!

<html>
<div id="commentDiv">
   <div id="onMouseOverDiv" onmouseover="showDiv();" onmouseout="dontshowdiv">
       please login to place a comment
   </div>
</div>


<css>
#commentDiv
{
display: block;
position: relative;
// align this div as needed
}

#onMouseOverDiv
{
display: none;
position: relative;
//style this div how you wont but no need to put in alignment
}

<javascript>
function onMouseOver()
{
  var elementToShow = document.getElementById("onMouseOverDiv");
  elementToShow.style.display = block;
}

function onMouseOut()
{
  var elementToHide = document.getElementById("onMouseOverDiv");
  element elementToHide.style.display = none;
}

Open in new window

Author

Commented:
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.

Author

Commented:
Thanks for your help.