There are several sites on the internet that detail how to re-enable Growl Mail. I found one that scripts it with AppleScript which I find quite useful so I’m going to put it here as well.

It is one of the comments on http://hints.macworld.com and thank you to the user tedw for coming up with it.

Here is the script:

tell application "System Events"
	-- recover uuids from Mail and framework info.plists
	set mailPlist to property list file "/Applications/Mail.app/Contents/Info.plist"
	set frameworkPlist to property list file "/System/Library/Frameworks/Message.framework/Resources/Info.plist"
	tell mailPlist
		set mailCompatUUID to the value of property list item "PluginCompatibilityUUID"
	end tell
	tell frameworkPlist
		set frameworkCompatUUID to the value of property list item "PluginCompatibilityUUID"
	end tell
	
	-- add to growlMail info,plist
	set growlmailPluginPaths to {"~/Library/Mail/Bundles/", "/Library/Mail/Bundles/", ¬
		"~/Library/Mail/Bundles (Disabled)/", "/Library/Mail/Bundles (Disabled)/"}
	repeat with thisPath in growlmailPluginPaths
		-- run through possible locations looking for the growlMail bundle
		if exists disk item (thisPath & "GrowlMail.mailbundle") then
			set growlmailPlist to ¬
				property list file (thisPath & "GrowlMail.mailbundle/Contents/Info.plist")
			tell growlmailPlist
				tell property list item "SupportedPluginCompatibilityUUIDs"
					-- check to see if uids exist, and add them if they don't
					set uuidList to its value
					if uuidList does not contain mailCompatUUID then
						make new property list item at end of property list items ¬
							with properties {value:mailCompatUUID}
					end if
					if uuidList does not contain frameworkCompatUUID then
						make new property list item at end of property list items ¬
							with properties {value:frameworkCompatUUID}
					end if
				end tell
			end tell
			
			-- try to move bundle into bundles folder if it's in disabled folder
			if thisPath contains "(Disabled)" then
				set enabledPath to path of disk item (text 1 thru -13 of thisPath)
				try
					move disk item (thisPath & "GrowlMail.mailbundle") to alias enabledPath
				on error
					--something (possibly permissions) went wrong
					say "Move failed"
					set theFolderPath to path of disk item thisPath
					tell application "Finder"
						activate
						open folder theFolderPath
					end tell
				end try
			end if
			exit repeat
		end if
	end repeat
end tell

This fix corrects the cookie naming to be RFC compliant, fixing an issue reported on plugins.jquery.com.

New example page is here.
Archive: jCollapser-1.2.2.tar.gz

New demo page here.
Archive: jStockTicker-1.1.1.tar.gz

import datetime

def date_diff_days(from_date=datetime.date.today(),to_date=datetime.date.today() ):
    return (to_date - from_date).days

And an example to use it:

date1 = datetime.date(2009, 03, 26) 
date2 = datetime.date(2009, 07, 25) 

print date_diff_days( date1, date2 )

That’s it :)

I googled around a lot to find the solution and an explanation to the problem. Below are my findings.

The problem

<div class="container">
<h1><span>title</span></h1>
<img src="/someimage.jpg" alt="" /></div>

We want to position the <h1> element above the image. We do this by absolutely positioning it. We set position: relative for the container class and position: absolute for the <h1> tag. In firefox, safari and even in IE7 this works and positions the element as we want, but not in IE6.

Explanation

Found a nice forum thread about this problem here: http://csscreator.com/?q=node/19705

IE doesn’t stick to the standard for positioned element’s without z-index. Basically if you have a positioned element and no z-index, the standard says don’t create a new stacking context. IE does create a new stacking context. What this means in IE, is the children of a positioned element can only alter their z-index in relation to their parent. They can’t alter their layering with respect to other elements with a different parent.

Z-index only works in the current stacking context. In standards compliant browsers you can sort of get a document wide stacking context by only setting z-index on the “leaves”. Not in IE. Internet Explorer is always creating new stacking contexts which is like Firefox giving each element with position a z-index of 0.

So if we want to make it work in IE6 and standards compliant browsers, we need to go back in the DOM tree and find a place (ancestors) where the elements we want to set z-indexes for are siblings. Then give position: relative to those ancestors and apply appropriate z-index to them.

