MXStudio » Marcio_Diniz http://www.mxstudio.com.br Macromedia e Adobe - Artigos, colunas, tutorias e muito mais... Sun, 29 Jan 2012 11:31:48 +0000 en hourly 1 http://wordpress.org/?v=3.1.3 Fontes Acessíveis http://www.mxstudio.com.br/desenvolvimento/javascript/fontes-acessiveis/ http://www.mxstudio.com.br/desenvolvimento/javascript/fontes-acessiveis/#comments Wed, 30 Apr 2008 17:08:30 +0000 Marcio_Diniz http://www.mxstudio.com.br/?p=1298 Olá,

Neste meu segundo artigo, também algo simples mas que também é de grande ajuda para quem precisa trabalhar com acessibilidade.

Neste exemplo vou mostrar como fazer para criar aqueles botões que aumentam e diminuem a fonte do texto do site.

script.js

window.onload= function() {
var tam = 1 ;

document.getElementById(“maior”).onclick = function()
{
document.getElementById(“conteudo”).style.fontSize = (tam += 0.1) + “em”;
}

document.getElementById(“menor”).onclick = function()
{
document.getElementById(“conteudo”).style.fontSize = (tam -= 0.1) + “em”;
}
}

arquivo.htm

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Fontes Acessíveis</title>

<script type=”text/javascript” src=”script.js”></script>

<style type=”text/css”>
<!–
#tela {
margin: auto;
width: 760px;
}
#topo {
text-align: right;
float: left;
width: 100%;
}
#conteudo {
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 5px;
float: left;
width: 100%;
}
#maior {
font-size: 2em;
font-weight: bold;
margin: 5px;
cursor:pointer;
}
#menor {
font-size: 1.5em;
font-weight: bold;
cursor:pointer;
margin: 5px;
}
–>
</style>
</head>

<body>
<div id=”tela”>
<div id=”topo”><span id=”maior”>A</span><span id=”menor”>A</span></div>

<div id=”conteudo”>

<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris scelerisque ante faucibus massa. Sed placerat purus tempor nulla. Sed tristique. Cras lacinia pede ac purus cursus gravida. Curabitur eget eros ac erat cursus ullamcorper. Mauris dignissim auctor est. Phasellus ut massa nec odio euismod dapibus. In hac habitasse platea dictumst. Suspendisse varius, quam bibendum bibendum condimentum, nisl erat suscipit neque, ut sodales lectus erat ultrices orci. Proin in est. Integer mauris massa, pretium sed, consectetuer vel, lacinia et, lacus. Ut scelerisque egestas diam. Sed mauris. Praesent vulputate. Proin neque leo, auctor eget, tristique et, malesuada vel, felis. </p>
</div>
</div>
</body>
</html>

Explicando o código:

window.onload = function(){
//Ao carregar o arquivo

document.getElementById(“maior”).onclick = function()
//Ao clicar no A maior
{
document.getElementById(“conteudo”).style.fontSize = (tam += 0.1) + “em”;
//Trabalhando com o DOM aumentamos em 0.1em o tamanho original da fonte a cada click
}

document.getElementById(“menor”).onclick = function()
//Ao ckicar no A menor
{
document.getElementById(“conteudo”).style.fontSize = (tam -= 0.1) + “em”;
//Trabalhando com o DOM diminuimos em 0.1em o tamanho original da fonte a cada click
}
}

Procurei trabalhar de uma forma simples, procurando deixar o HTML mais simples possível, quando forem utilizar o código procurem colocar o CSS em um arquivo a parte, coloquei dentro do HEAD somente para facilitar o entendimento do código.

Um Abraço a Todos e Até o Próximo Artigo.

Veja um Exemplo:

http://www.mxstudio.com.br/wp-content/uploads/2008/04/fontes_acessiveis.htm

]]> http://www.mxstudio.com.br/desenvolvimento/javascript/fontes-acessiveis/feed/ 3 Máscara para CNPJ http://www.mxstudio.com.br/desenvolvimento/javascript/mascara-para-cnpj/ http://www.mxstudio.com.br/desenvolvimento/javascript/mascara-para-cnpj/#comments Sun, 20 Apr 2008 01:48:06 +0000 Marcio_Diniz http://www.mxstudio.com.br/?p=1140 Olá,

Neste meu primeiro artigo, quero mostrar algo simples mas que é de grande ajuda para quem precisa trabalhar com máscaras numéricas.

Neste exemplo vou mostrar como fazer uma máscara para um campo de CNPJ:

script.js

window.onload = function()
{
document.getElementById(“cnpj”).onkeypress = function()
{
nCaract = document.getElementById(“cnpj”)

switch(nCaract.value.length)
{
case 2: nCaract.value += “.”;
break;

case 6: nCaract.value += “.”;
break;

case 10: nCaract.value += “/”;
break;

case 15: nCaract.value += “-”;
break;
}
}
}

Arquivo HTML:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Máscara de Campo Numérico</title>
<script type=”text/javascript” src=”script.js”></script>
</head>

<body>
<label for=”cnpj”><img src=”cnpj.jpg” alt=”Modelo de CNPJ” width=”400″ height=”172″ /><br />
C.N.P.J.</label>
<input type=”text” id=”cnpj” size=”20″ maxlength=”18″ />
<input type=”button” id=”Enviar” value=”Enviar” />
</body>
</html>

Explicando o código:

window.onload = function(){
//Ao carregar o arquivo

document.getElementById(“cnpj”).onkeypress = function()
//Ao pressionar uma tecla no campo cnpj
{

nCaract = document.getElementById(“cnpj”)
//Instanciando o campo CNPJ

//nCaract.value.length Retorna a quantidade de caracteres a cada tecla digitada
switch(nCaract.value.length)
{
case 2: nCaract.value += “.”;
break;

case 6: nCaract.value += “.”;
break;

case 10: nCaract.value += “/”;
break;

case 15: nCaract.value += “-”;
break;
}

Quando houver dois caracteres no campo será acrescentado o ponto, ao continuar preenchendo quando houver seis caracteres será acrescentado mais um ponto, quando tiver 10 caracteres será acrescentado a barra e quando houver quinze caracteres será acrescentado o hífen.

Bom pessoal é um artigo simples, mas dá um toque especial para o formulário, podendo ser utilizado para campos que recebem CPFs, CNPJs, Datas, CEP, telefones entre outros.

Demostração:

http://www.mxstudio.com.br/wp-content/uploads/2008/04/mascara.htm

]]> http://www.mxstudio.com.br/desenvolvimento/javascript/mascara-para-cnpj/feed/ 4