Display/Hide Div's

redtoad · Jun 3, 2004

I have a page with a select box. The select box is defaulted to index 2, and it's corresponding div. When the user makes a selection from the select box, the previous selection's div should disappear, and the new selection's div should display.

However, the new div is appearing below the old div, and the old div is still visible.

I use an onChange event to trigger the js that should set the display property for the selected element to block and all of the other elements to none. Here's some of the relevent code. Any ideas appreciated.

Code:

<STYLE type="text/css">
<!--
   #pending_id { position: relative; 
				 display: block;}
   #accepted_id { position: relative;
                 display: none; }
   #declined_id { position: relative;
                 display: none; }
   #rescinded_id { position: relative;
                 display: none; }
-->
</STYLE>
<script language="JavaScript">
// function showDiv()
//  this function takes the id of a div
//  and calls the other functions required
//  to show that div
//
function showDiv(div_id)
{

  var style_sheet = getStyleObject(div_id);
  if (style_sheet)
  {
    hideAll();
    changeObjectVisibility(div_id,"block");
  }
  else 
  {
    alert("sorry, this only works in browsers that do Dynamic HTML");
  }
}

// function hideAll()
//  hides a bunch of divs
//
function hideAll()
{
   changeObjectVisibility("pending_ID","none");
   changeObjectVisibility("accepted_ID","none");
   changeObjectVisibility("declined_ID","none");
   changeObjectVisibility("rescinded_ID","none");
}

// function getStyleObject(string) -> returns style object
//  given a string containing the id of an object
//  the function returns the stylesheet of that object
//  or false if it can't find a stylesheet.  Handles
//  cross-browser compatibility issues.
//
function getStyleObject(objectId) {
	if(document.getElementById && document.getElementById(objectId)) {
	return document.getElementById(objectId).style;
   }
   else if (document.all && document.all(objectId)) {  
	return document.all(objectId).style;
   } 
   else if (document.layers && document.layers[objectId]) { 
	return document.layers[objectId];
   } else {
	return false;
   }
  }
function changeObjectVisibility(objectId, newVisibility) {
    // first get a reference to the cross-browser style object 
    // and make sure the object exists
    var styleObject = getStyleObject(objectId);
    if(styleObject) {
	styleObject.display = newVisibility;
	return true;
    } else {
	// we couldn't find the object, so we can't change its visibility
	return false;
    }
}
</script>

Supra · Jun 3, 2004

Well if changeObjectVisibility doesn't return, the other DIVs don't get to be hidden, right? It's 2AM, I think I may be doing more damage than good ;|

dkdude · Jun 4, 2004

Hi redtoad,

Maybe this example can help you find the best solution for your project:

Code:

<HTML>
<HEAD>
  <SCRIPT LANGUAGE="JavaScript">
    function halfYear() {
      document.all.f1.qtr.style.display = 'none';
      document.all.f1.halfyr.style.display = 'block';
    }
    function quater() {
      document.all.f1.halfyr.style.display = 'none';
      document.all.f1.qtr.style.display = 'block';
    }
  </SCRIPT>
</HEAD>

<BODY>
  <INPUT TYPE="radio" NAME="listsize" onClick="quater()" CHECKED>Quater<BR>
  <INPUT TYPE="radio" NAME="listsize" onClick="halfYear()">Half Year<BR>
  <FORM NAME="f1" ACTION="" METHOD="">
    <SELECT ID="qtr" NAME="month" STYLE="display:block;">
      <OPTION VALUE="Jan">Jan</OPTION>
      <OPTION VALUE="Feb">Feb</OPTION>
      <OPTION VALUE="Mar">Mar</OPTION>
    </SELECT>
    <SELECT ID="halfyr" NAME="month" STYLE="display:none;">
      <OPTION VALUE="Jan">Jan</OPTION>
      <OPTION VALUE="Feb">Feb</OPTION>
      <OPTION VALUE="Mar">Mar</OPTION>
      <OPTION VALUE="Apr">Apr</OPTION>
      <OPTION VALUE="May">May</OPTION>
      <OPTION VALUE="Jun">Jun</OPTION>
    </SELECT>
  </FORM>
</BODY>
</HT

Good Luck §;O)

Jakob

redtoad · Jun 4, 2004

I got it working. This was a modification to a page that didn't use div's before, so the issue was I broke up the pre-existing table tags, and the div's weren't displaying properly. So I created new table, tr and td tags and now it is displaying correctly.

Thanks for the response.

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!

Display/Hide Div's

redtoad

Programmer

Supra

Programmer

dkdude

Programmer

redtoad

Programmer

Similar threads

Part and Inventory Search

Sponsor