Win a copy of Svelte and Sapper in Action this week in the JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

Clipping an image as it is dragged

 
Ranch Hand
Posts: 1970
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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 ]
 
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

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.
 
Peter Chase
Ranch Hand
Posts: 1970
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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?
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1970
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1970
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
    Bookmark Topic Watch Topic
  • New Topic