Como Criar Sites | Aprenda grátis como fazer seu site » site

Popup com DIV sem Nova Janela (Float Popup)

Raoni Novellino — Sat, 21 Mar 2009 06:39:40 +0000

Nesse post vou mostrar como fazer uma janela popup sem que o navegador abra realmente uma nova janela, com a tag div. Isso é bom pois todos os navegadores hoje bloqueiam popup de nova janela, mas é muito díficil ter bloqueado o Javascript, que é o que utilizaremos também para fazer o div aparecer e desaparecer.

Vamos dividir esse código em arquivos, abaixo descrevo os arquivos:

index.html: Esse arquivo pode ser qualquer arquivo HTML que você queira colocar o banner.

banner.js: Arquivo onde ficarão todos os códigos javascript para mostrar e esconder o popup.

banner.css: Arquivo que contém as classes de estilo. Pode conter outras classes dentro dele ou você pode modificar as classes do popup.

O Arquivo index.html

No arquivo index.html, você precisa chamar os outros dois arquivos, banner.js e banner.css. Para chamar o banner.js, use a seguinte linha:

Mude a url no atributo src para a url correta onde está o arquivo banner.js.

Para chamar o arquivo banner.css, use a seguinte linha:

Mude a url no atributo href para a url correta onde está o arquivo banner.css.

Essas linhas normalmente são chamadas dentro do cabeçalho do documento html (entre a tag e ).

O Código HTML

No corpo do documento html (entre as tags e ), entra o código:


	
		
			 Fechar

A primeira linha é uma tag

, tem o atributo id igual a banner_popup – esse id nós vamos utilizar para achar o div no documento pelo Javascript. O outro atributo do div é o style – esse atributo define o estilo do nosso componente, no caso o div. Ele define que o

vai ficar em posição absoluta, a 0 (zero) pixels do topo e da esquerda da página, e não vai ser renderizado (mostrado) na página (display: none;).

Para mais referências de folha de estilo (CSS) entre em Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1 e Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2. E para mais informações da propriedade de estilo display entre em Propriedade Display do Elemento (CSS).

Esse é o código HTML do banner propriamente dito, lógico que a tabela dentro do div você pode alterar para ficar de acordo com o seu site, mas não esqueça de colocar sempre algum lugar para fechar o banner, mesmo que ele se feche automaticamente após um tempo. Para entender um pouco mais de tabela acesse Como Funciona a Tabela (tag

) HTML.

No nosso banner a função que vai fecha-lo é a fecha_banner() que está na primeira linha da tabela, no atributo onclick da tag . O atributo onclick executa o código Javascript dentro dele quando o elemento é clicado com o mouse. Podemos ver ainda na tag , que no atributo href, que seria o link que ele iria seguir caso se clicasse nele, mas ele está com uma função Javascript (javascript: void(0);). O nome javascript no início do atributo href indica que eu vou usar um código Javascript nesse atributo, e a função void(0); diz que quando o link for clicado não seguir para lugar nenhum.

Nesse código temos duas imagens, uma faz parte do fechar do banner e a outra é o banner propriamente dito.

A Chamada Javascript

A última parte no nosso arquivo index.html é a chamda para a função Javascript que irá abrir o banner. Abaixo o código:

Esse código deve vir logo antes da tag , ou podemos colocar a função abre_banner() no atributo onload do próprio . Esse código só faz verificar se existe um elemento com o identificador banner_popup, e se houver, chama a função para exibir o banner.

O Arquivo index.html Completo



	Banner Popup

Fechar

O Arquivo banner.js

No arquivo banner.js vamos colocar todas nossas funções Javascript. Abaixo o conteúdo do arquivo:

function fecha_banner()
{
	var banner_obj = document.getElementById('banner_popup');
	banner_obj.style.display = 'none';
}

function fecha_banner_timeout()
{
	setTimeout('fecha_banner()', 10000);
}

function abre_banner()
{
	var banner_obj = document.getElementById('banner_popup');

	banner_obj.style.left = '200px';
	banner_obj.style.top = '100px';

	banner_obj.style.display = '';

	fecha_banner_timeout();
}

A função fecha_banner()

A função fecha_banner() fecha o banner, obviamente. Ela é chamada quando se clica no Fechar do banner ou quando se passa dez segundos, como vamos ver na próxima função. Ela pega o objeto do banner através da função getElementById() e atribui ao estilo display o valor none, que faz o elemento deixar de ser exibido (renderizado).

