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

But that doesn't seem to work in Safari for Windows 3, nor when I use
image.currentStyle.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 <[e-mail]:

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

Hello Chris,

IE 7 and IE 8 final version will not support document.defaultView nor
getComputedStyle method.

But that doesn't seem to work in Safari for Windows 3, nor when I use
image.currentStyle.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="JavaScript"
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.getElementById(id).innerHTML = 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.getElementById(id).childNodes[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.getElementById(id).innerHTML = textparam;
}
else {alert("This parameter can not be resolved as text");};
}

4-
<div style="position:relative" style="width:100px; 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:380px; 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 <[e-mail]:

function writeText(id, textparam)
{
if(typeof textparam == "string")
{
* document.getElementById(id).innerHTML = 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.getElementById(id).childNodes[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 <[e-mail]:

But that doesn't seem to work in Safari for Windows 3, nor when I use
image.currentStyle.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 <[e-mail]:

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

Hello Chris,

IE 7 and IE 8 final version will not support document.defaultView nor
getComputedStyle 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.currentStyle.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="JavaScript"
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.getElementById(id).innerHTML = 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:100px; 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:380px; 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 <[e-mail]:

>But that doesn't seem to work in Safari for Windows 3, nor when I use
image.currentStyle.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.clip

gives an empty result. When I execute

javascript:alert(document.images[0].style.clip + "#" +
document.images[0].currentStyle.clip + "#" +
document.images[0].runtimeStyle.clip)

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 <[e-mail]:

On Jul 14, 7:12*pm, Chris Riesbeck <[e-mail]:

But that doesn't seem to work in Safari for Windows 3, nor when I use
image.currentStyle.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 getCurrentStyleClipValues(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(clipValue);
}
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'>lots of large contents...</div>
</div>

Garrett

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

[dhtml]

On Jul 15, 12:11*pm, dhtml <[e-mail]:

On Jul 14, 11:21*pm, GTalbot <[e-mail]:On Jul 14,7:12*pm, Chris Riesbeck <[e-mail]:

missing variable from enclosing scope.

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

Garrett

Gérard
--

[GTalbot]

On Jul 15, 11:36*am, Chris Riesbeck <[e-mail]:

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.defaultView 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.styleSheets)
{
if("cssRules" in document.styleSheets[0]) // DOM 2 Stylesheets
compliant
{
alert("document.styleSheets[0].cssRules[0].style.clip = " +
document.styleSheets[0].cssRules[0].style.clip);
}
else if("rules" in document.styleSheets[0]) // IE 6+
{
alert("document.styleSheets[0].rules[0].style.clip = " +
document.styleSheets[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:100px; 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:380px; 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.stylesheets[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 <[e-mail]:

GTalbot wrote:

On Jul 14, 7:12 pm, Chris Riesbeck <[e-mail]:

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

gives an empty result.

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

Gérard

[Thomas 'PointedEars' Lahn]

GTalbot wrote:

On Jul 15, 2:07 am, GTalbot <[e-mail]:

>function writeText(id, textparam)
{
if(typeof textparam == "string")
{
document.getElementById(id).innerHTML = 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.getElementById(id).childNodes[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]

On Jul 15, 4:34*pm, GTalbot <[e-mail]:

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/...cClipDemo.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-th...-property.html

Misunderstood CSS Clip
http://www.ibloomstudios.com/article...tood_css_clip/

http://www.gtalbot.org/BrowserBugsSe...IE7Bugs/#bug33
http://www.gtalbot.org/BrowserBugsSe...IE8Bugs/#bug18

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

[Thomas 'PointedEars' Lahn]

GTalbot wrote:

On Jul 14, 7:12 pm, Chris Riesbeck <[e-mail]:

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

[...]
IE 7 and IE 8 final version will not support document.defaultView nor
getComputedStyle 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#anchor14>
and e.g.
<http://www.rugbyincanada.com/webmaster/2008/04/debugging-tools-for-web-applications.aspx>

>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.getElementById(id).childNodes[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:100px; 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.org/>

--

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]

dhtml wrote:

On Jul 14, 11:21 pm, GTalbot <[e-mail]:

>On Jul 14, 7:12 pm, Chris Riesbeck <[e-mail]:

>>But that doesn't seem to work in Safari for Windows 3, nor when I use
image.currentStyle.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-Sty....html#CSS-Rect

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

function getCurrentStyleClipValues(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(clipValue);
}
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/~ries...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'>lots 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/BrowserBugsSection/MSIE7Bugs/
Internet Explorer 8 bugs: 130 bugs so farhttp://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/

[Chris Riesbeck]

GTalbot wrote:

On Jul 15, 11:36 am, Chris Riesbeck <[e-mail]:

>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.defaultView 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/~ries...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.styleSheets)
{
if("cssRules" in document.styleSheets[0]) // DOM 2 Stylesheets
compliant
{
alert("document.styleSheets[0].cssRules[0].style.clip = " +
document.styleSheets[0].cssRules[0].style.clip);
}
else if("rules" in document.styleSheets[0]) // IE 6+
{
alert("document.styleSheets[0].rules[0].style.clip = " +
document.styleSheets[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:100px; 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:380px; 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.stylesheets[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

[Chris Riesbeck]

GTalbot wrote:

On Jul 15, 4:34 pm, GTalbot <[e-mail]:

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

That's a neat effect. But as far as I can see, you only *set* the clip
rectangle. You don't try to use an existing clip rect created by a class
style rule.

The actual application I'm doing is yet another "magnifier." The current
demo is here

http://www.cs.northwestern.edu/~ries...magnifier.html

The bit I was trying to improve was the "custom magnifier size" option,
specifically the way to change the default size.

>
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-th...-property.html

Misunderstood CSS Clip
http://www.ibloomstudios.com/article...tood_css_clip/

http://www.gtalbot.org/BrowserBugsSe...IE7Bugs/#bug33
http://www.gtalbot.org/BrowserBugsSe...IE8Bugs/#bug18

Regards, Gérard

Thanks for the links.

--
Internet Explorer 7 bugs: 156 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

[Chris Riesbeck]

Thomas 'PointedEars' Lahn wrote:

GTalbot wrote:

>On Jul 14, 7:12 pm, Chris Riesbeck <[e-mail]:

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

[...]
IE 7 and IE 8 final version will not support document.defaultView nor
getComputedStyle 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.

I assume you're replying to me, not Gerald. And I'd love to find out
that I'm doing something wrong. As I've just posted in this thread, the
current demo of the problem is at

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

and when I try executing

javascript:alert(document.defaultView.getComputedS tyle(document.images[0],
null).clip)

in Safari (Windows and Mac) I get nothing. It works fine in Firefox and
Opera. I don't know to make the example any simpler.

>

>--

Your signature delimiter is still borken,

Still? I hadn't noticed a previous comment about that.

which is why your signature is not
recognized

Recognized by what?

and might be regarded as spam (due to the URIs in it). The
delimiter must be dash-dash-space-CR-LF.

OK

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.

I don't use Google Groups (except to search archives). I use Thunderbird
as my reader and News.Individual.Net as my server.

>

PointedEars

[SAM]

Chris Riesbeck a écrit :

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

function modifClip(nber) {
document.images[nber].style.clip = 'rect(30px 200px 100px 30px)';
}

And if the "goal is to get the clip style, the easiest way is to have
the style in attribute of the element to re-style.
(inline style)

<img src="test.gif" alt=""
style="clip: rect(5px 400px 220px 5px);">
function modifyClip(nber) {
var clip = document.images[nber].style.clip;
clip = clip.replace(/[A-Za-z\(\)]/g,'').split(/[^0-9]{1,2}/);
document.images[nber].style.clip = 'rect('+clip[0]*.5+'px '+
(clip[1]-50)+'px '+
(clip[2]-20)+'px '+
'30px)';
}

Tested in Firefox and Safary (but not in IE)

With :
clip: rect(5px 400px 220px 5px);
Firefox adds himself ',' to get :
clip: rect(5px, 400px, 220px, 5px);
while Safary.3 doesn't.

My actual application needs XHTML

So, no style attribute in tags, no ?

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

that is absolutely possible

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.

rien compris !
what doesn't work ?
You want to change a JS instruction using CSS ?
Really ?

--
sm

[Chris Riesbeck]

SAM wrote:

Chris Riesbeck a écrit :

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

function modifClip(nber) {
document.images[nber].style.clip = 'rect(30px 200px 100px 30px)';
}

And if the "goal is to get the clip style, the easiest way is to have
the style in attribute of the element to re-style.
(inline style)

<img src="test.gif" alt=""
style="clip: rect(5px 400px 220px 5px);">

Which doesn't meet the goal of getting the clip rect when it's defined
in a class. I know how to do it when it's defined inline.

>inline works fine, but the goal was to have a default clip rect that
page authors could override with an inline style,

that is absolutely possible

Not from what I've tried so far, as documented in previous postings and
this demo file:

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

I'm hoping I have some simple error in CSS or Javascript. Thanks to
Gerard, I have a workaround that accesses the stylesheet objects, but
it's not as general or robust.

>

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

rien compris !
what doesn't work ?
You want to change a JS instruction using CSS ?
Really ?

No, I just need an initial default clip rect -- really just it's width
and height -- that JS can use. See the magnifier demo:

http://www.cs.northwestern.edu/~ries...magnifier.html

[Chris Riesbeck]

Chris Riesbeck wrote:

Thomas 'PointedEars' Lahn wrote:

>GTalbot wrote:

>>On Jul 14, 7:12 pm, Chris Riesbeck <[e-mail]:
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.defaultView.getComputedStyle().
[...]

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

It works there. You must be doing something wrong.

I assume you're replying to me, not Gerald.

Apologies - I meant Gerard.

[SAM]

Chris Riesbeck a écrit :

SAM wrote:

>Chris Riesbeck a écrit :

>>>
inline works fine, but the goal was to have a default clip rect that
page authors could override with an inline style,

that is absolutely possible

Not from what I've tried so far, as documented in previous postings and
this demo file:

If I have a clip style for images in the head
and another clip style inline for one image, this inline style wins
(Fx, Safari)

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

Try on this page :
javascript:document.images[0].style.clip='rect(50px 120px 120px 50px)';
That works in my Safary
but not in my Fx (don't know why)

>You want to change a JS instruction using CSS ?
Really ?

No, I just need an initial default clip rect -- really just it's width
and height -- that JS can use. See the magnifier demo:

Yes but you want so much (too much ?).
(style in a class, class in an external style sheet)

http://www.cs.northwestern.edu/~ries...magnifier.html

I've something with same effect (not from me) archived somewhere in my DD.

--
sm

[GTalbot]

On Jul 15, 6:34*pm, Chris Riesbeck <[e-mail]:

(...) You don't try to use an existing clip rect created by a class
style rule.

The actual application I'm doing is yet another "magnifier." The current
demo is here

http://www.cs.northwestern.edu/~ries...r_v2/magnifier....

Ok. Well, from that JS magnifier demo webpage, I would access (get)
the clip declaration like this:

document.styleSheets[0].rules[2].style.clip

as this would access the
magnifier.css
file, then its 3rd rule and its clip declaration when IE would be
involved.
[addendum]
I tried

javascript:alert("document.styleSheets[0].rules[2].style.clip = " +
document.styleSheets[0].rules[2].style.clip);

in your magnifier webpage in IE 7 and it worked! It returned the
correct declarative values for the clip declaration.
[/addendum]

You could even change dynamically the clip declaration at run-time in
IE 7 also like this

document.styleSheets[0].rules[2].style.clip = "rect(12px 34px 56px
78px)";

but doing such should not be done when in intensive, very demanding
DHTML action like my dynamic clip property demo.

Regards, Gérard

[dhtml]

On Jul 15, 3:07*pm, Chris Riesbeck <[e-mail]:

dhtml wrote:

On Jul 14, 11:21 pm, GTalbot <[e-mail]:

On Jul 14, 7:12 pm, Chris Riesbeck <[e-mail]:

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

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

Did you read this?

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.

What data? I thought you were trying to get the "clip" value.

>

<div id="clipLayer">
* <div id='content'>lots 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?

No, it is not.

The idea was to use a different approach. If you use the container
'clipLayer' approach, you don't have to use 'clip' at all.
http://www.w3.org/TR/CSS21/visufx.html#overflow

#clipLayer {
height: 100px;
width: 100px;
position: relative;
overflow: hidden;
}

#clipLayer img {
width: 120px;
height: 200px;
}
<div id='clipLayer'><img src="yiyoi.jpg"/></div>

The img will be partially hidden by its containing block.

>

Garrett

Gérard

[SAM]

GTalbot a écrit :

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

Thanks a lot for this code.

Firefox, Safari.3, iCab.4 : OK
Opera.9, iCab.3 : message 'requires support'
IE 5.2 (Mac) : JS error code
--if("cssRules" in document.styleSheets[0])

Working with IE Mac :

if(document.styleSheets)
{
var d = document.styleSheets[0];
if(d.rules)
{
for ( var i=0, n = d.rules.length; i<n; i++)
{
if(d.rules[i])
{
alert('document.styleSheets[0].rules['+i+'].style.clip = ' +
document.styleSheets[0].rules[i].style.clip);
};
}
}
else
if(d.cssRules)
{
for ( var i=0, n = d.cssRules.length; i<n; i++)
{
if(d.cssRules[i])
{
alert("document.styleSheets[0].cssRules["+i+"].style.clip = "+
document.styleSheets[0].cssRules[i].style.clip);
}
}
}
}
else
{
alert("This script requires support for accessing the list of " +
"stylesheets. Javascript support enabled is required too.");
};
}
And now, what to do for Opera 9 ?

--
sm

[Chris Riesbeck]

dhtml wrote:

On Jul 15, 10:37 pm, GTalbot <[e-mail]:

>On Jul 15, 6:34 pm, Chris Riesbeck <[e-mail]:

>Ok. Well, from that JS magnifier demo webpage, I would access (get)
the clip declaration like this:

document.styleSheets[0].rules[2].style.clip

Why do you feel this is better advice then using the clipTop and
friends?

I don't know about Gerard but I'd given up on clipTop and friends when
they returned nothing in IE on style and runtimeStyle. But you're
correct that I do get valid values when they're applied to currentStyle.

javascript:alert(document.images[0].currentStyle.clipTop)

etc on the demo page

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

So that would leave just Safari of the browsers I've tried (FF, IE,
Opera) needing to access the stylesheets.

[Chris Riesbeck]

dhtml wrote:

On Jul 15, 3:07 pm, Chris Riesbeck <[e-mail]:

>dhtml wrote:

>>On Jul 14, 11:21 pm, GTalbot <[e-mail]:
On Jul 14, 7:12 pm, Chris Riesbeck <[e-mail]:
But that doesn't seem to work in Safari for Windows 3, nor when I use
image.currentStyle.clip in IE 7.
(...)
http://www.cs.northwestern.edu/~ries...clip-demo.html
Another thing.

Did you read this?

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

Yes, after Gerard pointed me to it. That's why the demo page tries
style, currentStyle, and runtimeStyle, with no luck

Which is why I'm confused (though happy) that clipTop et al. work on
currentStyle, not runtimeStyle. Seems inconsistent.

>

>><div id="clipLayer">
<div id='content'>lots 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?

No, it is not.

The idea was to use a different approach. If you use the container
'clipLayer' approach, you don't have to use 'clip' at all.
http://www.w3.org/TR/CSS21/visufx.html#overflow

#clipLayer {
height: 100px;
width: 100px;
position: relative;
overflow: hidden;
}

#clipLayer img {
width: 120px;
height: 200px;
}
<div id='clipLayer'><img src="yiyoi.jpg"/></div>

The img will be partially hidden by its containing block.

Ah. That looks like a more portable alternative. Will try it out. Thanks.

[Thomas 'PointedEars' Lahn]

Chris Riesbeck wrote:

Thomas 'PointedEars' Lahn wrote:

>GTalbot wrote:

>>Chris Riesbeck wrote:
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.defaultView.getComputedStyle().
[...] IE 7 and IE 8 final version will not support
document.defaultView nor getComputedStyle 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.

I assume you're replying to me, not Gerald.

I replied to the both of you at the same time, with the quotation level
indicating to whose statement I am referring to. As it is accepted in
Usenet to save time when replying (or when one of the quoted authors has
been killfiled).

As you are using Thunderbird, I suggest you install and configure the Quote
Colors extension. It eases following discussions.

And I'd love to find out that I'm doing something wrong. As I've just
posted in this thread, the current demo of the problem is at

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

and when I try executing

javascript:alert(document.defaultView.getComputedS tyle(document.images[0],
null).clip)

in Safari (Windows and Mac) I get nothing. It works fine in Firefox and
Opera. I don't know to make the example any simpler.

According to the W3C Markup Validator[1] and CSS Validator[2], your HTML and
CSS code are still not Valid. You should fix that first and see if it helps.

[1]
<http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cs.northwestern.edu%2F% 7Eriesbeck%2Fdemo%2Fclip-demo.html&charset=%28detect+automatically%29&docty pe=Inline&group=0&ss=1&verbose=1>
[2]
<http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.cs.northwestern.edu %2F%7Eriesbeck%2Fdemo%2Fclip-demo.html&profile=css21&usermedium=all&warning=1&l ang=de>

>>--

Your signature delimiter is still borken,

Still? I hadn't noticed a previous comment about that.

Because you are obviously new to this newsgroup.

>which is why your signature is not recognized

Recognized by what?

Most newsreader software.

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

I don't use Google Groups (except to search archives). I use Thunderbird
as my reader and News.Individual.Net as my server.

And that is good so. (Obviously this comment of mine was not made in
reference to you or your posting.)
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>

[dhtml]

On Jul 16, 7:24*am, Chris Riesbeck <[e-mail]:

dhtml wrote:

On Jul 15, 10:37 pm, GTalbot <[e-mail]:

On Jul 15, 6:34 pm, Chris Riesbeck <[e-mail]:

Ok. Well, from that JS magnifier demo webpage, I would access (get)
the clip declaration like this:

document.styleSheets[0].rules[2].style.clip

Why do you feel this is better advice then using the clipTop and
friends?

I don't know about Gerard but I'd given up on clipTop and friends when
they returned nothing in IE on style and runtimeStyle. But you're
correct that I do get valid values when they're applied to currentStyle.

* *javascript:alert(document.images[0].currentStyle.clipTop)

etc on the demo page

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

So that would leave just Safari of the browsers I've tried (FF, IE,
Opera) needing to access the stylesheets.

There is also getPropertyCSSValue, which should return a Rect, but
doesn't work (incorrectly returns null) in Current version Safari:
Version 3.1.1 (4525.18).
http://www.w3.org/TR/DOM-Level-2-Sty....html#CSS-Rect

javascript:
alert(document.defaultView.getComputedStyle(docume nt.getElementById('spring'),
'').getPropertyCSSValue('clip'))

See also:
https://bugs.webkit.org/show_bug.cgi?id=17433

[Chris Riesbeck]

Chris Riesbeck wrote:

dhtml wrote:

>>
The idea was to use a different approach. If you use the container
'clipLayer' approach, you don't have to use 'clip' at all.
http://www.w3.org/TR/CSS21/visufx.html#overflow

#clipLayer {
height: 100px;
width: 100px;
position: relative;
overflow: hidden;
}

#clipLayer img {
width: 120px;
height: 200px;
}

<div id='clipLayer'><img src="yiyoi.jpg"/></div>

The img will be partially hidden by its containing block.

Ah. That looks like a more portable alternative. Will try it out. Thanks.

For those playing along, I have a version of the magnifier running using
dhtml's suggestion. Seems happy in FF, IE, Opera and Safari, thanks to
not using clip rectangles any more. That means no stylesheet searching,
though I still need to get the computed / current style.

http://www.cs.northwestern.edu/~ries...magnifier.html

Thanks to one and all.

[Laurent vilday]

Thomas 'PointedEars' Lahn a écrit :

Chris Riesbeck wrote:

>I assume you're replying to me, not Gerald.

I replied to the both of you at the same time, with the quotation level
indicating to whose statement I am referring to. As it is accepted in
Usenet to save time when replying (or when one of the quoted authors has
been killfiled).

LOL, you are so funny. Accepted or not (by whom by the way ?), replying
to 2 different people at the same time is a bad bad bad (did I said bad
?) practice. But I guess nothing apply to you, you, the ubber german genius.

And just don't answer to authors in your killfile.
Oh no I got a better one. Just don't answer to anyone.

PointedEars

Your signature is broken. You have been told millions times.

--
laurent