Html Position Issue In Firefox (works In Ie And Chrome)
Solution 1:
Here is a jsfiddle that demonstrates your code.
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>
Post a Comment for "Html Position Issue In Firefox (works In Ie And Chrome)"