A função fecha_banner_timeout()

A função fecha_banner_timeout() chama a função fecha_banner() após dez segundos, utilizando a função setTimeout() do Javascript. A função setTimeout() do Javascript é bem legal, mas ela é assunto de um post futuro. Basicamente ela executa uma determinada função dado um determindo tempo, em milisegundos.

A função abre_banner()

A função abre_banner(), como o nome diz, abre o banner, ou melhor explicando, faz ele ser exibido. Ela pega o objeto do banner, depois diz onde o banner vai aparecer definindo os estilos top e left (no nosso caso vai aparecer a 200 pixels da esquerda e a 100 pixels do topo), vai também definir o estilo display para vazio, que diz que vai ser utilizado o display padrão do elemento para renderiza-lo. Por fim, ele chama a função fecha_banner_timeout(), que vai esperar dez segundos para fechar o banner.

O Arquivo banner.css

No arquivo banner.css vamos colocar somente o estilo do link de fechar, ela pode conter outros estilos caso necessite. Abaixo o código:

.linksFechar:link
{
 	text-decoration: none;
	font-size: 14px;
	color: #000000;
}

Nesse arquivo só é definido esse estilo, que o texto não vai ser sublinhado, a fonte vai ter tamanho 14 pixels e a cor vai ser preta.

E juntando tudo isso vamos ter um banner popup sem abrir uma nova janela, utilizando Javascript.

Para ver esse exemplo funcionando, entre em Exemplo de Banner Popup.

Como Colocar Vídeo QuickTime (.mov) no seu site (HTML)

Raoni Novellino — Wed, 04 Mar 2009 06:26:53 +0000

Para colocar um vídeo do QuickTime (.mov) o seu site, você deve colocar um controle do ActiveX para Internet Explorer e para outros navegadores tem que utilizar a tag aninhada na tag que chama um controle do ActiveX ().

O código abaixo mostra como colocar um vídeo do QuickTime (.mov) e mais abaixo vou colocar a explicação de cada parte do código HTML.

A tag chama o controle do ActiveX definido pelo atributo classid. Esse número todo representa um controle para um vídeo do QuickTime (.mov). Os atributos width e height, são respectivamente, a largura e a altura de exibição do vídeo e são atributos obrigatórios.

O atributo codebase tem como valor uma URL e ela é a URL onde tem o plugin do ActiveX que toca vídeo QuickTime (.mov). Esse local é padrão e definido pela empresa Apple, que criou o formato do QuickTime (.mov).

Nas linhas seguinte tem a tag , essa tag define alguns parâmetros para o controle ActiveX. A explicação de cada parâmetro vai abaixo:

src: define a URL do vídeo a ser tocado.

autoplay: se true o vídeo se iniciará sem precisar ser clicado o play.

controller: se true exibe o controle do vídeo com os botões play/pause, stop e outros.

loop: se true reiniciará o vídeo assim que ele terminar.

Uma lista completa dos parametros pode ser vista no site: http://www.apple.com/quicktime/tutorials/embed2.html.

A tag deve ser colocada dentro da tag para tocar o vídeo, pois os navegadores como o FireFox ignoram a tag com esse atributo classid. Os atributos da tag podem ser os mesmos da tag . O atributo pluginspage da tag tem esse valor por padrão, que é a URL onde encontrar o plugin para tocar o arquivo QuickTime (.mov).

Agora você já consegue colocar um vídeo do QuickTime (.mov) no seu site.

Para colocar um vídeo Windows Media (.wmv), acesse: Como Colocar Vídeo .WMV no seu Site (HTML).

Aqui no comocriarsites.com você aprende a fazer seu site de graça (gratis).

Se você deseja investir em um site profissional ou quer hospedar seu site em um servidor profissional acesse: http://www.panasoft.com.br

CSS Style Position: Diferença entre Relative, Absolute e Static

Raoni Novellino — Tue, 03 Mar 2009 20:17:57 +0000

Um estilo que eu uso muito é o position, ele me permite colocar um elemento exatamente onde eu quero no documento html. Vou explicar a diferença dos valores possíveis do estilo position (static, relative e absolute) e dar um exemplo de funcionamento. Existe um outro valor posível para o estilo position que é o fixed, mas ele só funciona no Internet Explorer e não deve ser utilizado.

