Conflict: <DIV> Element with other elements

NonLinear · #1 (**permalink**) 01-13-06, 11:06

Hi, I use a javascript function in client that fills with contents a DIV section when this function called. The problem is that the contents appear back of the other elements (such as drop down lists) that appear in the same range. How can appear the contents of DIV element (that is filled dynamically) over the other elements in the same range?
Thanks

kropes2001 · #2 (**permalink**) 01-15-06, 03:15

I think, if i understand you properly... you want to replace the entire contents of a <DIV> </DIV> area with new information ?

Is that correct ?

use the "InnerHTML" method

for instance

Quote:

<HTML>
<body>

<DIV id="divToUpdate"> this is the old information</DIV>
<br><br>
<input type="button" onClick="subUpdate();" value="change Information">

</body>
</html>

<script language="JavaScript">

function subUpdate()
{
divToUpdate.innerHTML="New Information : "
}
</script>

NonLinear · #3 (**permalink**) 01-16-06, 05:46

Maybe I am not understood. I have already used the innerHTML property. The problem is not there. I will explain more: The DIV element have the visibility property to 'false' as default (style="visibility:hidden").When it happens an event then a javascript function fill the DIV element with some data through the innerHTML property of DIV and change the visibility to not hidden. I hope that it is clear what is going on until now. OK .The problem is that the contents of DIV appear (whenever the visibility is not hidden) in the same region with other elements such as drop down lists, check boxes...As a result some contents of DIV element appear back of these elements (the DIV's contents are covered from these elements) and I want to appear over them. Just like the contents of a drop down list when we click it to appear them where everything that is under the list is not appeared and only the contents of the list we can see until an option selected. This is the functionality that I want. In other words I want the DIV element to be on top level in relation to other elements in the same region. Notice that this problem occur because the contents of DIV element change dynamically without page refreshing. In this situation (refreshing the page) there is no problem because the layout is predefined in such way where the componets have their own place in page.

kropes2001 · #4 (**permalink**) 01-16-06, 07:06

ok... i had to read that a couple of times to make sure i got it.

if i understand properly. you want something (the DIV) to physically (visually) be over top of the other information, so that it covers it up. you can not see the other information until you do somethnig with the DIV. then maybe the Div will dissapear again ?

you would use the style, but you need to use a "Z-order" (layering) and also some positioning

Code:

<HTML>
<body>

<table width=300 border=1 height=100 >
	<tr>
		<td>
			 this is a test
		</td>
		<td width=150>
			<span id="TheBox" style="position:relative;top:0;left:0">
				<div name="box" id="divToUpdate" style="position:absolute;border:thin dashed black;border-color:black;top:0;left:0;width:150;height:75;background-color:yellow;z-index:1">
					<center>
						<br>
						<input type="button" onClick="subClose();" value="Close">
					</center>
				</div>
			</span>
			<center>
				Hello. this is a test.			
				<br><br>
				<input type="button" onClick="subUpdate();" value="Show">
			</center>
		</td>
	</tr>
</table>
</body>
</html>


<script language="JavaScript">
divToUpdate.style.visibility = "hidden";
function subUpdate()
	{
		divToUpdate.style.visibility = "visible";
	}
function subClose()
	{
		divToUpdate.style.visibility = "hidden";
	}
</script>

rokslide · #5 (**permalink**) 01-16-06, 17:02

You might want to add the setting of the display style as well...

Code:

<script language="JavaScript">
divToUpdate.style.visibility = "hidden";
function subUpdate()
	{
		divToUpdate.style.visibility = "visible";
		divToUpdate.style.display= "block";
	}
function subClose()
	{
		divToUpdate.style.visibility = "hidden";
		divToUpdate.style.display= "none";
	}
</script>

Personally I would avoid using the absolute positioning and just use the table to handle the layout, that way you will never get things overlapping.

NonLinear · #6 (**permalink**) 01-17-06, 09:26

Ok...I am processing your ideas and I will respond soon...Thanks

NonLinear · #7 (**permalink**) 01-17-06, 09:27

Ok...I am processing your ideas and I will respond soon...Thanks

NonLinear · #8 (**permalink**) 01-18-06, 04:45

Well, the solution of z-index is very good but...we can apply this only to windowless elements such as <img>, <p> and others. It can be applied, of course, on <DIV> element but NOT on <SELECT>. Therefore, we can't separate these from each other (<DIV> from <SELECT>). I explain: if we have two elements in the same area and we want one of them to overlap the other it have to be set the z-index property both with different values (the one that we want to be on top must have bigger z-index). But <SELECT> element doesn't support this property because is not windowless element. Sorry but this solution doesn't work according to HTML documentation (look at z-index documentation that refer all that).
The other solution is to set the visibility of <SELECT> elements to hidden every time the <DIV> is appeared and set the visibility to not hidden when <DIV> is disappeared. The problem is that I don't know how big is the <DIV> section (it depends from <div>'s contents volume) every time that is appeared and therefore I can not guess which <SELECT> elements have to be hidden.
I stuck.

