Move an image within a clip region

Discussion in 'Javascript' started by peter.chase@globalgraphics.com, Aug 21, 2006.

  1. Guest

    In my Web application, a have an image within a DIV. One of the allowed
    user gestures is to drag the image with the mouse. When dragging, parts
    of the image that would otherwise be displayed outside the DIV should
    be clipped.

    I had no trouble at all achieving this on FireFox and Safari. But I
    can't get Internet Explorer to do the clipping; it always shows the
    whole image, including the bits outside the DIV.

    Here's the HTML: -

    <div id="RoamImageDiv">
    <img id="RoamDynamicImage" src="...">
    </div>

    Here's the CSS: -

    #RoamImageDiv
    {
    text-align: center ;
    vertical-align: middle ;
    padding: 0px ;
    margin: 0px ;
    border: 0px ;
    overflow: hidden ;
    }

    #RoamDynamicImage
    {
    cursor: default ;
    position: relative ;
    }

    The JavaScript code handling mouse events simple adjusts the
    "style.left" and "style.top" of the image element, to make the image
    move as the mouse is dragged. This works on all the browsers (except
    the clipping thing on IE, of course).

    It is my understanding that the situation might be better if I used
    "absolute" positioning. However, the position is not really fixed, so
    "absolute" would be very difficult, if not impossible, to use in this
    situation. I did try dynamically switching to "absolute", after letting
    the browser do the layout with "relative", but this totally confused
    all the browsers!

    Any suggestions?
     
    , Aug 21, 2006
    #1
    1. Advertising

  2. marss Guest

    напиÑав:

    > I had no trouble at all achieving this on FireFox and Safari. But I
    > can't get Internet Explorer to do the clipping; it always shows the
    > whole image, including the bits outside the DIV.



    Specify DIV size

    #RoamImageDiv
    {
    ....
    height:150px;
    width:50px;

    }
     
    marss, Aug 21, 2006
    #2
    1. Advertising

  3. Guest

    marss wrote:

    > напиÑав:
    >
    > > I had no trouble at all achieving this on FireFox and Safari. But I
    > > can't get Internet Explorer to do the clipping; it always shows the
    > > whole image, including the bits outside the DIV.

    >
    >
    > Specify DIV size
    >
    > #RoamImageDiv
    > {
    > ...
    > height:150px;
    > width:50px;
    >
    > }


    Thanks.

    I have only tried it with the height and width hard-coded in the CSS,
    like you have shown. That works, but I cannot actually do it that way
    for real, because the size varies. I will now try setting height and
    width programmatically and see if it still works.
     
    , Aug 21, 2006
    #3
  4. Guest

    wrote:

    > marss wrote:
    >
    > > напиÑав:
    > >
    > > > I had no trouble at all achieving this on FireFox and Safari. But I
    > > > can't get Internet Explorer to do the clipping; it always shows the
    > > > whole image, including the bits outside the DIV.

    > >
    > >
    > > Specify DIV size
    > >
    > > #RoamImageDiv
    > > {
    > > ...
    > > height:150px;
    > > width:50px;
    > >
    > > }

    >
    > Thanks.
    >
    > I have only tried it with the height and width hard-coded in the CSS,
    > like you have shown. That works, but I cannot actually do it that way
    > for real, because the size varies. I will now try setting height and
    > width programmatically and see if it still works.


    Yep, works perfectly. Thanks!
     
    , Aug 21, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ben
    Replies:
    2
    Views:
    2,348
    Kevin Spencer
    Sep 13, 2005
  2. Manuel

    Clip a Graphics region

    Manuel, Jun 10, 2007, in forum: ASP .Net
    Replies:
    3
    Views:
    302
    Manuel
    Jun 10, 2007
  3. Gernot Frisch

    Clip/move a div

    Gernot Frisch, Feb 28, 2008, in forum: HTML
    Replies:
    0
    Views:
    556
    Gernot Frisch
    Feb 28, 2008
  4. SAL

    #Region #End Region issue

    SAL, Aug 29, 2008, in forum: ASP .Net
    Replies:
    1
    Views:
    373
    Alexey Smirnov
    Aug 29, 2008
  5. Mangler

    Suming data within a nested repeat region

    Mangler, Feb 4, 2009, in forum: ASP General
    Replies:
    1
    Views:
    173
    Adrienne Boswell
    Feb 5, 2009
Loading...

Share This Page