getting computed clip rect

[Chris Riesbeck]

I have an image with a class and the class defines a clip rectangle.

In Firefox 2 and 3, and Opera 9, I can access the rectangle with
document.defaul tView.getComput edStyle().

But that doesn't seem to work in Safari for Windows 3, nor when I use
image.currentSt yle.clip in IE 7.

Is there a way to do this in those browsers? Am I doing something stupid?

Toy example here, where I can get the class position but not the clip value:

http://www.cs.northwestern.edu/~ries...clip-demo.html

[GTalbot]

On Jul 14, 7:12*pm, Chris Riesbeck <Chris.Riesb... @gmail.comwrote :

I have an image with a class and the class defines a clip rectangle.

In Firefox 2 and 3, and Opera 9, I can access the rectangle with
document.defaul tView.getComput edStyle().

Hello Chris,

IE 7 and IE 8 final version will not support document.defaul tView nor
getComputedStyl e method.

But that doesn't seem to work in Safari for Windows 3, nor when I use
image.currentSt yle.clip in IE 7.

http://www.cs.northwestern.edu/~ries...clip-demo.html
What's wrong with RefImage.style. clip?

It should work according to

http://msdn.microsoft.com/en-us/libr...69(VS.85).aspx

when you define the clip property with inline style.

Is there a way to do this in those browsers? Am I doing something stupid?

Well, I examined your webpage and I see areas, spots in the code which
I would upgrade.

1- HTML 4.01 transitional. I would use only HTML 4.01 strict
everywhere.

Step 1 of this page:
http://developer.mozilla.org/en/docs...dards_-_how_to

2- <script language="JavaS cript"
language is deprecated; type is both forward and backward-compatible.
Therefore, there is no reason whatsoever to use language.

Use Correct <scriptTags
http://www.javascripttoolbox.com/bestpractices/#script

3-
function writeText(id, text) {
document.getEle mentById(id).in nerHTML = text;
}

if the 2nd parameter is text, then you do not need to use innerHTML.
innerHTML should only be used for HTML content.

So here,

function writeText(id, text)
{
document.getEle mentById(id).ch ildNodes[0].nodeValue = text;
}

You could even test support for this to make your function a bit more
robust, preventing errors. E.g.

function writeText(id, textparam)
{
if(typeof textparam == "string")
{
document.getEle mentById(id).in nerHTML = textparam;
}
else {alert("This parameter can not be resolved as text");};
}

4-
<div style="position :relative" style="width:10 0px; height:100px">

Here, the style attribute is over-declared, duplicated. Just use
<div style="position :relative; width:100px; height:100px">

This kind of error can be spotted easily with Firefox addon HTML
validator:
http://users.skynet.be/mgueury/mozilla/

5-
<img src="treasure-map.jpg" class="clipped" style="width:38 0px; height:
374px">

You could try to define the clip property inline here. And that
*should* work in IE 7.

<img src="treasure-map.jpg" style="width: 380px; height: 374px; clip:
rect(0px 100px 50px 0px); position: absolute; top: 10px; bottom:
10px;">

6-
</format line 60 should be removed since there is no <formstart-
tag.

Regards, Gérard
--
Internet Explorer 7 bugs: 156 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Internet Explorer 8 bugs: 130 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/

[GTalbot]

On Jul 15, 2:07*am, GTalbot <newsgr...@gtal bot.orgwrote:

function writeText(id, textparam)
{
if(typeof textparam == "string")
{
* document.getEle mentById(id).in nerHTML = textparam;}

else {alert("This parameter can not be resolved as text");};

}

Oops. I meant to write

function writeText(id, textparam)
{
if(typeof textparam == "string")
{
document.getEle mentById(id).ch ildNodes[0].nodeValue = textparam;
}
else
{
alert("This parameter can not be resolved as text");
};
}

Regards, Gérard
--
Internet Explorer 7 bugs: 156 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Internet Explorer 8 bugs: 130 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/

[GTalbot]