One solution

<div id="parent" style="position:relative;">
<div id="image" style="z-index: 1;"><img src="/someimage.jpg" /></div>
<div id="header" stlye="z-index: 10; position: absolute; left: 10px; top: 5px;">
<h1><span>Some text</span></h1>
</div>
</div>

More info:

Appendix E. Elaborate description of Stacking Contexts

Twit This Post!

You can find the links on the Examples page.

The plugin now has a couple of default settings. There are naming conventions for the buttons. So if you create the select boxes and the buttons yourself please follow the example below. Replace the “example” string with the container name of your choice.

        <fieldset id="example" class="example">
            <legend>jquery.jmover-1.2.js</legend>            
            <div id="left_select" class="leftSelect">
                <label>Select 1</label>
                <select class="source" id="not_selected" name="not_selected" size="15" multiple="multiple">
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </div>
            <div class="selectButtons">
                <p>
                    <span id="exampleRightAll">
                        <a>&nbsp;&gt;&gt;&nbsp;</a>
                    </span>
                </p>
                <p>
                    <span id="exampleRightSelect">
                        <a>&nbsp;&gt;&nbsp;</a>
                    </span>
                </p>
                <p>
                    <span id="exampleLeftSelect">
                        <a>&nbsp;&lt;&nbsp;</a>
                    </span>
                </p>
                <p>
                    <span id="exampleLeftAll">
                        <a>&nbsp;&lt;&lt;&nbsp;</a>
                    </span>
                </p>
            </div>
            <div id="right_select" class="rightSelect">
                <label>Select 2</label>
                <select class="target" id="selected" name="selected&#91;&#93;" size="15" multiple="multiple">
                </select>
            </div>
        </fieldset>

The above snippet is from the example page included in the zip archive.

Now let’s have a look at the plugin’s code.

/**
 * This handy little plugin allows the user to move items between 2 list boxes.
 * 
 * @package jMover
 * @author Peter Halasz <skinn3r@gmail.com>
 * @license http://www.gnu.org/licenses/gpl-3.0.txt GPL v3.0
 * @copyright (c) 2008 - 2009, Peter Halasz all rights reserved
 */
