Annoying Cross-browser Issue

M

Matt White

Hello,

I am creating a list of products, some of which have long names that
should be truncated at a certain point. I would like to display the
full name of the product when the user does a mouseover in a <div>,
and set that <div>'s position to be just to the right of the mouse
pointer. I have written code that does this successfully in IE, but in
FireFox it always wants to display in the top left corner. It seems
that the element.style.top and .left attributes refuse to be set in
FireFox. Does anyone know what I need to change to get it to work in
both browsers? Thanks.

### Javascript Code ###
<script type="text/javascript">
function showName(event, text) {
var fullName = document.getElementById('full_product_name');
if(document.all) {
fullName.innerText = text;
} else {
fullName.textContent = text;
}
fullName.style.position = 'absolute';
fullName.style.display = 'block';
fullName.style.top = event.clientY;
fullName.style.left = event.clientX + 2;
}

function hideName() {
document.getElementById('full_product_name').style.display = 'none';
}
</script>

### Applicable HTML ###
....
<td><span onMouseOver='javascript:showName(event, "FULL PRODUCT NAME
GOES HERE");' onMouseOut="javascript:hideName();">TRUNCATED NAME GOES
HERE</span></td>
....

### Applicable Stylesheet ###
#full_product_name {
display: none;
background-color:#ffffdd;
border: 1px solid black;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
}
 
D

David Mark

Hello,

I am creating a list of products, some of which have long names that
should be truncated at a certain point. I would like to display the
full name of the product when the user does a mouseover in a <div>,
and set that <div>'s position to be just to the right of the mouse
pointer. I have written code that does this successfully in IE, but in
FireFox it always wants to display in the top left corner. It seems
that the element.style.top and .left attributes refuse to be set in
FireFox. Does anyone know what I need to change to get it to work in
both browsers? Thanks.

### Javascript Code ###
<script type="text/javascript">
function showName(event, text) {
var fullName = document.getElementById('full_product_name');
Click to expand...

Where is this element? I don't see it in your markup.
if(document.all) {
fullName.innerText = text;
} else {
fullName.textContent = text;
}
Click to expand...

Bad inference. The all property does not imply innerText support, nor
does it exclude the possibility of textContent support. Try testing
the properties that you are going to use instead (e.g. innerText and
textContent.)
fullName.style.position = 'absolute';
fullName.style.display = 'block';
Click to expand...

The computed display style will be block, so this is redundant.
fullName.style.top = event.clientY;
Click to expand...

The pageX/Y properties will work in other browsers. In either case,
you must test that they return numbers before assigning them to style
properties. You also forgot to add "px" to create a valid top style.
fullName.style.left = event.clientX + 2;
Click to expand...

Understand that chrome settings are configurable, so the border of the
outermost element is not guaranteed to be 2 (though in most cases it
will be.) You also forgot to add the page's scroll position. See the
FAQ for a scroll position example.
}

function hideName() {
document.getElementById('full_product_name').style.display = 'none';
}
</script>

### Applicable HTML ###
...
<td><span onMouseOver='javascript:showName(event, "FULL PRODUCT NAME
GOES HERE");' onMouseOut="javascript:hideName();">TRUNCATED NAME GOES
HERE</span></td>
Click to expand...

Get rid of those "javascript:" prefixes.
...

### Applicable Stylesheet ###
#full_product_name {
display: none;
background-color:#ffffdd;
border: 1px solid black;
font-size: 15px;
Click to expand...

Don't size fonts with pixel units. Use em's or percentages.
 
D

Doug Gunnoe

Hello,

I am creating a list of products, some of which have long names that
should be truncated at a certain point. I would like to display the
full name of the product when the user does a mouseover in a <div>,
and set that <div>'s position to be just to the right of the mouse
pointer. I have written code that does this successfully in IE, but in
FireFox it always wants to display in the top left corner. It seems
that the element.style.top and .left attributes refuse to be set in
FireFox. Does anyone know what I need to change to get it to work in
both browsers? Thanks.

### Javascript Code ###
<script type="text/javascript">
function showName(event, text) {
var fullName = document.getElementById('full_product_name');
if(document.all) {
fullName.innerText = text;
} else {
fullName.textContent = text;
}
fullName.style.position = 'absolute';
fullName.style.display = 'block';
fullName.style.top = event.clientY;
fullName.style.left = event.clientX + 2;
}

function hideName() {
document.getElementById('full_product_name').style.display = 'none';
}
</script>

### Applicable HTML ###
...
<td><span onMouseOver='javascript:showName(event, "FULL PRODUCT NAME
GOES HERE");' onMouseOut="javascript:hideName();">TRUNCATED NAME GOES
HERE</span></td>
...

### Applicable Stylesheet ###
#full_product_name {
display: none;
background-color:#ffffdd;
border: 1px solid black;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;



}- Hide quoted text -

- Show quoted text -
Click to expand...

I don't see an element with ID 'full_product_name'
 
M

Matt White

Where is this element? I don't see it in your markup.


Bad inference. The all property does not imply innerText support, nor
does it exclude the possibility of textContent support. Try testing
the properties that you are going to use instead (e.g. innerText and
textContent.)


The computed display style will be block, so this is redundant.


The pageX/Y properties will work in other browsers. In either case,
you must test that they return numbers before assigning them to style
properties. You also forgot to add "px" to create a valid top style.


Understand that chrome settings are configurable, so the border of the
outermost element is not guaranteed to be 2 (though in most cases it
will be.) You also forgot to add the page's scroll position. See the
FAQ for a scroll position example.




Get rid of those "javascript:" prefixes.



Don't size fonts with pixel units. Use em's or percentages.
Click to expand...

All good suggestions but I think it was the 'px' addition that made
the difference. Thanks!
 
M

Matt White

Where is this element? I don't see it in your markup.


Bad inference. The all property does not imply innerText support, nor
does it exclude the possibility of textContent support. Try testing
the properties that you are going to use instead (e.g. innerText and
textContent.)


The computed display style will be block, so this is redundant.


The pageX/Y properties will work in other browsers. In either case,
you must test that they return numbers before assigning them to style
properties. You also forgot to add "px" to create a valid top style.


Understand that chrome settings are configurable, so the border of the
outermost element is not guaranteed to be 2 (though in most cases it
will be.) You also forgot to add the page's scroll position. See the
FAQ for a scroll position example.




Get rid of those "javascript:" prefixes.



Don't size fonts with pixel units. Use em's or percentages.
Click to expand...

All good suggestions but I think it was the 'px' addition that made
the difference. Thanks! And I fixed the scroll issue simply by setting
position to fixed instead of absolute. Seems to work fine in both
browsers now.
 
D

Doug Gunnoe

I don't have access to firefox at the moment. But I made a few
changes, and you can try this and see if it works for you if you like.

<html>
<head>
<style type="text/css">
#full_product_name {
visibility: hidden;
display: 'block';
background-color:#ffffdd;
border: 1px solid black;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;}
</style>
<script type="text/javascript">
function showName(event, text) {

var fullName =
document.getElementById('full_product_name');
fullName.style.visibility = 'visible';
fullName.innerHTML = text;
fullName.style.position = 'absolute';
fullName.style.top = event.clientY;
fullName.style.left = event.clientX + 2;
}


function hideName() {

document.getElementById('full_product_name').style.visibility =
'hidden';

}
</script>


</head>

<body>

<table border="1">
<tr>
<td width="300" height="10" onMouseOver="showName(event, 'FULL PRODUCT
NAME GOES HERE');" onMouseOut="hideName();"><span
id="full_product_name" >TRUNCATED NAME GOES
HERE</span></td>
</tr>
</table>

</body>



</html>


A couple of thoughts is that you were toggling display: none and
display:block but, will it trigger a mouseover event with
display:none? Not sure. Instead I swapped the visibility attribute
between hidden and visible.

I also moved the event to the table cell just so I could see what is
going on. I also used the innerHTML attribute instead of what you were
using.

Let me know if this works in FF, I see no reason why it shouldn't.
 
D

Doug Gunnoe

I'm glad you found a solution. Ignore my other reply, we must have
posted at about the same time.
 
D

David Mark

All good suggestions but I think it was the 'px' addition that made
the difference. Thanks! And I fixed the scroll issue simply by setting
position to fixed instead of absolute. Seems to work fine in both
Click to expand...

That won't work in IE6.
 
D

David Mark

All good suggestions but I think it was the 'px' addition that made
the difference. Thanks! And I fixed the scroll issue simply by setting
position to fixed instead of absolute. Seems to work fine in both
browsers now.
Click to expand...

Actually, one of them was a terrible suggestion. I am sure you
figured out that since you are using the display style to toggle the
visibility of the absolutely positioned element (not usually the best
idea), setting it to block is not redundant. Sorry for any confusion.
 
D

David Mark

What will then?
Click to expand...

If you really want the DIV to show up exactly where the pointer is,
then you need to add the scroll position when using the clientX/Y
properties. BTW, you shouldn't use clientX/Y unless the pageX/Y is
unavailable (typically in IE.) Also, you won't need to account for
the scroll position (or the viewport border) when using pageX/Y.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

SendGrid email issue in responsive Gmail 1
Closing an overlay outside the overlay as well 1
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Positioning CSS components 1
Help with code 0
Slideshow not working properly 2
An unknown bug doesn't allow the quotes app to work. What's the issue? 3
Why is the e.target not working here? 1

Members online

Total: 30 (members: 3, guests: 27)
Robots: 370

Forum statistics

Threads
473,770
Messages
2,569,583
Members
45,072
Latest member
trafficcone

Latest Threads

Top