Assign a CSS class when the page is loaded

Question

Assign a CSS class when the page is loaded

I have the following HTML code:

<body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white page-sidebar-closed" style="background-color: #F5F5F5">

When the page loads, the sidebar closed CSS will be applied.

Currently, I am using jQuery and HTML storage to save and retrieve the toggle value of the navigation bar.

var sidebar = $('.page-sidebar');
var sidebarMenu = $('.page-sidebar-menu');
var body = $('body');

if (localStorage.getItem("toggler") == 'close')
{
  body.addClass("page-sidebar-closed");
  sidebarMenu.addClass("page-sidebar-menu-closed");
}
else
{
  body.removeClass("page-sidebar-closed");
  sidebarMenu.removeClass("page-sidebar-menu-closed");
}

My issue is that when the page loads, it always loads with a closed sidebar. This isn't a problem if the user has clicked "Closed" and that choice is stored in local storage - the page then loads correctly with the sidebar closed.

However, if the user has clicked "Open", the page first loads with a closed sidebar because it is given the class 'page-sidebar-closed'. Then, the jQuery function opens it, resulting in a flicker of the sidebar whenever the page loads - toggling between closed and open.

Is there a way to directly apply a function on a class?

javascript jquery html css

Answer 1

Answer №1

If you want to execute certain actions once the document is ready, you can utilize

$( document ).ready(function() { }

. This allows you to modify the class of your sidebar based on the user's last action. It's essential to ensure that your JavaScript files are loaded before your CSS files to prevent any flickering effect, even though it may result in increased load time.

The following example demonstrates changing the color of a div when the page is ready:

$( document ).ready(function() {
    // change div color to blue on page ready
    $("#demo").removeClass('red-box').addClass('blue-box');
});

.red-box{
  width: 50px;
  height: 50px;
  background-color: #F44336;
}

.blue-box{
  width: 50px;
  height: 50px;
  background-color: #2196F3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demo" class="red-box"></div> <!-- div with red color -->

Answer 2

If you want to execute certain actions once the document is ready, you can utilize

$( document ).ready(function() { }

. This allows you to modify the class of your sidebar based on the user's last action. It's essential to ensure that your JavaScript files are loaded before your CSS files to prevent any flickering effect, even though it may result in increased load time.

The following example demonstrates changing the color of a div when the page is ready:

$( document ).ready(function() {
    // change div color to blue on page ready
    $("#demo").removeClass('red-box').addClass('blue-box');
});

.red-box{
  width: 50px;
  height: 50px;
  background-color: #F44336;
}

.blue-box{
  width: 50px;
  height: 50px;
  background-color: #2196F3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demo" class="red-box"></div> <!-- div with red color -->

Assign a CSS class when the page is loaded

Answer №1

Similar questions

What are some other options for pushing out data instead of using window.onbeforeunload?

The wasm URL file scheme cannot be loaded as it is not supported

Can I use my local network/browser to download an html file from a webpage as if I manually downloaded it using javascript or nodejs?

Having trouble getting my Jquery Ajax post request to work with JSON data

Trouble with the onload function in onMounted vue3

Understanding and resolving asynchronous issues in jQuery success callback functions

Tips for concealing the loader once all pages have been loaded

Connecting NGINX to a Node.js cluster with proxy_pass

Can global scope be injected into a class instantiated in ES6, also known as a singleton?

Preventing the need to reset JavaScript text inputs

Issue with submitting form in React when state changes upon button click event

Leverage JavaScript to customize the appearance of existing links within an external HTML document

AngularJS is experiencing delays when processing subsequent $http delete requests, leaving them stuck in a

The accumulation of MVC 3 Ajax requests is becoming overwhelming

Align the items in the center of a Bootstrap navigation bar

Creating a function in Angular to locate each object based on its ID

Has Next.js incorporated a maximum cache size feature along with an invalidation algorithm like LRU?

The CSS gradient background fails to fully cover the background when scrolling on the web browser

Can a prototype be created in JavaScript for a "FileList" object type that enables the construction and addition of a "File" object within it?

How to make sure a function in jQuery only runs once