(function($) {
	
	$.fn.jmover = function(options) {
		if(options == null)
			options = {};
		
		var settings = $.extend({}, $.fn.jmover.defaults, options);
		
		switch(settings.action) {
			case 'init':
				$.fn.jmover.init(this, settings);
		}
	}
	
	/**
	 * Initialize the thing.
	 * 
	 */
	$.fn.jmover.init = function(element, options) {
		
		/**
		 * Should we create the empty skeleton for the mover and 
		 * the another script will fill it up later on
		 */
		if(options.create)
			this.createMover(element, options);
		
		/**
		 *  Set up the click bindings.
		 *  
		 *   Naming convention is that the buttons id's are made up from
		 *   the container's ID and the text 'RightSelect', 'RightAll',
		 *   'LeftSelect', 'LeftAll'
		 *   
		 *   <example>
		 *   	<span id="exampleRightSelect">
		 *   	...
		 *   	</span>
		 *   </example>
		 */
		var $moveRightSelect = element.selector + 'RightSelect';
		var $moveRightAll = element.selector + 'RightAll';
		var $moveLeftSelect = element.selector + 'LeftSelect';
		var $moveLeftAll = element.selector + 'LeftAll';
		
		/* Set the click handlers */
		$($moveRightSelect).bind('click', {to: options.targetID, from: options.sourceID}, this.moveSelected);
		$($moveRightAll).bind('click', {to: options.targetID, from: options.sourceID}, this.moveAll);
		$($moveLeftSelect).bind('click', {to: options.sourceID, from: options.targetID}, this.moveSelected);
		$($moveLeftAll).bind('click', {to: options.sourceID, from: options.targetID}, this.moveAll);
		
	};

	$.fn.jmover.createMover = function(element, options) {
		/**
		 * Arguments for the "source" select html tag.
		 */
		var $sourceArgs = 'id="' + options.sourceID +'"' +
					  ' multiple="multiple" size=' + options.size +
					  ' name="' + options.sourceID + '[]"'
		/**
		 * Arguments for the "target" select html tag.
		 */
		var $targetArgs = 'id="' + options.targetID + '"' +
					  ' multiple="multiple" size=' + options.size +
					  ' name="' + options.targetID + '[]"';
		
		/**
		 * IDs of the move buttons.
		 */
		var $moveRightSelect = element.get(0).id + 'RightSelect';
		var $moveRightAll = element.get(0).id + 'RightAll';
		var $moveLeftSelect = element.get(0).id + 'LeftSelect';
		var $moveLeftAll = element.get(0).id + 'LeftAll';
		
		/* source select field */
		element.append('<div class="leftSelect" id="' + options.fromID + '"></div>');
		var $source = $(element.selector + ' .leftSelect')
		$source.append('<label for="' + options.sourceID + '">'+ options.fromLabel +'</label>');
		$source.append('<select class="source" ' + $sourceArgs + '></select>');
		
		/* mover buttons */
		element.append('<div class="selectButtons"></div>');
		var $buttonContainer = $(element.selector + ' .selectButtons');
		$buttonContainer.append('<p>' +
		        				'<span id="' + $moveRightAll + '">' +
		        				'<a>&nbsp;&gt;&gt;&nbsp;</a>' +
		        				'</span>' +
	        					'</p>');
		
		$buttonContainer.append('<p>' +
				'<span id="' + $moveRightSelect + '">' +
				'<a>&nbsp;&gt;&nbsp;</a>' +
				'</span>' +
				'</p>');
		
		$buttonContainer.append('<p>' +
				'<span id="' + $moveLeftSelect + '">' +
				'<a>&nbsp;&lt;&nbsp;</a>' +
				'</span>' +
				'</p>');
		
		$buttonContainer.append('<p>' +
				'<span id="' + $moveLeftAll + '">' +
				'<a>&nbsp;&lt;&lt;&nbsp;</a>' +
				'</span>' +
				'</p>');
		
		/* target select field */
		element.append('<div class="rightSelect" id="' + options.toID + '"></div>');
		var $target = $(element.selector + ' .rightSelect')
		$target.append('<label for="' + options.targetID + '">'+ options.toLabel +'</label>');
		$target.append('<select class="target" ' + $targetArgs + '></select>');
	};
	
	/**
	 * Moves selected options from the DOM element specified in the 'from'
	 * argument to the DOM element specified by the 'to' argument.
	 * 
	 * @access public
	 * @param string to The ID of the select box we want to move elements to
	 * @param string from The ID of the select box we want to move elements from
	 * @return void
	 */
	$.fn.jmover.moveSelected = function(args) {
		jQuery.each($("#" + args.data.from + " option:selected"), function() {
			$("#" + args.data.to).append(this);
		});
	};
	
	/**
	 * Moves all options from the DOM element specified in the 'from'
	 * argument to the DOM element specified by the 'to' argument.
	 * 
	 * @access public
	 * @param string to The ID of the select box we want to move elements to
	 * @param string from The ID of the select box we want to move elements from
	 * @return void
	 */
	$.fn.jmover.moveAll = function(args) {
		jQuery.each($("#" + args.data.from + " option"), function() {
			$("#" + args.data.to).append(this);
		});
	}
	
	/**
	 * Plugin defaults.
	 * 
	 * @access public
	 */
	$.fn.jmover.defaults = {
			/**
			 * The ID of the source field container.
			 * Needed for auto creation
			 * 
			 * @var string
			 */
			toID: 'to',
			/**
			 * The label of the source field container.
			 * Needed for auto creation
			 * 
			 * @var string
			 */
			toLabel: 'Target',
			/**
			 * The ID of the target field container.
			 * Needed for auto creation
			 * 
			 * @var string
			 */
			fromID: 'from',
			/**
			 * The label of the target field container.
			 * Needed for auto creation
			 * 
			 * @var string
			 */
			fromLabel: 'Source',
			/**
			 * The ID of the source select field
			 * 
			 * @var string
			 */
			sourceID: 'exampleSource',
			/**
			 * The ID of the target select field
			 * 
			 * @var string
			 */
			targetID: 'exampleTarget',
			/**
			 * Size of the select fields
			 * 
			 * @var integer
			 */
			size: 15,
			/**
			 * Auto create the mover elements
			 * 1 - Yes
			 * 0 - No
			 * 
			 * @var integer
			 */
			create: 1,
			/**
			 * The action we want to do.
			 * 
			 * @var string
			 */
			action: null
	};
})(jQuery);

