aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Clipping an image as it is dragged Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login

Win a copy of EJB 3 in Action this week in the EJB and other Java EE Technologies forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Clipping an image as it is dragged" Watch "Clipping an image as it is dragged" New topic

Clipping an image as it is dragged

Peter Chase
Ranch Hand

Joined: Oct 30, 2001
Posts: 1970

I have a Web application where you can zoom in on part of a page, then drag the zoomed image around, to adjust what part you are seeing. Although this is not a mapping application, and I suspect my code is not like Google's, you can probably understand my application as being rather like Google Maps.

The image is inside a DIV. When in its normal position, the image fits wholly within the DIV. When dragged, parts of the image go outside the DIV. I want the image to clip, so that the bits outside the DIV are not visible.

I have used "position: relative" on the image; I then adjust "left" and "right" programmatically, to make the image move as the mouse is dragged. I use "overflow: hidden" on the enclosing DIV.

On FireFox and Safari browsers, this achieves what I want. But Internet Explorer does not clip, so the parts of the image outside the DIV are visible.

Any suggestions how I can get IE to behave like FF and Saf?
[ August 18, 2006: Message edited by: Peter Chase ]

Betty Rubble? Well, I would go with Betty... but I'd be thinking of Wilma.
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15286

Originally posted by Peter Chase:
Any suggestions how I can get IE to behave like FF and Saf?

Contact Bill Gates and tell him to have his developers create a browser that is w3c compliant. Sorry, not helpful, but couldn't resist.

GenRocket - A Test Data Generation Platform
Peter Chase
Ranch Hand

Joined: Oct 30, 2001
Posts: 1970
Feeding the troll a little bit, but hoping others won't turn this into a Browser Wars topic...

IE does have some annoying non-conformances, but some of its "extras" are rather nice things one wishes were standard. Some of the standards aren't as hard-and-fast as one might wish, too, meaning different but plausible interpretations are sometimes possible. I don't know whether my problem results from a deliberate non-compliance by IE or just a different interpretation of woolly standard.

Anyway, I have to make my app work with all three mentioned browsers, so wishing IE was better does not help.

Can anyone help with my original question?
Eric Pascarello

Joined: Nov 08, 2001
Posts: 15376
You doing something like this?

<div STYLE="overflow: hidden; position: absolute;
width: 20px; height: 20px; clip: rect(10px 30px 30px 10px)">There was a guy with a water gun</div>

Peter Chase
Ranch Hand

Joined: Oct 30, 2001
Posts: 1970
Here's the extracted code: -

And the styles: -

Some JavaScript then adjusts "left" and "right" properties of RoamDynamicImage element, as the user drags the mouse.
Peter Chase
Ranch Hand

Joined: Oct 30, 2001
Posts: 1970
I got a solution from a helpful poster on comp.lang.javascript .

There seems to be a small bug in IE. But it can be worked around by explicitly specifying a width and height for the enclosing DIV. It is OK to do this programmatically.
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
subject: Clipping an image as it is dragged
Similar Threads
Trying to make a dynamic web listing
JLabel pan image
[struts] using html:form across multiple divs
Move enlarged image around on mouseover - Image mapping
Boardgame to interactive GUI -- need help