11/18/2008

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>


22 comments:

Anonymous said...

Thanks for this great tip. We were looking for this a long time.

We placed your javascript code in a function named "Maximize" and added the following line to the script:
document.onload=Maximize();

This way the function is called when the page is ready, so it can find all TD's on the page.

Anonymous said...

how do you go about removing this hack from the site once it has been implemented

Mike Smith said...

Anonymous,

"Hack"! Well... maybe...

If you added the Content Editor Web Part to the column that you were hiding then you won't be able to see the column in Edit Page mode to remove it.

Here's another "hack" to remove any web part from a page:

- Go to the page ("default.aspx" for example)
- add this to the URL: ?Contents=1
- The URL should then be: default.aspx?Contents=1
- Press Enter and you will be redirected to: yoursiteurl/_layouts/spcontnt.aspx?&url=%2fdefault.aspx
- You can now pick the bad web part (Content Editor Web Part) from the list and remove it. The hidden column will then be displayed again!

Mike

Anonymous said...

This is a fab code to hide columns, found this correct solution to the issue after wasting a lot of time on 'expert' solutions.

Anonymous said...

Absolutely brilliant. You guys made me look like a genius.

Anonymous said...

Hi, thanks for the solution but it doesn't work if you have a CEWP with tables that have an nbsp in it, it will delete the actual cells and makes the table look funny.

I've been playing with the DOM and I was able to find the table/columns (This has worked on all my pages. For testing I usually change the backgroundColor for the columns to make sure i'm getting the correct ones.

Hope this helps someone with the same problem I ran into.

[script]
function zone_fixer(){
//Set Vars for columns
var col0 = document.getElementById('MSO_ContentTable').getElementsByTagName('table')[1].getElementsByTagName('tr')[0].childNodes[0]
var col1 = document.getElementById('MSO_ContentTable').getElementsByTagName('table')[1].getElementsByTagName('tr')[0].childNodes[1]
var col2 = document.getElementById('MSO_ContentTable').getElementsByTagName('table')[1].getElementsByTagName('tr')[0].childNodes[2]
var col3 = document.getElementById('MSO_ContentTable').getElementsByTagName('table')[1].getElementsByTagName('tr')[0].childNodes[3]
//Set Style/Width information. (Note: SP uses table width, not CSS width to set width)
col0.width='50%'; //Left Zone
col1.style.display='none'; //Spacer between Zones
col2.width='50%'; //Right Zone
col3.style.display='none'; //Spacer on right side of page
}
_spBodyOnLoadFunctionNames.push("zone_fixer")
[/script]

Erik

Mark D said...

Thank you Thank you Thank you Thank you Thank you Thank you!!!

That was driving me absolutly insane. The web part "hack" is such a simple solution that works brilliantly.

I would only add that it would be best to add this into the column that was remaining and just make it hidden, thus preventing any future difficulties if you need to retrieve the right hand column.

Anonymous said...

You can also go via the explorer view, and edit te default.aspx file with editing it in notepad..

Anonymous said...

What do you do if you want it to work in firefox?

As it stands my scrollbar will disapear if I use the new script

Mike Smith said...

Anonymous,

The code above uses ".nextSibling". In IE the next sibling element is the next expected element while in Firefox blanks areas and new lines are also treated as a next sibling.

I have updated the code to deal with this. (see the "if (document.all) lines)

For more on the issue see: http://www.w3schools.com/dom/prop_element_nextsibling.asp

Mike

Phil said...

Thank You!

Fernando Rosa said...

Hah. Great tip! Let just hope we won't need to resort to this in SharePoint 2010.

Mike Smith said...

Fernando,

SharePoint 2010 team sites now have a wiki-style page where you can specify the number of columns, or page layout in general. Some of the 2010 templates still use the same two column web part page design and still have the same issue as 2007.

Mike

Kimberlee said...

Thank you so much, Mike. That worked perfectly. My boss asked for one column on the web part page, and I was lost. I cannot tell you enough how much I appreciate your help.

Unknown said...

hi,
I am writing the following code in the content editor web part in default.aspx for redirecting to some other page..its not working..
am i doing something wrong?

function redirect() {
setTimeout("location.href='https://www.NewSite.com'", 25000); //5 seconds
}
_spBodyOnLoadFunctionNames.push("redirect");

Please help

Mike Smith said...

gurmeet kaur,

Are you wrapping the code in a script block?

<script> ... </script>

Try a different function name than "redirect" as SharePoint may already be using that.

setTimeout excepts a javascript function as a parameter. Something like

setTimeout(yourfunctionname,3000)

or

setTimeout(function(){ yourcodehere },3000);

Also, the time unit is milliseconds, so 25000 is 25 seconds.

Here are some examples:
http://www.w3schools.com/js/js_timing.asp

Mike

Unknown said...

Hi mike,
thank you for your reply.
I modified my script to this:
(This is under the script tag. your blog is not allowing me to put script)

this also didnt worked..
Can you please look into it.

_spBodyOnLoadFunctionNames.push("Home");
function Home()
{
setTimeout("delaydRedirect()", 2500); //5 seconds

}
function delaydRedirect()
{
location.href='/_layouts/Home1.aspx'
}

Joe said...

How about for the geniuses like me who put the code in the webpart we were trying to hide? Now I can't get it back to do it the correct way. Is there a way to get it back?

I'm on a company computer that has me locked out of the internet controls in ie, so I can't disable the scripts from there. Am I screwed?

Mike Smith said...

Joe,

Don't panic! (so it says on the cover of the Hitchhikers Guide to the Universe.)

Go here: http://techtrainingnotes.blogspot.com/2009/08/sharepoint-tricks-for-web-part.html

First try Trick 2 to see if you can get to the edit view of the page. If that does not work then try Trick 1 to delete the Content Editor Web Part.

Mike

Joe said...

Hey Mike,

Thanks for the quick reply!

Neither of the tricks work because the web part keeps disapearing and won't allow me to edit before it goes away. It is actually displaying the web part, when without the additional text in the URL, it doesn't show up at all.

Got any other tricks up your sleeve? :)

Thanks,

Joe

Mike Smith said...

Joe,

The "trick 1" should always work as it does not display the page with the web part. It just displays a list of the web parts so you can delete the web part with the code.

Mike

Joe said...

Hey Mike,

That trick worked this time. Thanks!

I was typing ?content=1 instead of ?contents=1.

Thanks so much for the help. I really appreciate it!

Thanks,

Joe

Note to spammers!

Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.