To initialize the plugin one could use the example code:

    $(function() {
        $("#example").jmover({
            action: 'init',
            create: 0,
            sourceID: 'not_selected',
            targetID: 'selected'
            });
    });

Use the CSS from the included .css file.

The plugin can be downloaded from here.
It requires jQuery 1.3.x

Comments and feedback is welcome.

Twit This Post!

I’ve been digging through my old work and found a nice javascript plugin that created a Stock Ticker. It made a good candidate to port it to jQuery.

So the jStockTicker plugin was born.

Basically it works with animating a div containing a sequence of spans. As soon as the second visible span reaches the edge of the visible area, the first span is appended to the end of the list.

Lets look at the plugin it self:

/**
 * Horizontal Stock Ticker for jQuery.
 *
 * @package jStockTicker
 * @author Peter Halasz <skinner@gmail.com>
 * @license http://www.gnu.org/licenses/gpl-3.0.txt GPL v3.0
 * @copyright (c) 2009, Peter Halasz all rights reserved.
 */
( function($) {

	$.fn.jStockTicker = function(options) {

		if (typeof (options) == 'undefined') {
			options = {};
		}

		var settings = $.extend( {}, $.fn.jStockTicker.defaults, options);

		var $ticker = $(this);

		settings.tickerID = $ticker[0].id;

		$.fn.jStockTicker.settings[settings.tickerID] = {};

		var $wrap = null;

		if ($ticker.parent().get(0).className != 'wrap') {
			$wrap = $ticker.wrap("<div class='wrap'></div>");
		}

		var $tickerContainer = null;

		if ($ticker.parent().parent().get(0).className != 'container') {
			$tickerContainer = $ticker.parent().wrap(
					"<div class='container'></div>");
		}

		var node = $ticker[0].firstChild;
		var next;

		while(node) {
			next = node.nextSibling;
			if(node.NodeType == 3) {
				$ticker[0].removeChild(node);
			}
			node = next;
		}

		var shiftLeftAt = $ticker.children().get(0).offsetWidth;

		$.fn.jStockTicker.settings[settings.tickerID].shiftLeftAt = shiftLeftAt;
		$.fn.jStockTicker.settings[settings.tickerID].left = 0;
		$.fn.jStockTicker.settings[settings.tickerID].runid = null;

		$ticker.width(2 * screen.availWidth);

		function startTicker() {
			stopTicker();

			var params = $.fn.jStockTicker.settings[settings.tickerID];
			params.left -= settings.speed;
			if(params.left <= params.shiftLeftAt * -1) {
				params.left = 0;
				$ticker.append($ticker.children().get(0));
				params.shiftLeftAt = $ticker.children().get(0).offsetWidth;
			}

			$ticker.css('left', params.left + 'px');
			params.runId = setTimeout(arguments.callee, settings.interval);

			$.fn.jStockTicker.settings[settings.tickerID] = params;
		}

		function stopTicker() {
			var params = $.fn.jStockTicker.settings[settings.tickerID];
			if (params.runId)
			    clearTimeout(params.runId);

			params.runId = null;

			$.fn.jStockTicker.settings[settings.tickerID] = params;
		}

		function updateTicker() {

			stopTicker();
			startTicker();
		}

		$ticker.hover(stopTicker,startTicker);

		startTicker();
	};

	$.fn.jStockTicker.settings = {};

	$.fn.jStockTicker.defaults = {
		tickerID :null,
		url :null,
		speed :1,
		interval :20
	};
})(jQuery);

The plugin has a few defaults set and in future version will allow dynamic updating of ticker data through AJAX.

What you need to do is place the spans into a div and call the jQuery plugin in the ready function like this:

    $(function() {
        $("#ticker").jStockTicker({interval: 45});
    });

And that’s it.

