Resizer

gibney.org : Technology : Javascript : Bookmarklets : Resizer
Resizer
(Entry Nr. 43, by user 1 | edit)
/*
Bookmarklet Script by Gibney-Enterprises

This one adds a littel scale-handle to a textarea

Create a bookmarklet with an uri like this:
javascript:if (document.createElement){void(head=document.getElementsByTagName('head').item(0));void(script=document.createElement('script'));void(script.src='http://javascript.gibney.org/resizer.js');void(script.type='text/javascript');void(head.appendChild(script));}

*/


var isDOM=document.getElementById&&!document.all;

var drag=false;
var objOffsetX,objOffsetY;
var mouseX,mouseY;
var dragObj;
var scalerToObj;

function handleMouseMove(e)
{
  if (drag)
  {
    dragObj.style.left = isDOM ? (objOffsetX + e.clientX - mouseX)+'px' : (objOffsetX + event.clientX - mouseX)+'px';
    dragObj.style.top  = isDOM ? (objOffsetY + e.clientY - mouseY)+'px' : (objOffsetY + event.clientY - mouseY)+'px';

    dragObj.target.style.width =(getLeft(dragObj)-getLeft(dragObj.target))+'px';
    dragObj.target.style.height=(getTop(dragObj)-getTop(dragObj.target))+'px';
	
    return false;
  }
}

function selectScaler(e) 
{
  var tempObj       = isDOM ? e.target : event.srcElement;
  
  if (tempObj.src)
  {
	  var temp = tempObj.src;
	  tempObjSrc=temp.substr(temp.length-10);
	  if (tempObjSrc=='scaler.gif')
	  {
		drag = true;
		dragObj = tempObj;
		objOffsetX = parseInt(dragObj.style.left+0);
		objOffsetY = parseInt(dragObj.style.top+0);
		mouseX = isDOM ? e.clientX : event.clientX;
		mouseY = isDOM ? e.clientY : event.clientY;
		
		document.onmousemove=handleMouseMove;
		
		return false;
	  }
  }
}

function getTop(Element)
{ 
	if (Element.offsetParent) return Element.offsetTop+getTop(Element.offsetParent);
	else return Element.offsetTop;
}

function getLeft(Element)
{ 
	if (Element.offsetParent) return Element.offsetLeft+getLeft(Element.offsetParent)
	else return Element.offsetLeft;
}

function getWidth(Element)
{ 
	return Element.offsetWidth;
}

function stopDrag()
{
	drag=false;
	reAlignScalers();
}

function reAlignScalers()
{
	var out='';
	var i;
	var tempImgSrc
	var images=document.getElementsByTagName('img');
	
	for (i=0; i<images.length; i++)
	{
		tempImgSrc=images[i].src.substr(images[i].src.length-10);
		if (tempImgSrc=='scaler.gif')
		{
			images[i].style.top =(getTop(images[i].target)+images[i].target.offsetHeight)+'px';
			images[i].style.left=(getLeft(images[i].target)+images[i].target.offsetWidth)+'px';
		}
	}
}

function addScaler(Element,idSuffix)
{	
	ScaleId='mg_scaler_'+idSuffix;
	if (document.getElementById(ScaleId)) return;
	
	var ScaleImg=document.createElement("img");
	ScaleImg.src='http://gibney-enterprises.de/elements/images/scaler.gif';
	ScaleImg.border=0;
	ScaleImg.id=ScaleId;
	ScaleImg.target=Element;
	ScaleImg.style.position='absolute';
	ScaleImg.style.top =(getTop(Element)+Element.offsetHeight)+'px';
	ScaleImg.style.left=(getLeft(Element)+Element.offsetWidth)+'px';
	ScaleImg.className="ge_Scaler";
	document.getElementsByTagName('body').item(0).appendChild(ScaleImg);
}


function addScalerByTagName(tagName) 
{
	var i;
	var elements=document.getElementsByTagName(tagName);
	for (i=0; i<elements.length; i++)
	{
		if (elements[i].className!="ge_Scaler") addScaler(elements[i],tagName+'_'+i);
	}
}

document.onmousedown=selectScaler;
document.onmouseup=stopDrag;

if (pstTagName!='%s')
{
	addScalerByTagName(pstTagName);
}
else
{
	addScalerByTagName('textarea');
	addScalerByTagName('iframe');
}


//