CODEWITHSUNDEEP
javascripthtmlcss
John Kerby
John Kerby

Reputation: 83

How to prevent the main stylesheet from appearing when switching to the alternate one?

I have two stylesheets mentioned in my header.php in this order:

<link rel="stylesheet" type="text/css" title="day" href="<?php echo $_layoutParams['root_css']; ?>day.css">
<link rel="stylesheet" type="text/css" title="night" href="<?php echo $_layoutParams['root_css']; ?>night.css">

I also have two buttons in my navigation bar, one for day, one for night. Each one triggers the same function, but with different parameters:

<a onclick="switch_style('day')..."
<a onclick="switch_style('night')..."

Finally, i have some javascript that alternates between the two stylesheets depending on which button in pressed and sets a cookie for 30 days and when no cookie is set, the style defaults to the day.css file. I also fire the switch_style function on top of each page after the DOM is loaded.

For the sake of clarity, 2 additional points. The JS used to alternate between stylesheets:

function switch_style ( css_title )
{
  var i, link_tag ;
  for (i = 0, link_tag = document.getElementsByTagName("link") ;
    i < link_tag.length ; i++ ) {
    if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
      link_tag[i].title) {
      link_tag[i].disabled = true;
      if (link_tag[i].title == css_title) {
        link_tag[i].disabled = false;
      }
    }
    set_cookie( style_cookie_name, css_title,
      style_cookie_duration, style_domain );
  }
}

The JS i fire on top of each page looks like this:

<script>
document.addEventListener("DOMContentLoaded", function(event) {
    set_style_from_cookie();  
});
</script>

All works pretty well, but: When 'day' is selected, the transitioning between light pages is seamless. But when 'night' is activated, each new dark clicked page loads the day.css for a fraction of a second before being painted dark (flickers) which in the long run really gives me a headache.

When I invert the order of the stylesheets like so:

<link rel="stylesheet" type="text/css" title="night" href="<?php echo $_layoutParams['root_css']; ?>night.css">
<link rel="stylesheet" type="text/css" title="day" href="<?php echo $_layoutParams['root_css']; ?>day.css">

then I have the inverse problem, meaning that the transitioning between dark pages is seamless. But when 'day' is activated, each new light clicked page loads the night.css for a fraction of a second before being painted light.

Any idea how to correct the issue?

Upvotes: 2

Views: 94

Answers (1)

Rim Vo
Rim Vo

Reputation: 22

You can use Jquery to disable/enable CSS file by this way:

$('link[href="mystyle.css"]').prop('disabled', true);
$('link[href="mystyle.css"]').prop('disabled', false);

Upvotes: 1

Related Questions