The example HTML page:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jStockTicker Demo page</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jstockticker-1.1.js"></script>

<script type="text/javascript">
    $(function() {
        $("#ticker").jStockTicker({interval: 45});
    });
</script>
<style type="text/css">
div#examplePage {
    color: #000;
    font-family: Verdana, Arial, Helvetica, San-serif;
    font-size: x-small;
    text-align: left;
    width: 760px;
    margin: 0 auto;
    padding: 0;
}

h1 {
    font-size: 1.8em;
    font-weight: bold;
    margin: 10px 0 5px;
}

div#example {
    background: #c3c1c1 none repeat-x scroll left top;
    width: 740px;
    margin: 20px 0 3px;
}

div#example h3 {
    font-size: xx-small;
    font-style: italic;
    padding: 0;
    margin: 0 10px 0;
    line-height: 14px;
}

.container {
    background: #fff none;
    border: 1px solid #000;
    height: 30px;
    margin: 0 auto;
    width: 735px;
}

.container .wrap {
    width: 720px;
    left: 10px;
    top: 10px;
    overflow: hidden;
    position: relative;
    line-height: normal;
    font-size-adjust: none;
}

/**
 * Stock Ticker styling
 */
div.stockTicker {
    font-family: Verdana, Arial, Helvetica, San-serif;
    font-size: x-small;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}

div.stockTicker span {
    margin: 0 10px 0;
}

div.stockTicker span.up {
    color: green;
    padding-left: 2px;
}

div.stockTicker span.down {
    color: red;
    margin: 0;
    padding-left: 10px;
}

div.stockTicker span.eq {
    margin: 0;
    padding-left: 10px;
}

div.stockTicker span.quote {
    margin: 0;
    font-weight: bold;
    padding-left: 10px;
}

</style>
</head>
<body>
<div id="examplePage">
    <h1>jStockTicker (a jQuery Stock Ticker made easy) v1.0</h1>
    <p><b>What is jStockTicker?</b> It is a jQuery plugin to create a horizontally scrolling Stock Ticker</p>
    <div id="example">
        <h3>jquery.jStockTicker-1.1.js</h3>

                <div id="ticker" class="stockTicker">
                    <span class="quote">Stock Quotes: </span>
                    <span class="up"><span class="quote">ABC</span> 1.543 0.2%</span>
                    <span class="down"><span class="quote">SDF</span> 12.543 -0.74%</span>
                    <span class="up"><span class="quote">JDF</span> 34.543 5.2%</span>
                    <span class="up"><span class="quote">ERA</span> 123.234 1.2%</span>
                    <span class="down"><span class="quote">DFF</span> 20.543 -5.2%</span>
                    <span class="eq"><span class="quote">CBX</span> 523.234 0.0%</span>
                    <span class="down"><span class="quote">IZF</span> 89.65 -3.4%</span>
                    <span class="up"><span class="quote">KJG</span> 456.64 0.318%</span>
                    <span class="up"><span class="quote">QWE</span> 6413.123 0.012%</span>
                    <span class="eq"><span class="quote">CVN</span> 6.3 0.0%</span>
                    <span class="down"><span class="quote">UIT</span> 74.543 -0.321%</span>
                </div>

    </div>
    <p class="credits">
    Code and design by Peter Halasz.
    </p>
</div>
</body>
</html>

The plug in requires jQuery which you can find here.
The archive containing the plugin can be found here: jStockTicker-1.1.zip.

You have any questions or comments? Post them here :)

Twit This Post!

So here we go :)

This example can be found in the zip archive as well as jcollapser.html.

So the source for an example html page looks like the following:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jCollapser Demo page</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jcollapser-1.2.1.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
    $(function() {
        $("#example1").jcollapser({target: '#jcollapse1', state: 'expanded'});
        $("#example2").jcollapser({target: '#jcollapse2', state: 'collapsed'});
    });
</script>
<style type="text/css">
.collapse {
    background: transparent url('./collapse.gif') no-repeat scroll 0% 0%;
    height: 11px;
    position: relative;
    
    width: 11px;
}

