swap between style sheets glitching

Question

swap between style sheets glitching

My website features two stylesheets, one for day mode and one for night mode. There is an image on the site that triggers a function with an onclick event to switch between the two stylesheets. However, when new visitors click the button for the first time, there is a brief moment where the page appears completely unstyled before the new stylesheet is applied. I have identified that this occurs because I remove the rel="stylesheet" attribute from the current stylesheet before adding it to the new one. Is there a way to modify the function so that there is no delay in styling, even for new visitors? Your assistance with this issue is greatly appreciated.

function changeStyleSheet() {
    var a = document.getElementById('stylesheet1');
    var b = document.getElementById('stylesheet2');
    var now1 = $(a).attr('rel');
    var now2 = $(b).attr('rel');
    if (now1 == 'stylesheet') {
        a.setAttribute('rel', 'alt-stylesheet');
        b.setAttribute('rel', 'stylesheet');
    } else {
        b.setAttribute('rel', 'alt-stylesheet');
        a.setAttribute('rel', 'stylesheet');
    }
};

javascript html css

Answer 1

Answer №1

One possible solution could be to rearrange the order in which you set the attributes. Try setting the 'rel' attribute of the new stylesheet first, followed by setting the 'rel' attribute of the old stylesheet after.

In your HTML, make sure both stylesheets have the 'rel' attribute set to "stylesheet". Then, utilize JavaScript to dynamically switch one of the stylesheets to an alternative style when the page loads.

Answer 2

One possible solution could be to rearrange the order in which you set the attributes. Try setting the 'rel' attribute of the new stylesheet first, followed by setting the 'rel' attribute of the old stylesheet after.

In your HTML, make sure both stylesheets have the 'rel' attribute set to "stylesheet". Then, utilize JavaScript to dynamically switch one of the stylesheets to an alternative style when the page loads.

Answer 3

Answer №2

Have you considered implementing something like this:

JavaScript

function switchStyle() {
    document.getElementById('theme').href = 'dark-theme.css';
}

HTML

<input type="button" onclick="switchStyle();"/>
<link rel="stylesheet" href="light-theme.css" id="theme">

Check out this link for using multiple stylesheets.

For a toggle effect, you can use the following code:

function switchStyle() {
    var currentTheme = document.getElementById('theme').href;
    if (currentTheme === 'light-theme.css') {
        document.getElementById('theme').href = 'dark-theme.css';
    } else {
        document.getElementById('theme').href = 'light-theme.css';        
    }
}

Answer 4

Have you considered implementing something like this:

JavaScript

function switchStyle() {
    document.getElementById('theme').href = 'dark-theme.css';
}

HTML

<input type="button" onclick="switchStyle();"/>
<link rel="stylesheet" href="light-theme.css" id="theme">

Check out this link for using multiple stylesheets.

For a toggle effect, you can use the following code:

function switchStyle() {
    var currentTheme = document.getElementById('theme').href;
    if (currentTheme === 'light-theme.css') {
        document.getElementById('theme').href = 'dark-theme.css';
    } else {
        document.getElementById('theme').href = 'light-theme.css';        
    }
}

Answer 5

Answer №3

In order to simplify the process of achieving your desired styling changes, consider assigning an id to a parent element within the main body rather than maintaining two separate stylesheets. For demonstration purposes, I have utilized the body element, but if this is not feasible, wrapping your site's contents in a div with an id would also work. By prefixed CSS selectors with the relevant id, you can easily apply the desired styles.

The following JavaScript snippet is used in my demo:

var sel = document.getElementById('styles'),
    b = document.getElementsByTagName('body')[0];
sel.onchange = function() {
    b.id = this.value;
};

Corresponding CSS code:

#styles1 h1 {
    margin-top: 1em;
    color: #f00;
    background-color: #000;
    text-align: center;
    font-size: 2em;
}

#styles1 div {
    width: 80%;
}

#styles2 h1 {
    margin-top: 1em;
    color: #000;
    background-color: #fff;
    text-align: right;
    font-size: 1.5em;
    font-style: italic;
}

#styles2 div {
    width: 50%;
    margin: 0 auto 1em auto;
}

/* Styling for the element containing the style-switcher select */
#styles1 #themes,
#styles2 #themes {
    width: auto;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
}

