Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

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

Avatar

Avatar
Level 1
SirMarley
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile

Avatar
Level 1
SirMarley
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile
SirMarley
Level 1

14-01-2019

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

Replies

Avatar

Avatar
Establish
MVP
Gaurav-Behl
MVP

Likes

248 likes

Total Posts

1,147 posts

Correct Reply

283 solutions
Top badges earned
Establish
Give back 300
Give Back 50
Give Back 5
Give Back 3
View profile

Avatar
Establish
MVP
Gaurav-Behl
MVP

Likes

248 likes

Total Posts

1,147 posts

Correct Reply

283 solutions
Top badges earned
Establish
Give back 300
Give Back 50
Give Back 5
Give Back 3
View profile
Gaurav-Behl
MVP

14-01-2019

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

});