I have a JQuery UI Tab Web Part which loads iframe pages on demand. I want to hide the ribbon in each of these pages but the problem is the delay which makes the page jump

    function setFrameStyle() {

        var mySiteIframe = $("iframe");
            //Hide the suite bar
            mySiteIframe.contents().find("#s4-ribbonrow").css('display', 'none');                   

    function chgPage(pagename) {
        // check if Pagename exists
        var httprequest = new XMLHttpRequest();
        httprequest.open('HEAD', pagename, false);

         if (httprequest.status == "404") {
            alert("Could not this information.");
        } else {

            var webparts=document.getElementsByTagName("iframe");

            for (i=0; i<webparts.length; i++) {
                if (webparts[i].title="CPSTabContent")

<div id="tabs">
        <li><a href="#tabs-1"
        onclick="javascript: chgPage(window.location.href.substr(0,window.location.href.indexOf('Pages/')+6)+'tracking.aspx?isdlg=1'); return false;">Tracking</a></li>
    <li><a href="#tabs-2"
        onclick="javascript: chgPage(window.location.href.substr(0,window.location.href.indexOf('Pages/')+6)+'scope.aspx?isdlg=1');return false;">Scope</a></li>

I have to call the .load function so it can actually find the Ribbon element but this causes a jump in the page once it hides it. My question is, is there a quicker way to time this function so that there is no page jump? I don't want to edit the iframe source page as there are way too many

  • Please pass the function by which you load the pages in JQuery UI Tab Web Part. – Hardik Jun 8 '16 at 15:52
  • 1
    what happen if you call the page with the attribute "isdlg=1"? – Marco Jun 8 '16 at 16:00
  • I added more code @Hardik .. – Colbs Jun 8 '16 at 16:57
  • @Marco, I am already using isdlg=1 – Colbs Jun 8 '16 at 16:57

Just add this in the code. it works for iframes too

function HideBrandingsuite()


Please try to append the stylesheet into iFrame using below code. It actually works for me before in one solution.

function setFrameStyle() {

        $('iframe').load( function() {
      .append($("<style type='text/css'>  #s4-ribbonrow{display:none;}  </style>"));
  • Is this working for you? – Hardik Jun 8 '16 at 17:27
  • no, still get that delay and the page jump. It's because the code to hide it has to wait for the frame's contents to .load() – Colbs Jun 8 '16 at 18:29
  • Can you share the screen shot of the ribbon element? – Hardik Jun 8 '16 at 18:35

I was having same issue when i need to set CSS color for some element and it was over written with default CSS.

So I just used some tricky way for that.

Please try following code once and let me know its worked for you or not. Because it worked for me.

function setFrameStyle() {

        var mySiteIframe = $("iframe");
            //Hide the suite bar
    setTimeout(function () {
            mySiteIframe.contents().find("#s4-ribbonrow").css('display', 'none'); },500);                   
  • This just adds an extra .5s onto the load time and would still delay the page jump after it hides the element – Colbs Jun 8 '16 at 16:56
  • I haven't tried your code but in my case it helped me. Have you tried keeping this code? – Aakash Maurya Jun 8 '16 at 16:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.