Centralizar imagem na vertical com JavaScript

Postado por: Pedro Rogério em
  • 8 mar
  • 3

No post anterior mostrei como é possível centralizar uma imagem na horizontal e vertical com CSS, independente do tamanho da imagem. A solução utilizava algumas propriedades CSS e uma tag <span> vazia no HTML. Para os semanticistas de plantão isso é um crime.

O que podemos fazer então, criar aquela tag <span> via JavaScript, ou então utilizar uma solução com a utilização de jQuery e o resultado final obtido será o mesmo. Primeiro, vamos a marcação HTML, observe que remove a tag span do código utilizada no exemplo anterior e adicionei uma classe a imagem só para identificação no JavaScript:

<div class="box">
    <img class="centralized" src="img1.jpg" alt="" title="" />
</div>

Continuar lendo »

Central Server

Style Switcher com jQuery

Postado por: Pedro Rogério em
  • 9 jun
  • 2

A jQuery proporciona uma forma muito simples de você desenvolver Style Switchers (troca de folhas de estilo) em seu site sem ter que digitar várias linhas de código. O exemplo que vou mostrar aqui ainda faz o uso de Cookies para que aquele CSS escolhido pelo usuáro possa ser carregado novamente quando o mesmo voltar a página.

Primeiramente você deve fazer o uso da biblioteca jQuery, e após criar suas folhas de estilo como desejar. Nesse exemplo vou utilizar 3 arquivos CSS que somente irão efetuar uma alteração na cor de fundo do layout, mas você pode definí-las como quiser.

<link rel="stylesheet" type="text/css" href="estilos.css" title="normal" />
<link rel="stylesheet" type="text/css" href="estilopreto.css" title="preto" />
<link rel="stylesheet" type="text/css" href="estilovermelho.css" title="vermelho" />

É muito importante você definir um título para suas folhas de estilo pois futuramente iremos chamá-las no JavaScript através do title das mesmas. O passo seguinte é o nosso HTML:

<ul>
	<li><a href="#" rel="normal" class="styleswitch">Estilo 1</a></li>
	<li><a href="#" rel="vermelho" class="styleswitch">Estilo 2</a></li>
	<li><a href="#" rel="preto" class="styleswitch">Estilo 3</a></li>
</ul>

Continuar lendo »

Contar e limitar caracteres em textarea

Postado por: Pedro Rogério em
  • 3 abr
  • 10

jQuery Limit plugin é muito útil se você precisa cortar e limitar caracteres de textareas ou campos input. A utilização é muito simples, basta ficar atento a seguinte estrutura html:

Ainda restam <span id="left"></span> caracteres a serem digitados.
<textarea>Lorem ipsum dolor sit amet,</textarea>

Depois basta definir no JavaScript o número máximo de caracteres e qual elemento irá mostrar a contagem de caracteres, no exemplo foi um span com o id “left”:

$('textarea').limit('140','#left');

Se você não deseja mostrar ao usuário o número de caracteres restantes, basta deixar o código dessa forma:

$('textarea').limit('140');

Vejam o exemplo.

IE6 Double Margin / Duplicate Characters bug fix usando jQuery

Postado por: Pedro Rogério em
  • 8 jan
  • 14

Meus amigos desenvolvedores com certeza conhecem a fundo os mais famosos bugs do IE6, o da margem dupla e o bug da repetição de caracteres, se você não conhecia esses bugs, aconselho a dar uma lida nesses posts. Mas como conhecimento nunca é demais, acabei encontrando hoje uma simples solução para resolver esses bugs no IE6 utilizando jQuery:

$('*').each(function() {
  if ($(this).css('float') !== 'none') {
    $(this).css('display', 'inline');
  }
});

O resultado desse código é que ele irá procurar todos os elementos na página e aqueles que tenham float diferente de none será adicionado a propriedade css display:inline previnindo seu trabalho para que não ocorra esses bugs.

Via: Snipplr

Páginas:12»