Html Position Issue In Firefox (works In Ie And Chrome)

I have the following code. When I mouse over the “CODE” it should show the div on position 100 X100. It is working fine in IE and Chrome; however the div does not move to the r

Solution 1:

Here is a jsfiddle that demonstrates your code.

http://jsfiddle.net/6GaEA/1/

The problem (according to firebug) lies in your script. You reference a variable 'tooltip' that's not defined. Chrome and IE seem to swallow this error and continue, while firefox chokes and dies.

change this:

functionshowDiv(batchId, vendorId) {

    tooltip.style.display = "block";

    batch.innerHTML = batchId;

    vendor.innerHTML = vendorId;

    $('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })

} 

to this:

functionshowDiv(batchId, vendorId) {

    $('#tooltip').css('display',"block");

    $('#batch').html(batchId);

    $('#vendor').html(vendorId);

    $('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })

}

edit: I am aware that the jQuery css function is called on $("#tooltip") twice. I was trying to keep the same flow of the code as much as possible :)

Solution 2:

To make "absolute" work as position for your element, parent element must have its position set to relative or absolute. That is in your case add css "position: relative" to TD which has onmouseover event.

Solution 3:

jQuery CSS method should be used in this way:

$("#something").css(propertyName,value);

and its better to handle Events in your scripts this way:

$("#something").mouseover(function() {
    $("#tooltip").css("display","block");
  });

and for positioning an element absolutely its parent should be positioned relatively.

Solution 4:

try this way

<scripttype="text/javascript">functionshowDiv(batchId, vendorId) {
                document.getElementById('tooltip').style.display = "block";
                document.getElementById('batch').innerHTML = batchId;
               // batch.innerHTML = batchId;document.getElementById('vendor').innerHTML = vendorId;
                //vendor.innerHTML = vendorId;
            }

        </script>