.expand {
    background:transparent url('./expand.gif') no-repeat scroll 0% 0%;
    display:none;
    height:11px;
    position:relative;
    
    width:11px;
}
</style>
</head>
<body>
<div>
    <fieldset id="example1">
    <div class="collapse" ></div>
    <div class="expand" ></div>
    <div id="jcollapse1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu ante, pellentesque quis, rhoncus et, molestie in, lacus. Phasellus id purus id enim malesuada dictum. Maecenas tellus magna, tristique at, ultrices mollis, rhoncus id, sapien. Sed volutpat est ut magna. Nulla facilisi. Curabitur lacus diam, semper vitae, convallis sodales, adipiscing convallis, leo. Nulla dictum dignissim ligula. In posuere. In eleifend elit eget sapien. Suspendisse eget eros eget pede facilisis aliquam. Etiam rhoncus. Nullam quis tellus eget orci placerat aliquet.
    </div>
    </fieldset> 
</div>
<div>
    <fieldset id="example2">
    <div class="collapse" ></div>
    <div class="expand" ></div>
    <div id="jcollapse2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu ante, pellentesque quis, rhoncus et, molestie in, lacus. Phasellus id purus id enim malesuada dictum. Maecenas tellus magna, tristique at, ultrices mollis, rhoncus id, sapien. Sed volutpat est ut magna. Nulla facilisi. Curabitur lacus diam, semper vitae, convallis sodales, adipiscing convallis, leo. Nulla dictum dignissim ligula. In posuere. In eleifend elit eget sapien. Suspendisse eget eros eget pede facilisis aliquam. Etiam rhoncus. Nullam quis tellus eget orci placerat aliquet.
    </div>
    </fieldset> 
</div>
</body>
</html>

You could use php to generate the contents as well. The data can come from a database or from anywhere.
In this php example I’m using a simple for loop to create 5 collapsable elements.

<?php echo '<?xml version="1.0" encoding="UTF-8" ?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jCollapser Demo page</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jcollapser-1.2.1.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
$(function() {
<?php
    /* Create initialize multiple elements. */
    $state = 'expanded';    

    for($i = 1; $i <= 5; $i++) {
        $state = $state == 'expanded' ? 'collapsed' : 'expanded';
        ?>
        $("#<?php echo $i; ?>").jcollapser({target: '#t_<?php echo $i; ?>', state: '<?php echo $state; ?>'});
        <?php
    }
?>
});
</script>
<style type="text/css">
.collapse {
    background: transparent url('./collapse.gif') no-repeat scroll 0% 0%;
    height: 11px;
    position: relative;
    
    width: 11px;
}

.expand {
    background:transparent url('./expand.gif') no-repeat scroll 0% 0%;
    display:none;
    height:11px;
    position:relative;
    
    width:11px;
}
</style>
</head>
<body>
<?php
    for($i = 1; $i <= 5; $i++) {
        ?>
<div>
    <fieldset id="<?php echo $i; ?>">
    <div class="collapse" ></div>
    <div class="expand" ></div>
    <div id="t_<?php echo $i; ?>">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu ante, pellentesque quis, rhoncus et, molestie in, lacus. Phasellus id purus id enim malesuada dictum. Maecenas tellus magna, tristique at, ultrices mollis, rhoncus id, sapien. Sed volutpat est ut magna. Nulla facilisi. Curabitur lacus diam, semper vitae, convallis sodales, adipiscing convallis, leo. Nulla dictum dignissim ligula. In posuere. In eleifend elit eget sapien. Suspendisse eget eros eget pede facilisis aliquam. Etiam rhoncus. Nullam quis tellus eget orci placerat aliquet.
    </div>
    </fieldset> 
</div>
        <?php
    }
?>
</body>
</html>

More on the jCollapser plugin can be found in my previous posts here and here.

You have any questions or comments? Post them here :)

Twit This Post!

New version of the jQuery plugin jCollapser. See change log for changes.

Source can be found here.
Latest development source can be found in the SVN repository at http://code.google.com/p/progadv/source/checkout

Change Log:

v1.2.1:
-Fixed error with init time state settings.

v1.2:
-Add cookie state support
-Add initialization time state setting if cookie is not set.

v1.1:
-Restructure of code to allow multiple collapse elements on the same page

v1.0:
-Initial release

Twit This Post!