Microsoft SharePoint and .NET Technology Insight

SharePoint, .NET, Office365, Windows Azure, TFS, Project Server and SQL Server Technology Insights


Leave a comment

Hiding DOM elements within SharePoint Web-Part Pages on SharePoint 2013 On-premises and SharePoint Online

I recently had a requirement to display several Web-part pages on my SharePoint Online Office365 Publishing site as part of seperate tabs within a custom JQuery tab-strip control (which was embedded within a Content Editor web-part page on the Home page of the site). Here are the steps I followed:

1. Used the following CSS changes and JavaScript code within my Web-Part pages to hide all Office365 and SharePoint Online navigation and related DOM elements including the Top navigation, side-bar, Office365 links (News Feed, Onedrive, gear icon etc).

CSS Changes:

<style type="text/css">
    #s4-ribbonrow, .ms-cui-topBar2, .s4-notdlg, .s4-pr s4-ribbonrowhidetitle, .s4-notdlg noindex, #ms-cui-ribbonTopBars, #s4-titlerow, 

#s4-pr s4-notdlg s4-titlerowhidetitle, #s4-leftpanel-content, body #s4-leftpanel {display:none !important;}
    .s4-ca{margin-left:0px !important; margin-right:0px !important;}
	.ms-core-sideNavBox-removeLeftMargin{ DISPLAY: none }
    #contentBox  { margin-left: 20px }
</style>

JavaScript Changes:

<script language=”javascript”>
function HideBrandingsuite()
{
  //hide the left upper "office365" logo
  document.getElementById('suiteBrandingBox').style.visibility = 'hidden';
 
  //hide the top level links to outlook, sites, calendar, people, newsfeed,...
  document.getElementById('suiteLinksBox').style.visibility = 'hidden';
 
  //hide the name, cog and help
  document.getElementById('suiteBarRight').style.visibility = 'hidden';
 
  //hide share, follow and edit
  document.getElementById('RibbonContainer-TabRowRight').style.visibility = 'hidden';
}

_spBodyOnLoadFunctionNames.push(“HideBrandingsuite”);
</script>

2. I then embedded the Custom Web-parts as iFrames into Content Editor Web-parts (instead of Page Viewer Web-part) within the same Web-part page running the Tabstrip Content Editor Web-part followed by including the title of the of Content Editor Web-parts into the JQuery of the Tabstrip Web-part:

<script type="text/javascript">
function f_clientWidth() {
    return f_filterResults (
        window.innerWidth ? window.innerWidth : 0,
        document.documentElement ? document.documentElement.clientWidth : 0,
        document.body ? document.body.clientWidth : 0
    );
}

function f_clientHeight() {
    return f_filterResults (
        window.innerHeight ? window.innerHeight : 0,
        document.documentElement ? document.documentElement.clientHeight : 0,
        document.body ? document.body.clientHeight : 0
    );
}

function f_filterResults(n_win, n_docel, n_body) {
    var n_result = n_win ? n_win : 0;
    if (n_docel && (!n_result || (n_result > n_docel)))
        n_result = n_docel;
    return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}

function resizeCaller() {
var h = f_clientHeight();
var w = f_clientWidth();

    try{    
	var oFrame    =    document.all("iframePage");
	oFrame.style.height = f_clientHeight()*0.97;
        oFrame.style.width = f_clientWidth();
        if(oFrame.style.display=="none") {
          oFrame.style.display="block";
         }

    }
    //An error is raised if the IFrame domain != its container's domain
    catch(e)
    {
      window.status =    'Error: ' + e.number + '; ' + e.description;
    }

}

if (window.addEventListener)
   window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
   window.attachEvent("onload", resizeCaller)
else
   window.onload=resizeCaller

if (window.addEventListener)
    window.addEventListener("resize", resizeCaller, false)
else if (window.attachEvent)
    window.attachEvent("onresize", resizeCaller)
else
   window.onresize=resizeCaller
</script>

//Embed an iFrame tag with the target page URL below