resize_element.js

Including this javascript file into any page will allow you to resize elements to your desired height

Added: 2006-05-02 23:12:16

download

/******
* You may use and/or modify this script as long as you:
* 1. Keep my name & webpage mentioned
* 2. Don't use it for commercial purposes
*
* If you want to use this script without complying to the rules above, please contact me first at: marty@excudo.net
* 
* Author: Martijn Korse
* Website: http://devshed.excudo.net
*
* Date:  2006-05-02 23:12:16
***/

 /***
  * This function browses the childs of the given element for elements
  * that contain a classname of the form 'resizeMe_xx', 
  * where xx is the height in pixels of how heigh the element should be
  * The function is recursive.
  */
 function browseElement(el)
 {
	if (el)
	{		
		for (var i = 0; i < el.childNodes.length; i++)
		{
			var elNode = el.childNodes[i];
			if (elNode.className && elNode.className.substr(0, 8) == "resizeMe")
			{
				resizeEl(elNode, elNode.className.substr(9));
			}
			else if (elNode.childNodes.length > 0)
			{
				browseElement(elNode);
			}
		}
	}
	else
		alert('this element doesn\'t exist');
 }
  /***
   * this function resizes the element
   */
 function resizeEl(el, height)
 {
	 // the current contents of the element
	var currentContent = el.innerHTML;
	 // we asign the current content to the title, so the tooltip will display it
	 // but also, so we can later retrieve it from the title again, when we want
	 // to show the full contents
	el.title = currentContent;

	 // if the current contents make the element bigger then is allowed
	if (el.scrollHeight > height)
	{
		 /***
		  * We start by adding the three dots at the end
		  * After that we're gonna shrink the contents, while keeping them intact.
		  *  this way we know exactly when we've reached our goal.
		  * And when we've reached that goal we'll make them clickable; clicking
		  * causing the full string to be shown
		  */
		var content = el.innerHTML+' [...]';

		 // while the current contents are too big
		while (el.scrollHeight > height)
		{
			 // we cannot asign the outcome directly to el.innerHTML and work with that,
			 // because IE does weird things with that
			content = menos(content);	// we chop off 1 character.
			el.innerHTML = content;
		}
		 // by now the contents are exactly big enough.
		 // we chop off the "[...]"
		content = content.substr(0, (content.length-5));
		 // and add the same thing again, but as a link, allowing the user to see the full string
		content += ' <a href="javascript://" onClick="showFull(this.parentNode);">[...]</a>';
		el.innerHTML = content;
	}
 }
 /***
  * this function chops off 1 character from the string
  * thereby keeping in mind it has " [...]" at the end, that shouldn't be removed
  */
 function menos(str)
 {
	 // total length of the string. but beware: this string contain " [...]" at the end
	var lengte = str.length;
	 // therefor, this is the position until 1 character before that end
	var tot = (lengte-7);
	 // and this is the position exactly until that end
	var van = (lengte-6);
	 // the character exactly before that end (the one we're gonna remove)
	var currentChar = str.substr(tot, 1);
	 // check to see if this is a tag.
	if (currentChar == '>')
	{
		 // could be; now we're gonna check if it's a <br> tag.
		if (str.substr((tot-3), 4) == '<br>' || str.substr((tot-3), 4) == '<BR>')
			tot = tot - 3;
		else if (str.substr((tot-5), 6) == '<br />' || str.substr((tot-5), 6) == '<BR />')
			tot = tot - 5;
		 // probably another tag. unfortunately we don't do anything with that
	}
	return str.substr(0, tot)+str.substr(van, 6);
	
 }
 /***
  * this function shows the full string
  */
 function showFull(el, height)
 {
	 // the title should hold the full string, so that's what we'll use
	el.innerHTML = el.title;
	 // we also attach the resize function that can be triggered by an onClick
	el.onclick = function()
	{
		resizeEl(this, this.className.substr(9));
	}
 }

download