1

As stated in the title, I want to hide my whole sharepoint form till all the fields are resolved.

I tried the following methods so far,

jQuery:

$(document).ready(function ()
{
    $('table.ms-formtable').hide();
    $('table.ms-formtable').next('table').hide();
}
);

CSS:

table.ms-formtable, table.ms-formtable + table{
    display:none;
}

The jQuery part took sometime because of loading jQuery library first. As a result, the form was visible for sometime before executing

The CSS part didn't work because there is an inline style with display set to table.

  • better try page loader, It will make looking goog while loading – Suriya Apr 7 '17 at 11:11
  • @Suriya by page loader , if you mean a loading icon .. i'm displaying it while the page is being loaded. if you meant something else please elaborate – Abdul Hameed Apr 7 '17 at 12:02
1

Anything done with jQuery will normally have to wait for document.ready, which is too late IMHO.

Put a div on top, like so:

<div id="cover"></div>

set some styles:

#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;}

and hide it with JS when all elements are loaded:

$(window).on('load', function() {
   $("#cover").hide();
});

Or if for some reason your script uses even longer time then the DOM elements to load, set an interval to check the type of some function that loads the slowest, and remove the cover when all functions are defined!

$(window).on('load', function() {
    $("#cover").fadeOut(200);
});

function newW()
{
    $(window).load();
}
setTimeout(newW, 1000);
#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999; 
    font-size: 60px; text-align: center; padding-top: 200px; color: #fff;
}

Then

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul>
        <li>cover</li>
</ul>

<div id="cover">LOADING</div>
  • I was confused when you said jQuery is slower but still used jQuery methods. On looking in detail this is a brilliant idea to put a cover on top of everything. And hide once page loads. Currently my requirement is to hide only form not whole page..But still a very good idea. – Abdul Hameed Apr 7 '17 at 15:33
0

Vanilla JavaScript to the rescue.

The following code worked faster than jQuery code and was able to hide the form till I manually showed them using jQuery.show()

var formTable=document.querySelectorAll("table.ms-formtable, table.ms-formtable + table");
for (index=0;index<formTable.length;index++)
{
    formTable[index].style.display="none";
}

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.