Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Working with Layout

Posted on 2007-08-01
8
Medium Priority
?
189 Views
Last Modified: 2013-12-24
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?
0
Comment
Question by:flfmmqp
7 Comments
 

Author Comment

by:flfmmqp
ID: 19611876
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
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 1000 total points
ID: 19623149
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
 
LVL 29

Assisted Solution

by:Badotz
Badotz earned 1000 total points
ID: 20052504
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
NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 20052640
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
 
LVL 29

Expert Comment

by:Badotz
ID: 20052763
bol: right you are. It's these @#$% fingers...
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 20052796
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
 
LVL 1

Expert Comment

by:Computer101
ID: 20246317
Forced accept.

Computer101
EE Admin
0

Featured Post

Granular recovery for Microsoft Exchange

With Veeam Explorer for Microsoft Exchange you can choose the Exchange Servers and restore points you’re interested in, and Veeam Explorer will present the contents of those mailbox stores for browsing, searching and exporting.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
Suggested Courses

579 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question