Ir para conteúdo

POWERED BY:

Arquivado

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

Eduardo Villa

Fazendo ALERTA igual do MSN...

Por , em Javascript

Recommended Posts

Eduardo Villa    2

Eduardo Villa
Postado

Olá galera Imaster,

 

Estou querendo fazer um sistema de mensagem para uma intranet e preciso de alguma coisa para chamar a ATENÇÃO das pessoas, umas vez que estejam usando ao mesmo tempo muitas páginas ou janelas do próprio windows...

Pensei em algo como aquele "FULANO acabou de entrar." do MSN...

Imagem Postada

 

Tem como fazer isso em JAVASCRIPT???

Se tiver, alguém pode me dar uma idéia por onde começar???

 

 

Desde já agradeço,

Valew

 

Dudesigner

Compartilhar este post

Link para o post
Compartilhar em outros sites

Oenning    0

Oenning
Postado

O do MSN sobrepõe todas as janelas do windows, acredito que com javascript sejá impossível fazer isso, pois você tem disponível apenas o browser.

Você pode usar esse mesmo esquema de Mensagens Privadas aqui do fórum, criar uma div e desenhar na tela.

 

Att,

Guilherme Oenning.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eduardo Villa    2

Eduardo Villa
Postado

Olá Oenning,

 

Preciso fazer esse mesmo esquema de sobrepor todas as janelas...

Ou alguma outra coisa que de pra chamar a atenção caso a pessoa esteja com outra janela ou browser por cima.

 

Esse exemplo da DIV, ñ ficaria por cima de nada???

 

Valew pela ajuda...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Oenning    0

Oenning
Postado

Ficaria por cima da página apenas, não tem como fazer uma div aparecer por cima de todas as outras janelas.

Imagina você entrar em um site e derrepente sua tela fica preta porque o programador fez uma div 100% x 100% preta, ficaria estranho ;D

Você tem apenas a área do browser disponível para seu site.

 

Att,

Guilherme Oenning

Compartilhar este post

Link para o post
Compartilhar em outros sites

John McLane    0

John McLane
Postado

Em um site normal, nao eh possivel. Nao ha como uma div sair do browser e sobrepor outras janelas. Lhe restam quatro alternativas:

- Fazer disso um software pelo navegador. Ou seja, transformar seu site em um aplicativo Java (applet) <- Essa seria a solucao ideal

- Abrir uma popup quando o evento ocorrer (eh feio mas funciona) <- Essa seria um quebra galho

- Simplesmente por a div na janela atual e (dependendo do navegador/sistema operacional) a janela minimizada ira piscar avisando que houve uma modificacao na pagina. O usuario clica e ve a sua div.

- Desistir disso e encontrar outra alternativa para o que voce quer <- Essa seria a mais pratica

 

Boa sorte ;D

Compartilhar este post

Link para o post
Compartilhar em outros sites

Junior_Cassapava    0

Junior_Cassapava
Postado

Em um site normal, nao eh possivel. Nao ha como uma div sair do browser e sobrepor outras janelas. Lhe restam quatro alternativas:

- Fazer disso um software pelo navegador. Ou seja, transformar seu site em um aplicativo Java (applet) <- Essa seria a solucao ideal

- Abrir uma popup quando o evento ocorrer (eh feio mas funciona) <- Essa seria um quebra galho

- Simplesmente por a div na janela atual e (dependendo do navegador/sistema operacional) a janela minimizada ira piscar avisando que houve uma modificacao na pagina. O usuario clica e ve a sua div.

- Desistir disso e encontrar outra alternativa para o que voce quer <- Essa seria a mais pratica

 

Boa sorte ;D

Bom dia!

 

Dudesigner.. Já precisei implementar uma solução parecida, se não me engano encontrei aqui mesmo a solução, vou postar os arquivos p você dar uma olhada:

 

Inicialmente crie a sua página:

 

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Aleta Msn</title>

<link rel="stylesheet" type="text/css" href="janela_alerta.css" >
<script type="text/javascript" language="Javascript" src="janela_alerta.js"></script>


</head>
<body>

<div id="corpo">
	
	<div id="fixed"></div>

	<a href="java script: Janela()"> Janela </a>
	
</div>

</body>
</html>

Agora crie o css da sua página

 

janela_alerta.css

html,body { 
	width:100%; 
	height:100%;
}
	
#fixed {
	position:absolute; 
	z-index:100;
	right:+20px;
	bottom:-120px;
	background:#EFEFEF;
	display: none;
}
	
#corpo {
	width:100%; 
	height:100%; 
	overflow:auto;
}

Agora o arquivo que irá fazer o alerta aparecer:

 

janela_alerta.js

/*
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 ChamaJanela() {
	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("ChamaJanela()",30);
					}else{
						 subiu = 1;
						clearTimeout(temporizador);
					}
				}else{
					if (objYpos > -120) {
						objYpos -= 10;
						objeto.style.bottom = objYpos;
						temporizador = setTimeout("ChamaJanela()",30);	
					}else{
						 subiu = 0;
						clearTimeout(temporizador);
					}	
				}
			}
	}
}

function ConstroiJanela(){
	document.body.scroll = "no";
	document.documentElement.style.overflow = "hidden"
	document.getElementById("fixed").style.display = "block";
	ChamaJanela();
}

function DestroiJanela(){
	document.body.scroll = "yes";
	document.documentElement.style.overflow = ""
	document.getElementById("fixed").style.display = "none";
	ChamaJanela();
}
	
function Janela(){
	ConstroiJanela();
			
	Janela = "<a href=\"#\" >";
	Janela += "<img src=\"alerta.jpg\" border=\"0\" width=\"201\" height=\"116\">";
	Janela += "</a>";
		
	document.getElementById("fixed").innerHTML = Janela;
}

Deve também existir uma imagem.. mas logo abaixo tem os arquivos fontes p você baixar..

 

Ao clicar no botão para aparecer a janela o botão constroi a janela, nessa função ele remove o scroll para que a página não possa ser movida, se essa função não for executada a janela do msn irá subir mas a página poderá ser rolada, como no ie não funciona position fixed então achei melhor fazer dessa forma.

 

Depois que a janela é construida é necessário colocar um conteúdo nela, e é isso que o document.getElementById("fixed").innerHTML faz na div, aparecendo assim a janela.

 

Um detalhe. Tentei executar no FF mas não consegui, a imagem de alerta q eu usei eh meio "pobre", então vamos nos ajudar ai.. o código tah ai.. se você tiver uma janelinha melhor me manda que ai a gnt troca umas figuras..

 

Vlw ai pessoal.. espero ter ajudado..

 

Aqui tah o link p download do fonte..

http://www.ionixjunior.com.br/fonte/mess.rar

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