Overlapping Content?

[rockinaway]

How can I create an overlapping DIV that when you click a button it shows below and overlaps content as well?

[phpQuestioner]

You need to combine CSS and JavaScript (this is call DHTML). You will need to create a div and set the style to what ever you want; but be sure to set the display to "none" and the position to "absolute". Then set the z-index to something like; I don't know, I always use "1000" of more. You may also have to play around with the margins of the overlapping div. Then set you JavaScript like this:

 

<script language="javascript">
function showDIV(myDIV)
{
document.getElementById(myDIV).style.display='block';
}
function hideDIV(myDIV)
{
document.getElementById(myDIV).style.display='none';
}
</script>

<div id="overlap1">
<a href="javascript:hideDIV('overlap1')">Close Me</a>
</div>

<br><br>

<a href="javascript:showDIV('overlap1')">Open Overlap Content</a>

[rockinaway]

Does that create it overlapping over content? Or does it just show and hide the div, so move content up and down?

[phpQuestioner]

If you want it to overlap; you will have to set the CSS style position to "absolute" and set the z-index higher then the rest of your elements/tags.

 

This Will Overlap:

 

<script language="javascript">
function showDIV(myDIV)
{
document.getElementById(myDIV).style.display='block';
}
function hideDIV(myDIV)
{
document.getElementById(myDIV).style.display='none';
}
</script>

<div id="overlap1" style="position:absolute;z-index:1000;width:300px;height:300px;display:none;background:white;border:solid 1px black">
<a href="javascript:hideDIV('overlap1')">Close Me</a>
</div>

Content Here...........................................................................

<br><br>

<a href="javascript:showDIV('overlap1')">Open Overlap Content</a>

 

You may have to play with the margins a bit.

 

The original code will just show/hide content; I just assumed you knew how to use CSS to style the DIV tag - sorry about that.

[rockinaway]

Ok that works.

 

Now how can I position is so that it appears below the button I am pressing to view it?

[phpQuestioner]

set the z-index of the button higher then the z-index of the overlapping content.

[rockinaway]

I mean the positioning of the div is underneath the button.. so like

 

[button1][button2][button3] 
                  [DIV appear here when button 3 clicked]

 

At the moment, eventhough button3 is clicked, the DIV appears below button1, at the start of the page.. how can I move it so that it appears below 3?

[phpQuestioner]

<input type="button" value="Button 1">
<input type="button" value="Button 2">
<input type="button" value="Button 3">
<script language="javascript">
function showDIV(myDIV)
{
document.getElementById(myDIV).style.display='block';
}
function hideDIV(myDIV)
{
document.getElementById(myDIV).style.display='none';
}
</script>

<div id="overlap1" style="position:absolute;z-index:1000;width:300px;height:300px;display:none;background:white;border:solid 1px black">
<a href="javascript:hideDIV('overlap1')">Close Me</a>
</div>

<br><br>

<a href="javascript:showDIV('overlap1')">Open Overlap Content</a>

[rockinaway]

In my overlapping DIV, I have added a table, but the table doesn't show within the DIV, it shows at the top of the page.

 

How can I get it to be part of the DIV..

I have in inside the DIV tags, but don't see why it deosn't stay in it...

[phpQuestioner]

<input type="button" value="Button 1">
<input type="button" value="Button 2">
<input type="button" value="Button 3">
<script language="javascript">
function showDIV(myDIV)
{
document.getElementById(myDIV).style.display='block';
}
function hideDIV(myDIV)
{
document.getElementById(myDIV).style.display='none';
}
</script>

<div id="overlap1" style="position:absolute;z-index:1000;width:300px;height:300px;display:none;background:white;border:solid 1px black;overflow:hidden">
<a href="javascript:hideDIV('overlap1')">Close Me</a>
<table width=100% height=90% border=1 align=left valign=top>
<td width=100% height=90% border=1 align=left valign=top>
Table Content
</td>
</table>
</div>

<br><br>

<a href="javascript:showDIV('overlap1')">Open Over</a>