Working with Layout

I am going to have several sectons on my webpage that I would like to allow the user to be able to maximize and minimize them as needed.  In otherwords allow them to see only what they care to see. I am using Visual Studio 2005.  The quickest example I know of is the experts-exhange "Welcome Premium Service Member" where you can minimize and maximize that section.

How can I do this without buying expensive software.  Should this be in the visual interdev section?
flfmmqpAsked:
Who is Participating?
 
b0lsc0ttIT ManagerCommented:
That is a pretty easy and clean way to do it.  You might be able to improve it a bit depending on the page content but basically the method you have (function to show/hide and use display style) is the best.  You can add some extra effects by changing the description or image of what is clicked to show/hide the div.  For example if it is a link with Show Me then you can change it to Hide Me.  Another option is using a small plus or minus image to show or hide.  I can help you with this if you need it.

Let me know if you have a question or what additional information I can provide.  The method you have now is basically the easiest and best way to do what you want.

bol
0
 
flfmmqpAuthor Commented:
I am currently using this but I thought a nicer way must exist or an easier way.


<script language="javascript" type="text/javascript">
<!--


var hiddenContentClass = "extra";
var hiddenContentElement = "tbody";

function flip(e) {
  if (document.getElementById(e).style.display == 'none') {
    document.getElementById(e).style.display = '';
  } else {
    document.getElementById(e).style.display = 'none';
  }
}

function hideall() {
  for (i=0;i<document.getElementsByTagName(hiddenContentElement).length;i++) {
    if(document.getElementsByTagName(hiddenContentElement).item(i).className == hiddenContentClass){
      document.getElementsByTagName(hiddenContentElement).item(i).style.display="none";
    }          
  }
}

window.onload = function() {
  hideall();
};

// -->
</script>
0
 
BadotzCommented:
Perhaps:

<script language="javascript" type="text/javascript">

var hiddenContentClass = "extra";
var hiddenContentElement = "tbody";

function flip(el)
{
      el = document.getElementById(el); // less typing ;-)
      
      el.style.display = (el.style.display == 'none' ? '' : 'none');
}

function hideall()
{
      var els = document.getElementsByTagName(hiddenContentElement);

      for (i = 0; i < els.length; i++)
      {
            if (els.item(i).className == hiddenContentClass)
            {
                  els.item(i).style.display = "none";
            }
      }
}

window.onload = function()
{
      hideall();
};

</script>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
b0lsc0ttIT ManagerCommented:
Less typing is nice; the basic idea is still the same though.  There was an error in the new code.

      el.style.display = (el.style.display == 'none') ? '' : 'none';

The closing parentheses needs to be after the "if" and before the question mark character.  That method is a simplified if statement and a great suggestion for simplifyng.

There is one other problem, I believe, that was in the original code.  I overlooked it since I thought this was more about concept.  Arrays or collections in Javascript used the square brackets instead of parentheses.  You probably need to make change like below in the hideall() function.  I will correct your original code but you could make the same change in the simplified code suggested above.

function hideall() {
  for (i=0;i<document.getElementsByTagName(hiddenContentElement).length;i++) {
    if(document.getElementsByTagName(hiddenContentElement)[i].className == hiddenContentClass){
      document.getElementsByTagName(hiddenContentElement)[i].style.display="none";
    }          
  }
}

Hopefully the recent post will bring this back to life.  Let us know if you have a question or need more info.

bol

p.s. Since were simplifying the script tag should just be ...

<script type="text/javascript">

The language property/attribute is deprecated.
0
 
BadotzCommented:
bol: right you are. It's these @#$% fingers...
0
 
b0lsc0ttIT ManagerCommented:
Badotz - LOL.  I know what you mean.  By the end of the day the Backspace key is the one that gets the most use.  If your post revitalizes this and gets the Asker to close/comment then it is worth it. :)

bol
0
 
Computer101Commented:
Forced accept.

Computer101
EE Admin
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.