06/01/2010 - 18:02
Se tem uma função básica em quase todas as linguagens de programação e extremamente util é a “trim”.
Pra quem não sabe, a função trim serve para retirar os espaços antes e depois de uma string. Algom mais ou menos assim:
Antes:
” Olá Mundo ”
Depois do uso do trim
“Olá Mundo”
Mas, sempre tem um mas…. Em Javascript não tem, pelo menos não nativa. Você deve criar uma.
Há algum tempo atrás eu encontrei uma na internet que usa expressões regulares para retirar esses espaços. Não sei quem a criou, mas se souberem me avisem para que eu possa colocar os créditos por ela.
Vamos à função. Bem simples.
function Trim(str){return str.replace(/^\s+|\s+$/g,"");}
Depois é só usar.
//Exemplo
var string = " Tem espaço antes e Depois ";
alert(Trim(string));
Testem. Usem. Usufruam.
Enviado por: Leandro Garcia - Categoria(s): JavaScript
Tags relacionadas: função, Java Script, JavaScript
03/03/2009 - 20:23
Anteriormente escrevi sobre maneiras de otimizar o carregamento das páginas.
Umas destas maneiras, é colocar todas as chamadas de scripts na parte de baixo da página, mas aí tem um problema. Aqui na empresa as publicidades são dinamicas e exibidas através de script, logo, para eu exibir um superbanner na posição correta, eu deveria chamar o JS externo no head da página, mas é oposto ao que devemos práticar aqui.
Alguns de você dirão, basta que você coloque um posicionamento reletivo(relative) na div container e coloque a publicidade na parte do código e posicione a div com a publicidade em absoluto(absolute).
Isso funciona, desde que a publicidade seja sempre no mesmo local, mas se a publicidade é um island, por exemplo que é no meio do conteúdo, o que fazer?
É aí que surge o Offset da página.
Com o Offse, Você consegue descobrir onde exatamente, em Pixels, está o elemebto que você quer encontrar.
Por exemplo. Eu tenho um campo de busca e quero ao clicar nele, abrir um suggest, é com o Offset.
Ou no caso do Banner, como eu fiz:
Criei uma div com o id bannerposicao nessa div eu joguei o tamanho do banner (height:240px;width:120px). Com isso eu criei um espaço vazio que eu posso preencher porexemplo com o endereço da central de relacionamentos (bom para efeito de SEO).
No final do código eu criei uma outra div com o id banner e joguei (via CSS) o tamanho da publicidade (height:240px;width:120px) e a posicionei como absoluto (position:absolute).
Depois disso, eu usei a função abaixo para posicionar a publicidade no lugar dela.
HTML
<div id="bannerposicao"> <a href="http://www.leandrogarcia.com/blog"> Blog do Garcia </a> </div>
<br class="clear" />
<div id="corpo">Corpo</div>
Aqui abaixo esta o banner
<div id="banner"> <img src="http://www.leandrogarcia.com/blog/wp-content/uploads/2009/03/puboffset.gif" alt="publicidade" /> </div>
<br class="clear" />
<button onclick="alert(document.getElementById('bannerposicao').offsetHeight);"> offsetHeight </button>
<button onclick="alert(document.getElementById('bannerposicao').offsetWidth);"> offsetWidth </button>
<button onclick="alert(document.getElementById('bannerposicao').offsetLeft);"> offsetLeft </button>
<button onclick="alert(document.getElementById('bannerposicao').offsetTop);"> offsetTop </button>
CSS
#bannerposicao{float:left; width:120px; height:240px; background:#ccc}
#banner{display:block; position:absolute; width:120px; height:240px; background:#ccc}
#corpo{clear:both; height:400px}
JS
function exibepublicidade(){
var $arg = document.getElementById('bannerposicao'); //Essa linha pega os dados da div
var $curTop=0,$curLeft=0,$curWidth=0; // Essa, cria as variáveis de largura, left e top
if($arg.offsetParent) {
do {
$curLeft += $arg.offsetLeft;
$curTop += $arg.offsetTop;
}while($arg = $arg.offsetParent)
} //O if acima, pega a posição da Div em relação à janela
var $posicao = document.getElementById('banner');
$posicao.style.top = $curTop + "px";
$posicao.style.left = $curLeft + "px";
}
exibepublicidade();
Com o Offset conseguimos pegar a Altura, a Largua a Posição Left e Top do elemento.
Altura (offsetHeight), Largura (offsetWidth), Left (offsetLeft) e Top(offsetTop);
Veja o exemplo
Download
Enviado por: Leandro Garcia - Categoria(s): JavaScript
Tags relacionadas: Absolute, Absoluto, CSS, Java Script, JavaScript, Offset, Posicionamento
29/01/2009 - 22:24
Recentemente, estive trabalhando em um sistema com cadastros, quando me deparei com um problema, o Enter.
Não podia Permitir que o usuário desse o action do form ao pressionar o enter, geralemente para mudar de campo.
Pesquisei na Internet, achei algumas opções, mas acabei criando a minha do jeito que eu realmente precisava. Cheguei ao script abaixo.
function arrumaEnter (field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
}
else
return true;
}
<input onkeypress="return arrumaEnter(this, event)" maxlength="60" name="emitente" type="text" />
Linha a linha
function arrumaEnter (field, event) { - Nome da funcção, que recebe o campo e o evento utilizado
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; – Recebe o evento utilizado
if (keyCode == 13) { – Se a tecla é o Enter
var i; - Cria a variável
for (i = 0; i < field.form.elements.length; i++) – Roda todos os camposdo form
if (field == field.form.elements[i]) - Se o campo utilizado é o atual
break; Para
i = (i + 1) % field.form.elements.length; – Adiciona 1 ao campo atual
field.form.elements[i].focus(); – Dá um foco no próximo campo
return false; – Retorna Falso, ou seja, não permite o submit
else – Caso contrário
return true; – Permite o Submit
onkeypress=“return arrumaEnter(this, event)” – Chama a função
Veja
download
Enviado por: Leandro Garcia - Categoria(s): JavaScript, dicas
Tags relacionadas: Java Script, JavaScript, tutorial
19/05/2008 - 18:29
Esta é uma função simples que criei tem algum tempo e utilizo sempre que preciso abrir algum tipo de Janela em formato pop-up.
Eu poderia utilizar uma função específica para cada tipo de pop-up, mas pesem: Se um site tiver links para abrir 5 pop-ups, seria 5 códigos diferentes, ou seja, como resultado o dódigo da página seria maior e a necessidade de ampliar a bande de acesso ao site poderia aumentar.
A função:
<script type=”text/javascript”>
function abre(caminho,largura,altura,rolagem){
w = largura;
h = altura;
rol = rolagem;
largura = screen.width;
altura = screen.height;
XX = (largura-w)/2;
YY = (altura-h)/2;
janela = window.open(caminho,nm_janela, ‘width=’+w+’, height=’+h+’, left=’+XX+’, top=’+YY+’menubar=no, toolbar=no,status=no,scrollbars=’+rol+’,');
janela.focus(); }
</script>
Vamos ver linha a linha como funciona.
Linha 1
function abre(caminho,nm_janela,largura,altura,rolagem){
Esta linha é onde se inicia a função, ou seja, é o nome da função e as variáveis que ela utiliza (caminho,largura,altura,rolagem).
As linhas 2, 3 e 4, nestas linhas eu coloco o conteúdo das variáveis que eu recebi via função em uma variáel que com um nome de minha preferência. Não há a necessidade de iniciar essas variáveis, uma vez que eu poderia usar os nomes que vem entre os parênteses, mas a títuli de clareza das informações, eu prefiro utilizar.
As Linhas 5 e 6 iniciam as variáveis largura e altura com o tamanho da tela de pessoa que está acessando o site utiliza. ex. 1024×768 px
Linhas 7 e 8, estas linhas são a chave para que a pop-up seja aberta centralizada na tela. É iniciada as variáveis XX e YY com a largura(altura) – a largura(altura) que você enviou via função w(h) e divide por 2.
Linha 9 inicia a veriável que abrirá a pop-up, mais uma vez, eu não precisaria iniciar a variável, bastaria que eu escrevesse o caminho depois do igual, mas para deixar o código claro, prefiro iniciar a variável.
window.open = abre a janela
caminho, esta é a variável recebida via função. Ex. “www.leandrogarcia.com/blog”
nm_janela, está é uma outra variável reebida pela função que diz qual é o nome da Janela, é o que dirá se você clicar em um outro link com esta função se deve abrir a nova página na Janela já aberta ou em uma nova. Ex. nm_janela = um, abre uma Janela; segundo clique, nm_janela = um, abre por cima da outra janela. nm_janela = dois, abre uma nova janela
width=’+w+’, é a largura da Janela
height=’+h+, é a altura da Janela
left=’+XX+’, é onde o browser entede que deve centralizar a abertura da Janela horizontalmente
top=’+YY+’, é onde o browser entede que deve centralizar a abertura da Janela verticalmente
menubar=no,toolbar=no,status=no, diz ao browser para não exibir a barra de menus, de ferramentas e a barra de status.
scrollbars=’+rol+’, diz ao rowser se haverá barra de rolagem, yes, no e auto (eu defini como variável da função, pois posso dizer se vai ou não ter barra de rolagem, mas poderia ter iniciado com yes, no ou auto.
e por último, janela.focus(); é onde o browser recebe a ordem de excutar a variável janela
Legal, coloquei esta função no meu site, como eu faço para executála?
Simples, você chama ela via link. Ex. <a href=”javascript:abre(‘http://www.leandrogarcia.com/blog’,'blog do Garcia’,'500′,’500′,’no’);”>Abrir Janela</a> ou, <a href=”#” onClick=”abre(‘http://www.leandrogarcia.com/blog’,'blog do Garcia’,'500′,’500′,’no’);”>Abrir Janela</a>
A função descrita deve ser colada entre as tags <head> e </head> do seu html, ou chamada externamente, mas isso deixa pra uma outra hora.
Espero que esta Função Ajude.
Enviado por: Leandro Garcia - Categoria(s): JavaScript
Tags relacionadas: Java Script, JavaScript, Window.Open