What is MSOLayouts_MakeInvisibleIfEmpty()

I was looking through the code of SharePoint’s Blank Web Part page layout, and I kept finding elements called _invisibleIfEmpty. Now, I’d noticed that some page layouts, such as the Splash page layout had borders on their web part zones which were only shown if the zone contained a web part. I was interested in how this might work. People keep asking for web parts with borders, preferrably ones with rounded corners.

The code on the page looked like:

<td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" height="100%"> <WebPartPages:WebPartZone runat="server" Title="Left" ID="CenterLeftColumn"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </td>

…and there were a lot of table cells looking like that, and with that id. Lower in the page I then noticed:

<script language="javascript">if(typeof(MSOLayout_MakeInvisibleIfEmpty) == "function") {MSOLayout_MakeInvisibleIfEmpty();}</script>

Hmm. So if this function exists, it’s run. For it’s name, it sounds related. After some digging, I found it in defined in:

  • IE50UP.js
  • IE55UP.js
  • NON_IE.js

Interesting… IE5 is, well, pretty ancient now, so I’m guessing that this stuff is a bit, well, WSS2 legacy. What does the code do? Well, looking in one of those files:

function MSOLayout_MakeInvisibleIfEmpty()
var allElements=document.getElementsByName("_invisibleIfEmpty");
var agt=navigator.userAgent.toLowerCase();
var isNav=((agt.indexOf('mozilla')!=-1)&&((agt.indexOf('spoofer')==-1) && (agt.indexOf('compatible')==-1)));
var isIE=(agt.indexOf("msie")!=-1);
for (var curElement=0; curElement < allElements.length; curElement++)
if ((isIE && allElements[curElement].childNodes.length==0)
|| (isNav && allElements[curElement].childNodes.length <=1))

Yup, so it makes table cells called _invisibleIfEmpty not display if they have no child nodes. That’s a little strange though – table cells do collapse anyway if there are no contents, and doing this in Javascript just seems a bit old school.

I went and looked inside the Splash page layout and found that that is exactly how it works – the table cell’s borders don’t appear if the cell is empty:

However, the table cells do still appear to take up space – ‘cos each table cell has a width set:

If we took that width=”50%” away, though, the cells would just collapse as normal for empty table cells in HTML.

Still, the who thing did make me wonder – could I do my ’round cornered borders on web part zones’ with Javascript?

What is MSOLayouts_MakeInvisibleIfEmpty()

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s