Style Position: Static

Static é o valor padrão do estilo position dos elementos de um documento html. Se você não definir o estilo position, ele será static. Esse static quer dizer que o elemento será renderizado no navegador de acordo com o local onde ele está no código, seguindo o fluxo padrão da página. Com valor static do estilo position, o elemento não segue estilo como left, right, top e bottom.

Exemplo de Position Static:


	
		
		normal position (static)
		Position Static.

Style Position: Relative

Quando um estilo (style) está em relative, o valor da posição normal do elemento é adicionada a qualquer valor de estilos left, right, top e bottom. Isso quer dizer que se o elemento é renderizado normal na posição 100 x 100, e você colocar estilo left igual a 30 pixels e top igual a 50 pixels, o elemento vai ser posicionado com 130 pixels para esquerda (left) e 150 pixels do topo (top).

Exemplo de Position Relative:


	
		
		normal position (relative)
		Position Relative.

Style Position: Absolute

Quando um elemento está com o estilo position com valor absolute, ele será posicionado exatamente nos pixels que os estilos left, right, top e bottom definirem. Se um elemento com position absolute está na posição 100 x 100, e é colocado os estilos left igual a 30 pixels e top igual a 50 pixels, o elemento vai ser posicionado com 30 pixels da esquerda (left) e 50 pixels do topo (top).

Exemplo de Position Absolute:


	
		
		normal position (absolute)
		Position Absolute.

Para você vizualizar os exemplos acima bem, coloque-os todo em um mesmo documento html e verifique o que cada um faz com o texto deles.

Para um guia completo de CSS (Cascading Style Sheets):

http://www.w3schools.com/CSS/default.asp

Pegando Posição Absoluta de um Elemento HTML (Javascript)

Raoni Novellino — Mon, 02 Mar 2009 06:36:42 +0000

Uma maneira simples de saber qual a posição absoluta de um elemento HTML (posição onde o elemento está em relação a área de exibição de páginas do navegador), é usando um algorítimo em Javascript. Esse algorítimo pega a posição relativa do elemento, e depois a posição relativa do elemento pai (parent), depois do pai do pai e assim até um elemento não ter um elemento pai.

O algorítimo:

function findPosX(obj)
{
	var curleft = 0;
	if(obj.offsetParent)
		while(1)
		{
			curleft += obj.offsetLeft;
			if(!obj.offsetParent)
				break;
			obj = obj.offsetParent;
		}
	else if(obj.x)
		curleft += obj.x;

	return curleft;
}

function findPosY(obj)
{
	var curtop = 0;
	if(obj.offsetParent)
		while(1)
		{
			curtop += obj.offsetTop;
			if(!obj.offsetParent)
				break;
			obj = obj.offsetParent;
		}
	else if(obj.y)
		curtop += obj.y;

	return curtop;
}

São dois algorítimos, um para a posição horizontal (findPosX) e outro para a posição vertical (findPosY). Os dois recebem um atributo de nome obj que é o objeto do elemento que você quer saber a posição e retornam um inteiro, que é a posição do elemento no documento HTML.

As funções do Javascript offsetLeft e offsetTop, retornam um inteiro que é a distântcia em pixels entre o elemento passado como paramatro e o elemento pai desse elemento passado comoparametro. A diferença entre as duas é que a primeira (offsetLeft), retorna a distância da esquerda entre o elemento e seu elemento pai, e a segunda (offsetTop), retorna a distância de cima entre o elemento e seu elemento pai.

Abaixo um exemplo de uso:



	Teste de Posicionamento em Javascript






	
		Linha 1
	
	
		Linha 2
	
	
		
		
			
				Quero saber a posicao desse TD

Algumas explicações:

A linha “var td_pos_obj = document.getElementById(’td_posicao’);” faz a variável td_pos_obj ficar identificando o elemento que e quero saber a posição. Pode ver que na tag que eu quero saber a posição, tem um atributo id, com valor igual a td_posicao. Isso serve para eu identificar o elemento e depois poder saber qual ele é facilmente utilizando a função getElementById do Javascript. Essa função é boa porque funciona tanto no IE (acho que pelo menos no 6 e no 7) e no Firefox (testado na versao 2 e 3).

