What is the best way to ensure jQuery loads before CSS code on a website

Question

What is the best way to ensure jQuery loads before CSS code on a website

I am currently working on a blog project that allows visitors to customize the background color by simply clicking on one of five available buttons.

$(function(){

        //Checking if a color scheme has already been selected
        var chosenColor = parseInt(getCookie("background_color"));

        switch(chosenColor){
            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('background_color', 1);
            $('body').css('background-color','#0A0A0A');
        });
        $('#cor_02').click(function(){
            setCookie('background_color', 2);
            $('body').css('background-color','#766777');
        });
        $('#cor_03').click(function(){
            setCookie('background_color', 3);
            $('body').css('background-color','#EEE6EE');
        });
        $('#cor_04').click(function(){
            setCookie('background_color', 4);
            $('body').css('background-color','#9F00A9');
        });
        $('#cor_05').click(function(){
            setCookie('background_color', 5);
            $('body').css('background-color','#420668');
        });
    });

The default color for the blog is purple.

background: #9F00A9

While the button event works perfectly when the user changes the background color, there is an issue when navigating between different pages on the blog. The previously selected color briefly reverts back to black before loading the correct color (for example, going from purple to black and then back to purple). To address this, how can I ensure that the user's selected color is loaded as the priority?

javascript jquery html css

Answer 1

Answer №1

When looking at it this way, calling $(foo) (assuming that foo is a function) indicates to "wait until the document is completely loaded before executing foo". This precaution ensures that your HTMLElements are present and ready for use. However, if you shift the call to a <script> tag positioned after or within the Node, you can be confident that they exist by the time the code is triggered.

For instance, if your function solely relies on the <body> element, name it foo and proceed like this:

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

This approach will guarantee that it is called promptly, during a period when any potential errors have been minimized.

Answer 2

When looking at it this way, calling $(foo) (assuming that foo is a function) indicates to "wait until the document is completely loaded before executing foo". This precaution ensures that your HTMLElements are present and ready for use. However, if you shift the call to a <script> tag positioned after or within the Node, you can be confident that they exist by the time the code is triggered.

For instance, if your function solely relies on the <body> element, name it foo and proceed like this:

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

This approach will guarantee that it is called promptly, during a period when any potential errors have been minimized.

Answer 3

Answer №2

Consider this as your HTML code

 <body>
 <script>
 $( document ).ready(function() {
     //Ensuring that the page has fully loaded before calling the function
     backgroundColour(getCookie("cor_de_fundo"));
 });
 </script>
</body>

Here is the updated function you can use: function backgroundColour(cookie) {

    //Checking if a color scheme is already selected
    var chosenColor = parseInt(cookie);
    if(!chosenColor) {
        $('body').css('background-color','#9F00A9');
    }
    else {
    switch(chosenColor){
        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');
    });
});

Update: I recommend placing this code in the 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>

This way, if a cookie is set, you will have dots on the background without the purple color. This should prevent the issue from happening.

Your current logic seems to be incorrect.

Instead of saying "use a purple background with dots and then change the color if there is a cookie," try saying "if there is a cookie, use a color with dots, otherwise use a purple background with dots."

Currently, you are setting a purple background with dots initially, then changing it if there is a cookie present.

Answer 4

Consider this as your HTML code

 <body>
 <script>
 $( document ).ready(function() {
     //Ensuring that the page has fully loaded before calling the function
     backgroundColour(getCookie("cor_de_fundo"));
 });
 </script>
</body>

Here is the updated function you can use: function backgroundColour(cookie) {

    //Checking if a color scheme is already selected
    var chosenColor = parseInt(cookie);
    if(!chosenColor) {
        $('body').css('background-color','#9F00A9');
    }
    else {
    switch(chosenColor){
        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');
    });
});

Update: I recommend placing this code in the 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>

This way, if a cookie is set, you will have dots on the background without the purple color. This should prevent the issue from happening.

Your current logic seems to be incorrect.

Instead of saying "use a purple background with dots and then change the color if there is a cookie," try saying "if there is a cookie, use a color with dots, otherwise use a purple background with dots."

Currently, you are setting a purple background with dots initially, then changing it if there is a cookie present.

Answer 5

Answer №3

It seems like you're interested in using the history API to avoid reloading the entire page, right?

You can check out some examples that demonstrate no need for page reloads:

Answer 6

It seems like you're interested in using the history API to avoid reloading the entire page, right?

You can check out some examples that demonstrate no need for page reloads:

Answer 7

Answer №4

Have you experimented with using local storage to store the background color settings?

$(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);
   });
   // additional code can be added for more button functionalities
});

Explore HTML5 local storage

Answer 8

Have you experimented with using local storage to store the background color settings?

$(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);
   });
   // additional code can be added for more button functionalities
});

Explore HTML5 local storage

What is the best way to ensure jQuery loads before CSS code on a website

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to create CSS rules that can be dynamically applied as classes using JavaScript?

Remove the "x" character from the phone field if an extension is not provided in the Jquery masked input plugin

The following error occurred: Next Auth TypeError: URL is not valid

Determine the file format using fs module in Node.js

What is the best way to send the article id to the pagination page using Ajax?

What could be causing the issue with the width: 100% not rendering correctly in this

Top pick for building drag-and-drop web applications: the ultimate JavaScript library

Creating an HTML table that automatically generates sub rows dynamically

Retrieving form parameters within an EJS template

`Look up values from specified key names`

Using the <a> tag within a PHP script

Assistance with the Chakra UI Range Slider in React

If the font size exceeds a certain value in SCSS, then apply a different value

Unlimited scrolling feature on a pre-filled div container

Is there a minimum height restriction for v-select in Vuetify.js?

Is there a way for my component to function seamlessly within another component without the need for redundant code?

The JQxTreeGrid is displaying properly, however, it is not loading the data from the JSON source

Navigating to the most recent item within ng-repeat (AngularJS or JavaScript)

Question inquired regarding a specific line of code in Javascript/Angular

Is there a way for me to access a user control property directly from the client side?