Div positioning question

**lettie_dude** · 05-03-2007, 09:52 AM

Hi

New here and have done a bit of searching but can't find the answer I'm looking for.

I am creating an online form which will have a select list which when clicked on will display either of two further textareas i.e. select 1 textarea 1 appears, select 2 textarea 2 appears.

I have the code for this and it works fine with displaying the layers and hiding them. However the page is built with div tags and centered so the div layers sit beneath each other within the div container. I need some code that will replace the displayed div tag with the new one that is selected, something like a position anywhere code but still staying relative to the div tag it sits in.

Can anyone point me in the right direction.

Cheers

Lettie

**Bob90** · 05-03-2007, 10:16 AM

Could you give us a link to your page please.

It sounds like it shouldn't be too hard to do.

**lettie_dude** · 05-03-2007, 12:40 PM

Hi Bob90

Here is some example code. The jist of it is the form fields appear and disappear ok but due to the alignment in css the page still allows for the hidden div tag. Ideally what I want to happen is when a different selection is made the div is just replaced with the new one. I know this is acheivable if the page is aligned left and the divs are positioned ansolutely but this will not work for centered div tags so I'm assuming there is some javaScript to work around this.

Cheers

Lettie

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>title</title>
<style type="text/css">
	body {
	width:800px;
	margin-left: auto;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	background-color:#000000;
}
#Container {
	clear:both;
	width: 524px;
	padding-bottom: 10px;
	padding-top: 5px;
	padding-left: 0px;
	padding-right: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #000000;
	float: left;
}
#box {
	width: 524px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	margin-right: 18px;
	background-color: #c4dbec;
	border: 1px solid #999999;
	float: left;
}
#area {
	width: 764px;
	padding-bottom: 10px;
	padding-left: 18px;
	padding-right: 18px;
	padding-top: 10px;
	background-color: #FFFFFF;
}
</style>
</head>

<body>
<div id="area"><form method="post" action="">
	<div id="Container">
	  <select name="select" onchange="document.getElementById('dwrap').style.visibility=(this.options[selectedIndex].value=='dwrap')?'':'hidden';
		  document.getElementById('bwrap').style.visibility=(this.options[selectedIndex].value=='bwrap')?'':'hidden';
		  ">
	    <option value="dwrap">Description</option>
<option value="bwrap">Description With Bullets</option>
      </select> &nbsp;Select your Description type. Either 100 words or 65 words and 4 bullet points</div>
	  
	  <div id="dwrap" style="visibility: visible; width:auto; height:auto; clear:both; z-index:1; float:left;">
<div id="box">Description<br />
	    <textarea name="textarea1" cols="63" rows="10" id="textarea1"></textarea>
	  </div>
</div>

<div id="bwrap" style="visibility: hidden; width:auto; height:auto; clear:both; z-index:1; float:left;">
<div id="box">Description<br />
	    <textarea name="textarea2" cols="63" rows="10" id="textarea2"></textarea>
	  </div>
	  <div id="b">Bullet Points<br />
	    <table width="100%" border="0" cellpadding="3" cellspacing="0" bgcolor="#FFFFFF">
          <tr>
            <td>1. 
            <input name="1" type="text" id="1" size="32" /></td>
            <td>2. 
            <input name="2" type="text" id="2" size="32" /></td>
          </tr>
          <tr>
            <td>3. 
            <input name="3" type="text" id="3" size="32" /></td>
            <td>4. 
            <input name="4" type="text" id="4" size="32" /></td>
          </tr>
        </table>
	  </div>
</div>
	  
</form>
</div>
</body>
</html>

**Bob90** · 05-04-2007, 07:45 AM

I'm still not 100% sure what you want.
You say it still accounts for the div, even when hidden - this is true. the div is still there, you just can't see it. So i changed 'visibility' property to the 'display' property, which makes the elememnt actually contract so it takes no space! I also added a javascript function instead of doing all the code inseide the element as it looks a lot clearer.

The second div is still on the right though. I can sort that as well if you want.
I think it's just a case of putting both of the divs in a centered div.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>title</title>
<style type="text/css">
	body {
	width:800px;
	margin-left: auto;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	background-color:#000000;
}
#Container {
	clear:both;
	width: 524px;
	padding-bottom: 10px;
	padding-top: 5px;
	padding-left: 0px;
	padding-right: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #000000;
	float: left;
}
#box {
	width: 524px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	margin-right: 18px;
	background-color: #c4dbec;
	border: 1px solid #999999;
	float: left;
}
#area {
	width: 764px;
	padding-bottom: 10px;
	padding-left: 18px;
	padding-right: 18px;
	padding-top: 10px;
	background-color: #FFFFFF;
}
</style>
<script type="text/javascript">
function toggleVisibility(call, elem)//etc
	{
	var temp_elem = document.getElementById(elem);
	if(call.options[call.selectedIndex].value == elem)
		{
		temp_elem.style.display = "block";
		}
	else
		{
		temp_elem.style.display = "none";
		}
	temp_elem = null;
	}
</script>
</head>