kropes2001 · #9 (**permalink**) 01-18-06, 05:31

Ok...
sorry, hold on a sec.

you sound like you are trying to manipulate a lot of objects on the screen, which is different than the original question posed. without knowing what you are trying to accomplish, the whole story, it is hard to provide you the best options for accomplishing it. if you can tell us and provide some screen shots or something, there might be a better way of doing it.

even if the select can not have the z-index applied directly to it, then you can still put the SELECT inside of a container (like the div or span) and manipulate the container.

NonLinear · #10 (**permalink**) 01-20-06, 02:21

Your idea is very good -(<DIV> element is a container of <SELECT>). I tried it out but it didn't work in IE 6 (I wonder why, it seems very logical) and works in Firefox (another one reason that I am thinking to stop use IE). I attach a file "Overlap.jpg" in which the problem is very clear in IE.

kropes2001 · #11 (**permalink**) 01-20-06, 05:15

check your tag structure. make sure they are closed properly and in the correct order.

i know it works in IE6 as i designed it in IE6
i have a website that has numerous containers that overlap each other

kropes2001 · #12 (**permalink**) 01-20-06, 05:18

Actually... check your table structures.
if tables are not terminated properly it can mess havoc with Span's and DIV's

on what looks like the position for the 3rd text box or drop down list, it looks like a table or list box is there and out of wack.

notice in the example i posted above, that the SPAN is a container of the DIV and that is a container of the CLOSE button

NonLinear · #13 (**permalink**) 01-23-06, 04:18

I am sorry but I have already made a very simple page from the beginning with no other elements except two <DIV> elements. The first is a container of a <SELECT> element and the second has the data that would have to overlap the first <DIV>. I set the z-index 1 and 2 respectively but the <SELECT> element was continuing to overlap the second <DIV>.
Here is the example that is not working as I want in IE 6:

<html>
<head>
<title>Test</title>
</head>
<body>
<div style="position:absolute;top=0;left=0;z-index:1">
<select>
<option>option1 first DIV</option>
<option>option2 first DIV</option>
</select>
</div>
<div style="position:absolute;top=0;left=0;z-index:2">
This area of data would have to overlap the "div" section that contain the "select"
element
</div>
</body>
</html>

kropes2001 · #14 (**permalink**) 01-23-06, 05:49

Ok, i see what you are saying.
i never noticed that before... that the select box still floats overtop of the other div.

but the reason i never noticed it is because, typically when i turn on the visibility of the 2nd div, i turn the visibility if the 1st div off.
try this

Code:

<HTML>
<body>

	<div name="box" id="divToUpdate" style="position:absolute;border:thin dashed black;border-color:black;top:0;left:0;width:150;height:75;background-color:yellow;z-index:1">
		<center>
			<input type="button" onClick="subClose();" value="Close">
		</center>
	</div>
	
	<div name="box2" id="divToUpdate2" style="position:absolute;top:0;left:0;width:150;height:75;background-color:green;z-index:1">
		<center>
		Hello. this is a test.			
		<br><br>
		<select>
			<option>option1 first DIV</option>
			<option>option2 first DIV</option>
		</select>
		<input type="button" onClick="subUpdate();" value="Show">
		</center>
	</div>
</body>
</html>


<script language="JavaScript">
divToUpdate.style.visibility = "hidden";
function subUpdate()
	{
		divToUpdate.style.visibility = "visible";
		divToUpdate.style.display= "block";
		divToUpdate2.style.visibility = "hidden";
		divToUpdate2.style.display= "none";
	}
function subClose()
	{
		divToUpdate.style.visibility = "hidden";
		divToUpdate.style.display= "none";
		divToUpdate2.style.visibility = "visible";
		divToUpdate2.style.display= "block";
	}
</script>

rokslide · #15 (**permalink**) 01-23-06, 16:48

This would be so much simpler if you dropped your absolute positioning and just used tables.

You can then make specific table rows hidden or visible and the alignment will adjust as necessary.

Internet Services

Web Development

Digital Marketing

Consumer Tech