Fire a a function when page is fully loaded to change display of elements on template authoring

[SirMarley]

Hey guys,

I was trying to either fire a function when the page finishes loading or, via css, change the display of each element, when authoring on the template but, even tho it does work on "console mode", it does not when I code it.

Problem is that I have my navigation bar on top of the page, which is good, but before it finishes, I have a Layout container and a footer container.

The problem seems to be solved if I write

$('body').find('*').css('position', 'relative')

But I am not able to fires it after the pages have all its <div>

I have also tried to add a class to the body:

if (currentUrl.indexOf('templates') > -1) {

   setTimeout(function () {

   $('body').addClass("body-editing");

   console.log("m-f");

  }, 3000);

  }

then set up its css to give a relative position to all its divs:

.body-editing{

  div{

   position: relative !important;

  }

}

But it does not work either, since the body never has that class added.

Any idea on how to solve this issue?

Thanks1

[Gaurav-Behl]

If it works on console then its just a matter of timing when to trigger that fn.  Just make sure that you are aware of the performance hit of finding * in body. Add this to a js file that you find appropriate.

first try on DOM ready and if it doesn't work then try on DOM load

DOM ready -

(function( $ ){

     $('body').find('*').css('position', 'relative')

})( jQuery );

DOM load -

$( window ).on( "load", function() {

     $('body').find('*').css('position', 'relative')

});