[FireFox] parent object for style in setter

[jarek]

Hi,

this is my code:

CSSStyleDeclaration.prototype.__defineSetter__('display',
displaySetter);

function displaySetter(value) {
var parent = findParent(document, this);
if (parent) {
if (parent.tagName == 'TD'
&& value.toLowerCase() == 'inline' ) {
value = 'table-cell';
}
}
this.setProperty('display', value , 'important');
}


function findParent(obj, style) {
var nodes = obj.childNodes;
if (obj.style == style) {
return obj;
}
for(var i = 0; i < nodes.length; i++) {
var suBsearchResult = findParent(nodes, style);
if (suBsearchResult) {
return suBsearchResult;
}
}
return false;
}

As you can see each time I need to scan whole document for parent which

I would like to avoid. Is there any other way to get an object on which
style is applied to?

 

[Thomas 'PointedEars' Lahn]

CSSStyleDeclaration.prototype.__defineSetter__('display',
displaySetter);

function displaySetter(value) {
var parent = findParent(document, this);
if (parent) {
if (parent.tagName == 'TD'

Should be

if (parent.tagName.toLowerCase() == 'td'

&& value.toLowerCase() == 'inline' ) {
value = 'table-cell';
}
}
this.setProperty('display', value , 'important');
}


function findParent(obj, style) {
var nodes = obj.childNodes;

You should place this line after the following block. It will not matter
for the variable instantiation (which is done before execution), but it
will matter for the assignment which is unnecessary if the condition in
the following IfStatement yields `true' (and so the execution context
is exited).

And since this is about the `style' property of `td' element objects,
you do not need to traverse all child nodes (including !td element nodes
and text nodes). Try Document::getElementsByTagName("td"), or use XPath
and `//td' which is semantically equivalent in XML document types. Even
more efficient are HTMLBodyElement::getElementsByTagName("td") or
`//body//*' (IIRC).

And if it was about any element, you would still not have to traverse
text nodes: Document::getElementsByTagName("*") or XPath `//*'.

if (obj.style == style) {
return obj;
}
for(var i = 0; i < nodes.length; i++) {

More efficient is

for (var i = nodes.length; i-- {

[...]
As you can see each time I need to scan whole document for parent which
I would like to avoid. Is there any other way to get an object on which
style is applied to?

I am afraid the answer is no. There is nothing in the W3C DOM Level 2 Style
Specification or the Gecko DOM Reference that supports the assumption that
the object referred to with a property of the `style' property of element
objects can know about the owner object of this property.

I wonder why you find this necessary anyway. Since this is obviously
Gecko-specific code, would it not be better to create and append a new,
or modify an existing `style' element for the `td' element instead?
That said, since when are `td' elements inline-level elements by default
with Gecko?


PointedEars

 

[jarek]

Thanks for yours answer, I found it very usefull.

I wonder why you find this necessary anyway.

I have to refactor huge buissness application, witch was intended to
work under IE only, to work under FireFox also. It consist of up to 100
JSPs with lots of DHTML. So I decided to modify FF behaviours in that
way that it will the same API as IE.
For instance:

//unhiding table cell
var aCell = getElementById('someCell');
aCell.style.display = 'inline'; //fires setter which maps 'inaline' to
'table-cell'

I have another question.
Is there any way to do this same with static style definition?
For example:
<td style="display:inline">

Best regards
Jarek

 

[Thomas 'PointedEars' Lahn]

(e-mail address removed) wrote:
^^^^^^^^^^^^^^^
I would appreciate it if you posted with your real name (which can
include a nickname).

Thanks for yours answer, I found it very usefull.

You are welcome. Please also provide attribution next time:

I have to refactor huge buissness application, witch was intended to
work under IE only, to work under FireFox also. It consist of up to 100
JSPs with lots of DHTML. So I decided to modify FF behaviours in that
way that it will the same API as IE.

For instance:

//unhiding table cell
var aCell = getElementById('someCell');

Am I correct assuming that getElementById() is a wrapper method for
document.getElementById()?

aCell.style.display = 'inline'; //fires setter which maps 'inaline' to
'table-cell'

This approach is highly questionable since it is not future-proof. What
if IE is standards compliant in this regard one day? What if it supports
prototyping element objects or setters one day?

You should do this the other way around. Most certainly a method is called
to set the value of the `display' property. You should determine if the
target element is a `td' element, and if yes, set the `display' property to
`table-cell' as Web standards call for. IIRC, if IE does not support a
property value, the previous value is restored. So you could test if the
value after the assignment is "table-cell", and if it is not, you would
assign "inline" as supported by current IE-based UAs:

var aCell = getElementById('someCell');
if (aCell
&& typeof aCell.style != "undefined"
&& typeof aCell.style.display != "undefined"
&& (aCell.tagName.toLowerCase() != 'td'
|| (aCell.style.display = 'table-cell') != 'table-cell'))
{
aCell.style.display = 'inline';
}

I cannot test with IE or an IE-based UA here. If the above works
for you, I am going to include it in my setStyleProperty() method.

I have another question.
Is there any way to do this same with static style definition?
For example:
<td style="display:inline">

I do not understand what you mean by that. Certainly this is
Valid markup and Valid CSS (though unreliable[1]) ... and now?


Regards,
PointedEars
___________
[1] <URL:http://www.w3.org/TR/CSS2/tables.html#q2>

 

[Jonas Raoni]

function findParent(obj, style) {
var nodes = obj.childNodes;
if (obj.style == style) {
return obj;
}
for(var i = 0; i < nodes.length; i++) {
var suBsearchResult = findParent(nodes, style);
if (suBsearchResult) {
return suBsearchResult;
}
}
return false;
}

I would like to avoid. Is there any other way to get an object on which
style is applied to?

Recursive calls are expensive, implement the stack on your code.

So, I don't know a better way to do this, but the two functions bellow
work reasonably faster (I tested with a large number of siblings and
also with nested nodes). But take a look, maybe there's something wrong
on my code

//this one worked faster than the other...
function findParent(s){
var x = [], n = document.childNodes, i;
do
for(i = n.length; i
if((o = n.item(--i)).style == s)
return o;
else if(o.hasChildNodes())
x.push(o.childNodes);
while(n = x.pop());
return null;
}

function findParent(s){
for(var x = document.getElementsByTagName("*"), i = x.length, o; o =
x.item(--i)
if(o.style == s)
return o;
return null;
}