1

I am a web design newb so I am not sure if this is the best forum or if there's some blindingly obvious solution that completely eludes me. So forgive me if either is the case. So, here's the deal.

I am building a blog using craft cms and on my layout file I am using a styleswitcher.js script to switch between two css files. 

<head>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.example.com/weblog1.css"/>
<link rel="stylesheet" type="text/css" media="screen" title="aeroplaniko" href="http://www.example.com/weblog1.css"/>
<link rel="alternate stylesheet" type="text/css" media="screen" title="white" href="http://www.example.com/weblog3.css" />

<script type="text/javascript" src="http://www.example.com/jquery-1.12.1.min.js" ></script>
<script type="text/javascript" src="http://www.example.com/styleswitcher.js">
</head>

<body>
<a href="http://www.example.com/weblog3.css" onclick="setActiveStyleSheet('white'); return false;" class="WhiteButton"></a><a href="http://www.example.com/weblog1.css" onclick="setActiveStyleSheet('aeroplaniko'); return false;" class="LightblueButton"></a></body>

I am also using css styles in order to deploy social media icons. So for example, facebook looks like this:

 .facebook {
 margin-right: 2px;
 width: 28px;
 height: 28px;
 display:inline-block;
 background-repeat:no-repeat;
 background-image: url('logos/facebook.png');
 background-size:28px 28px;
 background-position:center bottom;
}
.facebook:hover {
   background-image: url('logos/facebookhover.png');
}

Once I noticed that Internet Explorer is bad at displaying png files, I decided to switch to svg files. After some work, I was able to convert my png files to svg. I also changed all the png files referenced on my stylesheets to svg.

Here's the problem however. As soon as I use the css stylesheets which include the svg files, switching between styles only affects the particular page in which I made the switch and not the whole site.

So if I switch styles on the main page and then I go to an article page, I see the previous stylesheet. Sometimes, the style changes even when I go through paginated pages.

So, what's wrong and how can I fix it?

PS. I should note that I noticed the same problem even with png files when I was testing my website on my ipad.

PS2. Ok, here's the code in the styleswitcher.js file:

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
aeroplano
  • 11
  • 2

0 Answers0