On Jul 14, 7:12*pm, Chris Riesbeck <Chris.Riesb... @gmail.comwrote :

But that doesn't seem to work in Safari for Windows 3, nor when I use
image.currentSt yle.clip in IE 7.

(...)

http://www.cs.northwestern.edu/~ries...clip-demo.html

Another thing.

According to
http://msdn.microsoft.com/en-us/libr...69(VS.85).aspx
clip does not apply to currentStyle object but applies to
runtimeStyle. So, you may want to verify this carefully.

Gérard
--
Internet Explorer 7 bugs: 156 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Internet Explorer 8 bugs: 130 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/

[Chris Riesbeck]

GTalbot wrote:

On Jul 14, 7:12 pm, Chris Riesbeck <Chris.Riesb... @gmail.comwrote :

>I have an image with a class and the class defines a clip rectangle.

In Firefox 2 and 3, and Opera 9, I can access the rectangle with
document.defau ltView.getCompu tedStyle().

Hello Chris,

IE 7 and IE 8 final version will not support document.defaul tView nor
getComputedStyl e method.

Yes, that's what I was gathering from some online discussions.

>

>But that doesn't seem to work in Safari for Windows 3, nor when I use
image.currentS tyle.clip in IE 7.

http://www.cs.northwestern.edu/~ries...clip-demo.html
What's wrong with RefImage.style. clip?

It should work according to

http://msdn.microsoft.com/en-us/libr...69(VS.85).aspx

when you define the clip property with inline style.

But my goal was to access the actual clip value in effect, including
that defined by a CSS class. The clip rect from the class is clearly
applied, it just doesn't seem to be accessible to Javascript.

>

>Is there a way to do this in those browsers? Am I doing something stupid?

Well, I examined your webpage and I see areas, spots in the code which
I would upgrade.

1- HTML 4.01 transitional. I would use only HTML 4.01 strict
everywhere.

My actual application needs XHTML but I let Tidy pick something and just
verified that IE7 was rendering standards mode.

>
Step 1 of this page:
http://developer.mozilla.org/en/docs...dards_-_how_to

2- <script language="JavaS cript"
language is deprecated; type is both forward and backward-compatible.
Therefore, there is no reason whatsoever to use language.

HTML-Kit throws that in and I don't bother ripping it out. However, I
just customized the HTML-Kit template to stop doing that.

>
Use Correct <scriptTags
http://www.javascripttoolbox.com/bestpractices/#script

3-
function writeText(id, text) {
document.getEle mentById(id).in nerHTML = text;
}

if the 2nd parameter is text, then you do not need to use innerHTML.
innerHTML should only be used for HTML content.

This was a quickie to show the results in different browsers without an
alert(). Point taken but my actual code doesn't write text anywhere.

>
4-
<div style="position :relative" style="width:10 0px; height:100px">

Here, the style attribute is over-declared, duplicated. Just use
<div style="position :relative; width:100px; height:100px">

Typo in the toy code. I'm surpised Tidy (as invoked by HTML-Kit) didn't
catch this. Thanks.

>
5-
<img src="treasure-map.jpg" class="clipped" style="width:38 0px; height:
374px">

You could try to define the clip property inline here. And that
*should* work in IE 7.

inline works fine, but the goal was to have a default clip rect that
page authors could override with an inline style, and that, whichever
was done, Javascript could access.

I'm currently storing the default clip rect in a Javascript string. I'd
prefer to have authors be able to change the default in the CSS
stylesheet, but given my experience with Safari (Windows and Mac) and
IE, that seems like a lost cause.

>
<img src="treasure-map.jpg" style="width: 380px; height: 374px; clip:
rect(0px 100px 50px 0px); position: absolute; top: 10px; bottom:
10px;">

6-
</format line 60 should be removed since there is no <formstart-
tag.

I'd started to use a form to display results -- forgot to remove when I
switched to storing text into HTML.

Thanks again for your time. It's appreciated.

>
Regards, Gérard
--
Internet Explorer 7 bugs: 156 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Internet Explorer 8 bugs: 130 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/

[Chris Riesbeck]

GTalbot wrote:

On Jul 14, 7:12 pm, Chris Riesbeck <Chris.Riesb... @gmail.comwrote :

>But that doesn't seem to work in Safari for Windows 3, nor when I use
image.currentS tyle.clip in IE 7.

(...)

>http://www.cs.northwestern.edu/~ries...clip-demo.html

Another thing.

According to
http://msdn.microsoft.com/en-us/libr...69(VS.85).aspx
clip does not apply to currentStyle object but applies to
runtimeStyle. So, you may want to verify this carefully.

I had hopes there for a second, not having seen a reference to
runtimeStyle before. Unfortunately

document.images[0].runtimeStyle.c lip

gives an empty result. When I execute

javascript:aler t(document.imag es[0].style.clip + "#" +
document.images[0].currentStyle.c lip + "#" +
document.images[0].runtimeStyle.c lip)

the output is #undefined# indicating that clip is indeed not defined for
currentStyle but also that the rect defined on the CSS class is not
available (via the clip property at any rate) in any of these.

Thanks for the pointer though.

>
Gérard
--
Internet Explorer 7 bugs: 156 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Internet Explorer 8 bugs: 130 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/

[dhtml]

On Jul 14, 11:21*pm, GTalbot <newsgr...@gtal bot.orgwrote:

On Jul 14, 7:12*pm, Chris Riesbeck <Chris.Riesb... @gmail.comwrote :

But that doesn't seem to work in Safari for Windows 3, nor when I use
image.currentSt yle.clip in IE 7.

(...)

http://www.cs.northwestern.edu/~ries...clip-demo.html

Another thing.

According tohttp://msdn.microsoft. com/en-us/library/ms533569(VS.85) .aspx
clip does not apply to currentStyle object but applies to
runtimeStyle. So, you may want to verify this carefully.

"...
See Also

clipBottom, clipLeft, clipRight, clipTop
"

You have to build the string yourself.

Another consideration with clip is that it can also be represented by
a Rect:
http://www.w3.org/TR/DOM-Level-2-Sty....html#CSS-Rect

Taking those both into consideration, I wrote the following function,
used in APE (which could use some review, BTW).

function getCurrentStyle ClipValues(el, cs) {
var values = [], i = 0, prop;
for( ;i < 4; i++){
prop = props[i];
clipValue = cs['clip'+prop];
if(clipValue == "auto") {
clipValue =
(prop == "Left" || prop == "Top" ? "0px" : prop == "Right" ?
el.offsetWidth + px : el.offsetHeight + px);
}
values.push(cli pValue);
}
return {
top:values[0], right:values[1], bottom:values[2], left:values[3],
toString : function() {return 'rect(' + values.join(' ')+')';}
};
}
If that is too much of a pain, the just use a clip layer with
overflow: hidden; position: absolute, et c.

<div id="clipLayer" >
<div id='content'>lo ts of large contents...</div>
</div>

Garrett

Gérard
--
Internet Explorer 7 bugs: 156 bugs so farhttp://www.gtalbot.org/BrowserBugsSect ion/MSIE7Bugs/
Internet Explorer 8 bugs: 130 bugs so farhttp://www.gtalbot.org/BrowserBugsSect ion/MSIE8Bugs/

[dhtml]

On Jul 15, 12:11*pm, dhtml <dhtmlkitc...@g mail.comwrote:

On Jul 14, 11:21*pm, GTalbot <newsgr...@gtal bot.orgwrote:On Jul 14,7:12*pm, Chris Riesbeck <Chris.Riesb... @gmail.comwrote :

missing variable from enclosing scope.

var props = ["Top", "Right", "Bottom", "Left"];

Garrett

Gérard
--

[GTalbot]

On Jul 15, 11:36*am, Chris Riesbeck <Chris.Riesb... @gmail.comwrote :

GTalbot wrote:

http://www.cs.northwestern.edu/~ries...clip-demo.html

What's wrong with RefImage.style. clip?

It should work according to

http://msdn.microsoft.com/en-us/libr...69(VS.85).aspx

when you define the clip property with inline style.

But my goal was to access the actual clip value in effect,

Actual clip value in the rendered page would involve runtimeStyle in
IE 6+ and document.defaul tView in DOM 2 compliant browsers.

including
that defined by a CSS class.

The defined CSS class would refer to the declaration in the stylesheet
and here, that is accessible in IE 6+ and DOM 2 CSS compliant
browsers.

E.g.:

if(document.sty leSheets)
{
if("cssRules" in document.styleS heets[0]) // DOM 2 Stylesheets
compliant
{
alert("document .styleSheets[0].cssRules[0].style.clip = " +
document.styleS heets[0].cssRules[0].style.clip);
}
else if("rules" in document.styleS heets[0]) // IE 6+
{
alert("document .styleSheets[0].rules[0].style.clip = " +
document.styleS heets[0].rules[0].style.clip);
};
}
else
{
alert("This script requires support for accessing the list of
stylesheets. Javascript support enabled is required too.");
};

Use of alerts here is just to render data. The whole thing can be made
a lot more dynamic, in real-time, even mouse-interactive-driven.

The clip rect from the class is clearly
applied, it just doesn't seem to be accessible to Javascript.

From its class declaration in the local (embedded) stylesheet, it can
be made accessible by javascript+DOM: I'm sure of this. 100% sure,
even for IE 7+.

4-
<div style="position :relative" style="width:10 0px; height:100px">

Here, the style attribute is over-declared, duplicated. Just use
<div style="position :relative; width:100px; height:100px">

Typo in the toy code. I'm surpised Tidy (as invoked by HTML-Kit) didn't
catch this. Thanks.

I use the 18 June 2008 version of HTML Tidy
(downloadable here:
http://www.paehl.com/open_source/?HTML_Tidy_for_Windows
).

The precise setting is
join-styles and it is ON by default:
"
join-styles
Type: Boolean
Default: yes
Example: y/n, yes/no, t/f, true/false, 1/0

This option specifies if Tidy should combine styles to generate a
single new style, if multiple style values are detected on an
element.
"
http://tidy.sourceforge.net/docs/qui...ml#join-styles

5-
<img src="treasure-map.jpg" class="clipped" style="width:38 0px; height:
374px">

You could try to define the clip property inline here. And that
*should* work in IE 7.

inline works fine, but the goal was to have a default clip rect that
page authors could override with an inline style, and that, whichever
was done, Javascript could access.

Hmm... you want
- to be able to access the declarative rule in the local stylesheet
- to be able to modify (set) clip property chosen by the author
- to be able to access (get) the inline style chosen by the author

I'm sure all this is doable in IE 6+. For the declarative rule in the
local stylesheet in IE 6+, you need to use

document.styles heets[0].rules[0].style.clip

I'm currently storing the default clip rect in a Javascript string. I'd
prefer to have authors be able to change the default in the CSS
stylesheet, but given my experience with Safari (Windows and Mac) and
IE, that seems like a lost cause.

It's doable. Sure of this.

I just do not have time right now to "play" with your webpage and to
examine more carefully your variables (rawStyle, compStyle) and
functions with your webpage.

Regards, Gérard

[GTalbot]

On Jul 15, 11:36*am, Chris Riesbeck <Chris.Riesb... @gmail.comwrote :

GTalbot wrote:

On Jul 14, 7:12 pm, Chris Riesbeck <Chris.Riesb... @gmail.comwrote :

According to
http://msdn.microsoft.com/en-us/libr...69(VS.85).aspx
clip does not apply to currentStyle object but applies to
runtimeStyle. So, you may want to verify this carefully.

I had hopes there for a second, not having seen a reference to
runtimeStyle before. Unfortunately

* * document.images[0].runtimeStyle.c lip

gives an empty result.

<shrugThen that's another IE bug... or another nth exaggeration/
shortcoming/error at MSDN2.

Gérard