How to load jQuery before CSS code?

Question

I am developing a blog where the visitor can change the background color by clicking on one of the 5 buttons.

Buttons to change the background color

$(function(){

        //Verificando se já existe algum esquema de cor selecionado
        var esquemaCor = parseInt(getCookie("cor_de_fundo"));

        switch(esquemaCor){
            case 1:
                $('body').css('background-color','#0A0A0A');
                break;
            case 2:
                $('body').css('background-color','#766777');
                break;
            case 3:
                $('body').css('background-color','#EEE6EE');
                break;
            case 4:
                $('body').css('background-color','#9F00A9');
                break;
            case 5:
                $('body').css('background-color','#420668');
                break;
            default:
                $('body').css('background-color','#9F00A9');
        }

        $('#cor_01').click(function(){
            setCookie('cor_de_fundo', 1);
            $('body').css('background-color','#0A0A0A');
        });
        $('#cor_02').click(function(){
            setCookie('cor_de_fundo', 2);
            $('body').css('background-color','#766777');
        });
        $('#cor_03').click(function(){
            setCookie('cor_de_fundo', 3);
            $('body').css('background-color','#EEE6EE');
        });
        $('#cor_04').click(function(){
            setCookie('cor_de_fundo', 4);
            $('body').css('background-color','#9F00A9');
        });
        $('#cor_05').click(function(){
            setCookie('cor_de_fundo', 5);
            $('body').css('background-color','#420668');
        });
    });

The standard color is purple blog.

background: # 9F00A9

When the user changes the background color of the button event works perfectly. The problem is by the time he navigates between pages of the blog. Before charging the color he has selected, for example the black background color is first loaded after the purple to black. (Take the test blog: www.obovio.com.br) How do I always carry first color that the user selected?

I think you have to set this on the server. You will always get a flash of unstyled content during the time between the page is rendered with the default background color, and the time jquery updates the DOM, regardless of which loads first Stylesheet or Jquery. — Jason
– Jason, Commented Sep 24, 2013 at 1:41
You would do it with your server side scripting language - rails, php, .net, whatever. When you construct the page set its background color. — Jason
– Jason, Commented Sep 24, 2013 at 12:42
Right. But unfortunately I can not configure it on Blogger platform. : ( — Ronald Araújo
– Ronald Araújo, Commented Sep 24, 2013 at 13:32

Paul S. · Accepted Answer · 2013-09-24 00:37:31Z

1

As you have it, $(foo) (where foo is a function) means "wait until document is loaded before invoking foo". If you don't do this, you can't guarantee that your HTMLElements exist. However, if you move the invocation to a <script> which is after/a child of the Node, you should be able to safely assume it exists by the time the code is invoked.

For example, as your function only uses the <body> element, give it the name foo and then do

<body>
    <script type="text/javascript">
foo();
    </script>
    <!-- rest of body contents -->
</body>

This will mean it is invoked as soon as possible, at a time when it is safe to assume it will not throw an error.

answered Sep 24, 2013 at 0:37

Paul S.

66.6k9 gold badges129 silver badges143 bronze badges

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

1 Comment

Ronald Araújo Over a year ago

Follow your suggestion but it did not solve the problem. The page still loads first the background color to purple then load the background color that the user selected. But any suggestions? Thank you ...

David G · Accepted Answer · 2015-07-08 09:12:22Z

Say this is your html

 <body>
 <script>
 $( document ).ready(function() {
     //by assigning this to a function you ensure the page has loaded and it exists before you call it too early
     backgroundColour(getCookie("cor_de_fundo"));
 });
 </script>
</body>

And this is your new function: function backgroundColour(cookie) {

    //Verificando se já existe algum esquema de cor selecionado
    var esquemaCor = parseInt(cookie);
    //This way there is never a risk of auto-default unless the cookie is empty, but this is option, can probably keep using default anyway
    if(!esquemaCor) {
        $('body').css('background-color','#9F00A9');
    }
    else {
    switch(esquemaCor){
        case 1:
            $('body').css('background-color','#0A0A0A');
            break;
        case 2:
            $('body').css('background-color','#766777');
            break;
        case 3:
            $('body').css('background-color','#EEE6EE');
            break;
        case 4:
            $('body').css('background-color','#9F00A9');
            break;
        case 5:
            $('body').css('background-color','#420668');
            break;
    }

    $('#cor_01').click(function(){
        setCookie('cor_de_fundo', 1);
        $('body').css('background-color','#0A0A0A');
    });
    $('#cor_02').click(function(){
        setCookie('cor_de_fundo', 2);
        $('body').css('background-color','#766777');
    });
    $('#cor_03').click(function(){
        setCookie('cor_de_fundo', 3);
        $('body').css('background-color','#EEE6EE');
    });
    $('#cor_04').click(function(){
        setCookie('cor_de_fundo', 4);
        $('body').css('background-color','#9F00A9');
    });
    $('#cor_05').click(function(){
        setCookie('cor_de_fundo', 5);
        $('body').css('background-color','#420668');
    });
});

Edit: changing my answer because I've just realised your background is set separate to background-colour.

Why don't you simply put this in your head tag (below the stylesheet):

<script>
if (getCookie("cor_de_fundo")) {
$('body').css('background','url("http://4.bp.blogspot.com/-SZodpKgdjwk/UkCj20gd4XI/AAAAAAAADZk/tIAmBbkoecU/s1600/square_bg.png") repeat');
}
</script>

That way, if cookie is set, you get your dots, but you lose that purple. So this problem never occurs?

It looks like your logic may be wrong.

You are saying "put in purple background with dots. If there is a cookie, put in background-colour over background with dots.

Instead, why don't you say "if there is a cookie, put in background colour with dots, if there is no cookie, put in background colour purple with dots."

At the moment you say "set background to url with colour purple, then if there is a cookie, change the colour"

In jQuery, $(document).ready(handler) is equivalent to $(handler) -- api.jquery.com/ready
Thanks for the tips, but still there is a period where it is loaded after the default color for the color user ... I did not want it loaded the default color, ie the color wanted the user to be loaded first.

NoBugs · Accepted Answer · 2013-09-24 05:20:50Z

0

Sounds like you want history api, to prevent loading the whole page again? http://diveintohtml5.info/history.html

That examples doesn't require any page-reload: http://diveintohtml5.info/examples/history/casey.html

answered Sep 24, 2013 at 5:20

NoBugs

9,35016 gold badges91 silver badges159 bronze badges

Comments

user2587132 · Accepted Answer · 2013-09-24 06:01:08Z

0

Have you tried using the localstorage to save the background color

$(function(){
 if(localStorage.bgcolor==undefined)
    localStorage.bgcolor="white" //default color that appears first time

 $('body').css('background-color',localStorage.bgcolor);

   $('#cor_01').click(function(){
     localStorage.bgcolor = "#0A0A0A";
     $('body').css('background-color',localStorage.bgcolor);
   });
   $('#cor_02').click(function(){
     localStorage.bgcolor = "#766777"
     $('body').css('background-color',localStorage.bgcolor);
   });
   // similar code for other buttons
});

HTML5 local storage

answered Sep 24, 2013 at 6:01

user2587132

Collectives™ on Stack Overflow

How to load jQuery before CSS code?

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related