How does Facebook edit profile thumbnails with Javascript?

by
In this blog, I will show you my version of how Facebook edits their profile thumbnails using Javascript. The Javascript part is actually quite simple. However, it is the PHP part of the script that makes everything complicated. So to be more specific, I am going to show you how Facebook can move a picture within a DIV tag.

Before I show you the code, here is a preview of what the code does:

= 0) {dobj.style.left = 0; xvalue = 0;} if (xvalue = 0) {dobj.style.top = 0; yvalue = 0;} if (yvalue
Original Picture
Original Picture 		Thumbnail Preview (60 x 60)
Thumbnail Preview
X Value Offset:
Y Value Offset:


Now here is the actual code but after you look at this, read the comments below so I can explain what is going on.

<style>
<!–
.dragme{position:relative;}
–>
</style>

var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX – x : tx + event.clientX – x;
var xvalue = nn6 ? tx + e.clientX – x : tx + event.clientX – x;
if (xvalue >= 0)
{dobj.style.left = 0; xvalue = 0;}
if (xvalue //this is the xvalue offset that is shown in the input text field in the thumbnail preview. It is actually the width of the picture minus the width of the thumbnail times negative one.
{dobj.style.left = -140; xvalue = -140;}
document.getElementById(‘xpanel’).value = xvalue;
dobj.style.top = nn6 ? ty + e.clientY – y : ty + event.clientY – y;
var yvalue = nn6 ? ty + e.clientY – y : ty + event.clientY – y;
if (yvalue >= 0)
{dobj.style.top = 0; yvalue = 0;}
if (yvalue //this is the yvalue offset that is shown in the input text field in the thumbnail preview. It is actually the height of the picture minus the height of the thumbnail times negative one.
{dobj.style.top = -278; yvalue = -278;}
document.getElementById(‘ypanel’).value = yvalue;
return false;
}
}

function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? “HTML” : “BODY”;

while (fobj.tagName != topelement && fobj.className != “dragme”)
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}

if (fobj.className==”dragme”)
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}

document.onmousedown=selectmouse;
document.onmouseup=new Function(“isdrag=false”);

//–>

 

<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="50%" align="center">
<b>Original Picture</b><br />
<img src="http://www.spadyville.com/images/kz63ydso.jpeg" height="338" width="200" alt="Original Picture" />
</td>
<td width="50%" align="center">
<b>Thumbnail Preview (60 x 60)</b><br />

width: 60px; height: 60px; overflow: hidden; position: relative; text-align:left;”>
left:-125px; top:-42px” src=”http://www.spadyville.com/images/kz63ydso.jpeg” height=”338″ width=”200″ alt=”Thumbnail Preview” />

X Value Offset:<input id="xpanel" type="text" value="-125" /><br />
Y Value Offset:<input id="ypanel" type="text" value="-42" /><br />
</td>
</tr>
</table>



In the script above, I commented to show you what the xvalue and yvalue offsets where in the script. The blue highlighted text shows the width and height of the thumbnail. You can change these values but you will have to subtract the values to the xvalue and yvalue text I commented above. The red highlighted text shows the picture offset. You change this (which must be negative) to keep your picture in place wherever you want it.

It actually took me some research to figure this out but when I found it I figured I would make it easier for other people to find. Leave a comment below and let me know if this was easy for you to find and if this is what you were looking for.

Enjoy!!!

Old URL: http://spadyville.com/how-does-facebook-edit-profile-thumbnails-with-javascript-blog

Leave a Comment