There seems to be a bug in this demo. I am trying to add the same event to the same class but with different IDs. The code looks like this:
var self;
var id;
var result;
var myArray=document.getElementsByClassName("tipDiv");
for (var i=0;i<myArray.length;i++) {
document.getElementsByClassName("tipDiv")[i].onmouseover=(function(num){
return function() {
$(this).myHoverTip("hoverDiv","");
}
})(i);
document.getElementsByClassName("tipDiv")[i].onmouseout=(function(num){
return function() {
$(this).cleanHover("hoverDiv");
}
})(i);
}
$.fn.myHoverTip = function(divId, value)
{
var div = $("#" + divId);
div.css("position", "absolute");
self = $(this);
id = self.attr("id");
self.hover(function() {
div.css("display", "block");
var p = self.position();
var x = p.left + self.width();
var docWidth = $(document).width();
if (x > docWidth - div.width() - 20) {
x = p.left - div.width();
}
div.css("left", x);
div.css("top", p.top);
function showCustomer(str) {
var xmlhttp;
if (str=="") {
result="";
return;
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
result=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getbrand.asp?q="+str,true);
xmlhttp.send();
div.html(id+result+myArray.length);
}
showCustomer(id);
},
function() {
div.css("display", "none");
div.html("");
});
return this;
}
Can someone please help me fix this bug? It is not working as intended. The hover effect does not work on the first mouseover, and the value is incorrect on the second. It only shows the correct value on the third mouseover. When I move to the next DIV, it always shows the last value. Your assistance is greatly appreciated! Apologies for any language errors in my explanation.