none
How to detect which WebPart zone is empty and hide that WebPart Zone? RRS feed

  • Question

  • I have 2 columns and 2 row div structure in my custom page layout of Publishing type. I have kept 4 WebPart zones in each boxes made by div structure.

    Now my requirement is, the box with no WebPart added should not be displayed on the page in display mode.

    While searching I came to so many post like this

    But this is not working here.

    So, my question is:

    How do I detect which WebPart zone is empty?

    Note: I am having only SharePoint designer to work with as its SharePoint Online.

    Thursday, March 2, 2017 4:59 AM

All replies

  • Hi,

    We can use jQuery code to achieve it. The "divbox" is the div box class name, please modify it to yourself. Then add the code into page layout.

    <script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    	$(".divbox").each(function(){
    		if($(this).find(".ms-webpart-zone").length==0){
    			$(this).hide();
    		}
    	}); 
    });
    </script> 
    

    My page layout content code like this:

    <asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
    <style>
    .divbox{ 
    	width:49%;
    	height:400px;
    	float:left;
    	color:#FF0000;
    	text-align:center;
     
    	 
    }
    </style> 
    
    <div class="content"> 
       <div class="divbox" style="border-right-color: #000000; border-bottom-color: #000000; border-right-width: 1px; border-bottom-width: 1px; border-right-style: solid; border-bottom-style: solid;">   	
    	    <WebPartPages:WebPartZone id="WPZTest1" runat="server" title="WPZTest1">
    		</WebPartPages:WebPartZone>
    		<WebPartPages:WebPartZone id="WPZTest2" runat="server" title="WPZTest2">
    		</WebPartPages:WebPartZone>
    		<WebPartPages:WebPartZone id="WPZTest3" runat="server" title="WPZTest3">
    		</WebPartPages:WebPartZone>
    		<WebPartPages:WebPartZone id="WPZTest4" runat="server" title="WPZTest4">
    		</WebPartPages:WebPartZone>    	
       </div> 
       <div class="divbox" style="border-bottom-color: #000000; border-bottom-width: 1px; border-bottom-style: solid;"> 
       		
    	    <WebPartPages:WebPartZone id="WPZTest5" runat="server" title="WPZTest5">
    		</WebPartPages:WebPartZone>
    		<WebPartPages:WebPartZone id="WPZTest6" runat="server" title="WPZTest6">
    		</WebPartPages:WebPartZone>
    		<WebPartPages:WebPartZone id="WPZTest7" runat="server" title="WPZTest7">
    		</WebPartPages:WebPartZone>
    		<WebPartPages:WebPartZone id="WPZTest8" runat="server" title="WPZTest8">
    		</WebPartPages:WebPartZone>   		
       </div> 
       <div class="divbox" style="border-right-color: #000000; border-right-width: 1px; border-right-style: solid;">     	
    	    <WebPartPages:WebPartZone id="WPZTest9" runat="server" title="WPZTest9">
    		</WebPartPages:WebPartZone>
    		<WebPartPages:WebPartZone id="WPZTest10" runat="server" title="WPZTest10">
    		</WebPartPages:WebPartZone>
    		<WebPartPages:WebPartZone id="WPZTest11" runat="server" title="WPZTest11">
    		</WebPartPages:WebPartZone>
    		<WebPartPages:WebPartZone id="WPZTest12" runat="server" title="WPZTest12">
    		</WebPartPages:WebPartZone>    	
       </div> 
       <div class="divbox"> 		
    		<WebPartPages:WebPartZone id="WPZTest13" runat="server" title="WPZTest13">
    		</WebPartPages:WebPartZone>
    		<WebPartPages:WebPartZone id="WPZTest14" runat="server" title="WPZTest14">
    		</WebPartPages:WebPartZone>
    		<WebPartPages:WebPartZone id="WPZTest15" runat="server" title="WPZTest15">
    		</WebPartPages:WebPartZone>
    		<WebPartPages:WebPartZone id="WPZTest16" runat="server" title="WPZTest16">
    		</WebPartPages:WebPartZone>	
       </div>
    </div>
    
    <script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    	$(".divbox").each(function(){
    		if($(this).find(".ms-webpart-zone").length==0){
    			$(this).hide();
    		}
    	}); 
    });
    </script> 
     
    </asp:Content>
    

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Monday, March 6, 2017 11:37 AM
    Moderator