2

Qual a técnica utilizada por esse widget no blogger(?): http://tecplate.blogspot.pt/

Exemplo

Ao colocar o cursor em cima do nome do autor da postagem, ele carrega um js com uma popup. A idéia é utilizar isso para minimizar o tempo de carregamento do site com algum widget que pode causar atraso.

PS: Quero carregar o JS on hover e não somente uma div.

2 Respostas 2

3

Fonte: http://www.virtualgroup.com.br/como-carregar-scripts-javascript-dinamicamente-utilizando-jquery/

Como de praxe, carregamos o script do jQuery:

<script src="http://code.jquery.com/jquery-1.5.js"></script>

E incluímos a lógica:

var scripts = ['/JS/Util/meuScript1.js',
               '/JS/Util/esteScriptDependeDoScript1.js', 
               '/JS/MeuScriptPrincipalQueDependeDoScript1e2.js'];

function carregarScripts(callback) {
    if (scripts == null || scripts.length == 0) {
        callback();
        return;
    }
    var script = scripts[0];
    scripts = scripts.slice(1);


$.getScript(script, function() { carregarScripts(callback); });
}

Perceba que a variável global “scripts” é um array que contem a URL de cada script a ser carregado, na ordem que deseja que eles sejam carregados, sendo a posição 0 o primeiro.

O único parâmetro do método carregarScripts() é o nome da função que será invocada apos o carregamento de todos os scripts informados no array scripts. Neste caso, invoco uma função que está no ultimo arquivo, responsável pelo processamento geral da pagina (MeuScriptPrincipalQueDependeDoScript1e2.js). Chamando a função de carregamento:

<script type="text/javascript">
// Esperamos que a pagina seja carregada e esteja "programavel"
$(document).ready(function(){
  carregarScripts(function(){ iniciarProcessamento(); });
});
</script>

Se quiser mudar o carregamento para ser no onhover, basta colocar tal lógica ali dentro do document.ready ok?

Podíamos passar as URLs dos scripts em parâmetro à função, ou ainda passar diretamente o array etc… mas desse jeito fica mais fácil de reutilizar.

2

Esta página que você mandou não carrega códigos JavaScript durante a execução, apenas manipula de forma dinâmica alguns elementos HTML. Vamos ver como recriar este efeito.

Ao realizar o mouseover, o site mostra uma div na posição do mouse e carrega dentro dela um iframe com a url do link (neste caso, um perfil do Google Plus).

Vamos ver como podemos reproduzir este efeito

essa aqui é a janela onde será rodado ajax para carregar

<div id="user"></div>

ela precisa ter este atributo CSS

#user{
  position: absolute; //para ficar em qualquer lugar da página
  display: none; //para ficar escondida
}

Vamos dar uma olhada nos links com o nome do usuário:

<a ... class="g-profile" href="https://plus.google.com/9999999999999999999" ...>
....
</a>

Os links contém a classe g-profile e um atributo href. É tudo o que precisamos para prosseguir.

Agora vamos para os scripts. Como vamos manipular muitos elementos, recomendo utilizar o jQuery para economizar sintaxe e tempo de debug.

$(document).ready(function(){

  $('.g-profile').hover(function(){

  //quando o mouse ficar em cima do link...

   var mouseX = e.pageX; //pegue a coordenada x do mouse
   var mouseY = e.pageY; //pegue a coordenada y do mouse
   var url = $(this).attr('href'); //pegue a url do link

   $('#user').html("<iframe src="+url+"></iframe>"); // crie o iframe com a url

   //mova a div e mostre-a
   $('#user').css({'top':mouseY,'left':mouseX,'display':'block'}); 



},function(){

 // quando o mouse sair...
 $('#user').css('display','none'); //esconda a div


  });

});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .