Drop down/ Overlapping Content script (Mod)

**Master-T** · 05-23-2007, 07:13 AM

Script Title: Drop down/ Overlapping Content script

Script URL: http://www.dynamicdrive.com/dynamici...lapcontent.htm

When I first saw this script I thought it was exactly what I needed but I couldn't get it to do it.

On the script URL, if you click "Demo 2"... That's all I need, and I would like to add a HTML login form on it.

Would this be possible?

I had one before but it didn't work very well in FF.

Thanks.

**codeexploiter** · 05-23-2007, 07:37 AM

Check the following code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		<script type="text/javascript">

/***********************************************
* Drop Down/ Overlapping Content- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function overlay(curobj, subobjstr, opt_position){
if (document.getElementById){
var subobj=document.getElementById(subobjstr)
subobj.style.display=(subobj.style.display!="block")? "block" : "none"
var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0) 
var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0)
subobj.style.left=xpos+"px"
subobj.style.top=ypos+"px"
return false
}
else
return true
}

function overlayclose(subobj){
document.getElementById(subobj).style.display="none"
}

</script>
	</head>
	<body>
	<b><a href="search.htm" onClick="return overlay(this, 'subcontent')">Search DD</a></b><br />

<!--Do not remove outer most DIV tag with id="subcontent"-->
<DIV id="subcontent" style="position:absolute; border: 9px solid orange; background-color: white; width: 300px; padding: 8px; display:none">

<p><b>Search Dynamic Drive:</b></p>
<form method="get" action="http://search.freefind.com/find.html" id="topform">
<input type="HIDDEN" NAME="id" SIZE="-1" VALUE="6299074" />
<input type="HIDDEN" NAME="pageid" SIZE="-1" VALUE="r" />
<input type="HIDDEN" NAME="mode" SIZE="-1" VALUE="ALL" />
<input type="HIDDEN" name="n" value="0">
<input name="query" maxlength="255" style="width: 150px" id="topsearchbox" alt="Search" /> 
<input value="Search" class="topformbutton" type="submit" />
</form>
<div align="right"><a href="#" onClick="overlayclose('subcontent'); return false">Close</a></div>

</DIV>

<p style="padding-left: 800px"><b><a href="search.htm" onClick="return overlay(this, 'subcontent2', 'rightbottom')">Show Content</a></b><br /></p>

<!--Do not remove outer most DIV tag with id="subcontent2"-->
<DIV id="subcontent2" style="position:absolute; display:none; border: 9px solid black; background-color: lightyellow; width: 400px; height: 400px; padding: 8px">

<form name="f1" action="" method="post">
Enter Name <input type="text" name='name' id='name' /><br />
Enter Email <input type="text" name='mail' id='mail' /><br />
<input type='button' name='button1' value='click' onclick="javascript: alert('This is possible');" />
</form>

<div align="right"><a href="#" onClick="overlayclose('subcontent2'); return false">Close Box</a></div>

</DIV>
	</body>
</html>

I've colored the portion where i've made the changes in blue.

**Master-T** · 05-23-2007, 08:15 AM

Thank you, but before I try it out, what is the link "search.html" for?

<a href="search.htm" onClick="return overlay(this, 'subcontent')">Search DD</a>

I would only need one link "login" and when clicked, the popup box apears.

I thought something like this would be better?:

<a href="javascript:login('show');">login</a>

Here's one I used recently but it don't work well in FF:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>Popup Box</title>
  <style type="text/css">
  #popupbox{
  margin: 0; 
  margin-left: 40&#37;; /* This gets it relatively center on the screen */
  margin-right: 40%; /* This gets it relatively center on the screen */
  margin-top: 50px; /* Makes it a little off the top of the screen */
  padding-top: 10px; /*  Make the text not touching the top on the login box */
  width: 20%; /* For centering it on the screen */
  height: 150px; /* The height of the login box */
  position: absolute; /* Makes sure its absolute so it doesn't dock with everything else */
  background: #FBFBF0; /* Login Box background color. Change this if desired. */
  border: solid #000000 2px; /* Makes a black border around the login box */
  z-index: 9; /* Makes it on top of everything else */
  font-family: arial; /* Sets the font */
  visibility: hidden; /* Makes it hidden at first. Very Important.*/
  }
  </style>
  <script language="JavaScript" type="text/javascript">
  function login(showhide){
    if(showhide == "show"){
        document.getElementById('popupbox').style.visibility="visible"; /* If the function is called with the variable 'show', show the login box */
    }else if(showhide == "hide"){
        document.getElementById('popupbox').style.visibility="hidden"; /* If the function is called with the variable 'hide', hide the login box */
    }
  }
  </script>
