profile module, unable to create avatar in IE, opera. with solution

[mangust]

Hi, i am fixing profile plugin. Users of my test site can't create avatar on their profiles. I am nearly to fix it. But need help from original coder.

Issue was reported on IE and Opera, but no problem in Firefox.

1. Noticed that IE complain:

Message: Invalid argument.
Line: 315
Char: 5
Code: 0
URI: ​http://live.riki.ru/mod/profile/views/default/js/jquery.imgareaselect-0.4.2.js

2. I've updated imgareaselect script to latest version from ​http://odyniec.net/projects/imgareaselect/. Because i seen it work on IE. Problem gone, but

3. Appear in mod/profile/editicon.php, function preview around line 70 ( $("#user_avatar_preview > img").css({....... ):

function preview(img, selection) {

add this line to prevent IE/Opera bug

if ( selection.width == 0

selection.height ==0 ) return;

var origWidth = $("#user_avatar").width(); get the width of the users master photo
var origHeight = $("#user_avatar").height(); get the height of the users master photo
var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;

$("#user_avatar_preview > img").css({

'width' : Math.round(scaleX * origWidth) + 'px',
'height' : Math.round(scaleY * origHeight) + 'px',
'marginLeft' : '-' + Math.round(scaleX * selection.x1) + 'px',
'marginTop' : '-' + Math.round(scaleY * selection.y1) + 'px'

});

}

4. Problem is that then you just click on an image selection.width and selection.width become 0. After some math manipulation some zeroes and infinity values going to .css function. And IE reject to apply that values.

5. Solution is to add check

if ( selection.width == 0

selection.height ==0 ) return;

just in the beginning of a function to prevent IE/Opera confusion.

I'm new in trac system. Let me know if i do wrong report or any hints.

[cash]

I can confirm that you cannot select a region in Elgg 1.6 for the profile icon with IE8.

[tomv]

Also problem in IE7
Proposed solution does not work for me; instead also breaks function in FF

[tomv]

Ok, solution that works is:

in .../mod/profile/views/default/profile/editicon.php

Line 68..

function to display a preview of the users cropped section
function preview(img, selection) {

var sw = selection.width;
var sh = selection.height;
if ( sw == 0 ) { sw =1; }
if ( sh == 0 ) { sh =1; }

var origWidth = $("#user_avatar").width(); get the width of the users master photo
var origHeight = $("#user_avatar").height(); get the height of the users master photo
var scaleX = 100 / sw;
var scaleY = 100 / sh;
$('#user_avatar_preview > img').css({

width: Math.round(scaleX * origWidth) + 'px',
height: Math.round(scaleY * origHeight) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'

});

}

[cash]

Fixed in plugins commit 1139