Jquery Loading After CSS

Question

I have (Joomla) a web page with the following elements;

<section id="sp-top-bar">
  <!-- html content -->
</section>

<section id="sp-footer">
  <!-- html content -->
</section>

The #sp-top-bar is styled via custom.css - with a background-color: blue.
The #sp-footer is styled via template.css - with a background-color: green.

I am using jquery to force the #sp-top-bar to use the same background colour as is set for #sp-footer in the template.css file. (I know there are others ways to set the colour but I'm experimenting with jquery so please bear with me!).

This is my jquery code, which works.

jQuery(function ($) {
    var brand = $('#sp-footer');
    var bg = brand.css('background-color');
    $("#sp-top-bar").css({
        backgroundColor: bg
    })
});

My jquery code is in the <head> of the document, after my template.css file.

When my page loads, the #sp-top-bar initially flashes blue for a split second, then successfully changes to the #sp-footer green.

I've had a look at the source code and my template.css file is loading before my jquery code - presumably this is the issue?

Is there anything I can do to avoid this initial background colour flash in the #sp-top-bar?

Thanks

Would you mind to use css solution for this? OR You want to make it using script? — Vilas Kumkar
– Vilas Kumkar, Commented Mar 2, 2017 at 12:33

Ygg · Accepted Answer · 2017-03-02 12:35:10Z

2

You could try hiding the top-bar until everything's been loaded

CSS

#sp-top-bar {
  display: hidden
}

JS

$("#sp-top-bar").css({
    backgroundColor: bg,
    display: 'block'
})

answered Mar 2, 2017 at 12:35

Ygg

3,8801 gold badge19 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Theo Orphanos · Accepted Answer · 2017-03-02 12:32:53Z

1

in jQuery you can set the background color like this:

$("#sp-top-bar").css('background-color','#f6f6f6');

(I used an imaginary shade of grey f6f6f6)

Hope that helps you.

answered Mar 2, 2017 at 12:32

Theo Orphanos

1,4571 gold badge20 silver badges28 bronze badges

5 Comments

Theo Orphanos Over a year ago

Can't you right click -> inspect the element to get it's actual bg color value that is set in the css?

jonboy Over a year ago

Yea I can @captain theo but the issue is the template.css file is dynamically generated elsewhere. I need the #sp-top-bar to automatically take on the background colour set in the template.css without any manual intervention from me. Hope that makes sense. Thanks

Theo Orphanos Over a year ago

I see... Well I guess you got me off guard here :) I don't think I can provide an answer to that... Joomla code can be quite (unnecessarily) complex at times...

Theo Orphanos Over a year ago

@johnny_s Perhaps if you could trace back to where your css file is generated, and add an extra rule for "#sp-top-bar"...

Theo Orphanos Over a year ago

@johnny_s Another (jQuery) approach is to "get" the current bg color that has been assigned dynamically, an apply it to "#sp-top-bar". Check this post: stackoverflow.com/questions/5999209/…

Vilas Kumkar · Accepted Answer · 2017-03-02 12:49:31Z

0

Try this

$("#sp-top-bar").hide();
$(document).ready(function(){
  var brand = $('#sp-footer');
  var bg = brand.css('background-color');
  $("#sp-top-bar").css({
    backgroundColor: bg,
    display: 'block'
  })
});

answered Mar 2, 2017 at 12:49

Vilas Kumkar

1,4009 silver badges18 bronze badges

Comments

Shilly · Accepted Answer · 2017-03-02 12:59:06Z

Using JQuery for this one is kinda hard, since the JQuery has to wait for the DOM element to be loaded into the page before it can change it. So you'll usually have the flash effect because the header will use the default style from the css.

In css you could just overwrite the default style before the header is rendered. But if it has to be JQuery, something like the hide trick described below might work. Or you could insert an absolutely positioned header in the right color completely overlapping the header and remove it again after the page has loaded.

But that's alot of work to replicate one line of css.

Edit:

Another angle is loading the css with ajax after the page has loaded, but then nothing will be styled, which might be worse than flashing.

You could also show a fully blank page until all scripts have ran, but this also isn't perfect, since it comes across as being a 'slowloading' page.

Collectives™ on Stack Overflow

Jquery Loading After CSS

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related