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 .. – Michael Colbs Jun 8 '16 at 16:57
  • @Marco, I am already using isdlg=1 – Michael Colbs Jun 8 '16 at 16:57

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

function HideBrandingsuite()

|improve this answer|||||

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>"));
|improve this answer|||||
  • 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() – Michael 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);                   
|improve this answer|||||
  • This just adds an extra .5s onto the load time and would still delay the page jump after it hides the element – Michael 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.