2

I have a page containined in an iFrame (With an external html page embedded in it) this page has a form and upon mouseover of the form submit button it calculates the hidden values of the form before submission.

I am in addition using the smoothzoom library in the form (http://codecanyon.net/item/smooth-zoom-pan-jquery-image-viewer/full_screen_preview/511142).

An example calculation is offset left of image calculated against the offset left of crop view.

I have inspected the elements in both chrome and firefox.

On mouseover all of the hidden fields update in firefox.

When as in chrome only two of them update. The X and Y.

Here is the jQuery I am using.

var hovered = false;
$(function(){
   $('#image').smoothZoom({
      width: 270,
      height: 270,
      zoom_MAX: 600,
      animation_SPEED: 0.001,
      animation_SMOOTHNESS: 0,
      initial_ZOOM: '100',
      initial_POSITION: '0 0'
   });
   $('#headerImageCont').hover(function(){
      hovered = true;
   },function(){
      hovered = false;
   });
   $(window).bind("mousewheel", function(event, delta){
      if (hovered === true){
         return false;
      }
   });
   $('#saveButton').mouseover(function(){
      $('#x').val(-$('#image').position().left); //needs to be inverted
      $('#y').val(-$('#image').position().top); //needs to be inverted
      $('#ScaleX').val($('#image').width() / 500);
      $('#ScaleY').val($('#image').height() / 423);
      $('#Scale').val($('#image').width() / 500 * 100);
      $('#target_width').val($('#headerImageCont').width());
      $('#target_height').val($('#headerImageCont').height());
      $('#actual_width').val($('#image').width());
      $('#actual_height').val($('#image').height());
   });
});
JCOC611
  • 19,111
  • 14
  • 69
  • 90
jaget
  • 2,149
  • 6
  • 21
  • 29
  • Try using breakpoints on them in Firebug lite... Dosent seem like there is any errors in your jquery. Could you remake the sceneario in jsfiddle or something? – Marco Johannesen Oct 21 '11 at 07:38
  • I think i've narrowed it down, the image in inspect mode is not showing its width. Therefore the jQuery $('#image').width(); doesn't seem to be working. Are there any alternatives to .width()? – jaget Oct 21 '11 at 08:23
  • Well it should be measuring the width... So it shouldnt matter. Are you sure it can find the image? – Marco Johannesen Oct 21 '11 at 08:35
  • I think I've figured the problem but not the solution. firefox does the translation differently it actually changes the widht and height. chrome uses webkit to translate3d. So is there any way to get the translate3d particularly the scale? – jaget Oct 21 '11 at 08:36
  • What do you get if you do $('#image').css('-webkit-transform'); – Marco Johannesen Oct 21 '11 at 08:43
  • I was just looking at that and found this post:: http://stackoverflow.com/questions/5603615/get-the-scale-value-of-an-element – jaget Oct 21 '11 at 08:44
  • The sample code in the link that follows can be used. I just need to manually take the crop view width and height and multiply by the scaleX. http://jsfiddle.net/umZHA/ – jaget Oct 21 '11 at 08:47

1 Answers1

0

The image in chrome did not use width and height in this particular browser. Instead I multiply the original width and height by the scale X and Y.

This can be achieve using chromes webkit values via this code.. http://jsfiddle.net/umZHA/

I hope this helps someone.

Thank you for your help Marco

jaget
  • 2,149
  • 6
  • 21
  • 29