Se você quer saber a diferênça entre os valores do estilo (style) position, acesse: CSS Style Position: Diferença entre Relative, Absolute e Static

Gerador de Código para Mídia

Raoni Novellino — Mon, 02 Mar 2009 01:53:52 +0000

Um bom site para gerar o código para colocar mídia (Flash, QuickTime, Real Media, Windows Media) é o http://cit.ucsf.edu/embedmedia/step1.php.

Você com 3 passos e poucos cliques gera um código para colocar no seu site, pronto para tocar um vídeo, e o melhor: é de graça (gratis).

Como Colocar Vídeo .WMV no seu Site (HTML)

Raoni Novellino — Sat, 28 Feb 2009 20:09:41 +0000

Para colocar um vídeo .wmv no seu site, você precisa entender alguns passos. O código HTML abaixo mostra como colocar o vídeo .wmv, e mais a baixo vão as explicações de cada parte do código HTML.

A tag object chama um controle ActiveX para tocar o tipo de vídeo, definido pelo atributo classid. Com o classid do exemplo acima, o controle ActiveX toca arquivos do Windows Media Video (.wmv).

Você ainda pode ver que dentro da tag object existe uma tag embed, isso tem que existir porque o object com atributo classid só funciona no Internet Explorer e a tag embed funciona no Firefox e possivelmente no Opera, e deve ser colocada dentro da tag object para os navegadores entenderem que é um vídeo só.

Dentro da tag object e embed ainda tem os atributos width e height que são a largura e a altura de exibição do vídeo em pixels, respectivamente.

Em seguida vem as tags param, elas definem parametros para o vídeo, sendo o nome do parametro o atributo name e o valor o atributo value:

FileName: O url para o seu vídeo, pode ser completa ou relativa.

autostart: Se definido como true, o vídeo vai iniciar assim que tiver carregado tempo suficiente. Se definido false, o usuário terá que iniciar o vídeo.

ShowControls: Se definido como true, o vídeo vai ser mostrado com um controle. Esse controle tem os botões play/pause, stop e outros. Esse controle ocupa 46 pixels da altura (height) total do vídeo, então se você quiser que o vídeo fique do tamanho original, adicione 46 pixels ao tamanho dele no atributo height da tag object e embed.

ShowStatusBar: Se true, mostra uma barra de status do vídeo. Essa barra tem 26 pixels de altura (height).

ShowDisplay: Se true, mostra as informações do vídeo que está tocando. Essa barra tem 74 pixels de altura (height).

Na tag embed ao invéz de usar o atributo FileName, usa-se o atributo src, que coloca a url para o vídeo. Os outros atributos funcionam igual ao explicado acima, mas coloca-se 0 para false e 1 para true.

Existe uma outra forma de colocar um vídeo .wmv em um site, explicado no site: http://www.maujor.com/tutorial/adeus-embed.php traduzido de http://www.alistapart.com/articles/byebyeembed, artigo da autora Elizabeth Castro. Ela mostra que é possível não utilizar a tag embed para tocar vídeos em qualquer navegador. Eu fiz um teste com o código que ela mostra no artigo, e ocorreram alguns bugs aqui comigo com o Firefox 3.0.6. A tela que mostra o vídeo sumia quando eu apertava um botão no controle e eu não consegui esconder os controles do vídeo. No IE7 tudo funcionou normal.

Para colocar um vídeo QuickTime (.mov) no seu site, acesse: Como Colocar Vídeo QuickTime (.mov) no seu site (HTML).

Aqui no comocriarsites.com você aprende a fazer seu site de graça (gratis).

Se você deseja investir em um site profissional ou quer hospedar seu site em um servidor profissional acesse: http://www.panasoft.com.br

Organize e compartilhe fotos

Caloã Novellino — Sun, 21 Sep 2008 11:57:20 +0000

A abril está com um album de fotos novo. É o Pin Fotos. Um filão para quem precisa arrumar e organizar as fotos para postar em blogs, sites e também quer compartilhá-las com amigos.

O Pin Fotos facilita para você na melhoria de sua foto. Online mesmo é possível ajustar contrastes, brilho e as bordas.

Outra grande vantagem é, em vez de colocar a foto no seu site, você coloca somente o link de referência dela. Isto economiza sua banda e deixa gastar a banda da Abril.

Clique aqui para criar seu album.