Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá aqui estou mais uma vez com uma dúvida, goataria de saber como fazer uma barra tipo aquelas de atualização de navegador que aparecem no cabelho do site e depois de um tempo some. Alguém pode me ajudar?
Agradecido!
>
tem como postar uma imagem ilustrando o efeito desejado??
É que achei legal aquela barrinha que abre no cabelho como tem aqui mesmo no IMASTERS quando você entra com navegador antigo, eu queria usá-la como uma barra de aviso de "WEBSITE EM ELABORAÇÃO" pois ela ocupa menos espaço e não fica no corpo do site!
Se você souber uma forma de utilizar uma imagem ou um banner desta forma eu fico agradecido!
Abraço!
Nesta página você ver o que desejo. Ao final do tópico tem um link "Clique e veja a barra em ação".
dá uma olhada
>
dá uma olhada
http://imasters.com.br/crossbrowser/pt-br/
Acho que não me expressei muito bem! Eu quero fazer uma barra igual a essa, mais para colocar outra mensagem.
<div class="barraAviso">Mensagem</div>
.barraAviso {
background: #ff0;
color: #000;
line-height: 22px;
padding: 4px;
position: absolute;
text-align: center;
text-weight: bold;
width: 100%;
z-index: 7;
}Certo o código funciona, mais como faço para a barra sumir com um tempo?
Javascript:
window.onload = function(){
setTimeout(function(){ document.getElementById('barraAviso').style.display = "none"; }, 3000);
// 3000 indicam 3000 milisegundos que equivalem a 3 segundos
}Caro Evandro, não sei onde que eu errei mais não tive sucesso! É preciso alterar mais alguma coisa na DIV? Segue abaixo como estou utilizando.
<style type="text/css">
.barraAviso {
width: 1024px;
height: 50px;
}
window.onload = function(){
setTimeout(function(){ document.getElementById('barraAviso').style.display = "none"; }, 3000);
}
</style>E o código da DIV.
<div class="barraAviso"><img src="images/aviso.jpg"></div>Boa tarde,
O código em javascript fica separado do CSS, são duas coisas distintas, apesar de ficarem entre a tag <head></head> do seu documento HTML.
Ficaria assim com javascript:
<script type="text/javascript">
window.onload = function(){
setTimeout(function(){ document.getElementById('barraAviso').style.display = "none"; }, 3000);
// 3000 indicam 3000 milisegundos que equivalem a 3 segundos
}
</script>Ou assim com jQuery
<script type="text/javascript" src="[http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"](http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js) ></script>
<script type="text/javascript">
$(document).ready(function(){
$(".barraAviso").fadeOut(5000);
});
</script>Espero que ajude.
Angelo valeu mesmo cara! Funcionou perfeitamente! Bobeira minha, nem pensei no santo JQUERY! [RESOLVIDO]
tem como postar uma imagem ilustrando o efeito desejado??