Load JS on mouse Hover

Question

What technique did this widget use on blogger(?): http://tecplate.blogspot.pt/

When placing the cursor over the author’s name of the post, it loads a js with a popup. The idea is to use this to minimize the loading time of the site with some widget that may cause delay.

PS: I want to load JS on Hover and not just a div.

Answer 1

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

As usual, we load the jQuery script:

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

And include the logic:

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); });
}

Note that the global variable "scripts" is an array that contains the URL of each script to be loaded, in the order you want them to be loaded, with position 0 being the first.

The only parameter of the method loadScripts() is the name of the function that will be invoked after loading all scripts informed in the scripts array. In this case, I invoke a function that is in the last file, responsible for the general processing of the page (Meuscriptprincipalquedependedoscript1e2.js). Calling the charging function:

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

If you want to change the load to onhover, just put such logic inside the Document.ready ok?

We could pass the Urls of the scripts in parameter to the function, or even pass directly the array etc... but this way it is easier to reuse.

Answer 2

This page you sent does not load Javascript codes during execution, it just dynamically manipulates some HTML elements. Let’s see how to recreate this effect.

When performing the mouseover, the site shows a div in the mouse position and loads within it an iframe with the link url (in this case, a Google Plus profile).

Let’s see how we can reproduce this effect

this is the window where will be rotated ajax to load

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

she needs to have this CSS attribute

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

Let’s take a look at the links with the user name:

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

The links contain the class g-profile and an attribute href. That’s all we need to go on.

Now let’s go to the scripts. As we will handle many elements, I recommend using jQuery to save syntax and debug time.

$(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


  });

});