homepage Welcome to WebmasterWorld Guest from 54.211.80.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
object.style.outline
not working in google chrome
nyteshade




msg:4374888
 1:21 pm on Oct 15, 2011 (gmt 0)

I have a function that works in FF, Opera, IE, but not in Chrome (Safari stopped responding some weeks ago and has since failed to install under XP for me!)... I haven't found any reference to Chrome not handling style.outline (see HERE)but it seems to be the culprit. Anyone know anything on this subject? Thanks all.

function trhighlight_outline(){
if(!document.getElementsByTagName("tr")) return false;
var rows = document.getElementsByTagName("tr");
for (var i=0; i<rows.length; i++){
if(rows[i].firstChild.nodeName == "TD" &amp;&amp; rows[i].parentNode.nodeName != "TFOOT"){
rows[i].onmouseover = function(){
this.style.outline="thick solid #0000FF";//<=====HERE
}
rows[i].onmouseout = function(){
this.style.outline="none";
}
}
}
}

 

penders




msg:4374891
 2:02 pm on Oct 15, 2011 (gmt 0)

Try setting the individual properties, rather than the shorthand 'outline' property...?
outlineColor = '#00f'; 
outlineStyle = 'solid';
outlineWidth = 'thick'; // Set width last


I assume &amp;&amp; is just a forum typo?

Just a thought... shouldn't this be done in CSS rather than JS? Perhaps just apply a class to the appropriate TRs using JS?

nyteshade




msg:4374917
 3:25 pm on Oct 15, 2011 (gmt 0)

penders: your suggestion works in ff, opera, ie, but still not in chrome! And yes, I'm separating presentation from behavior in all my current pages; my next step is to create a function that uses className property to 'update' on-the-fly from external css class, but I ain't there yet because this appearing glitch has got my attention, arrrgh!

function trhighlight_outline(){
if(!document.getElementsByTagName("tr")) return false;
var rows = document.getElementsByTagName("tr");
for (var i=0; i<rows.length; i++){
if(rows[i].firstChild.nodeName == "TD" && rows[i].parentNode.nodeName != "TFOOT"){
rows[i].onmouseover = function(){
//this.style.outline="thick solid #0000FF";
this.style.outlineColor = '#00f';
this.style.outlineStyle = 'solid';
this.style.outlineWidth = 'thick';
}
rows[i].onmouseout = function(){
this.style.outline="none";
this.style.outlineStyle = 'none';
this.style.outlineWidth = 0;
}
}
}
}

rainborick




msg:4375143
 3:54 pm on Oct 16, 2011 (gmt 0)

You may be running into a difference in the way that the various browsers render tables, particularly the <tr> element. Chrome may not be able to render an outline on <tr>s because they don't generally have any screen real estate to be overdrawn and for the outline to visibly occupy. Have you tried getting Chrome to render this effect with a test page that uses explicit CSS instead of JavaScript?

penders




msg:4375167
 5:33 pm on Oct 16, 2011 (gmt 0)

...getting Chrome to render this effect with a test page that uses explicit CSS instead of JavaScript?


...and that seems to be the problem. Chrome (and Safari) do not seem to render an outline on TRs when using CSS only, so trying to do this with JS is not going to help. (I tried your JavaScript in Chrome and it certainly seems to apply the styles - as seen in the developer tools - but, as mentioned, there is no change visually.)

It clearly works OK in other browsers. In fact, other browsers can also outline TBODY etc, but not Chrome. However, chrome can outline TDs. Not sure of the reasoning behind this. At first I was thinking that it was perhaps because a user can't focus a TR, but I don't think that's it. Yes, there would seem to be a difference in rendering, however, I'm not convinced by the "...don't generally have any screen real estate to be overdrawn..." argument, since I always thought that the outline was independent of 'screen real estate', in much the same way as CSS3 box-shadow? (Incidentally, you can't seem to apply box-shadow to a TR in Chrome either.)

nyteshade




msg:4375500
 4:05 pm on Oct 17, 2011 (gmt 0)

Thanks rainborick, penders. Just to confirm: I've test TD and TR elements using the CSS outline property and both behave just as described in your replies. Sticking with just CSS I used:

tbody tr td:hover {outline: thick solid green;}

...and this renders a visual result under Chrome. This:

tbody tr:hover {outline: thick solid green;}

...does not produce a visual result. Interesting.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved