CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ronald Araújo
Ronald Araújo

Reputation: 1479

How to load jQuery before CSS code?

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?

Upvotes: 0

Views: 1680

Answers (4)

David G
David G

Reputation: 6871

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"

Upvotes: 0

user2587132
user2587132

Reputation:

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

Upvotes: 0

NoBugs
NoBugs

Reputation: 9496

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

Upvotes: 0

Paul S.
Paul S.

Reputation: 66304

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.

Upvotes: 1

Related Questions