Image jQuery scroller in a container. (like facebook cropper) can't get values of position.

Question

Hey all.

Having a reallllll mind pain.

I have a php image uploader which is all good and sotring the file and the jquery ajax is returning the image in an ammended html div with a div set up like this:

#crop-holder {
  width:80px;
  height:80px;
  margin:10px 10px 20px 10px;
  border:1px #c0c0c0 solid;
  overflow:hidden;
  cursor:move;
 }

The image is viewing fine and I am using the jquery scrollview plugin: http://code.google.com/p/jquery-scrollview/

I have tried adding a few lines to the plugin to store variables of scrollTop and Left and then replacing two hidden input values with x and y in my page. And then on the returned ajax html in the div I am trying to on a button click (for example) retrieve the values of the two hidden inputs....

Heres what i added to the plugin (i'm no js expert!):

.mouseout(function(){ 
 var _m = this.m;
    var lasty = _m.scrollTop();
   getElementById("ycord").value = lasty;
   var lastx = _m.scrollLeft();
  getElementById("xcord").value = lastx;
   self.stopgrab();
             })

Still no luck!!

How can I get the scrollTop and scrollLeft and successfully prepare them for sending onto another php script!?

Thanks:)

stefpretty

Answer 1

Hi, I've tried the example on http://jquery-scrollview.googlecode.com/svn/trunk/sample.html but only in safari, because firefox won't load it at all, and it didn't work.

If I understand you correctly, you want to use this data to crop the image?

If so, I would suggest the usage of a completely other jquery plugin: Jcrop

This plugin is especially for this kind of job, and in my opinion much better documented as scrollview.