Archive for html

formatTable

This is an easy way to dynamic format a HTML table. Instead of go throught every table inserting class names to all ‘tr’ and ‘td’, you can use javascript do it for you. Create your css class, the format object and call the function on window ‘onload’ event.

With this script:

<script type="text/javascript">

var fmt1 = {
	table: 'table1',
	rolls: ['', 'trOdd'],
	cells: ['', 'tdCenter tdBg', '', 'tdCenter tdBg']
}

AMF.formatTableInit = function() {
	AMF.formatTable(fmt1);
}

onload = AMF.formatTableInit;

</script>

And this HTML:

<table id="table1">
	<thead>
		<tr>
			<td style="width:40%">Loren Ipsun</td>
			<td style="width:10%" class="tdCenter">Ono</td>
			<td style="width:40%">Loren Ipsun</td>
			<td style="width:10%" class="tdCenter">Ono</td>
		</tr>
	<thead>
	<tbody>
		<tr>
			<td>Loren Ipsun Dolor</td>
			<td>123</td>
			<td>Loren Ipsun Dolor</td>
			<td>456</td>
		<tr>
		<tr>
			<td>Loren Ipsun Dolor</td>
			<td>123</td>
			<td>Loren Ipsun Dolor</td>
			<td>456</td>
		<tr>
	</tbody>
<table>

You can format your tables anyway you want. From this:
Before

To this:
After

Download it here (formattable.zip 3kb)

Comments (1)

Cross-browser PNG background

Muitas vezes temos problemas para implementar transparência (PNG ou filtro de transparência) com sucesso em todos os browsers sem muita dor de cabeça. Reuni aqui uma forma que acredito seja eficaz porque está tudo no mesmo CSS e não precisa de JavaScript.

O CSS

#box {
    background-image: url(../img/boxBg.png) !important;
    background-image: none;
    filter: none !important;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='img/boxBg.png',sizingMethod='scale');
    position: static;
}

O HTM

<div id="box">
    <p>Conteúdo aqui</p>
</div>

Supondo que você trabalhe com a seguinte árvore de diretórios:

/css/box.css
/img/boxBg.png
/index.htm

Vamos analisar cada linha do CSS:

background-image: url(../img/boxBg.png) !important;
Define a imagem de fundo do elemtento, no caso o div, e o !important define que esta linha é a definição de background-image que vai prevalecer sobre todas as outras declarações desse atributo. Note que o Internet Explorer (IE) 6.0 e anteriores ignora o !important se tiver alguma declaração do mesmo atributo depois dessa linha.
O caminho da imagem quando você usa ela em um .css no background-image é relativo ao arquivo .css.
background-image: none;
Filtro para o IE 6.0 e anteriores. Como ele ignora o !important da linha acima ele não vai mostrar a imagem de fundo no elemento.
filter: none !important;
O, recém lançado, IE 7.0 já trabalha com o comportamento padrão do !important no CSS. Se não existir essa linha, ele vai renderizar dois PNG’s um sobre o outro, já que essa nova versão já tem suporte para PNG de 24bits.
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='img/boxBg.png',sizingMethod='scale');
Mais uma linha para IE 6.0. Ele vai ignorar o !important da linha anterior e vai usar o filtro para exibir o PNG com todos os níveis de transparência.
O caminho da imagem quando você usa ela em um .css no filter é relativo à página que você está chamando.
No filtro AlphaImageLoader você têm três opções para o atributo sizingMethod:

  • sizingMethod='image' – mantém a imagem do tamanho original, ele “estoura” o tamanho do elemento se a imagem for maior que ele
  • sizingMethod='scale' – redimensiona a imagem pra caber dentro do elemnto, distorcendo ela se for necessário
  • sizingMethod='crop' – corta a imagem do tamanho do elemento
position: static;
Quando o IE 6.0 aplica o filtro, ele renderiza todo o conteúdo e o elemtento fica “chapado” como se fosse uma imagem. Links (a), campos de formulário (input) e outros elementos, perdem o seu comportamento padrão e os eventos não funcionam para o elemento. Para resolver esse problema usamos position: static; que contorna essa falha de renderização. Se for necessário posicionar o elemento na tela vai ser necessário colocá-lo dentro de um container (div) e este elemento “pai” pode ter a posição absoluta ou relativa na tela.

Essa solução tem se mostrado ideal nos projetos que tenho trabalhod. Foi testado no Firefox 1.5, Internet Explorer 5.5; 6.0; 7.0 e Opera 9.0, todos rodando Windows XP. Fico agradecido se alguém conseguir testar em outros sistemas operacionais, pricipalmente Macintosh.

Comments (10)