wiki:Development/Styles/JavaScript

Version 1 (modified by akempgen, 14 years ago) (diff)

--

TracNav(Development)? This is part of the Development Documentation Project, please help document Colloquy if you know anything that would be relevant here for other users to know about.

JavaScript Tips and Code Snippets

Got a cool JavaScript tip or snippet? Post it!

Orkut-style text fading

Here is a cool script, pulled from Orkut's site. It fades in all the text. I would like to try this in a style sometime. Might be really neat. Maybe Standard would be suitable for this?

col = 255;
function sa() {
	document.getElementById( "ws" ).style.color="rgb(" + col + ","
		+ col + "," + col + ")";
	col -= 5;
	if( col > 0 ) setTimeout( 'sa()', 10 );
}

Automatic image fit-to-window resizing

Here is some code to resize images to fit the width of the window (from the Picturesque style).

function resizeImagesIfNeeded() {
	for( i = 0; i < document.images.length; i++ ) {
		if( document.images[[i].realWidth > ( window.innerWidth - 35 ) )
			document.images[[i].width = ( window.innerWidth - 35 );
		else document.images[[i].width = document.images[[i].realWidth;
	}
}

window.onresize = resizeImagesIfNeeded;

function resizeIfNeeded( image ) {
	image.realWidth = image.width;
	if( image.width > ( window.innerWidth - 35 ) )
		image.width = ( window.innerWidth - 35 );
	scrollToBottomIfNeeded();
}

Than in the HTML/XSL you would do:

<img src="http://www.javelin.cc/colloquy/images/icon.png" onload="resizeIfNeeded( this )" />

Emoticon text / image flip

Some interesting image substitution code to make images flip between text and image. I believe Adium uses this for clickable emotions now.

http://homepage.mac.com/wabin/tests/imagetest.html

Scrollback limiting

I've got a supplement.html for my hack-up of the Bland style that enforces a scrollback limit. I've tried both an elaborate way of doing it, and a quick & dirty way of doing it, and the quick way seems to work fine. Unfortunately, I have to cut & paste functions from the template.html in order to wedge in my scrollback check, but eh. (Les Orchard?)

Here it is:

<script type="text/ecmascript" defer="defer">
var scrollBackLimit = 250;

function enforceScrollbackLimit() {
	var bodyNode = document.getElementsByTagName('body').item( 0 );

	// Quick removal of divs of any kind.
	var messages = document.getElementsByTagName('div');

	// Careful removal of only message and event divs.
	//var messages = [];
	//var divNodes = document.getElementsByTagName('div');
	//for (var i=0; i<divNodes.length; i++) {
	//	currNode = divNodes[[i];
	//	if ( (currNode.className.indexOf('envelope') != -1) ||
	//	 (currNode.className.indexOf('event') != -1) )
	//	messages[[messages.length] = currNode;
	//}

if (messages.length > scrollBackLimit)
	for (var i=0; i < (messages.length - scrollBackLimit); i++)
	bodyNode.removeChild(messages[[i])
}

function appendMessage( html ) {
	checkIfScrollToBottomIsNeeded();
	removeConsecutiveInsertPoint();

	range = document.createRange();
	range.selectNode( document.getElementsByTagName( "body" ).item( 0 ) );
	documentFragment = range.createContextualFragment( html );
	document.body.appendChild( documentFragment );

	enforceScrollbackLimit();

	scrollToBottomIfNeeded();
}

function appendConsecutiveMessage( html ) {
	checkIfScrollToBottomIsNeeded();

	insert = document.getElementById( "consecutiveInsert" );
	if( ! insert ) {
		appendMessage( html );
		return;
	}

	range = document.createRange();
	range.selectNode( insert.parentNode );
	documentFragment = range.createContextualFragment( html );
	insert.parentNode.replaceChild( documentFragment, insert );

	enforceScrollbackLimit();

	scrollToBottomIfNeeded();
}

</script>