Ir para conteúdo

POWERED BY:

Arquivado

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

GrayScale

Load em iFrame

Por , em Javascript

Recommended Posts

GrayScale    0

GrayScale
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

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

 

<iframe name ="seuIframe" .... ></iframe>

<a href="suapagina.html" target="seuIframe"> link </a>

Compartilhar este post

Link para o post
Compartilhar em outros sites

GrayScale    0

GrayScale
Postado

Lá no topo do site há um menu dropdown só clicar lá, emqualquer um.

Compartilhar este post

Link para o post
Compartilhar em outros sites

GrayScale    0

GrayScale
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

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. :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

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" 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;
}
#mainnav li{
    float: left;
    margin: 0 15px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    background: #333;
}
#mainnav li a{
    font-size: 14pt;
    font-family: sans-serif;
    color: #fff;
    text-decoration: none;
}
li.active{
    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

Compartilhar este post

Link para o post
Compartilhar em outros sites

GrayScale    0

GrayScale
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

GrayScale    0

GrayScale
Postado

Eu não tenho conhecimento algum em javascript. Vou ver se há algo que possa fazer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

 

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" 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;
}
#mainnav li{
    float: left;
    margin: 0 15px;
    line-height: 30px;
}
#mainnav li a{
    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;
}
li.active a{
    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

Compartilhar este post

Link para o post
Compartilhar em outros sites

GrayScale    0

GrayScale
Postado

Thiago por mera curiosidade você começou aprender html e essas coisas com quantos anos, já que es um expert.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

GrayScale    0

GrayScale
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Zanoni    0

Zanoni
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

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 :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Zanoni    0

Zanoni
Postado

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

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