Setting display:none for empty web part zones

Question

Does anyone know the JavaScript for setting display:none on an empty web part zone? I remember seeing it once on a publishing site but now can't find it.

This is to avoid the padding and spacing a web part zone displays when there is no web part added to it.

Answer 1

WSS 3 web part pages has TD's containing the WebPartZones and those TD's have a name and id which is _invisibleIfEmpty. Then each page contains a javascript like this:

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

The MSOLayout_MakeInvisibleIfEmpty function makes them invisible...

/WW

Answer 2

Or, as SharePoint Publishing Page Layout puts it:

<SharePointWebControls:ScriptBlock runat="server">
if(typeof(MSOLayout_MakeInvisibleIfEmpty) == &quot;function&quot;) 
{MSOLayout_MakeInvisibleIfEmpty();}</SharePointWebControls:ScriptBlock>

Answer 3

Somehow, MSOLayout_... did not work out for me, so I wrote the following jQuery code which works as well and also checks if there is only a menu inside that cell before it hides it.

$('[name="_invisibleIfEmpty"]').filter(function () {
    return $.trim($(this).html()).length == 0 || $(this).children("menu").length;
}).hide();