<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	>

<channel>
	<title>DevWaldo</title>
	<atom:link href="http://blog.alanwaldron.com/?feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://blog.alanwaldron.com</link>
	<description>Web Development Blog by Alan Waldron</description>
	<pubDate>Thu, 24 Jun 2010 15:32:59 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.7.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Jovoto.com : Exploiting talent and diluting the value of your work.</title>
		<link>http://blog.alanwaldron.com/?p=87</link>
		<comments>http://blog.alanwaldron.com/?p=87#comments</comments>
		<pubDate>Thu, 24 Jun 2010 15:19:29 +0000</pubDate>
		<dc:creator>awaldron</dc:creator>
		
		<category><![CDATA[Uncategorized]]></category>

		<category><![CDATA[betacup]]></category>

		<category><![CDATA[design]]></category>

		<category><![CDATA[jovoto]]></category>

		<guid isPermaLink="false">http://blog.alanwaldron.com/?p=87</guid>
		<description><![CDATA[Through my experience participating in the BetaCup challenge, I learned how Jovoto exploits its community and dilutes the value of creative work.]]></description>
			<content:encoded><![CDATA[<p><strong>$5.81 per hour for design contracting?  Where do I sign up!?</strong></p>
<p>For those who don&#8217;t know, Jovoto.com is a collaboration platform for designers to submit creative work to companies  looking for good ideas for viral marketing, website designs, new brand identities or new ad campaigns.  Designers from all over the world then put forth their best efforts with the hopes that the company will choose their work.  Along the way, other community members submit feedback on your work, giving you a chance to make revisions and improve upon your idea before the official judging period begins.</p>
<p>The reward is a cash prize, usually in the ballpark of $5,000 for the sold idea, and smaller cash prizes for the top ideas as ranked by the community.</p>
<p>Sounds nice, right?  I thought so, which is why when I heard about the BetaCup challenge, a contest sponsored by Starbucks to generate ideas on how to reduce paper cup waste, I joined Jovoto.  The prize for the sold idea in this contest was $10,000.</p>
<p><span id="more-87"></span></p>
<p>In the early days of the 2 month submission period, the community was helpful, energetic, and excited to be able to help tackle this problem of paper cup waste.  Before long, there were 440 ideas submitted.  Many people in the community spend countless hours refining their ideas (which ranged from reusable cup incentive programs, to recycling programs, to collapsible and biodegradable cups).  Some members created prototypes of their cup designs, some spent hours researching technical requirements, market factors, surveying customers, designing video campaigns, and so much more. All of this on top of the hours spent promoting your idea within the community, collaborating with other members, and providing feedback on all of the other ideas.</p>
<p>It was everything Jovoto had envisioned when they created their community platform.</p>
<p>After all of this effort by so many creative individuals, a winner was selected.   The idea that will change the world, the one selected as best from all of the technical and creative experts within the community, the one that made it to the top of the mountain after thousands of hours spent by the community, the one that will eliminate <strong><em>58 billion paper cups wasted every year!?!??</em></strong></p>
<p>A chalkboard.</p>
<p>Yes.  A chalkboard.</p>
<p>But not just any chalkboard!  This chalkboard keeps track of people who bring a travel mug into Starbucks.  Every tenth person who brings in their own travel mug gets a free cup of coffee! Yay. How innovative.</p>
<p>Clearly, Starbucks chose this idea because it was cheap to implement.  Many other travel mug incentive ideas included RFID and integration with social media&#8230; but that costs money.  Yes, I do think the chalkboard will work to a small degree on a local level, but it&#8217;s hardly the global, innovative solution that BetaCup advertised it was searching for.</p>
<p>From the BetaCup briefing:</p>
<blockquote>
<div>Rethink the way we consume coffee and present solutions that strive to reduce paper cup waste.</div>
<div>Think beyond just the vessel for carrying coffee, and develop a way to cause behavior change at a massive scale.</div>
</blockquote>
<p>The final blow was that the winner did not spend any time in the community, didn&#8217;t rate or provide feedback on anyone else&#8217;s ideas.  They simply submitted their idea and disappeared.</p>
<p><strong>What I learned from the BetaCup challenge:</strong></p>
<p>Jovoto exploits its talented community and dilutes the value of creative work.</p>
<p>Think about it this way.  Starbucks put up $20,000 for prize money, and paid Jovoto for the right to leverage their community platform.  Let&#8217;s assume that on average, each of the 430 entrants spent 8 hours on their entry (a conservative estimate based on those I had communicated with).  That adds up to 3440 hours spent by the community on this project, meaning Starbucks paid <strong>$5.81 per hour </strong>for creative work.</p>
<p>$5.81 per hour? They pay 16-year-olds more than that to pour coffee.</p>
<p>Out of 430 submissions, only 6 ideas were awarded prizes, leaving 424 people who just spent thousands of hours combined on speculative design, with <em>nothing</em> to show for their efforts.  (<a href="http://boagworld.com/design/why-speculative-design-is-wrong">Why speculative design is wrong.</a>)</p>
<p>How much money Jovoto was paid by Starbucks (et al) is unknown, but Jovoto earns enough to staff offices in New York and Berlin.</p>
<p>Imagine working for a design studio that would only compensate you if their clients liked your work, oh, and you have 400 other designers to compete with.  You probably wouldn&#8217;t work there for very long, or you&#8217;d starve and be homeless in no time.  But this is essentially what Jovoto is doing, selling their clients a stable of talented designers who work for nothing under the facade of &#8220;community&#8221;.</p>
<p>This model not only hurts those participating in the contests, but artificially lowers the cost of design services for everyone else.  If a company can pay $5000 for 100 Jovoto designers, why pay a design firm $25,000 for 5?</p>
<p>My advice? <strong>Don&#8217;t use Jovoto.</strong> But if you do, don&#8217;t spend more than an hour on any contest, and definitely don&#8217;t bother participating in the community, their clients don&#8217;t care how great of a community member you are, and it doesn&#8217;t help your chances of winning.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alanwaldron.com/?feed=rss2&amp;p=87</wfw:commentRss>
		</item>
		<item>
		<title>Creating Quick Portal Panels with AWPortal</title>
		<link>http://blog.alanwaldron.com/?p=25</link>
		<comments>http://blog.alanwaldron.com/?p=25#comments</comments>
		<pubDate>Fri, 20 Mar 2009 19:46:26 +0000</pubDate>
		<dc:creator>awaldron</dc:creator>
		
		<category><![CDATA[jquery]]></category>

		<category><![CDATA[awportal]]></category>

		<category><![CDATA[plugin]]></category>

		<category><![CDATA[portal]]></category>

		<category><![CDATA[portlet]]></category>

		<guid isPermaLink="false">http://blog.alanwaldron.com/?p=25</guid>
		<description><![CDATA[Sure, we all like stylish portal windows that you can minimize, maximize and close.  But how can we get that functionality with only one line of code?  It's easy with AWPortal, a JQuery plugin.
PLAIN TEXT





$&#40;".mywindow"&#41;.awportal&#40;&#41;; 






Here is the demo for those impatient folks out there.
One of my client projects involved developing a simple, [...]]]></description>
			<content:encoded><![CDATA[<p>Sure, we all like stylish portal windows that you can minimize, maximize and close.  But how can we get that functionality with only one line of code?  It's easy with AWPortal, a JQuery plugin.</p>
<div class="igBar"><span id="ljavascript-8"><a href="#" onclick="javascript:showPlainTxt('javascript-8'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite">
<div id="javascript-8">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">".mywindow"</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">awportal</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p><a title="AWPortal Demo" href="/awportal">Here is the demo</a> for those impatient folks out there.</p>
<p>One of my client projects involved developing a simple, and easy to read interface for a content-heavy database application that tracks information on tens of thousands of companies and business execs, so I needed a quick and easy way to drop information into a portlet window.</p>
<p>AWPortal is the result of that needed solution, a way to create portlet functionality on any DIV tag with one line of code.</p>
<p><strong>»</strong> <a title="AWPortal Zip File" href="/awportal/awportal.zip">Download the AWPortal Package</a></p>
<p><span style="color: #ffffff;">-</span></p>
<p><span id="more-25"></span></p>
<p><strong>Using AWPortal:</strong></p>
<p>Of course, the first step of any JQuery Plugin is to include the javascript files in the header of your page, listing the most recent version of JQuery before the plugin:</p>
<div class="igBar"><span id="lhtml-9"><a href="#" onclick="javascript:showPlainTxt('html-9'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite">
<div id="html-9">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/script.html"><span style="color: #000000; font-weight: bold;">&lt;script</span></a> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"jquery-1.3.min.js"</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/javascript"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span></span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/script.html"><span style="color: #000000; font-weight: bold;">&lt;script</span></a> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"jquery.awportal.js"</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/javascript"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>The actual implementation of AWPortal is pretty straightforward.  First create a DIV and drop the content of the portlet into the block.  Assign the DIV a class name like "awportal".  Next, assign the DIV a unique ID.  Finally, use the TITLE attribute to set the header title of the portlet.  You should end up with something like this:</p>
<div class="igBar"><span id="lhtml-10"><a href="#" onclick="javascript:showPlainTxt('html-10'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite">
<div id="html-10">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"window1"</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"awportal"</span> <span style="color: #000066;">title</span>=<span style="color: #ff0000;">"My First AWPortal"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; This plugin positively pleases my portlet purpose perfectly!</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>To turn this into a fully-functioning portlet, use some JQuery magic to attach the awportal() function to the objects you want to portlet-ize.  In this case, we want any DIV where CLASS="AWPORTAL" to become a portlet:</p>
<div class="igBar"><span id="ljavascript-11"><a href="#" onclick="javascript:showPlainTxt('javascript-11'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite">
<div id="javascript-11">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">&#40;</span>document<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">ready</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.awportal'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">awportal</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>AWPortal includes three functions for expanding, collapsing and toggling all of the windows on the page, simultaneously. In this example, we'll attach them to a link's click action.  Add "return false;" to your click() event handler to prevent the link from attempting to load the link's href value:</p>
<div class="igBar"><span id="ljavascript-12"><a href="#" onclick="javascript:showPlainTxt('javascript-12'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite">
<div id="javascript-12">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">&#40;</span>document<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">ready</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.awportal'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">awportal</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'a#collapse-all'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">click</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; $<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">awportalCollapseAll</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'a#expand-all'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">click</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; $<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">awportalExpandAll</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'a#toggle-all'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">click</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; $<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">awportalToggleAll</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p><span style="color: #ffffff;">-</span></p>
<p><strong>How Do I Customize the Look &amp; Feel?</strong></p>
<p>All of the portal styles can be customized via CSS, this includes font styles &amp; sizes, title background image, padding, borders, etc.  The only GUI items that you cannot modify in CSS is the action button images.</p>
<p>The collapse/expand/close button images are located in the images folder. You can either replace these images, keeping the filename, or you can change the default plugin settings in your JQuery definition:</p>
<div class="igBar"><span id="ljavascript-13"><a href="#" onclick="javascript:showPlainTxt('javascript-13'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite">
<div id="javascript-13">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">&#40;</span>document<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">ready</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; $.<span style="color: #006600;">fn</span>.<span style="color: #006600;">awportal</span>.<span style="color: #006600;">defaults</span>.<span style="color: #006600;">btnExpandOff</span> = <span style="color: #3366CC;">'images/my_expand_off.gif'</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; $.<span style="color: #006600;">fn</span>.<span style="color: #006600;">awportal</span>.<span style="color: #006600;">defaults</span>.<span style="color: #006600;">btnExpandOn</span> = <span style="color: #3366CC;">'images/my_expand_on.gif'</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; $.<span style="color: #006600;">fn</span>.<span style="color: #006600;">awportal</span>.<span style="color: #006600;">defaults</span>.<span style="color: #006600;">btnCollapseOff</span> = <span style="color: #3366CC;">'images/my_collapse_off.gif'</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; $.<span style="color: #006600;">fn</span>.<span style="color: #006600;">awportal</span>.<span style="color: #006600;">defaults</span>.<span style="color: #006600;">btnCollapseOn</span> = <span style="color: #3366CC;">'images/my_collapse_on.gif'</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; $.<span style="color: #006600;">fn</span>.<span style="color: #006600;">awportal</span>.<span style="color: #006600;">defaults</span>.<span style="color: #006600;">btnCloseOff</span> = <span style="color: #3366CC;">'images/my_close_off.gif'</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; $.<span style="color: #006600;">fn</span>.<span style="color: #006600;">awportal</span>.<span style="color: #006600;">defaults</span>.<span style="color: #006600;">btnCloseOn</span> = <span style="color: #3366CC;">'images/my_close_on.gif'</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.awportal'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">awportal</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Finally, you can also customize the default speed (in milliseconds) of the window slide effect:</p>
<div class="igBar"><span id="ljavascript-14"><a href="#" onclick="javascript:showPlainTxt('javascript-14'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite">
<div id="javascript-14">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">&#40;</span>document<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">ready</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; $.<span style="color: #006600;">fn</span>.<span style="color: #006600;">awportal</span>.<span style="color: #006600;">defaults</span>.<span style="color: #006600;">slideSpeed</span> = <span style="color: #CC0000;color:#800000;">500</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.awportal'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">awportal</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B; font-weight:bold;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>And it’s as simple as that! Your DIV is now a functioning portlet.</p>
<p>Again, <a title="AWPortal Demo" href="http://blog.alanwaldron.com/awportal">check out the demo</a>, the code there will probably answer any remaining questions you might still have. If not, feel free to drop me an email at [ blog |at| alan waldron dot com ].</p>
<p>Try it out, and let me know how it works. If you get this implemented somewhere, let me know about it and post up a link in the comments!</p>
<p><span style="color: #ffffff;">-</span></p>
<p><strong>»</strong> <a title="AWPortal Zip File" href="/awportal/awportal.zip">Download the AWPortal Package</a></p>
<p><span style="color: #ffffff;">-</span></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.alanwaldron.com/?feed=rss2&amp;p=25</wfw:commentRss>
		</item>
	</channel>
</rss>