</head>
<body>

<div id="popupbox"> <!--Start login box-->
<form name="login" action="" method="post">
<center>Username:</center>
<center><input name="username" size="14" /></center>
<center>Password:</center>
<center><input name="password" type="password" size="14" /></center>
<center><input type="submit" name="submit" value="login" /></center>
</form>
<br />
<center><a href="javascript:login('hide');">close</a></center> <!-- Closes the box-->
</div> <!--End login box-->

<a href="javascript:login('show');">login</a> <!--Opens the box -->
</body>
</html>

The above works perfect in IE but not FF.

Or would it be easier to make my old one compatible with FF and other browsers? or is that too time consuming?

**Master-T** · 05-23-2007, 04:17 PM

Anyone?

**thetestingsite** · 05-23-2007, 04:22 PM

You can use the code that Codex posted above, just change the link href and name to what ever you want.

Code:

<a href="login.html" onClick="return overlay(this, 'subcontent')">Login</a>

As long as the link has the onClick="return overlay(this,'subcontent')" part in it, you can make the link have anything else you want in it.

Hope this helps.

**Master-T** · 05-25-2007, 01:38 AM

This is the part of the script i'm using now:

It works ok, take a look: http://pc-uk.110mb.com/welcome_test.php ("test popup login" link).

For some reason, when I edit the CSS to make the popup smaller, it ends up *deformed* in Firefox. why is this?

Code:

/***********************************************
* Drop Down/ Overlapping Content- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function overlay(curobj, subobjstr, opt_position){
if (document.getElementById){
var subobj=document.getElementById(subobjstr)
subobj.style.display=(subobj.style.display!="block")? "block" : "none"
var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0) 
var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0)
subobj.style.left=xpos+"px"
subobj.style.top=ypos+"px"
return false
}
else
return true
}

function overlayclose(subobj){
document.getElementById(subobj).style.display="none"
}


<DIV id="subcontent2" style="position:absolute; display:none; border: solid #000000 2px; background-image: url(images/vista_bg.jpg); width: 400px; height: 400px; padding: 8px">

		<form action="http://pc-uk.110mb.com/community/index.php?action=login2" method="post" accept-charset="ISO-8859-1" name="frmLogin" id="frmLogin" style="margin-top: 4ex;" onsubmit="hashLoginPassword(this, '3a485389ec9be246c240dad07d5abaf3');">
			<table border="0" width="400" cellspacing="0" cellpadding="4" class="tborder" align="center">
				<tr class="titlebg">
					<td colspan="2">
						<img src="http://pc-uk.110mb.com/community/Themes/classic/images/icons/login_sm.gif" alt="" align="top" /> Login
					</td>
				</tr><tr class="windowbg">
					<td width="50%" align="right"><b>Username:</b></td>
					<td><input type="text" name="user" size="20" value="" /></td>
				</tr><tr class="windowbg">
					<td align="right"><b>Password:</b></td>
					<td><input type="password" name="passwrd" value="" size="20" /></td>
				</tr><tr class="windowbg">
					<td align="right"><b>Minutes to stay logged in:</b></td>
					<td><input type="text" name="cookielength" size="4" maxlength="4" value="60" /></td>
				</tr><tr class="windowbg">
					<td align="right"><b>Always stay logged in:</b></td>
					<td><input type="checkbox" name="cookieneverexp" class="check" onclick="this.form.cookielength.disabled = this.checked;" /></td>
				</tr><tr class="windowbg">
					<td align="center" colspan="2"><input type="submit" value="Login" style="margin-top: 2ex;" /></td>
				</tr><tr class="windowbg">
					<td align="center" colspan="2" class="smalltext"><a href="http://pc-uk.110mb.com/community/index.php?action=reminder">Forgot your password?</a><br /><br /></td>
				</tr>
			</table>

			<input type="hidden" name="hash_passwrd" value="" />
		</form>
		<p>Who's online:&nbsp;<?php ssi_logOnline(); ?></p>

<div align="centre"><a href="#" onClick="overlayclose('subcontent2'); return false">Close Box</a></div>

</DIV>

<a href="search.htm" onClick="return overlay(this, 'subcontent2', 'rightbottom')">test popup login</a>

Thread: Drop down/ Overlapping Content script (Mod)

Thread Tools

Search Thread

Drop down/ Overlapping Content script (Mod)

Bookmarks

Bookmarks

Posting Permissions