how do sites generate dynamic content on hover?

[lli2k5]

I have seen a lot of sites, when you hover on some text, it executes a command that generates a popup menu that you can click. on

An easy example is the "Site Info" button on Alexa that generates data about the site on hover and you can click on anything in the hovered popup box.

I am new to AJAX so I do not know a lot about this. My idea of how this works is that when hovering, it generates an AJAX request to load up a php page or html page.

The question is how are you able to click on this popup? Is this an easy thing to program? The clickable content popup window upon hovering?

[penders]

Hi lli2k5, I don't think it's quite as tricky as what you might think. One way of doing this is to have an absolutely positioned DIV (position:absolute), that is hidden (display:none or visibility:hidden) when the page loads.

In the onmouseover event for the element, you call a bit of javascript that writes some content into the hidden div and makes it visible (display:block or visibility:visible), positioning it at a location based on where the mouse pointer is. In the onmouseout event you make this div hidden again. Historically called DHTML.

You only need 'AJAX' if the content you're writting into the hidden div is pulled 'on the fly' from a backend database or something - which I guess Alexa maybe doing in its popups.

Well, that's the theory anyway (I hope), as I need to get round to writing something like that!

[Little_G]

Hi,

This is an extract from a JS I wrote to automatically add thumbshots to links on a page:

var tool_layer = document.createElement("div");
document.body.appendChild(tool_layer);
tool_layer.style.position = "absolute";
tool_layer.style.visibility = "hidden";

var tooltip={
displayed:false,
on:function(evt){
if(evt == undefined){
evt = window.event;
}
if(evt.target.href!= undefined){
var linkurl = evt.target.href;
tool_layer.innerHTML = '<img src="http://open.thumbshots.org/image.pxf?url=' + escape(linkurl) + '" style="border:0;margin:0;">';
displayed = true;
tool_layer.style.visibility = "visible";
}
},
off:function(){
displayed = false;
tool_layer.style.visibility = "hidden";
},
move:function(evt){
if(displayed){
if (document.addEventListener) {
tool_layer.style.left = ((evt.clientX + window.pageXOffset)+15) + 'px';
tool_layer.style.top = ((evt.clientY + window.pageYOffset)+15) + 'px';
}
else if (window.opera) {
tool_layer.style.left = ((evt.clientX + window.pageXOffset)+15) + 'px';
tool_layer.style.top = ((evt.clientY + window.pageYOffset)+15) + 'px';
}
else if (window.event) {
if (document.compatMode && document.compatMode!= 'BackCompat') {
tool_layer.style.left = ((event.clientX + document.documentElement.scrollLeft)+15) + 'px';
tool_layer.style.top = ((event.clientY + document.documentElement.scrollTop)+15) + 'px';
}
else {
tool_layer.style.left = ((event.clientX + document.body.scrollLeft)+15) + 'px';
tool_layer.style.top = ((event.clientY + document.body.scrollTop)+15) + 'px';
}
}
else if (document.layers) {
tool_layer.left = evt.pageX+15;
tool_layer.top = evt.pageY+15;
}
}
}
}

function addEvents(elem){
elem.onmouseover = tooltip.on;
elem.onmouseout = tooltip.off;
elem.onmousemove = tooltip.move;
}

You should be able to taylor it to your needs. At the moment to add the 'tooltip' to an ANY element just call addEvents(document.getElementById('yourelementhere'));
Hope that saves someone some work, ask if you need any help.

Andrew

[lli2k5]

thanks man

[Little_G]

Hi, in reply to a sticky from dhayalanit here is an updated and working example of the code above plus instructions for use,

//tooltip.js
var tool_layer = document.createElement("div");
document.body.appendChild(tool_layer);
tool_layer.style.position = "absolute";
tool_layer.style.visibility = "hidden";

//Define style for message box here:
tool_layer.style.border = "1px solid #000000";

var tooltip={
displayed:false,
on:function(message){
tool_layer.innerHTML = message;
this.displayed = true;
tool_layer.style.visibility = "visible";
},
off:function(){
this.displayed = false;
tool_layer.style.visibility = "hidden";
},
move:function(evt){
var dist = 15;
if(this.displayed){
if (document.addEventListener) {
tool_layer.style.left = ((evt.clientX + window.pageXOffset)+dist) + 'px';
tool_layer.style.top = ((evt.clientY + window.pageYOffset)+dist) + 'px';
}
else if (window.opera) {
tool_layer.style.left = ((evt.clientX + window.pageXOffset)+dist) + 'px';
tool_layer.style.top = ((evt.clientY + window.pageYOffset)+dist) + 'px';
}
else if (window.event) {
if (document.compatMode && document.compatMode!= 'BackCompat') {
tool_layer.style.left = ((event.clientX + document.documentElement.scrollLeft)+dist) + 'px';
tool_layer.style.top = ((event.clientY + document.documentElement.scrollTop)+dist) + 'px';
}
else {
tool_layer.style.left = ((event.clientX + document.body.scrollLeft)+dist) + 'px';
tool_layer.style.top = ((event.clientY + document.body.scrollTop)+dist) + 'px';
}
}
else if (document.layers) {
tool_layer.left = evt.pageX+15;
tool_layer.top = evt.pageY+15;
}
}
}
}

The above code should placed in a file of it's own (example: 'tooltip.js') in the root directory. This should make it easier to use over multiple pages.

Then to use the script in a page you would include it like so:

<script type="text/javascript" src="/tooltip.js"></script>

That line MUST appear at the BOTTOM of the body of the HTML document. ie.

<script type="text/javascript" src="/tooltip.js"></script>
</body>

Then in each element you want the message to appear over you need to add the event attributes to, eg.

<a href="http://www.webmasterworld.com/" id="link1" onmouseover="tooltip.on('Click here for WebmasterWorld')" onmouseout="tooltip.off()" onmousemove="tooltip.move(event)">webmasterworld</a>

An example of your final working page may look like this:

<html>
<head>
<title>Example</title>
</head>
<body>
<p><a href="http://www.webmasterworld.com/" id="link1" onmouseover="tooltip.on('Click here for WebmasterWorld')" onmouseout="tooltip.off()" onmousemove="tooltip.move(event)">webmasterworld</a>
<p><a href="http://www.google.com/" id="link2" onmouseover="tooltip.on('Click here for Google')" onmouseout="tooltip.off()" onmousemove="tooltip.move(event)">google</a>
<script type="text/javascript" src="/tooltip.js"></script>
</body>
</html>

Andrew

[penders]

Thanks for your code little_g - good effort!

[rokec]

can i get that code which is not alergic to IE?
With other words, script works only in Mozzila.

[Little_G]

Hi,

Try putting the script tag "<script type="text/javascript" src="/tooltip.js"></script>" at the top of the body tag.

Andrew