Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

klonder

Efeito: Janela MSN

Por , em Javascript

Recommended Posts

klonder    14

klonder
Postado

Olá a todos!

 

Foi navegando por essa fantástica internet que certo dia me deparei com um site que exibia uma "janela", semelhante àquelas janelinhas que aparecem no MSN, aí próximo do relógio do Windows no canto inferior direito da tela (quando algum usuário fica on-line, ou envia algum recado quando a janela "ativa" "não está ativa"... :-P) para exibir suas mensagens publicitárias. Hum... creio vocês já entenderam, hehe!

 

Então... olhei para aquela imagenzinha em Java Script, que continha a publicidade para um desses sites de encontros, ou namoro on-line (ou algo do gênero) e achei o efeito até legalzinho e por deveras criativo! No entanto, ao mover a barra de rolagem, vi que o que impaciente objeto ficava "pipocando" muito quando a barra de rolagem era tirada do seu aconchegante sossego (=movida :-P)! Com aquelas tremidinhas chatas e aqueles "trililiques sorrateiros", duvido que alguém, mesmo carente de algum tipo de afeto, se interessasse realmente em clicar na tal imagem!

 

E foi juntando uma coisa aqui, outra ali, pesquisando acolá... que consegui finalmente terminar um código em Java Script que faz basicamente a mesma coisa daquilo que outrora tinha sido manifestado na tela do meu monitor. Todavia, o efeito agora havia ficado completamente estático! Ao mover a barra de rolagem, a figura, que antes dava seus impacientes "chiliques" ao mover do scroolling, agora se aquietava calmamente, repousando inocente ali, no canto inferior direito como havia de ser!

 

Dotado de um enorme desejo de compartilhar o conhecimento (algo intrínseco da minha personalidade) e tendo já testado o código em 2 dois dos mais conhecidos browsers do mercado brasileiro (IE7 e Opera), não hesitei e cá venho, através deste fórum, lançar com os demais usuários, a "pedra fundamental" desse magnífico (embora plagiante) projeto.

 

Ciente da discreta incompatibilidade do Java Script com os diversos navegadores da atualidade (herdada quase que geneticamente desde sua origem), venho a público pedir, encarecidamente que, assim que testado, os usuários postem gentilmente o ocorrido aqui neste fórum.

 

 

Principais características do código-fonte:

 

1. Utiliza um efeito muito interessante em CSS (position:fixed), driblando até mesmo a hostilidade do IE7. Link para quem se interessar (eu diria que esse é um link-ouro! Os caras são muito bons!):

http://forum.imasters.com.br/index.php?showtopic=252392

Efeito semelhante em: http://www.howtocreate.co.uk/fixedPosition.html

 

2. Coloquei uma função para testar os navegadores. Caso sejam compatíveis, o código é executado. Testei o código no IE7 e Opera 9.52 e funcionou perfeitamente. Não sei se o método é o ideal mas, no momento, é o mais didático que veio à minha cabeça.

 

3. O código, para ser mais efetivo, só funciona com a janela do navegador completamente aberta. Testei em resoluções 1024 e em 800 px de largura e ocorreu tudo bem.

 

4. Utiliza um temporizador (setTimeout) para subir de descer a janela.

 

5. IMPORTANTE!!! Para que o script funcione adequadamente, é necessário uma figura com lagura de 201 pixels e altura de 116 pixels, no formato jpg, salva na mesma pasta do arquivo que contém o código. Obviamente, isso poderá ser alterado (mas essa informação foi necessária pois nem todos que lerão esse post são doutores em Java Script). A imagem pode ser um print-screen da própria janelinha do MSN, com as frases e foto do seu contato editados no Fireworks, por exemplo.

 

6. Todo o "corpo" do site deverá ficar dentro do DIV com id="corpo". Acessem o link postado no item 1 para maiores detalhes.

 

Creio que no mais o código é auto-explicativo.

 

Segue o código abaixo:

<html>
<title>Efeito MSN (sem tremida durante a rolagem da página)</title>
<style>
*{margin:0; padding:0;}
html,body{overflow:hidden; width:100%; height:100%;}
#fixed{position:absolute; z-index:100;
right:+20px;
bottom:-120px;
background:#EFEFEF;
}
#corpo{width:100%; height:100%; overflow:auto;}
</style>

