Microsoft SharePoint and .NET Technology Insight

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

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

Leave a comment

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 }

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';


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();

	var oFrame    =    document.all("iframePage"); = f_clientHeight()*0.97; = f_clientWidth();
        if("none") {

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


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

if (window.addEventListener)
    window.addEventListener("resize", resizeCaller, false)
else if (window.attachEvent)
    window.attachEvent("onresize", resizeCaller)

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


Author: Arsh

SharePoint Architect

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s