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

"Resolving an inconsistency problem with the Vary header in Htaccess

How to properly center and align the width of a figcaption element within an image placed in a figure element

Creating a function to limit the display value of Material UI Autocomplete similar to Material UI Multiple Select's renderValue

What's the best way to layer a fixed div over an absolutely positioned div?

Extend the width of a div element to fit the size of its absolutely positioned

Mastering the Art of Writing an Ajax Post Request

Attempting to implement form validation on my website

Utilizing numerous await statements within a single asynchronous function

Removing a SubDocument from an Array in Mongoose

Avoiding the "urls" format using the onBeforeRequest function

I am unable to switch my carousel to full-screen mode

Having trouble with implementing ng-hide and ng-show functionality

Scroll a div using JavaScript/jQuery

"Step-by-step guide on incorporating and executing a jQuery function, along with integrating it into PHP code for seamless

How to submit form data with a POST request in Flask using fetch without having to reload

"An error occurred while trying to access the data for a new user on the snapshot object while navigating to the screen. It seems that the object is

How to eliminate escape characters in Jquery Post requests

Switching the typeface within the content data

I'm having trouble getting Jquery's insertAfter() function to function properly

In Javascript, create a variable that dynamically updates for every child element