<script language="JavaScript" type="text/javascript">
/*
Código desenvolvido por: klonder
Esse código está livre para utilização e modificação. Peço apenas que as dúvidas ou futuras melhorias e colaborações sejam postadas no link: http://forum.imasters.com.br/index.php?showtopic=323871

Em caso de utilização, a fonte não precisa ser citada. No entanto, tenham respeito e não coloquem que o código é de sua autoria. A capacidade de respeitar o trabalho do outro mostra que tipo de indivíduo você realmente é.
*/
 var browserName = window.navigator.appName;
 var browserVersion = window.navigator.appVersion.substr(0,4);
 var objYpos = -120; //Posição inicial da imagem;
 var subiu = 0;	//Variável controle. Indica se a imagem subiu completamente ou não.
 var resTela = parseInt(screen.availWidth);

function testeNavegador() {
	if (browserName == "Microsoft Internet Explorer" && browserVersion == 4.0) {
		return true;
	}
	else if(browserName == "Opera" && browserVersion == 9.52) {
		return true;
	}
	/*Retire as barras // abaixo, caso tenha testado o código em outros navegadores */
	//else if(browserName == "NomeNavegador" && browserVersion == VersãoNavegador) {
	//	return true;
	//}
	//else if(browserName == "NomeNavegador" && browserVersion == VersãoNavegador) {
	//	return true;
	//}
	//Caso o navegador ou versão do mesmo não tenham sido testadas previamente:
	else { return false; }
}
 
function efeitoMSN() {
if (testeNavegador()) {
		//Captura o tamanho da janela atual. Caso a mesma esteja minimizada
		//a imagem não será mostrada.
 		tamanhoTela = parseInt(document.body.clientWidth);
		objeto = document.getElementById("fixed");

		if (tamanhoTela > resTela-20) {		
			if (subiu == 0) {
			 	if(objYpos < 0) {
					objYpos += 10;
					objeto.style.bottom = objYpos;
					temporizador = setTimeout("efeitoMSN()",50);
				}else{
			 		subiu = 1;
					clearTimeout(temporizador);
				}
			}else{
				if (objYpos > -120) {
					objYpos -= 10;
					objeto.style.bottom = objYpos;
					temporizador = setTimeout("efeitoMSN()",50);	
				}else{
			 		subiu = 0;
					clearTimeout(temporizador);
				}	
			}
		}
}
}
</script>

</head>
<body>
<div id="fixed"><a href="http://forum.imasters.com.br/index.php?showtopic=323871" target="_blank"><img src="msn_janela.jpg" border="0" width="201" height="116"></a></div>

<div id="corpo">
Referências:
<br><a href="http://forum.imasters.com.br/index.php?showtopic=252392" target="_blank">http:http://forum.imasters.com.br/index.php?showtopic=252392</a>
<br><br><br><br>Role a página
<br><br><br><br>Role a página
<br><br><br><br><a href="java script:efeitoMSN();">Clique aqui para visualizar/ocular o efeito!</a>
<br><br><br><br>Role a página
<br><br><br><br>Role a página
<br><br><br><br>Role a página
<br><br><br><br>Role a página
<br><br><br><br>Role a página
<br><br><br><br>Role a página
<br><br><br><br>Role a página
<br><br><br><br>Role a página
<br><br><br><br>Role a página
<br><br><br><br>Role a página

</div>
</body>
</html>

Por favor, qualquer dúvida ou sugestão, não se acanhem em postá-la!

 

Abraços e um Feliz 2009 a todos!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vinícius dos Passos    0

Vinícius dos Passos
Postado

Usei aqui, e funcionou perfeitamente, no IE e no Firefox...

 

só tive que fazer uma modificação, pois estava alterando o estilo de uma tabela minha...

 

retirei da tag style o seguinte trecho:

 

 

*{
	margin:0; 
	padding:0;
}

tava tirando a margem e o padding da minha preciosa tabela de menu... hehe

 

mas, o script é excelente, nota 10!

 

vlw, foi muito util pra mim!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dyegod3    0

Dyegod3
Postado

pox... colei exatamente o mesmo cód aki

 

só troquei o "java script:" por "javascript:" na hora de chamar a função, mais só rodou no iE xD

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

No código fonte, eu habilitei para rodar apenas em ópera e IE realmente. Para utilizar em outros navegadores, altere o código fonte na parte:

 

/*Retire as barras // abaixo, caso tenha testado o código em outros navegadores */
        //else if(browserName == "NomeNavegador" && browserVersion == VersãoNavegador) {
        //      return true;
        //}
        //else if(browserName == "NomeNavegador" && browserVersion == VersãoNavegador) {
        //      return true;
        //}
        //Caso o navegador ou versão do mesmo não tenham sido testadas previamente:

Compartilhar este post

Link para o post
Compartilhar em outros sites

buh    0

buh
Postado

tenhu um sitema desse usando ajax e banco de dados toda vez que há um inserção no banco ele levanta a plakinha mostrando o que de novo entrou no db bacana pakas vlw fui

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito