Aggiungere "Tasti Incrementa/Decrementa/Reset Carattere"

irvin85

Aggiungere "Tasti Incrementa/Decrementa/Reset Carattere"

Ciao a tutti,
volevo sapere come si poteva inserire in un template (Joomla) i tasti "Incrementa - Decrementa - Reset Carattere" (per renderlo più accessibile) presenti sui siti: http://templatepack.joowiki.com/ e http://www.joomlaitalia.com. Spero di essere stato chiaro.

Ciao.

Irvin

surfwork

@Irvin85 said:

Ciao a tutti,
volevo sapere come si poteva inserire in un template (Joomla) i tasti "Incrementa - Decrementa - Reset Carattere" (per renderlo più accessibile) presenti sui siti: http://templatepack.joowiki.com/ e http://www.joomlaitalia.com. Spero di essere stato chiaro.

Ciao.

Irvin
Prova con il modulo mod_FWResizeFont

bsaett

Tieni presente che quel modulo crea problemi con alcuni componenti. In alcuni casi devi editare gli script e eliminare la gestione dei font del componente.
Inoltre ha dei problemi con IE.

surfwork

@bsaett said:

Tieni presente che quel modulo crea problemi con alcuni componenti. In alcuni casi devi editare gli script e eliminare la gestione dei font del componente.
Inoltre ha dei problemi con IE.
In effetti è meglio l'utilizzo di template che integrano già la funzione

irvin85

@surfwork said:

In effetti è meglio l'utilizzo di template che integrano già la funzione

Ciao

Sapreste consigliarmene qualcuno che inclusa le funzione presenti su http://templatepack.joowiki.com/.

Grazie

P.S.: Ottengo un errore di validazione del sito http://irvin.netsons.org (vedi sito validazione http://validator.w3.org/check?uri=http%3A%2F%2Firvin.netsons.org&charset=(detect+automatically)&doctype=Inline&group=0). Non riesco a capire cosa devo modificare!
Grazie Ancora.

aramis76

Puoi usare una funzione Java.

Eccoti un esempio...

Crea una pagina HTML nella route del tuo sito e chiamala come credi.
Il codice di prova è questo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>**
<link href="/css/template_css.css" rel="stylesheet" ****type="text/css"/> **
<script type="text/javascript" src="/styleswitcher.js"></script>

</head>
<body>**
<div id="resizer">
<a href="#" title="Aumenta corpo carattere" class="button" onclick="changeFontSize(1);return false;">A +</a> <a href="#" title="Riduci corpo carattere" class="button" onclick="changeFontSize(-1);return false;">A -</a>
<a href="#" title="Torna alla dimensione di partenza" class="button" onclick="revertStyles(); return false;">
****Reset</a>
</div>

Pippo Pluto Paperino

</body>
</html>

**Vedi che ad un certo punto richiamo una funzione js che si chiama **styleswitcher.js **appunto. Crei il file nella route del sito e ci incolli dentro il codice qui sotto:

**var prefsLoaded = false;
var defaultFontSize = 76;
var currentFontSize = defaultFontSize;

function revertStyles(){

currentFontSize = defaultFontSize;
changeFontSize(0);

}

function changeFontSize(sizeDifference){
currentFontSize = parseInt(currentFontSize) + parseInt(sizeDifference * 5);

if(currentFontSize > 100){
    currentFontSize = 100;
}else if(currentFontSize < 60){
    currentFontSize = 60;
}

setFontSize(currentFontSize);

};

function setFontSize(fontSize){
var stObj = (document.getElementById) ? document.getElementById('content_area') : document.all('content_area');
document.body.style.fontSize = fontSize + '%';

//alert (document.body.style.fontSize);

};

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")*); 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++) {
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()+(days2460601000));
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*;
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);
if(!prefsLoaded){

    cookie = readCookie("fontSize");
    currentFontSize = cookie ? cookie : defaultFontSize;
    setFontSize(currentFontSize);
    
}

}

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

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);**
Così dovrebbe funzionare.
Prova e fammi sapere.
Se integri il tutto nel codice della tua pagina index dovresti essere a posto.
Ovviamente stai all'occhio a definire bene gli stili della pagina!!!
Ciao!!!

irvin85

Grazie aramis 76.

irvin85

Ciao,

ho testato il tuo script, però mi fà il resize solo dei tre tasti dei "font scalabili". Sai in cosa posso aver sbaglito?

Ciao e Grazie per l'aiuto.

Irvin

@aramis76 said:

Puoi usare una funzione Java.

Eccoti un esempio...

Crea una pagina HTML nella route del tuo sito e chiamala come credi.
Il codice di prova è questo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="/css/template_css.css" rel="stylesheet" ****type="text/css"/>
<script type="text/javascript" src="/styleswitcher.js"></script>

</head>
<body>
<div id="resizer">
<a href="#" title="Aumenta corpo carattere" class="button" onclick="changeFontSize(1);return false;">A +</a> <a href="#" title="Riduci corpo carattere" class="button" onclick="changeFontSize(-1);return false;">A -</a>
<a href="#" title="Torna alla dimensione di partenza" class="button" onclick="revertStyles(); return false;">
Reset</a>
</div>

Pippo Pluto Paperino

</body>
</html>

Vedi che ad un certo punto richiamo una funzione js che si chiama **styleswitcher.js **appunto. Crei il file nella route del sito e ci incolli dentro il codice qui sotto:

var prefsLoaded = false;
var defaultFontSize = 76;
var currentFontSize = defaultFontSize;

function revertStyles(){

currentFontSize = defaultFontSize;
changeFontSize(0);

}

function changeFontSize(sizeDifference){
currentFontSize = parseInt(currentFontSize) + parseInt(sizeDifference * 5);

if(currentFontSize > 100){
currentFontSize = 100;
}else if(currentFontSize < 60){
currentFontSize = 60;
}

setFontSize(currentFontSize);
};

function setFontSize(fontSize){
var stObj = (document.getElementById) ? document.getElementById('content_area') : document.all('content_area');
document.body.style.fontSize = fontSize + '%';

//alert (document.body.style.fontSize);
};

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")*); 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++) {
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++) {
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()+(days2460601000));
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;*
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);
if(!prefsLoaded){

cookie = readCookie("fontSize");
currentFontSize = cookie ? cookie : defaultFontSize;
setFontSize(currentFontSize);

}
}

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

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
Così dovrebbe funzionare.
Prova e fammi sapere.
Se integri il tutto nel codice della tua pagina index dovresti essere a posto.
Ovviamente stai all'occhio a definire bene gli stili della pagina!!!
Ciao!!!

irvin85

Ciao a tutti,
volevo sapere se inserendo il font size nel body, definisco la dimensione base dei testi del sito, giusto? Se per esempio il font-size nel body e' 10px, significa che:
p { font-size: 1em} ----> 10px
p { font-size: 2em} ----> 20px
p { font-size: 1.2em} ----> 12px
p { font-size: 0.8em} ----> 8px
E' Corretto il ragionamento?
Domanda dove metto il font-size nel body?, lo devo mettere all'inizio del tag body suppongo.
Così magari riprovo il file e lo script in .js! Potrebbere essere un problema se i font-size non sono definiti in em?
Grazie mille per tutto l'aiuto.
Irvin

Aggiungere &quot;Tasti Incrementa/Decrementa/Reset Carattere&quot;

Aggiungere "Tasti Incrementa/Decrementa/Reset Carattere"