0

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

jonboy
  • 2,729
  • 6
  • 37
  • 77

4 Answers4

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'
})
Ygg
  • 3,798
  • 1
  • 17
  • 23
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.

Theo Orphanos
  • 1,417
  • 1
  • 19
  • 27
  • Can't you right click -> inspect the element to get it's actual bg color value that is set in the css? – Theo Orphanos Mar 02 '17 at 12:37
  • 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 – jonboy Mar 02 '17 at 12:39
  • 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 Mar 02 '17 at 12:46
  • @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 Mar 02 '17 at 12:48
  • @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: http://stackoverflow.com/questions/5999209/how-to-get-the-background-color-code-of-an-element – Theo Orphanos Mar 02 '17 at 12:50
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'
  })
});
Vilas Kumkar
  • 1,390
  • 9
  • 18
0

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.

Shilly
  • 8,511
  • 1
  • 18
  • 24