SharePoint: How to hide the right web part column

Updated! (3/17/10) Yet another update! “Erik” pointed out that if you have a Content Editor Web Part on the page that has a table with the pattern “<td>&nbsp;</td>” then the code below also changed the table. (not good!)  “Erik” offered an interesting solution, but I got to thinking about it and there was a much better solution. So… there is new JavaScript below…   (Erik, I approved your post, but it looks like Blogger “ate it”, maybe because it had code.)

Updated! The following JavaScript only really worked if you placed it in the column to be hidden, which of course made it a bit hard to remove later on. One of the comments below got me to looking for the best way to launch JavaScript routines in a SharePoint page. This blog article by Mart Muller seems to show the best solution, and I have modified my example below to include this better solution. You can now place the JavaScript and the CEWP just about anywhere and it will work perfectly. (The changes are in BLUE.)

 

How to hide the right web part column.

The Team Site template creates a home page with two columns, one 70% wide and one 30% wide. Actually there are two more columns, one between the web part columns and one to the right. Here are two techniques to solve this problem:

Using SharePoint Designer

• Open the site
  
• Double-click on default.aspx
  
• In the Design view click in the right web part zone column and then select Delete Columns from the Table menu. Repeat for the spacer columns. Change the width of the left column to 100%.
  
• Save and then test the site in the browser.
  
• Tip: You can just as easily insert new rows and columns and then add new web part zones from the Insert, SharePoint Controls menu
  

Using a JavaScript "hack"

SharePoint Designer is not needed here, only the Content Editor Web Part.

• The trick is to identify the columns to hide. It turns out only two have widths of 30% and 70%.
  
• Add a Content Editor web part to either zone. Modify the web part and click Source Editor.
  
• Paste the following JavaScript code (changes column widths and hides the other columns):
  

The new version:

<script>

function HideWebPartZone()
{
  var x = document.getElementsByTagName("TD")
  var i=0;
  for (i=0;i<x.length;i++)
  {
    if (x[i].width=="70%")
    {
      // left column
      x[i].style.width="100%"; 

      // center (otherwise empty) column
      if (document.all) // is IE
        var x2=x[i].nextSibling;
      else
        var x2=x[i].nextSibling.nextSibling;

      x2.style.width="0";
      x2.style.display="none";
      x2.innerHTML=""; 

      // right column
      if (document.all) // is IE
        x2=x[i].nextSibling.nextSibling;
      else
        x2=x[i].nextSibling.nextSibling.nextSibling.nextSibling;

      x2.style.width="0";
      x2.style.display="none";
      x2.innerHTML=""; 

      // right margin column
      if (document.all) // is IE
        x2=x[i].nextSibling.nextSibling.nextSibling;
      else
        x2=x[i].nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling;

      x2.style.width="0";
      x2.style.display="none";
      x2.innerHTML="";

      //all done
      return;
    }
  }
}


_spBodyOnLoadFunctionNames.push("HideWebPartZone")
</script>

 

 

The old version:

<script>

function HideWebPartZone()

{
  var x = document.getElementsByTagName("TD")
  var i=0;
  for (i=0;i<x.length;i++)
    {
      if (x[i].width=="30%")
       {
         x[i].style.width="0";
          x[i].style.display="none";
       }
      if (x[i].width=="70%")
        {
          x[i].style.width="100%";
        }
      if (x[i].innerHTML=="&nbsp;")
        {
          x[i].style.width="0";
          x[i].style.display="none";
          x[i].innerHTML="";
        }
  }

}

_spBodyOnLoadFunctionNames.push("HideWebPartZone")
</script>

How about just setting the columns 50/50?

• Add a Content Editor web part to either zone. Modify the web part and click Source Editor.
  
• Paste the following JavaScript code:
  

<script>

function ReformatWebPartZone()

{

  var x = document.getElementsByTagName("TD")
  var i=0;
  for (i=0;i<x.length;i++)
    {
      if (x[i].width=="30%")
        {
          x[i].style.width="50%";
        }
      if (x[i].width=="70%")
        {
          x[i].style.width="50%";
        }
  }

}

_spBodyOnLoadFunctionNames.push("ReformatWebPartZone")

</script>