Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17676
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Alterar tamanho do texto e manter tamanho salvo com jQuery

10-03-2016 20:46

Nesse post vou mostrar um script para que o usuário possa alterar o tamanho da fonte do site através de uma lista.

Após selecionar o tamanho do texto o mesmo ficará salvo em um cookie. Dessa forma o usuário poderá definir a alteração do tamanho da fonte da página.

Para facilitar eu deixei somente para alterar o tamanho de uma div específica, já que geralmente nem todo o texto do site pode ter o mesmo tamanho.

Mas se você quer que o tamanho do texto seja alterado em toda a página troque o seguinte:

$("#texto").css({'font-size':$("#fonte option:selected").val()});

por

$("body").css({'font-size':$("#fonte option:selected").val()});

e

$("#texto").css({'font-size':$.cookie("size")});

por

$("body").css({'font-size':$.cookie("size")});


<style> #texto{ font-family:verdana; } </style> <script src="jquery.js"></script> <script> $(document).ready(function() { // BASE DO COOKIE - NÃO ALTERAR jQuery.cookie=function(e,t,n){if(typeof t!="undefined"){n=n||{};if(t===null){t="";n.expires=-1}var r="";if(n.expires&&(typeof n.expires=="number"||n.expires.toUTCString)){var i;if(typeof n.expires=="number"){i=new Date;i.setTime(i.getTime()+n.expires*24*60*60*1e3)}else{i=n.expires}r="; expires="+i.toUTCString()}var s=n.path?"; path="+n.path:"";var o=n.domain?"; domain="+n.domain:"";var u=n.secure?"; secure":"";document.cookie=[e,"=",encodeURIComponent(t),r,s,o,u].join("")}else{var a=null;if(document.cookie&&document.cookie!=""){var f=document.cookie.split(";");for(var l=0;l<f.length;l++){var c=jQuery.trim(f[l]);if(c.substring(0,e.length+1)==e+"="){a=decodeURIComponent(c.substring(e.length+1));break}}}return a}} $("#fonte").change(function() { $.cookie("size", $("#fonte option:selected").val(), { expires: 365 }); $("#texto").css({'font-size':$("#fonte option:selected").val()}); }); $("#texto").css({'font-size':$.cookie("size")}); $("#fonte").val( $.cookie("size") ); }); </script> <form> <select id="fonte"> <option></option> <option size="10">10</option> <option size="11">11</option> <option size="12">12</option> <option size="13">13</option> <option size="14">14</option> <option size="15">15</option> </select> <div id="texto">texto</div>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado