CSS clip:rect wierdities

Visitors can check out the Forum FAQ by clicking this link. You have to register before you can post: click the REGISTER link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below. View our Forum Privacy Policy.
Want to receive the latest contracting news and advice straight to your inbox? Sign up to the ContractorUK newsletter here. Every sign up will also be entered into a draw to WIN £100 Amazon vouchers!

You are not logged in or you do not have permission to access this page. This could be due to one of several reasons:

You are not logged in. If you are already registered, fill in the form below to log in, or follow the "Sign Up" link to register a new account.
You may not have sufficient privileges to access this page. Are you trying to edit someone else's post, access administrative features or some other privileged system?
If you are trying to post, the administrator may have disabled your account, or it may be awaiting activation.

xoggoth replied

3 December 2009, 17:55
Hey! That's brill idea.
Leave a comment:
NickFitz replied

3 December 2009, 16:02
Originally posted by xoggoth View Post

Aaaagh! The lens is revealing details, like small garden buildings, not in the normal picture. Oh, its a slightly different photo, I thought my javascript was possesssed by evil spirits for a moment there.

Explains the small errors anyway.

This could be adapted for viewing porn in the office - boss walks in, release the mouse button, and all (s)he sees on your screen is a nice pie chart
Leave a comment:
xoggoth replied

3 December 2009, 15:29
Aaaagh! The lens is revealing details, like small garden buildings, not in the normal picture. Oh, its a slightly different photo, I thought my javascript was possesssed by evil spirits for a moment there.

Explains the small errors anyway.
Leave a comment:
NickFitz replied

3 December 2009, 14:29
Originally posted by xoggoth View Post

There you is, apart from very minor position errors to sort out, a real moving magnifier facility with no Flash or complicated libraries that works in IE or firefox. Really simple code in the end.

http://www.gatekeeperel.co.uk/temp/zoomnoflash.html

PS Nice if one could make it round. I think one can only do that with a bit of Flash.

Works in Chrome too, which should mean it works in Safari
Leave a comment:
xoggoth replied

3 December 2009, 14:07
There you is, apart from very minor position errors to sort out, a real moving magnifier facility with no Flash or complicated libraries that works in IE or firefox. Really simple code in the end.

http://www.gatekeeperel.co.uk/temp/zoomnoflash.html

PS Nice if one could make it round. I think one can only do that with a bit of Flash.

Last edited by xoggoth; 3 December 2009, 14:24.
Leave a comment:
NickFitz replied

3 December 2009, 11:14
Originally posted by xoggoth View Post

Ta. Beats me why so many decent references including MS, fails to say what the arguments are. Some expert on the net was sure it was x,y,w,h.

MS seems to have it right in their CSS reference

I tend to just go to the relevant specs for this kind of thing though
Leave a comment:
xoggoth replied

3 December 2009, 10:54
Ta. Beats me why so many decent references including MS, fails to say what the arguments are. Some expert on the net was sure it was x,y,w,h.
Leave a comment:
NickFitz replied

2 December 2009, 17:55
The order is top, right, bottom, left: imagine going clockwise from 12 o'clock, is the easiest way to remember it. This applies throughout CSS, so you also use this order on shortcut properties like border-width.

The most important points about clip are firstly, that it can only be applied to elements that are absolutely positioned; and secondly, that IE (less than 8) will fail if you use the syntax with commas: clip: rect(12px, 128px, 96px, -7px);

You have to use the version without commas: clip: rect(12px 128px 96px -7px);

Luckily everything supports the comma-less method for compatibility's sake

EDIT: Oops, chicane got there first. Still, the comma bit catches a lot of people out
Leave a comment:
xoggoth replied

2 December 2009, 17:49
Cheers chicane. Was tearing hair out thinking it was x,y,w,h and wondering why the image kept disappearing. Almost got summit working now.
Leave a comment:
chicane replied

2 December 2009, 17:03
The order of arguments is indeed as you specify. It might be more intuitive to think of it as top, right, bottom, left - ie clockwise order starting from top.
Leave a comment:
xoggoth started a topic CSS clip:rect wierdities

2 December 2009, 15:55
CSS clip:rect wierdities

Still messing around with zoomy scrolly stuff, it seems this should be pretty easy with filterrogidXImageTransform.Microsoft.AlphaImageLoader zoom method and clip:rect. (It only needs to work in IE6+)

Nothing says what the arguments to the first are and they appear quite bizarre. One would expect x,y,w,h by CSS standard but messing about with simple example below it appears to be y1,x2,y2,x1. Is this normal or some frigging bug in IE8? or have I got my monitor upside down? Don't want to waste time implementing in some buggy thing that is likely to change.

Has anyone actually used it?

<html>
<head>
</head>
<body>
<style type="text/css">
div {
background: url(test.jpg);
clip:rect(150px, 90px, 160px, 80px);
border:2px solid black;
height:300px;
width:300px;
position:absolute;
top:100px;
left:100px;
}

</style>
<div>
Clipped div box with image in the background.
</div>

</body>
</html>
Tags: None