• 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!

CSS clip:rect wierdities

Collapse
X
  •  
  • Filter
  • Time
  • Show
Clear All
new posts

    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>
    bloggoth

    If everything isn't black and white, I say, 'Why the hell not?'
    John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

    #2
    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.

    Comment


      #3
      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.
      bloggoth

      If everything isn't black and white, I say, 'Why the hell not?'
      John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

      Comment


        #4
        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

        Comment


          #5
          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.
          bloggoth

          If everything isn't black and white, I say, 'Why the hell not?'
          John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

          Comment


            #6
            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

            Comment


              #7
              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.
              bloggoth

              If everything isn't black and white, I say, 'Why the hell not?'
              John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

              Comment


                #8
                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

                Comment


                  #9
                  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.
                  bloggoth

                  If everything isn't black and white, I say, 'Why the hell not?'
                  John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

                  Comment


                    #10
                    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

                    Comment

                    Working...
                    X