Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Angelo Rocha

[Resolvido] Alternar duas folha de estilo com apenas um link

Por , em Javascript

Recommended Posts

Angelo Rocha    0

Angelo Rocha
Postado

Pessoal, estou desenvolvendo um site adotando os principios de acessibilidade, criei duas folhas de estilo, a normal e uma em alto contraste, faço a alternancia das duas normalmente e uso inclusive cache para manter a escolha do usuario, porem tenho que usar duas ancoras para isso, uma pra ir e outra pra voltar :lol:

 

Queria fazer como ta no site da celepar: http://www.celepar.pr.gov.br/

 

Notem que na barra de acessibilidade deles so tem um link "contraste", que alterna entre as duas folhas de estilo, alguem sabe como posso fazer isso? Usar somente uma ancora para alternar entre as duas folhas de estilo? Obrigado.

 

Abaixo o código dos links para alternar entre as folhas de estilo:

<a href="#" onclick="setActiveStyleSheet('contraste'); return false;" >Contraste</a>
<a href="#" onclick="setActiveStyleSheet('default'); return false;" >Normal</a>

 

O javascript que faz isso funcionar:

<script type="text/javascript">
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;
    }
  }
}
</script>

 

Os Links das minhas folhas de estilo:

<link rel="stylesheet" href="css/style.css" type="text/css" title="default" />
<link rel="alternate stylesheet" type="text/css" href="css/contraste.css" title="contraste" />

 

Funciona perfeitamente, o que quero é eliminar o segundo link, entendem, fazer com que ao clicar em "contraste" ele mude, e clicando de novo ele volte ao normal.

 

Desde já obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Guima    164

Lucas Guima
Postado

Tentou olhar o código do site?

 

$(document).ready(function() {

if($.cookie("instbar-contrast")) {setActiveStyleSheet($.cookie("instbar-contrast"));}

$('#inst-bar-opt-contrast a').click(function(e) {
	e.preventDefault();
	if ( getActiveStyleSheet() == 'default') {
		setActiveStyleSheet('high-contrast-w-b');
	} else {
		setActiveStyleSheet('default');
	}
});

if($.cookie("instbar-text") == 'bFont') {
	$('body').addClass('bFont');
} else {
	$('body').removeClass('bFont');
}

$('#inst-bar-opt-increase-text a').click(function(e) {
	$.cookie("instbar-text","bFont", {expires: 365, path: '/'});
	e.preventDefault();
	$('body').addClass('bFont');
});
$('#inst-bar-opt-normal-text a').click(function(e) {
	$.cookie("instbar-text","sFont", {expires: 365, path: '/'});
	e.preventDefault();
	$('body').removeClass('bFont');
});	
});

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;
	}
}
$.cookie("instbar-contrast",title, {expires: 365, path: '/'});
}

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Angelo Rocha    0

Angelo Rocha
Postado

Já, só não sei o que é o instbar-contrast para substituir aqui.

 

if($.cookie("instbar-contrast")) {setActiveStyleSheet($.cookie("instbar-contrast"));}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Angelo Rocha    0

Angelo Rocha
Postado

Deixa só eu mencionar um detalhe, eu estou usando isso em um template Joomla que desenvolvi, desmontei o codigo todo e criei uma página estatica para testar e funcionou, agora é só ver onde ta o erro no template, segue o código do meu teste:

 

Index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" title="1">
<link rel="alternate stylesheet" type="text/css" href="stylealt.css" title="2">
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>

<li id="click"><a href="#">Teste</a></li>
</body>
</html>

 

style.css:

body{background:#333}

 

stylealt.css:

body{background:#CCC}

 

js.js:

$(document).ready(function() {

       if($.cookie("contrast-bar")) {setActiveStyleSheet($.cookie("contrast-bar"));}

       $('#click a').click(function(e) {
               e.preventDefault();
               if ( getActiveStyleSheet() == '1') {
                       setActiveStyleSheet('2');
               } else {
                       setActiveStyleSheet('1');
               }
       });
});

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;
               }
       }
       $.cookie("contrast-bar",title, {expires: 365, path: '/'});
}

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

jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// CAUTION: Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};// JavaScript Document

 

Versão do jQuery: jQuery 1.4.3

 

Moderação não marca como resolvido ainda não, posso ter algum pro quanto ao Joomla e seus js e gostaria de usar este mesmo tópico, posto assim que der certo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Angelo Rocha    0

Angelo Rocha
Postado

Resolvido!

Adicionei noConflict em algumas seções do meu template bem como nas funções de alguns modulos e agora esta tudo 100%.

:thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito