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/~riesbeck/demo/clip-demo.html

[GTalbot]

Re: getting computed clip rect

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/~riesbeck/demo/clip-demo.html

What's wrong with RefImage.style. clip?

It should work according to

http://msdn.microsoft.com/en-us/library/ms533569(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/Using_Web_Standards_in_your_Web_Pages:Making_your_page_using_web_standards_-_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]

Re: getting computed clip rect

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]

Re: getting computed clip rect

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/library/ms533569(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]

Re: getting computed clip rect

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/~riesbeck/demo/clip-demo.html

>
>
What's wrong with RefImage.style. clip?
>
It should work according to
>

http://msdn.microsoft.com/en-us/library/ms533569(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/Using_Web_Standards_in_your_Web_Pages:Making_your_page_using_web_standards_-_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]

Re: getting computed clip rect

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/library/ms533569(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]

Re: getting computed clip rect

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-Style/css.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]

Re: getting computed clip rect

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]

Re: getting computed clip rect

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/quickref.html#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]

Re: getting computed clip rect

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/library/ms533569(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

[Thomas 'PointedEars' Lahn]

Re: getting computed clip rect

GTalbot wrote:

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");
};
}

Those are not equivalent to `innerHTML', of course. In fact, passing a
string of HTML code will not cause an error message but display it unparsed
in the document.


PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

[GTalbot]

Re: getting computed clip rect

On Jul 15, 4:34 pm, GTalbot <newsgr...@gtal bot.orgwrote:

The whole thing can be made
a lot more dynamic, in real-time, even mouse-interactive-driven.

One example of such capability to create a mouse-interactive DHTML
driven demo on clip which will work even for IE 6:

http://www.gtalbot.org/DHTMLSection/DynamicClipDemo.html

as the clip property cropping the vertical and horizontal lines (which
in fact are the borders of <div>s) is set by the mouse coordinates
within the browser window viewport in real-time.

From reading your post and examining your webpage, maybe... just a
hunch... you want to achieve what these webpages have been talking,
explaining...:

Creating Thumbnails Using the CSS Clip Property

http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html

Misunderstood CSS Clip

http://www.ibloomstudios.com/articles/misunderstood_css_clip/

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug33

http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/#bug18

Regards, Gérard
--
Internet Explorer 7 bugs: 156 bugs so far

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

[Thomas 'PointedEars' Lahn]

Re: getting computed clip rect

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().

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

How can you know this about IE 8 when it is still beta 1?

>But that doesn't seem to work in Safari for Windows 3,

It works there. You must be doing something wrong.

BTW, there are developer tools built in Safari:

See <http://developer.apple .com/internet/safari/faq.html#anchor 14>
and e.g.
<http://www.rugbyincana da.com/webmaster/2008/04/debugging-tools-for-web-applications.as px>

>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.

It might be necessary to use HTML 4.01 Transitional, for the `target' attribute.

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

This would only work if the first child node of the element was a text node.

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/

The Web Developer extension is the more versatile tool for Firefox, but
unless you have a validator installed on your local Web server, it requires
an Internet connection for validation:

<https://addons.mozilla. org/firefox/addon/60>

However, one does not need an add-on for validation:

<http://validator.w3.or g/>

--

Your signature delimiter is still borken, which is why your signature is not
recognized and might be regarded as spam (due to the URIs in it). The
delimiter must be dash-dash-space-CR-LF. I suggest not to use signatures
with Google Groups, and better not to use Google Groups for posting in the
first place, for the number of serious flaws of its Web interface.


PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

[Chris Riesbeck]

Re: getting computed clip rect

dhtml wrote:

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.current Style.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.

My problem is getting the data, not constructing a new rect.

>
Another consideration with clip is that it can also be represented by
a Rect:

http://www.w3.org/TR/DOM-Level-2-Style/css.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(' ')+')';}
};
}

Since no clip object is on the style object (any of them), the above
doesn't work.

I made a simpler version of the example. Now it's just one image, no
Javascript, and text giving Javascript lines to execute in the address
bar to demonstrate the problem. Just to avoid distracting people with
other issues.

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

>
>
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>

I didn't follow this part and how it might help. Are you saying a
class-defined clip rect on a DIV would be accessible to Javascript where
the same thing on an IMG would not be?

>
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/

>

[Chris Riesbeck]

Re: getting computed clip rect

GTalbot wrote:

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.

I simplified the demo file to just have the image, stylesheet, and text
showing the Javascript one-liners that don't work for me in IE and
Safari. Still at

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

>
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.

Thanks. I thought there was some way to get to the stylesheets
themselves but failed to find the relevant W3C pages when searching
yesterday.

Since my pages will appear in contexts with many other stylesheets, and
I won't know which one my rule is in, I have to search the selector
texts in all the rules in all the stylesheets. I've written a loop to do
that, but it's not as general as real CSS rules on what selectors it
recognizes as relevant, and it doesn't combine multiple rules like real CSS.

Still, it seems like the only way to go that works reliably across more
than 2 browsers.

Thanks again for the time and effort and valuable pointers.

>
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/quickref.html#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