Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Eu achei este efeito na internet e achei interessante,é um link que quando você clica aparece a barra de carregamento em uma área e a página carrega naquela área. Simplificando, um link que quando você clica a página carrega num iframe mas aparece uma barrinha, este efeito tá no site habbotimes.net em qualquer link do menu. Eu achei um efeito igual mas nao consigui editá-lo. Na minha página irá ficar uma imagem no canto direito da tela e ao clicar nessa imagem uma box no centro depois da barra de carregamento surgirá. Se você tiverem o efeito mesmo sem esta barrinha não tem portância.
Lá no topo do site há um menu dropdown só clicar lá, emqualquer um.
Você postou o site correto? (habbotimes.net)
Sinceramente não acho esse menu :mellow:
ops, desculpe. é habboemotion.com Já citando o habbotimes há um efeito que lá tem e eu preciso, fiz até um tópico só não me respondem. Lá em habbotimes há alguns balões de fala lá no topo quando você põe o cursor sobre ele o balão levanta quando você tira o balão desce, este efeito tambem está em ibobba.org no menu.
Cara nenhum dos dois é fácil de se fazer...
mas também não é nenhuma coisa que precise de muito conhecimento...
O carregamento do conteudo com a barrinha é feito com AJAX
Aqui tem um tutorialzinho sobre o assunto
Esse é o metodo ideal
porém existe uma forma não aconselhada mas caso não consiga fazer com ajax pode quebrar seu galho
que foi o que eu disse no post #2
porém para o Iframe se ajustar ao tamanho da tela você vai precisar de um script
Esse assunto foi abordado recentemente nesse tópico
Agora veja qual a melhor maneira de você fazer e se tiver alguma dúvida torne a postar :)
____________________
Quanto ao efeito do outro site...
Com flash seria bem facinho... Até tenho um tutorial que fiz aqui no Imasters que fala sobre uma classe que faria isso
Mas de qualqeur forma é possível criar com um pouquinho de Jquery usando a função animate()
na documentação da biblioteca tem um exemplo de um quadrado que anda apra a direita
Acredito que ele seria a base para o que você precisa já que se trata de uma animação de movimento
De uma lida sobre Aqui
Qualquer problema estamos aqui =)
De qualquer forma ambos os efeitos necessitam de JavaScript
então irei mover para área relacionada. :)
O outro efeito:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml) xml:lang="en" >
<head>
<title>Movimenta botão</title>
<script type="text/javascript">
window.onload = function(){
var as = document.getElementById('mainnav').getElementsByTagName('a');
for(var i = 0, asL = as.length; i < asL; i++){
as[i].onmouseover = function(){
jump(this);
};
as[i].onmouseout = function(){
down(this);
};
}
};
function jump(element){
var j = 0;
var s = setInterval(function(){
if(j > 20)
clearInterval(s);
else{
element.parentNode.style.marginTop = "-" + j++ + "px";
element.style.paddingBottom = j++ + "px";
}
}, 23);
}
function down(element){
var d = 20;
var marginTop = parseInt(element.parentNode.style.marginTop);
var paddingBottom = parseInt(element.style.paddingBottom);
var s = setInterval(function(){
if(d < 0)
clearInterval(s);
else{
element.parentNode.style.marginTop = marginTop++ + "px";
element.style.paddingBottom = paddingBottom-- + "px";
d--;
}
}, 23);
}
</script>
<style type="text/css">
#mainnav{
width: 800px;
margin: 50px auto;
background: #cecece;
height: 30px;
list-style: none;
} float: left;
margin: 0 15px;
height: 30px;
line-height: 30px;
padding: 0 10px;
background: #333;
} font-size: 14pt;
font-family: sans-serif;
color: #fff;
text-decoration: none;
} background: #999 !important;
}
</style>
</head>
<body>
<ul id="mainnav">
<li class="active">
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
<li>
<a href="#">Link 4</a>
</li>
</ul>
</body>
</html>Não está tão perfeito ainda, pois estou sem tempo.
Testei apenas no Opera 10.51.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Não encontrei diferença entre seu Ajax e um simples iframe. Cara, eu resolvi utilizar o iframe porém no IE o iframe tá com fundo branco, aí mela tudo. Como muda a cor do iframe só pra IE ?
Thiago, tá com alguns bugzinhos mas é coisa pouca, quando arrumar me manda.
>
Thiago, tá com alguns bugzinhos mas é coisa pouca, quando arrumar me manda.
Desculpa se minha frase vai soar com um tom arrogante, mas é preciso...
O fórum é para compartilhar conhecimento e não apenas entregar códigos. Tenta um pouco aí. Eu consegui aqui dá uma melhorada em um bug, mas tente você alguma coisa.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Eu não tenho conhecimento algum em javascript. Vou ver se há algo que possa fazer.
coloque essa propriedade no seu IFRAME
allowtransparency="true
window.onload = function(){
var as = document.getElementById('mainnav').getElementsByTagName('a');
for(var i = 0, asL = as.length; i < asL; i++){
as[i].onmouseover = function(){
jump(this);
};
as[i].onmouseout = function(){
down(this);
};
}
};
function jump(element){
var j = 0;
var s = setInterval(function(){
if(j > 20)
clearInterval(s);
else{
element.parentNode.style.marginTop = "-" + j++ + "px";
element.style.paddingBottom = j++ + "px";
}
}, 23);
}
function down(element){
var d = 20;
var marginTop = parseInt(element.parentNode.style.marginTop);
var paddingBottom = parseInt(element.style.paddingBottom);
var s = setInterval(function(){
if(d < 0)
clearInterval(s);
else{
element.parentNode.style.marginTop = marginTop++ + "px";
element.style.paddingBottom = paddingBottom-- + "px";
d--;
}
if(parseInt(element.parentNode.style.marginTop) > 0){
element.parentNode.style.marginTop = "0px";
element.style.paddingBottom = "0px";
}
}, 15);
}http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Dei uma melhorada a título de curiosidade/aprendizado de minha parte. O @Evandro Oliveira me mostrou uma maneira interessante de fazer (atribuir cada subida e descida em um índice de array). Como foi a título de aprendizado, só testei no Opera 10.51 e Google Chrome, pois já estavam abertos. :P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml) xml:lang="en" >
<head>
<title>Movimenta botão</title>
<script type="text/javascript">
window.onload = function(){
var as = document.getElementById('mainnav').getElementsByTagName('li');
for(var i = 0, asLength = as.length; i < asLength; i++){
as.item(i).animate(i, 30);
}
};
var $clocks = {
mouseover : [],
mouseout : []
};
Element.prototype.animate = function(index, max){
var element = this;
this.style.position = "relative";
this.onmouseover = function(){
var t = (this.style.top) ? parseInt(this.style.top) : 0;
var i = 0;
clearInterval($clocks.mouseout[index]);
$clocks.mouseover[index] = setInterval(function(){
if(t < max){
element.style.top = "-" + t++ + "px";
element.style.paddingBottom = max + "px";
} else
clearInterval($clocks.mouseover[index]);
}, 30);
};
this.onmouseout = function(){
var top = parseInt(element.style.top);
var paddingBottom = parseInt(element.style.paddingBottom);
var b = max;
clearInterval($clocks.mouseover[index]);
$clocks.mouseout[index] = setInterval(function(){
if(b > 0){
element.style.top = top++ + "px";
element.style.paddingBottom = paddingBottom-- + "px";
b--;
} else
clearInterval($clocks.mouseout[index]);
if(parseInt(element.style.top) > 0)
element.style.top = "0px";
}, 40);
};
};
</script>
<style type="text/css">
#mainnav{
width: 800px;
margin: 50px auto;
background: #cecece;
height: 30px;
list-style: none;
border-radius: 10px;
} float: left;
margin: 0 15px;
line-height: 30px;
} font-size: 14pt;
font-family: sans-serif;
color: #fff;
text-decoration: none;
background: #555;
border-radius: 7px;
padding: 0 10px;
height: 30px;
display: inline-block;
} background: #999 !important;
box-shadow: 1px 1px 15px #555;
}
</style>
</head>
<body>
<ul id="mainnav">
<li class="active">
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
<li>
<a href="#">Link 4</a>
</li>
<li>
<a href="#">Link 5</a>
</li>
<li>
<a href="#">Link 6</a>
</li>
<li>
<a href="#">Link 7</a>
</li>
</ul>
</body>
</html>http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Thiago por mera curiosidade você começou aprender html e essas coisas com quantos anos, já que es um expert.
ahuahahauhauhauha :P Tenho 16 anos, comecei a me interessar por web quando tive meu primeiro contato com Fireworks e dava o F12, eu acho, para ver como ficava. ahuahauhauhauha Isso foi ao 14 anos, por aí.
Vi que minha área não era definitivamente design e parti para área do código. Comecei estudando HTML (por apostila do apostilando), depois CSS (também apostila). Fui praticando e talz e depois parti para JavaScript (comecei JS em Agosto~Setembro do ano passado). EstudeiEstudo pelo livro b]JavaScript - O Guia Definitivo[/b], que é muito bom!
Thiago por mera curiosidade você começou aprender html e essas coisas com quantos anos, já que es um expert.
Na boa... Estou bem longe de ser isso aí. Deixo esse título para outros, por em quanto. ;)
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Bom quem sabe chego lá, começei aprender html,css, mysql entre 11 e 12 esse ano faço 13. Quem sabe aos 16 anos tambem seja bom.
oi
eu novo nisso e tenho uma duvida a respeito desse assunto
estou trabalhando em uma pagina que enquanto carrega chama
uma iframe como loader mas apos carregar o iframe naõ fecha
como posso resolver isso
ou ha uma forma melhor de fazer um carregando.
aguardo resposta
obrigado.
Bom dia Zanoni
O ideal para se carregar páginas externar é através de AJAX
aqui no fórum tem um bom conteúdo sobre isso basta dar uma pesquisada.
Tente ser um pouco mais especifico nas suas dúvidas postando seu link e código.
E quando tiver uma dúvida crie um novo tópico para isso em vez de usar um tópico já em andamento
Qualquer coisa posta ae que tentamos ajudar :)
obrigado pelas dicas
infelismente, não ha possibilidade de fazer pelo ajax
<td valign="top"><!-- render the table --> <% if (showGrid) {
File file = new File(getServletContext().getRealPath("mantle/messages/"));
URLClassLoader loader = new URLClassLoader(new URL[] {file.toURI().toURL()});
ResourceBundle properties = ResourceBundle.getBundle("messages", LocaleHelper.getLocale(), loader);
%>
<div id="loading">
<div class="loading-indicator">
<img src="mantle/busy.gif" width="32" height="32"/><%= properties.getString("loadingConsole") %><br/>
<span id="loading-msg"><%= properties.getString("pleaseWait") %></span>
<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
</div>
</div>
<p><wcf:render ref="<%=tableId%>"
xslUri="/WEB-INF/jpivot/table/mdxtable.xsl" xslCache="true" />
<% } %>eis um trecho do codigo onde chama o frame
o frame abre enquanto a pagina esta carregando mas não fecha
desculpe de não me fiz claro
Boa tarde,
não consegui encontrar o efeito na página postada.
Para carregar um conteudo em um iframe é simples
basta dar um nome ao iframe e referenciar ele no link