473,851 Members | 2,043 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

getting computed clip rect

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
Jul 14 '08 #1
29 4108
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/
Jul 15 '08 #2
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/
Jul 15 '08 #3
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/
Jul 15 '08 #4
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/
Jul 15 '08 #5
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/
Jul 15 '08 #6
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/
Jul 15 '08 #7
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
--
Jul 15 '08 #8
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
Jul 15 '08 #9
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
Jul 15 '08 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
2005
by: roman | last post by:
Hello, I've just downloaded and installed Opera711, good browser. Most of my scripts work just fine, except the ones that use "clip" property. Opera docs say that it's supported but I can't get it to work. It seems that clip is some kind of object (some kind of rect?) but I'm unable to read it's properties, only methods. It has only one method "replace". Can you tell me what's going on there? And why can't I read properties of objects...
2
6450
by: Alex NSB | last post by:
Hi all. Consider the following page: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML><HEAD><TITLE>Test</TITLE> <STYLE TYPE="text/css"> <!-- #mylayerDiv {position:absolute;left:50px;top:50px;clip:rect(0px, 50px, 50px,
0
2157
by: Matt Kruse | last post by:
I'm making changes to an intranet web app that uses only IE6 as the browser. It makes use of CSS expressions for dynamic positioning and other tricks, and it works quite well. My question is: Why can't I get expressions to work as values in a clip definition? This works fine to hide the top half of the table: <table border="1" style="position:absolute;clip:rect(50%,auto,auto,auto);">
21
4013
by: Michael Bierman | last post by:
Please forgive the simplicy of this question. I have the following code which attempts to determine the color of some text and set other text to match that color. It works fine in Firefox, but does nothing in IE. I'd be greatful for any assistance. Also, if I will have problems the code on Opera or Safari, I'd appreciate any pointers--I don't have a Mac to test Safari. THanks very much, Michael
15
31825
by: Anand Ganesh | last post by:
HI All, I have an Image. I want to clip a portion of it and copy to another image. How to do this? I know the bounding rectangle to clip. Any suggestions please. Thanks for your time and help. Regards
2
6615
by: Julie | last post by:
How do you retrieve the visible clipping region for a control? I have a control where I do some on-screen drawing (specifically ControlPaint.DrawReversibleLine()), however I need to clip the line to the visible bounds of my control. Obviously, the client rect is simple enough to retrieve, but what I need to do is to clip the line segment to only that portion of the control that is visible, which may _not_ correspond to the client rect...
3
1816
by: Manuel | last post by:
Hi to all, I have a System.Drawing.Graphics, I need to clip a region and put it in a different another Graphics with the size of clipped region. There's suggestion or a tutorial? Thanks in advice
5
5980
cameokid
by: cameokid | last post by:
Can someone help me out with this. Here is what i am trying to do. I have an image of size 310x310. Initially i am displaying only 50x50 using clip property. Later using setTimeout property i am trying to get the entire image so that it looks like animation. But this doesn't happen with the code below <html> <head> <style type="text/css"> .img1 { position:absolute;
0
9897
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10670
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10728
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10356
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7906
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5736
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5933
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4549
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4143
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.