div

zxcdf5je · Nov 7, 2007

Got adress1 in table format
and address 2 displayed beneath it in another table format
wehn user comes to this page.he just get to see a visible div over these 2 tables which has a message.when the user reads the div shud get closed by using javascript and the other table then get visible for the user.this we are doing so that the user for sure reads that message and then proceeds ahead.
any idea how this could be done using javascript/CSS in <div></div>

j4606 · Nov 7, 2007

Yes you can do this with javascript/css to make sure that the user for sure reads your message. but exactly what have you tried or some more information is needed. Look up z-index, css display properties. I think you want to absolutely position a div over two tables and then show another table and hide the div? I'm confused for sure.

kaht · Nov 7, 2007

It would appear that your question at it's lowest level is how to get a div to disappear using javascript. Here's a bare-bones example that you can use to get you started in the right direction:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function hideDiv(obj) {
   obj.style.display = "none"
}

</script>
<style type="text/css">

div {
   padding:10px;
   width:300px;
   margin-bottom:20px;
   border:2px solid red;
}

</style>
</head>
<body>

<div id="divId">
   This is a div that has some information in it.<br />
   After reading this information click the close button<br />
   <a href="#" onclick="return hideDiv(document.getElementById('divId'))">Close</a>
</div>

<div>
   Here's another div with more information<br />
   However, this div does not get it's own close button
</div>

</body>
</html>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
[small] <. bites again.[/small]

zxcdf5je · Nov 7, 2007

j46060

you are rgith..i want to position it that way so that the table shows after we press close or something...

j4606 · Nov 7, 2007

Using kahts example

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function hideDiv(obj) {
   obj.style.display = "none"
}

</script>
<style type="text/css">

div{
   padding:10px;
   width:300px;
   margin-bottom:20px;


}
#divId{
	background:#EEEEEE;
	position: absolute;
	top: 20px;
	left: 80px;

}


</style>
</head>
<body>

<div id="divId">
   This is a div that has some information in it.<br />
   After reading this information click the close button<br />
   <a href="#" onclick="return hideDiv(document.getElementById('divId'))">Close</a>
</div>

<div>
   Here's another div with more information<br />
   However, this div does not get it's own close button
</div>

</body>
</html>

I don't even think you need z-index since absolute position elements are on a higher "layer"?? by default.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

div

zxcdf5je

Programmer

j4606

MIS

kaht

Programmer

zxcdf5je

Programmer

j4606

MIS

Similar threads

Part and Inventory Search

Sponsor