I'm wondering, why jQuery code is executed addClass function after page render.

I have some element (h1) positioned absolute.This element has rule:

left: 60%;

And simple JS:

$(document).ready(function() {
    $('#test').find('header').find('h1').addClass('move');
})

CSS:

.move {
    left: 40%
}

Now, question: why on page loads, h1 element is first on 60% left, but second after load, it moves to left by 40% thanks to move class. This effect looks bad, as h1 element has now replace effect visible on page...

I want to have this element at left 40% so user can't see "move effect".

Regards, Marek.

I'm wondering, why jQuery code is executed addClass function after page render.

I have some element (h1) positioned absolute.This element has rule:

left: 60%;

And simple JS:

$(document).ready(function() {
    $('#test').find('header').find('h1').addClass('move');
})

CSS:

.move {
    left: 40%
}

Now, question: why on page loads, h1 element is first on 60% left, but second after load, it moves to left by 40% thanks to move class. This effect looks bad, as h1 element has now replace effect visible on page...

I want to have this element at left 40% so user can't see "move effect".

Regards, Marek.

• javascript
• jquery

• Why are you then setting as element style left: 60% and not directly left: 40%??? – A. Wolff Commented Feb 2, 2016 at 10:01
• For some pages this should have 60% and as i cant edit html, i need to move element using JS for some other pages. – user3573535 Commented Feb 2, 2016 at 10:03
• So this should be set before rendering page client side, meaning it should be done server side. – A. Wolff Commented Feb 2, 2016 at 10:06
• If you are able to edit css simply use more specific selector below #test header h1 {left: 60%;} – Yury Tarabanko Commented Feb 2, 2016 at 10:07

4 Answers 4

The whole point of $(document).ready(); is that it executes after the page is rendered. If you don't want the user to see a change, you need to either set the style in CSS or only show the element after you've set the Class in JS.

This addClass function is called after page render because you have written it inside document.ready(). Instead write it in open script block to load it just after html.

The ready event occurs when the DOM (document object model) has been loaded.

Because this event occurs after the document is ready, it is a good place to have all other jQuery events and functions.

The ready() method specifies what happens when a ready event occurs.

so you have to set the style css

Use $(document).load(function() { // your code }); instead of document ready function.