Foros del web, para los que viven de bits

DragonX · 26/03/08, 18:04:08

Amigos realmente hice todo lo que estaba a mi alcance, pero no logro lo que quiero, a ver si me pueden dar una mano.

Estaba buscando la forma de poder armar una botonera para que el usuario pudiera cambiar el estilo del site, y buscando me encontré con este artículo "Haciendo funcionar a las hojas de estilos alternativas" y después de leerlo, hacer mil errores y volverlos a correjir me dí cuenta que tenía un enlace al script directo, seguí el enlace y caí en Alistapart y allí encontré el script, el cual copio a continuación:

Código HTML:

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);

Seguí todos los pasos, linkie este js a mi HTML

Código HTML:

<script src="js/script_gral.js" type="text/javascript"></script>

Y acomodé mis hojas de estilo:

Código HTML:

<link href="css/original.css" rel="stylesheet" type="text/css" title="Estilo Original" />
<link href="css/turquesa.css" rel="alternate stylesheet" type="text/css" title="Estilo Turquesa" />

En mi HTML coloqué los links, como decía el artículo

Código HTML:

<a href="#" onclick="setActiveStyleSheet('Estilo Original'); return false;">original</a>
<a href="#" onclick="setActiveStyleSheet('Estilo Turquesa'); return false;">turquesa</a>

y para mi sorpresa...AHÍ ESTABA FUNCIONANDO sin problemas, obviamente la index, ahora cuando pasaba a otra sección esta pasaba a su estado original, lo cuál me parecía lo más lógico.

Ahora mi pregunta es ¿existe alguna manera de hacer que la hoja de estilo seleccionada por el usuario lo acompañe en toda la navegación? y de ser posible, con este código puedo hacer algo?

Desde ya mil gracias
un abrazo

DragonX · 26/03/08, 19:33:48

jejejeej ya salió, andaba en todas lo que pasa es que no había puesto las hojas de estilo