File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/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
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
Author

Clipping an image as it is dragged

Peter Chase
Ranch Hand

Joined: Oct 30, 2001
Posts: 1970
Hi,

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: 15299
    
    6

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 - Experts at Building Test Data
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
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
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>

Eric
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.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Clipping an image as it is dragged