Resizer

gibney.org : Technology : Javascript : Bookmarklets : Resizer

(Entry Nr. 43, by user 1 | edit) search

// <textarea class=code_area>
/*
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 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 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');
}

// </textarea>