Leandro Garcia

Offset, descobrindo o posicionamento absoluto de um elemento

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

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Galeria de fotos

Recentemente, precisei fazer uma galeria de fotos, onde se pudesse navegar entre as fotos e entre os thumbnails. Eu havia feito algo muito parecido com isso anteriormente, porém em FLASH. Como não sou um ÁS em Action Script, a maneira como fiz, é muito ruim para atualizar.

Desta vez, pensei, preciso de uma em Javascript. Procurei muito web a fora, porém não encontrei uma que se encaixasse com o que eu precisava, então resolvi desenvolver uma.

Comecei definindo o layout e as funcionalidades que eu queria.

Defini que eu queria uma galeria com thumbnails abaixo da foto principal, deveria haver uma navegação entre as fotos, e nos thumbs, poderia haver mais do que o exibido sem para isso quebrar o layout, deveria haver uma legenda e uma subleganda.

A partir disso, desenvolvi o layout e em seguida o script.

Em seguida, testei nos Browsers

Resultado…

O Código

<div id="pksgal">
	<div id="palco">
		<div id="pict"><!-- --></div>
		<a href="#" onclick="return avancaImage()" class="sail fow"> avançar </a>
		<a href="#" onclick="return retrocedeImage()" class="sail back"> voltar </a>
	</div>
	<div id="title">
		<div id="titulo"><!-- --></div>
		<div id="deta"><!-- --></div>
	</div>
	<div class="nav mr5"> <a href="#" onclick="retrocedeThumb()"> <img src="images/voltar.gif" alt="voltar" /> </a> </div>
	<div id="thumbs">
		<div id="thumbgall">
			<a href="images/1.jpg" onclick="return abrefoto(this)" title="Stewie|Family Guy"> <img src="images/1.jpg" width="50" height="50" alt="" /> </a>
			<a href="images/2.jpg" onclick="return abrefoto(this)" title="American DAD|10x20"> <img src="images/2.jpg" width="50" height="50" alt="" /> </a>
			<a href="images/3.jpg" onclick="return abrefoto(this)" title="American DAD 2"> <img src="images/3.jpg" width="50" height="50" alt="" /> </a>
			<a href="images/4.png" onclick="return abrefoto(this)" title="Bart|The Simpsons"> <img src="images/4.png" width="50" height="50" alt="" /> </a>
			<a href="images/5.jpg" onclick="return abrefoto(this)" title="Peter|Family Guy"> <img src="images/5.jpg" width="50" height="50" alt="" /> </a>
			<a href="images/6.jpg" onclick="return abrefoto(this)" title="Fry|Futurama"> <img src="images/6.jpg" width="50" height="50" alt="" /> </a>
			<a href="images/7.jpg" onclick="return abrefoto(this)" title="Leela|Futurama"> <img src="images/7.jpg" width="50" height="50" alt="" /> </a>
			<a href="images/8.jpg" onclick="return abrefoto(this)" title="Homer|The Simpsons"> <img src="images/8.jpg" width="50" height="50" alt="" /> </a>
			<a href="images/9.jpg" onclick="return abrefoto(this)" title="Marge | The Simpsons"> <img src="images/9.jpg" width="50" height="50" alt="" /> </a>
			<a href="images/5.jpg" onclick="return abrefoto(this)" title="Peter|Family Guy"> <img src="images/5.jpg" width="50" height="50" alt="" /> </a>
			<a href="images/7.jpg" onclick="return abrefoto(this)" title="Leela|Futurama"> <img src="images/7.jpg" width="50" height="50" alt="" /> </a>
		</div>
	</div>
	<div class="nav ml5"> <a href="#" onclick="avancaThumb()"> <img src="images/avancar.gif" alt="avançar" /> </a> </div>
</div>
<script type="text/javascript">selecionaP();</script>

Como usar

Baixe o arquivo, copie todo o conteúdo entre o Body cole onde você quer que a galeria fique. Para alterar os thumbs, altere o código <img src=“images/1.jpg” width=”50″ height=”50″ alt=”" />, colocando o caminho da sua imagem, coloque quantas você quiser ou precisar.

Para alterar a imagem de destino, altere o <a title=”Stewie|Family Guy” onclick=”return abrefoto(this)” href=“images/1.jpg“>, esse é o caminhop onde a imagem está.

Para alterar a legenda, altere o <a title=”Stewie|Family Guy” onclick=”return abrefoto(this)” href=“images/1.jpg”>, onde o que vem antes de | é a legenda e o que vem depois é a Sublegenda

Vejam funcionando.

http://gallery.leandrogarcia.com/

E… Aproveitem.

Release V 0.1 02/03/2009

• 13 comentários
• Comentar
• Permalink
• Compartilhe