En este artículo, vamos a aprender algo sobre accesiblidad. Bueno, es cierto que muchas personas piensan que la accesibilidad no tiene mucha importancia en la web ya que casi todos los navegadores cuentan con la funcionalidad de hacer zomm in y zoom out en el contenido de la web. Ok, esto es muy cierto, pero en la mayoría de las páginas web, si utilizas la función de zoom del propio navegador, lo más probable que pase es que que arruines el diseño. Ese diseño por el que el administrador ha pagado y que da sentido al sitio web. Por lo tanto, en este artículo te vamos a mostrar cómo redimensionar única y exclusivamente el texto de un sitio web, sin influir en los elementos restantes del propio contenido.
Este tutorial se centrará más en el código Javascript. Es por eso, por lo que el HTML y CSS son muy básicos.
HTML
Muy bien, sólo tenemos que asegurarnos de que el nombre de la clase es correcto. Puedes darle mucho más estilo con imágenes y con un efecto hover para cuando se pose el ratón encima.
<a href="#" class="fontSizePlus">A+</a> |
<a href="#" class="fontReset">Reset</a> |
<a href="#" class="fontSizeMinus">A-</a>
CSS
El CSS más corto de los que hemos publicado en programacion.net. Defino el tamaño de la fuente por defecto en 14px. No importa si has especificado el tamaño de la fuente mediante un porcentaje.
body {
font-size:14px;
font-family:arial;
}
a {
color:#c00;
text-decoration:none;
}
a:hover {
color:#f00;
text-decoration:underline;
}
Javascript
Por último, ¡el mágico jQuery! No te asustes por la longitud, el 50% del código son comentarios y es muy sencillo.
$(document).ready(function () {
//min font size
var min=9;
//max font size
var max=16;
//grab the default font size
var reset = $('p').css('fontSize');
//font resize these elements
var elm = $('p.intro, p.ending');
//set the default font size and remove px from the value
var size = str_replace(reset, 'px', '');
//Increase font size
$('a.fontSizePlus').click(function() {
//if the font size is lower or equal than the max value
if (size=min) {
//decrease the size
size--;
//set the font size
elm.css({'fontSize' : size});
}
//cancel a click event
return false;
});
//Reset the font size
$('a.fontReset').click(function () {
//set the default font size
elm.css({'fontSize' : reset});
});
});
//A string replace function
function str_replace(haystack, needle, replacement) {
var temp = haystack.split(needle);
return temp.join(replacement);
}
Fácil ¿no es así? Puede darle estilo al "Increase font size" y al "Decrease font size" con iconos para hacerlo más presentable. jQuery definitivamente ha cambiado la forma en la que programamos con JavaScript. Con Vanilla JS serías incapaz de lograr un código tan fácil y corto, ¿o sí?.
Fuente: queness.com