View the JS Fiddle demo.

By preloading the stylesheet, any style changes should occur smoothly without noticeable flickers. In cases of complex pages, there may be slight flickering, but significantly less compared to switching between different stylesheets.

Answer 6

In order to simplify the process of achieving your desired styling changes, consider assigning an id to a parent element within the main body rather than maintaining two separate stylesheets. For demonstration purposes, I have utilized the body element, but if this is not feasible, wrapping your site's contents in a div with an id would also work. By prefixed CSS selectors with the relevant id, you can easily apply the desired styles.

The following JavaScript snippet is used in my demo:

var sel = document.getElementById('styles'),
    b = document.getElementsByTagName('body')[0];
sel.onchange = function() {
    b.id = this.value;
};

Corresponding CSS code:

#styles1 h1 {
    margin-top: 1em;
    color: #f00;
    background-color: #000;
    text-align: center;
    font-size: 2em;
}

#styles1 div {
    width: 80%;
}

#styles2 h1 {
    margin-top: 1em;
    color: #000;
    background-color: #fff;
    text-align: right;
    font-size: 1.5em;
    font-style: italic;
}

#styles2 div {
    width: 50%;
    margin: 0 auto 1em auto;
}

/* Styling for the element containing the style-switcher select */
#styles1 #themes,
#styles2 #themes {
    width: auto;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
}

View the JS Fiddle demo.

By preloading the stylesheet, any style changes should occur smoothly without noticeable flickers. In cases of complex pages, there may be slight flickering, but significantly less compared to switching between different stylesheets.

Answer 7

Answer №4

In the event that your two stylesheets do not have a similar structure, you will likely experience an unusual flicker or rendering issue:

Expected order of change:

Stylesheet 1 - applied
Stylesheet 2 - applied
Stylesheet 1 - removed

During this transition, both stylesheets will be briefly applied (which may not pose a problem if they only affect color palettes and the same elements, but could be problematic for more extensive changes).

If this poses an issue, consider enhancing the style sheet switch with a visual effect like fading out the page/elements before transitioning, applying the new style, and then fading back in.

If this is not a concern, you can proceed with the method suggested by jacktheripper.

Answer 8

In the event that your two stylesheets do not have a similar structure, you will likely experience an unusual flicker or rendering issue:

Expected order of change:

Stylesheet 1 - applied
Stylesheet 2 - applied
Stylesheet 1 - removed

During this transition, both stylesheets will be briefly applied (which may not pose a problem if they only affect color palettes and the same elements, but could be problematic for more extensive changes).

If this poses an issue, consider enhancing the style sheet switch with a visual effect like fading out the page/elements before transitioning, applying the new style, and then fading back in.

If this is not a concern, you can proceed with the method suggested by jacktheripper.

swap between style sheets glitching

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is it possible to create a collapse and expand animation that does not involve transitioning the `height

Is it necessary to download all npm packages when starting a new project?

An innovative approach to incorporating multiple patterns into HTML input using markup alone, without the need for JavaScript

"Encountered an error: File or directory not found while attempting to export a function

Is it possible to create a Facebook reveal tab using either Javascript or .NET?

Using an array of objects to set a background image in a Bootstrap carousel using jQuery: a step-by-step guide

Which RxJS operators necessitate unsubscription?

Is it possible to adjust positioning using just CSS?

Can an entire object be bound to a model in an Angular controller function?

AngularJS - Create Alert Pop-Up for Missing Input Fields

What methods are available to verify all my (JavaScript) AJAX calls when they are being sent to Node.js?

Enable the use of custom tags containing hyphens in the kses filter for WordPress

"The JQuery .validate method is not compatible with this property or method" - error message displayed

unable to retrieve the chosen item from the dropdown menu

Enhancing webpage styles with AngularJS

Pass Form ID To Function In A Dynamic Way

Using jQuery's sortable functionality to rearrange rows in a table can cause conflicts with Angular's orderBy feature

Unexpected behavior encountered with JQueryUI modal functionality

What is the best way to eliminate duplicate values from an Array in ReactJS?

Creating a fixed "sub-page" within Wicket (e.g.: linking a folder in Wicket)