<body>
<div id="area"><form method="post" action="">
	<div id="Container">
	  <select name="select" onchange="toggleVisibility(this, 'dwrap'); toggleVisibility(this, 'bwrap')">
	    <option value="dwrap">Description</option>
		<option value="bwrap">Description With Bullets</option>
      </select> &nbsp;Select your Description type. Either 100 words or 65 words and 4 bullet points</div>
	  
	  <div id="dwrap" style="display:block width:auto; height:auto; clear:both; z-index:1; float:left;">
		<div id="box">Description<br />
	    <textarea name="textarea1" cols="63" rows="10" id="textarea1"></textarea>
	  </div>
</div>

<div id="bwrap" style="display:none; width:auto; height:auto; clear:both; z-index:1; float:left;">
<div id="box">Description<br />
	    <textarea name="textarea2" cols="63" rows="10" id="textarea2"></textarea>
	  </div>
	  <div id="b">Bullet Points<br />
	    <table width="100%" border="0" cellpadding="3" cellspacing="0" bgcolor="#FFFFFF">
          <tr>
            <td>1. 
            <input name="1" type="text" id="1" size="32" /></td>
            <td>2. 
            <input name="2" type="text" id="2" size="32" /></td>
          </tr>
          <tr>
            <td>3. 
            <input name="3" type="text" id="3" size="32" /></td>
            <td>4. 
            <input name="4" type="text" id="4" size="32" /></td>
          </tr>
        </table>
	  </div>
</div>
	  
</form>
</div>
</body>
</html>

**Bob90** · 05-04-2007, 07:53 AM

To get the 'bullet points' (Text fields) below the 'Description' just make sure the class of the bullent points is 'box', not b.

Hope this helps

**Bob90** · 05-04-2007, 08:02 AM

Went overboard here, got rid of the extra box, its not needed.

Code:

<div id="area">
	<form method="post" action="">
	<div id="Container">
	  <select name="select" onchange="toggleVisibility(this, 'box')">
	    <option value="dwrap">Description</option>
		<option value="box">Description With Bullets</option>
      </select> &nbsp;Select your Description type. Either 100 words or 65 words and 4 bullet points</div>
	  
	  
		<div id="dwrap" style="display:block width:auto; height:auto; clear:both; z-index:1; float:left;">
			<div class="box">Description<br>
	    	<textarea name="textarea1" cols="63" rows="10" id="textarea1"></textarea>
			</div>
		
			<div id="box" class="box" style="display:none">Bullet Points<br>
				<table width="100%" border="0" cellpadding="3" cellspacing="0" bgcolor="#FFFFFF">
				  <tr>
					<td>1. 
					<input name="1" type="text" id="1" size="32" /></td>
					<td>2. 
					<input name="2" type="text" id="2" size="32" /></td>
				  </tr>
				  <tr>
					<td>3. 
					<input name="3" type="text" id="3" size="32" /></td>
					<td>4. 
					<input name="4" type="text" id="4" size="32" /></td>
				  </tr>
				</table>
			</div>
		</div>
</div>

**lettie_dude** · 05-04-2007, 09:08 AM

Cheers Bob thats perfect. I've worked it in to what I have designed and it works great. Cheers Bud.

**lettie_dude** · 05-04-2007, 09:56 AM

Hi Bob

One more question. I'm now looking to clear the un-displayed text field when it is not the choosen one. Obviously this will apply to clearing the bullet points if just the description field is selected. I've tried to implement this code but it does not appear to be working any clues?

This is the function.

Code:

function clearField(field) {
	document.formname.field.value="";
	return;
}

This is the call I have put on the opposing textfeild to clear the one that is not selected.

Code:

onfocus="clearField('textfieldNameToBeCleared')"

Any further help appreciated.

Cheers

**Bob90** · 05-04-2007, 07:44 PM

Either use

Code:

onfocus="clearField(textfieldObjectToBeCleared)"
like
onfocus="clearField(document.form.fieldName)"

OR

Code:

function clearField(field) {
	document.getElementById(field).value = "";
	return;
}

**Twey** · 05-04-2007, 08:21 PM

Neither will work, because you never actually use the argument.

Code:

function clearField(field) {
  document.forms['formname'].elements[field].value = "";
}

The return statement is superfluous at the end of the function: undefined (the result of a return statement without a value) is returned by default anyway, and there's no more code to skip executing.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

If you're going to use XHTML, use the modern Strict DOCTYPE. However, it's generally a bad idea to use XHTML for general purpose on the Web, since IE users may wish to view your site.

This is the wrong content type for XHTML. XHTML must be served with the application/xhtml+xml MIME type. Specifying it here, however, will do no good, since it will be overridden by the MIME type specified in the HTTP headers, which, if you can see the page with IE, is text/html: IE attempts to error-correct the XHTML into valid HTML.

Thread: Div positioning question

Thread Tools

Search Thread

Div positioning question

Hello

Hey

Ok

Excellent!

Again, I'm not 100% sure what

Bookmarks

Bookmarks

Posting Permissions