<?xml version="1.0" encoding="UTF-8"?>
<!-- generator="wordpress/2.8.4" -->
<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/"
	>

<channel>
	<title>http://blog.sLajax.com</title>
	<link>http://blog.slajax.com</link>
	<description>secure lightweight ajax solutions</description>
	<pubDate>Wed, 16 Dec 2009 07:39:40 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
			<item>
		<title>Blast Mojo is Live ! Now with scaffolding!</title>
		<link>http://blog.slajax.com/2009/12/16/blast-radius-mojo-now-open-source-with-mojo-tasks-scaffolding/</link>
        <customfield>../uploads/2009/12/mojo.jpg</customfield>
		<comments>http://blog.slajax.com/2009/12/16/blast-radius-mojo-now-open-source-with-mojo-tasks-scaffolding/#comments</comments>
		<pubDate>Wed, 16 Dec 2009 07:32:44 +0000</pubDate>
		<dc:creator>Kyle</dc:creator>
				<category><![CDATA[applications]]></category>
		<category><![CDATA[blast radius]]></category>
		<category><![CDATA[mojo]]></category>
		<category><![CDATA[open source]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[framework]]></category>
		<category><![CDATA[github]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[sLajax applications]]></category>
		<category><![CDATA[source code]]></category>

		<guid isPermaLink="false">http://blog.slajax.com/?p=127</guid>
		<description><![CDATA[ It seems I gained a lot of traffic a little while ago from a little post [1] I made about Mojo. At that time, it seems the internets got confused [2] and somehow a waterfall [3] effect [4] of misunderstandings [5] revolving around the palm pre operating system arose. Gladly those were all cleared up [6]. 

Since then there has been a lot of work going on behind the scenes by the core team trying to get Mojo open source. They came through a couple weeks ago and now Mojo is official out in the wild [7].

Being an advocate of open source, I used the opportunity to quickly build a scaffolding framework for Mojo called Mojo Tasks [8]. I had talked about doing it for a while, and tested a few difference implementations before I finally settled on the current implementation which you can find on my Git Hub account [9].

All that said, I would like to welcome Mojo  [10]into the open source world and I am very excited to make more contributions to this amazing UI framework.


[1] http://blog.slajax.com/2008/07/17/first-week-at-blast-radius-over/
[2] http://discussion.treocentral.com/web-os-development/176298-mojo-javascript-palm.html
[3] http://prepoint.wordpress.com/2009/02/01/two-palm-pre-partners-revealed/
[4] http://palmwebosblog.com/palm-pre/start-developing-for-palm-pre-mojo-sdk-based-on-dojo-toolkit/
[5] http://ajaxian.com/archives/palm-mojo-uses-dojo-view-the-source
[6] http://www.precentral.net/truth-about-mojojs-and-blast-radius
[7] http://blastmojo.com
[8] http://github.com/slajax/Mojo-Tasks
[9] http://github.com/slajax/Mojo-Tasks
[10] http://blastmojo.com]]></description>
			<content:encoded><![CDATA[<img src="http://blog.slajax.com/wp-content/uploads/2009/12/mojo.jpg" alt="mojo" title="mojo" width="169" height="81" class="size-full wp-image-124" /> <p style='float:left'>It seems I gained a lot of traffic a little while ago from a little <a href="http://blog.slajax.com/2008/07/17/first-week-at-blast-radius-over/">post</a> I made about Mojo. At that time, it seems the <a href="http://discussion.treocentral.com/web-os-development/176298-mojo-javascript-palm.html">internets got confused</a> and somehow a <a href="http://prepoint.wordpress.com/2009/02/01/two-palm-pre-partners-revealed/">waterfall</a> <a href="http://palmwebosblog.com/palm-pre/start-developing-for-palm-pre-mojo-sdk-based-on-dojo-toolkit/">effect</a> of <a href="http://ajaxian.com/archives/palm-mojo-uses-dojo-view-the-source">misunderstandings</a> revolving around the palm pre operating system arose. Gladly those were all <a href="http://www.precentral.net/truth-about-mojojs-and-blast-radius">cleared up</a>. </p>

<p>Since then there has been a lot of work going on behind the scenes by the core team trying to get Mojo open source. They came through a couple weeks ago and now <a href="http://blastmojo.com">Mojo is official out in the wild</a>.</p>

<p>Being an advocate of open source, I used the opportunity to quickly <a href="http://github.com/slajax/Mojo-Tasks">build a scaffolding framework for Mojo called Mojo Tasks</a>. I had talked about doing it for a while, and tested a few difference implementations before I finally settled on the current implementation which you can find on my <a href="http://github.com/slajax/Mojo-Tasks">Git Hub account</a>.</p>

<p>All that said, I would like to welcome <a href="http://blastmojo.com">Mojo </a>into the open source world and I am very excited to make more contributions to this amazing UI framework.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.slajax.com/2009/12/16/blast-radius-mojo-now-open-source-with-mojo-tasks-scaffolding/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Fotoglif api client on git-hub</title>
		<link>http://blog.slajax.com/2009/02/17/fotoglif-api-client-on-git-hub/</link>
        <customfield>git-hub-blog.png</customfield>
		<comments>http://blog.slajax.com/2009/02/17/fotoglif-api-client-on-git-hub/#comments</comments>
		<pubDate>Tue, 17 Feb 2009 07:24:24 +0000</pubDate>
		<dc:creator>Kyle</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[fotoglif]]></category>
		<category><![CDATA[github]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[projects]]></category>
		<category><![CDATA[sLabfx]]></category>
		<category><![CDATA[sLedit]]></category>

		<guid isPermaLink="false">http://blog.slajax.com/?p=84</guid>
		<description><![CDATA[I haven't been blogging that much lately, but hopefully that will change now that I've adopted git hub. I think my goal is going to be to release smaller scripts and projects more often. Smaller projects are easier to maintain and actually have a better chance of fitting niche requirements. I'll be porting over both sLedit [1] and sLabFx [2] over to github along with my fotoglif-api-client project [3], the idea being that I might be able to get a nice repository of tools going, and interact with more developers who are interested in this sort of stuff. This is one tactic I've been using to keep myself passionate about coding, and it seems to be working. You see, if you don't know, github has revolutionized open source programming. It's added a social aspect on top of some amazingly powerful source control systems to give you something that could maybe be described as facebook meets darcs. I'm excited to start using it more. I've got a few new scripts planned, but first I'll be doing a bit more catching up on the new implementation of scenemap [4].

[1] http://blog.slajax.com/2007/04/26/mooedit-v-1/
[2] http://blog.slajax.com/2008/08/29/introducing-slabfx-beta/
[3] http://github.com/slajax/fotoglif-api-client/tree/master
[4] http://beta.scenemap.net]]></description>
			<content:encoded><![CDATA[I haven&#8217;t been blogging that much lately, but hopefully that will change now that I&#8217;ve adopted git hub. I think my goal is going to be to release smaller scripts and projects more often. Smaller projects are easier to maintain and actually have a better chance of fitting niche requirements. I&#8217;ll be porting over both <a title="sLedit v1" href="http://blog.slajax.com/2007/04/26/mooedit-v-1/" target="_blank">sLedit</a> and <a title="sLabFx " href="http://blog.slajax.com/2008/08/29/introducing-slabfx-beta/" target="_blank">sLabFx</a> over to github along with my <a title="fotoglif-api-client" href="http://github.com/slajax/fotoglif-api-client/tree/master" target="_blank">fotoglif-api-client project</a>, the idea being that I might be able to get a nice repository of tools going, and interact with more developers who are interested in this sort of stuff. This is one tactic I&#8217;ve been using to keep myself passionate about coding, and it seems to be working. You see, if you don&#8217;t know, github has revolutionized open source programming. It&#8217;s added a social aspect on top of some amazingly powerful source control systems to give you something that could maybe be described as facebook meets darcs. I&#8217;m excited to start using it more. I&#8217;ve got a few new scripts planned, but first I&#8217;ll be doing a bit more catching up on the new implementation of <a href="http://beta.scenemap.net">scenemap</a>.]]></content:encoded>
			<wfw:commentRss>http://blog.slajax.com/2009/02/17/fotoglif-api-client-on-git-hub/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Javascript Cross Domain Ajax</title>
		<link>http://blog.slajax.com/2008/07/23/javascript-cross-domain-ajax/</link>
        <customfield>dojo.png</customfield>
		<comments>http://blog.slajax.com/2008/07/23/javascript-cross-domain-ajax/#comments</comments>
		<pubDate>Wed, 23 Jul 2008 17:16:23 +0000</pubDate>
		<dc:creator>Kyle</dc:creator>
				<category><![CDATA[api]]></category>
		<category><![CDATA[blast radius]]></category>
		<category><![CDATA[frameworks]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[crossdomain]]></category>
		<category><![CDATA[http]]></category>
		<category><![CDATA[mashup]]></category>
		<category><![CDATA[x-domain]]></category>

		<guid isPermaLink="false">http://blog.slajax.com/?p=32</guid>
		<description><![CDATA[Since I joined Blast Radius [1] I have been introduced to a lot of new and interesting development practices, frameworks and designs that I have always read or heard about, but was never really forced or motivated to imply in my daily progression.
One such framework I wrote briefly about is Mojo [2]. Being a framework that has evolved from the Dojo Toolkit [3] my interest peaked this morning when I read a very interesting article on Ajaxian [4] about cross domain transport.


Originally as more of a low level technologist who only picked up ajax and interface development as a smooth view state for communicating with my middle tier controllers I found Javascript to be very much lacking the web services department. Very often the techniques that have been traditionally used consist of one of two strategies for x-domain communication;

1- A remote javascript include is served using:



[1] http://blog.slajax.com/2008/06/17/relocating-to-vancouver-senior-interface-developer/
[2] http://blog.slajax.com/2008/07/17/first-week-at-blast-radius-over/
[3] http://dojotoolkit.com
[4] http://ajaxian.com/archives/windowname-meet-dojoxiowindowname]]></description>
			<content:encoded><![CDATA[Since I <a href="http://blog.slajax.com/2008/06/17/relocating-to-vancouver-senior-interface-developer/" target="_blank">joined Blast Radius</a> I have been introduced to a lot of new and interesting development practices, frameworks and designs that I have always read or heard about, but was never really forced or motivated to imply in my daily progression.
One such framework I wrote briefly about is <a href="http://blog.slajax.com/2008/07/17/first-week-at-blast-radius-over/"  target="_blank">Mojo</a>. Being a framework that has evolved from the <a href="http://dojotoolkit.com"  target="_blank">Dojo Toolkit</a> my interest peaked this morning when I read a very interesting article on <a href="http://ajaxian.com/archives/windowname-meet-dojoxiowindowname" target="_blank">Ajaxian</a> about cross domain transport.
<br/><br/>

Originally as more of a low level technologist who only picked up ajax and interface development as a smooth view state for communicating with my middle tier controllers I found Javascript to be very much lacking the web services department. Very often the techniques that have been traditionally used consist of one of two strategies for x-domain communication;
<br/><br/>
1- <strong>A remote javascript include is served using:</strong><br/>
<div class='codeWrapper'><div class='codeTitle'>javascript<span class='codeInstruct'>hover edges to scroll</span></div><code><pre>&nbsp;
&lt;script type=<span style="color: #3366CC;">'text/javascript href='</span>http:<span style="color: #009900; font-style: italic;">//remotehost/js/api.js?param=1&amp;param2'&gt;</span></pre></code></div>
This is usually a server side script that generates the file contents based on the parameters, and then either renders content locally into your DOM, or provides you with a set of methods that will allow you to manipulate the content. This is not a very secure model and does not allow you to interact with raw xml data very robustly, but as long as you trust the source that is rending the content, it is quite efficient.
<br/><br/>
2- <strong>By matter of Proxy.</strong><br/>
This method I&#8217;ve used very often for direct communication with XML, SOAP, or REST gateways. Generally, I will develop the interface layer to communicate with a server side controller which will then use Curl to invoke the remote data, process and return as an JSON object. I find this method to be very robust, and allows you to create a very extensible gateway for your Javascript cross domain requests.
<br/><br/>

With that said, the post I read this morning is indicating that a new methodology for cross-domain scripting is emerging in the Dojo framework. By way of the property <i>window.name</i> one can make a remote request and retrieve data without exploiting the ever so wonderful cross domain security model that we are subject to in all our favorite browsers. This concept is very new but interesting. It opens up a whole new world of client side mash-up possibilities that are sure to get the creative juices flowing in the client side development space. Here is an example of it would be implemented:

<div class='codeWrapper'><div class='codeTitle'>javascript<span class='codeInstruct'>hover edges to scroll</span></div><code><pre>&nbsp;
dojox.<span style="color: #006600;">io</span>.<span style="color: #006600;">windowName</span>.<span style="color: #006600;">send</span><span style="color: #66cc66;">&#40;</span>method, args<span style="color: #66cc66;">&#41;</span>; <span style="color: #009900; font-style: italic;">// simple method</span>
<span style="color: #009900; font-style: italic;">// deferred result</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> deferred = dojox.<span style="color: #006600;">io</span>.<span style="color: #006600;">windowName</span>.<span style="color: #006600;">send</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"GET"</span>, <span style="color: #66cc66;">&#123;</span>url:<span style="color: #3366CC;">"http://somesite.com/resource"</span><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
deferred.<span style="color: #006600;">addCallback</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>result<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
  <span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"The request returned "</span> + result<span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;</pre></code></div>


]]></content:encoded>
			<wfw:commentRss>http://blog.slajax.com/2008/07/23/javascript-cross-domain-ajax/feed/</wfw:commentRss>
		</item>
		<item>
		<title>First week at Blast Radius over</title>
		<link>http://blog.slajax.com/2008/07/17/first-week-at-blast-radius-over/</link>
        <customfield>../uploads/2008/07/blast_front_door.jpg</customfield>
		<comments>http://blog.slajax.com/2008/07/17/first-week-at-blast-radius-over/#comments</comments>
		<pubDate>Fri, 18 Jul 2008 00:52:49 +0000</pubDate>
		<dc:creator>Kyle</dc:creator>
				<category><![CDATA[blast radius]]></category>
		<category><![CDATA[blast]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[job]]></category>
		<category><![CDATA[radius]]></category>

		<guid isPermaLink="false">http://blog.slajax.com/?p=31</guid>
		<description><![CDATA[

So as of monday my first full week at Blast Radius [1] is completed. As you can see from the terribly pixelated photo above, I found it with no issues. It just so happens that my apartment is much closer then I originally thought. I literally have been leaving for work 2 minutes before I start, which still leaves enough time for an ever so terrible tasting 7/11 coffee.

Last week was full of a lot of orientation, but I did my best to take it in stride and quickly dive into learning the way things work here. I've started learning Mojo, which is an amazing interface development framework that uses the power of Dojo [2] to create a very robust and abstract environment for developers. The code is structured very strongly in a Java style pattern and I'm finding that I'm adapting to it very well. I'll have a post or two more very shortly about my experience learning it and it's details which might provide someone coming after me a starting place.

That all said, I'm happy to be settled and in my new work environment with some amazingly talented developers. It's been so long since I've worked with people who were as keen on interface development as I am. It was a long drive and a big decision to move out here, but I'm very glad I did it and cannot wait to continue to learn everything there is to learn about the experienced beast that is Blast. Tomorrow I'll start "OpX" training which will help me understand and adapt to the very agile and fast past development cycles that have made this company so successful.

[1] http://blastradius.com
[2] http://dojotoolkit.com]]></description>
			<content:encoded><![CDATA[<img class="aligncenter size-full wp-image-26" title="blast_front_door" src="http://blog.slajax.com/wp-content/uploads/2008/07/blast_front_door.jpg" alt="Blast Radius Sign" width="500" height="100" />
<br/><br/>
So as of monday my first full week at <a title="Blast Radius Website" href="http://blastradius.com" target="_blank">Blast Radius</a> is completed. As you can see from the terribly pixelated photo above, I found it with no issues. It just so happens that my apartment is much closer then I originally thought. I literally have been leaving for work 2 minutes before I start, which still leaves enough time for an ever so terrible tasting 7/11 coffee.
<br/><br/>
Last week was full of a lot of orientation, but I did my best to take it in stride and quickly dive into learning the way things work here. I&#8217;ve started learning Mojo, which is an amazing interface development framework that uses the power of <a title="Dojo Toolkit" href="http://dojotoolkit.com" target="_blank">Dojo</a> to create a very robust and abstract environment for developers. The code is structured very strongly in a Java style pattern and I&#8217;m finding that I&#8217;m adapting to it very well. I&#8217;ll have a post or two more very shortly about my experience learning it and it&#8217;s details which might provide someone coming after me a starting place.
<br/><br/>
That all said, I&#8217;m happy to be settled and in my new work environment with some amazingly talented developers. It&#8217;s been so long since I&#8217;ve worked with people who were as keen on interface development as I am. It was a long drive and a big decision to move out here, but I&#8217;m very glad I did it and cannot wait to continue to learn everything there is to learn about the experienced beast that is Blast. Tomorrow I&#8217;ll start &#8220;OpX&#8221; training which will help me understand and adapt to the very agile and fast past development cycles that have made this company so successful.]]></content:encoded>
			<wfw:commentRss>http://blog.slajax.com/2008/07/17/first-week-at-blast-radius-over/feed/</wfw:commentRss>
		</item>
		<item>
		<title>sLedit (mooEdit) v1</title>
		<link>http://blog.slajax.com/2007/04/26/mooedit-v-1/</link>
        <customfield>sLedit.gif</customfield>
		<comments>http://blog.slajax.com/2007/04/26/mooedit-v-1/#comments</comments>
		<pubDate>Thu, 26 Apr 2007 13:56:53 +0000</pubDate>
		<dc:creator>Kyle</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[mootools]]></category>
		<category><![CDATA[widgets]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[mooedit]]></category>
		<category><![CDATA[source code]]></category>

		<guid isPermaLink="false">http://slajax.com/blog/2007/04/26/mooedit-sledit-v-10/</guid>
		<description><![CDATA[I've had a lot of requests to send people mooEdit. Thing is, that I'm way to lazy to package the whole thing. So I'm just going to post the source here, and let you figure it out. It's pretty easy, I'm sure you can do it. Oh yeah, and if anything is wrong with this code, let me know. I kinda just threw the image portion in really quickly without testing. It came from version 2 and should be backwards compatible, but there's always that chance that I missed something.

//////////////////////////////////////////////////////////////////////////////////////////////////
/*  sLedit v1.0 - 3:35 PM 29/03/2007
//////////////////////////////////////////////////////////////////////////////////////////////////
@author: kc@slajax.com
@description: First version of sLedit. Makes all element of a class conditionally editable.
*/
//////////////////////////////////////////////////////////////////////////////////////////////////
// init options - edit these for your purposes
//////////////////////////////////////////////////////////////////////////////////////////////////
window.addEvent('domready', function(){
var edit = new sLedit('.sLedit');
});
//////////////////////////////////////////////////////////////////////////////////////////////////
// class - no editing below this line
//////////////////////////////////////////////////////////////////////////////////////////////////
tinyMCE.init({
mode : "",
theme : "advanced",
plugins : "",
theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink,&#124;,image",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
extended_valid_elements : "a[name&#124;href&#124;target&#124;title&#124;onclick],img[class&#124;src&#124;border=0&#124;alt&#124;title&#124;hspace&#124;vspace&#124;width&#124;height&#124;align&#124;onmouseover&#124;onmouseout&#124;name],hr[class&#124;width&#124;size&#124;noshade],font[face&#124;size&#124;color&#124;style],span[class&#124;align&#124;style]",
file_browser_callback : "fileBrowserCallBack",
paste_use_dialog : false,
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
apply_source_formatting : false
});
function fileBrowserCallBack(field_name, url, type, win) {
var connector = "../../filemanager/browser.html?Connector=connectors/php/connector.php";
var enableAutoTypeSelection = true;
var cType;
tinymcpuk_field = field_name;
tinymcpuk = win;
switch (type) {
case "image":
cType = "Image";
break;
case "flash":
cType = "Flash";
break;
case "file":
cType = "File";
break;
}
if (enableAutoTypeSelection &#38;&#38; cType) {	connector += "&#38;Type=" + cType;	}
window.open(connector, "tinymcpuk", "modal,width=600,height=400");
}


var sLedit = new Class({
initialize: function(sLclass) {
//start editor

$$(sLclass).each(function(el) {

var hilighter = new Fx.Style(el, 'background-color', {wait: false});

$(el).addEvent('mouseover', function() {
hilighter.start('#ffffcc');
});

$(el).addEvent('mouseout', function() {
hilighter.start('#ffffff');
});

if($(el).getProperty('rel').indexOf('textarea') &#62; -1){

$(el).addEvent('click', function() {

var rel = $(el).getProperty('rel');
var params = parseQuery(rel.substr(5,999));

$(el).style.display = 'none';
var content = this.innerHTML;
var container = new Element('div').injectAfter(el);

//check params are suitable or set base attributes
if(params['rows'] == undefined)	params['rows'] = '15';
if(params['cols'] == undefined) params['cols'] = '65';

var txtID = 'mce_'+$(el).getProperty('id');

//textarea
var textarea = new Element('textarea').injectInside(container);
textarea.value = content;
textarea.setProperty('class', 'mceEditor');
textarea.setProperty('id', txtID);
textarea.setStyle('position','relative');
textarea.setProperties({
rows: params['rows'],
cols: params['cols']
});

setTextareaToTinyMCE(txtID);

//save + cancel div
var saveDiv = new Element('div').injectInside(container);
saveDiv.setProperty('class', 'txtAreaSave');

//cancel
var cancel = new Element('a').injectInside(saveDiv);
cancel.setProperty('href', 'javascript:;');
cancel.innerHTML = 'cancel';

//seperator
var span = new Element('span').injectAfter(cancel);
span.innerHTML = ' - ';

//save
var save = new Element('a').injectInside(saveDiv);
save.setProperty('href', 'javascript:;');
save.innerHTML = 'save';

//response
var response = new Element('div').injectBefore(saveDiv);
response.setStyles({'width':'600px'});
response.id = 'txtReponse';

save.addEvent('click', function() {
unsetTextareaToTinyMCE(txtID);
$(el).style.display = 'block';
$(el).innerHTML = textarea.value;

//values
var rel = $(el).getProperty('rel');
var params = parseQuery(rel.substr(5,999));
var url = '/ajax/update.php';
var pars = 'module_type='+params['module_type']
+'&#38;type_sid='+params['type_sid']
+'&#38;sid='+params['sid']
+'&#38;content='+escape(textarea.value);

new Ajax( url, {
method: 'post',
postBody: pars,
update: $('txtReponse'),
onComplete: function(){
var responseFade = new Fx.Style('txtReponse', 'opacity', {
duration:3000,
onComplete:function(){
$('txtReponse').remove();
}
});
responseFade.start.pass([1,0],responseFade).delay(2000);
}
}
).request();

textarea.remove();
this.remove();
cancel.remove();
span.remove();
saveDiv.remove();
});

cancel.addEvent('click', function() {
unsetTextareaToTinyMCE(txtID);
$(el).style.display = 'block';
textarea.remove();
this.remove();
save.remove();
span.remove();
saveDiv.remove();
});

});
}
if($(el).getProperty('rel') == 'input'){
$(el).addEvent('click', function() {
$(el).style.display = 'none';

var content = this.innerHTML;
var container = this.parentNode;

//input
var textarea = new Element('input').injectInside(container);
textarea.value = content;
textarea.setProperty('size',5);

//save + cancel div
var saveDiv = new Element('span').injectInside(container);
saveDiv.setProperty('class', 'inputSave');

//cancel
var cancel = new Element('a').injectInside(saveDiv);
cancel.setProperty('href', 'javascript:;');
cancel.innerHTML = 'x';

//seperator
var span = new Element('span').injectAfter(cancel);
span.innerHTML = ' - ';

//save
var save = new Element('a').injectInside(saveDiv);
save.setProperty('href', 'javascript:;');
save.innerHTML = 's';

save.addEvent('click', function() {
$(el).style.display = 'block';
$(el).innerHTML = textarea.value;

/* new Ajax() */
textarea.remove();
this.remove();
cancel.remove();
span.remove();
saveDiv.remove();
});
cancel.addEvent('click', function() {
$(el).style.display = 'block';
textarea.remove();
this.remove();
save.remove();
span.remove();
saveDiv.remove();
});
});
}
if($(el).getProperty('rel').indexOf('image') &#62; -1){

var rel = $(el).getProperty('rel');
var params = parseQuery(rel.substr(5,999));
$(el).style.cursor = 'pointer';
if( $(el).getParent().getParent().href ) $(el).getParent().getParent().href = '#';
if( $(el).getParent().href ) $(el).getParent().href = '#';

$(el).addEvent('click', function() {

var imgForm = new Element('form').setProperties({
'action': '/ajax/update.php',
'method': 'post',
'id': 'newImageForm',
'enctype':'multipart/form-data'
});
imgForm.setStyles({ 'text-align':'left' });
imgForm.innerHTML = '

'
+'

'
+' '
+' '
+'Alt Tag: '
+'File to Upload:
';var boxHtml = new MooPrompt('Upload a New Image', imgForm, {
buttons: 2,
button1: 'Submit',
button2: 'Cancel',
width: 500,
height: 400,
onButton1: function() {
console.log($('userimage').value.length &#62; 0)
if( $('userimage').value.length &#60; 1 &#124;&#124;
$('userimage').value.length &#62; 0 &#38;&#38;
$('userimage').value.indexOf('.jpg') &#62; -1)
$('newImageForm').submit();
else
alert('Please only upload .jpg files');
}
});
});
}
});}
});
//////////////////////////////////////////////////////////////////////////
// TinyMCE helper functions
//////////////////////////////////////////////////////////////////////////
bTextareaWasTinyfied = false; //this should be global, could be stored in a cookie...
function setTextareaToTinyMCE(sEditorID) {
var oEditor = document.getElementById(sEditorID);
if(oEditor &#38;&#38; !bTextareaWasTinyfied) {
tinyMCE.execCommand('mceAddControl', true, sEditorID);
bTextareaWasTinyfied = true;
}
return;
}
function unsetTextareaToTinyMCE(sEditorID) {
var oEditor = document.getElementById(sEditorID);
if(oEditor &#38;&#38; bTextareaWasTinyfied) {
tinyMCE.execCommand('mceRemoveControl', true, sEditorID);
bTextareaWasTinyfied = false;
}
return;
}
//////////////////////////////////////////////////////////////////////////
// parseQuery code borrowed from ibox borrowed from thickbox, Thanks Cody!
// retrieve rel attributes with cols=x&#38;rows=x
//////////////////////////////////////////////////////////////////////////
parseQuery = function(query) {
var Params = new Object ();
if (!query) return Params;
var Pairs = query.split(/[;&#38;]/);
for ( var i = 0; i &#60; Pairs.length; i++ ) {
var KeyVal = Pairs[i].split('=');
if ( ! KeyVal &#124;&#124; KeyVal.length != 2 ) continue;
var key = unescape( KeyVal[0] );
var val = unescape( KeyVal[1] );
val = val.replace(/\+/g, ' ');
Params[key] = val;
}
return Params;
}


So the whole idea, is that you initiate the class at the bottom of the page, and it loops through all class elements applying a conditional editable feature to that element. I decided to add image editing via moo Prompt [1] so make sure you get that script too. You'll also need tinymce for this version (tinypuk support also included).

Ok, now for practical examples so I'm not answering emails about this:









Now for the different editable areas:


Image:

TextArea:
TEXTTEXTTEXT
input field:
TEXTTEXTTEXT


And then just run the class:


window.onload = function(){
new sLedit(".sLedit");
};


And that should pretty much do it. It's a fairly simple but unrevised script. I've done some new variations of it, however those will remain closed source for a while. I was thinking of putting up demos for the image and input fields, but for now I'll just give you the textarea example:



Download the source code here [2]

[1] http://demo.slajax.com/mooPrompt
[2] http://assets.slajax.com/filestore/code/sLedit.v1.rar]]></description>
			<content:encoded><![CDATA[I&#8217;ve had a lot of requests to send people mooEdit. Thing is, that I&#8217;m way to lazy to package the whole thing. So I&#8217;m just going to post the source here, and let you figure it out. It&#8217;s pretty easy, I&#8217;m sure you can do it. Oh yeah, and if anything is wrong with this code, let me know. I kinda just threw the image portion in really quickly without testing. It came from version 2 and should be backwards compatible, but there&#8217;s always that chance that I missed something.
<div class='codeWrapper'><div class='codeTitle'>javascript<span class='codeInstruct'>hover edges to scroll</span></div><code><pre>&nbsp;
<span style="color: #009900; font-style: italic;">//////////////////////////////////////////////////////////////////////////////////////////////////</span>
<span style="color: #009900; font-style: italic;">/*  sLedit v1.0 - 3:35 PM 29/03/2007
//////////////////////////////////////////////////////////////////////////////////////////////////
@author: kc@slajax.com
@description: First version of sLedit. Makes all element of a class conditionally editable.
*/</span>
<span style="color: #009900; font-style: italic;">//////////////////////////////////////////////////////////////////////////////////////////////////</span>
<span style="color: #009900; font-style: italic;">// init options - edit these for your purposes</span>
<span style="color: #009900; font-style: italic;">//////////////////////////////////////////////////////////////////////////////////////////////////</span>
window.<span style="color: #006600;">addEvent</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'domready'</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>
<span style="color: #003366; font-weight: bold;">var</span> edit = <span style="color: #003366; font-weight: bold;">new</span> sLedit<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.sLedit'</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #009900; font-style: italic;">//////////////////////////////////////////////////////////////////////////////////////////////////</span>
<span style="color: #009900; font-style: italic;">// class - no editing below this line</span>
<span style="color: #009900; font-style: italic;">//////////////////////////////////////////////////////////////////////////////////////////////////</span>
tinyMCE.<span style="color: #006600;">init</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span>
mode : <span style="color: #3366CC;">""</span>,
theme : <span style="color: #3366CC;">"advanced"</span>,
plugins : <span style="color: #3366CC;">""</span>,
theme_advanced_buttons1 : <span style="color: #3366CC;">"bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink,|,image"</span>,
theme_advanced_buttons2 : <span style="color: #3366CC;">""</span>,
theme_advanced_buttons3 : <span style="color: #3366CC;">""</span>,
theme_advanced_toolbar_location : <span style="color: #3366CC;">"top"</span>,
theme_advanced_toolbar_align : <span style="color: #3366CC;">"left"</span>,
theme_advanced_path_location : <span style="color: #3366CC;">"bottom"</span>,
extended_valid_elements : <span style="color: #3366CC;">"a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"</span>,
file_browser_callback : <span style="color: #3366CC;">"fileBrowserCallBack"</span>,
paste_use_dialog : <span style="color: #003366; font-weight: bold;">false</span>,
theme_advanced_resizing : <span style="color: #003366; font-weight: bold;">true</span>,
theme_advanced_resize_horizontal : <span style="color: #003366; font-weight: bold;">false</span>,
apply_source_formatting : <span style="color: #003366; font-weight: bold;">false</span>
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #003366; font-weight: bold;">function</span> fileBrowserCallBack<span style="color: #66cc66;">&#40;</span>field_name, url, type, win<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #003366; font-weight: bold;">var</span> connector = <span style="color: #3366CC;">"../../filemanager/browser.html?Connector=connectors/php/connector.php"</span>;
<span style="color: #003366; font-weight: bold;">var</span> enableAutoTypeSelection = <span style="color: #003366; font-weight: bold;">true</span>;
<span style="color: #003366; font-weight: bold;">var</span> cType;
tinymcpuk_field = field_name;
tinymcpuk = win;
<span style="color: #000066; font-weight: bold;">switch</span> <span style="color: #66cc66;">&#40;</span>type<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">"image"</span>:
cType = <span style="color: #3366CC;">"Image"</span>;
<span style="color: #000066; font-weight: bold;">break</span>;
<span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">"flash"</span>:
cType = <span style="color: #3366CC;">"Flash"</span>;
<span style="color: #000066; font-weight: bold;">break</span>;
<span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">"file"</span>:
cType = <span style="color: #3366CC;">"File"</span>;
<span style="color: #000066; font-weight: bold;">break</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>enableAutoTypeSelection &amp;amp;&amp;amp; cType<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>	connector += <span style="color: #3366CC;">"&amp;amp;Type="</span> + cType;	<span style="color: #66cc66;">&#125;</span>
window.<span style="color: #006600;">open</span><span style="color: #66cc66;">&#40;</span>connector, <span style="color: #3366CC;">"tinymcpuk"</span>, <span style="color: #3366CC;">"modal,width=600,height=400"</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></code></div>

<div class='codeWrapper'><div class='codeTitle'>javascript<span class='codeInstruct'>hover edges to scroll</span></div><code><pre>&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> sLedit = <span style="color: #003366; font-weight: bold;">new</span> <span style="color: #003366; font-weight: bold;">Class</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span>
initialize: <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>sLclass<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #009900; font-style: italic;">//start editor</span>
&nbsp;
$$<span style="color: #66cc66;">&#40;</span>sLclass<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">each</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> hilighter = <span style="color: #003366; font-weight: bold;">new</span> Fx.<span style="color: #006600;">Style</span><span style="color: #66cc66;">&#40;</span>el, <span style="color: #3366CC;">'background-color'</span>, <span style="color: #66cc66;">&#123;</span>wait: <span style="color: #003366; font-weight: bold;">false</span><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">addEvent</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'mouseover'</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>
hilighter.<span style="color: #006600;">start</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'#ffffcc'</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">addEvent</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'mouseout'</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>
hilighter.<span style="color: #006600;">start</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'#ffffff'</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span>$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'rel'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">indexOf</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'textarea'</span><span style="color: #66cc66;">&#41;</span> &amp;gt; -<span style="color: #CC0000;">1</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
&nbsp;
$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">addEvent</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'click'</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>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> rel = $<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'rel'</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #003366; font-weight: bold;">var</span> params = parseQuery<span style="color: #66cc66;">&#40;</span>rel.<span style="color: #006600;">substr</span><span style="color: #66cc66;">&#40;</span><span style="color: #CC0000;">5</span>,<span style="color: #CC0000;">999</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">style</span>.<span style="color: #006600;">display</span> = <span style="color: #3366CC;">'none'</span>;
<span style="color: #003366; font-weight: bold;">var</span> content = <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">innerHTML</span>;
<span style="color: #003366; font-weight: bold;">var</span> container = <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'div'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">injectAfter</span><span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #009900; font-style: italic;">//check params are suitable or set base attributes</span>
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span>params<span style="color: #66cc66;">&#91;</span><span style="color: #3366CC;">'rows'</span><span style="color: #66cc66;">&#93;</span> == undefined<span style="color: #66cc66;">&#41;</span>	params<span style="color: #66cc66;">&#91;</span><span style="color: #3366CC;">'rows'</span><span style="color: #66cc66;">&#93;</span> = <span style="color: #3366CC;">'15'</span>;
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span>params<span style="color: #66cc66;">&#91;</span><span style="color: #3366CC;">'cols'</span><span style="color: #66cc66;">&#93;</span> == undefined<span style="color: #66cc66;">&#41;</span> params<span style="color: #66cc66;">&#91;</span><span style="color: #3366CC;">'cols'</span><span style="color: #66cc66;">&#93;</span> = <span style="color: #3366CC;">'65'</span>;
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> txtID = <span style="color: #3366CC;">'mce_'</span>+$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'id'</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #009900; font-style: italic;">//textarea</span>
<span style="color: #003366; font-weight: bold;">var</span> textarea = <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'textarea'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">injectInside</span><span style="color: #66cc66;">&#40;</span>container<span style="color: #66cc66;">&#41;</span>;
textarea.<span style="color: #006600;">value</span> = content;
textarea.<span style="color: #006600;">setProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'class'</span>, <span style="color: #3366CC;">'mceEditor'</span><span style="color: #66cc66;">&#41;</span>;
textarea.<span style="color: #006600;">setProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'id'</span>, txtID<span style="color: #66cc66;">&#41;</span>;
textarea.<span style="color: #006600;">setStyle</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'position'</span>,<span style="color: #3366CC;">'relative'</span><span style="color: #66cc66;">&#41;</span>;
textarea.<span style="color: #006600;">setProperties</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span>
rows: params<span style="color: #66cc66;">&#91;</span><span style="color: #3366CC;">'rows'</span><span style="color: #66cc66;">&#93;</span>,
cols: params<span style="color: #66cc66;">&#91;</span><span style="color: #3366CC;">'cols'</span><span style="color: #66cc66;">&#93;</span>
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
setTextareaToTinyMCE<span style="color: #66cc66;">&#40;</span>txtID<span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #009900; font-style: italic;">//save + cancel div</span>
<span style="color: #003366; font-weight: bold;">var</span> saveDiv = <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'div'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">injectInside</span><span style="color: #66cc66;">&#40;</span>container<span style="color: #66cc66;">&#41;</span>;
saveDiv.<span style="color: #006600;">setProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'class'</span>, <span style="color: #3366CC;">'txtAreaSave'</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #009900; font-style: italic;">//cancel</span>
<span style="color: #003366; font-weight: bold;">var</span> cancel = <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">injectInside</span><span style="color: #66cc66;">&#40;</span>saveDiv<span style="color: #66cc66;">&#41;</span>;
cancel.<span style="color: #006600;">setProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'href'</span>, <span style="color: #3366CC;">'javascript:;'</span><span style="color: #66cc66;">&#41;</span>;
cancel.<span style="color: #006600;">innerHTML</span> = <span style="color: #3366CC;">'cancel'</span>;
&nbsp;
<span style="color: #009900; font-style: italic;">//seperator</span>
<span style="color: #003366; font-weight: bold;">var</span> span = <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'span'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">injectAfter</span><span style="color: #66cc66;">&#40;</span>cancel<span style="color: #66cc66;">&#41;</span>;
span.<span style="color: #006600;">innerHTML</span> = <span style="color: #3366CC;">' - '</span>;
&nbsp;
<span style="color: #009900; font-style: italic;">//save</span>
<span style="color: #003366; font-weight: bold;">var</span> save = <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">injectInside</span><span style="color: #66cc66;">&#40;</span>saveDiv<span style="color: #66cc66;">&#41;</span>;
save.<span style="color: #006600;">setProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'href'</span>, <span style="color: #3366CC;">'javascript:;'</span><span style="color: #66cc66;">&#41;</span>;
save.<span style="color: #006600;">innerHTML</span> = <span style="color: #3366CC;">'save'</span>;
&nbsp;
<span style="color: #009900; font-style: italic;">//response</span>
<span style="color: #003366; font-weight: bold;">var</span> response = <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'div'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">injectBefore</span><span style="color: #66cc66;">&#40;</span>saveDiv<span style="color: #66cc66;">&#41;</span>;
response.<span style="color: #006600;">setStyles</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span><span style="color: #3366CC;">'width'</span>:<span style="color: #3366CC;">'600px'</span><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
response.<span style="color: #006600;">id</span> = <span style="color: #3366CC;">'txtReponse'</span>;
&nbsp;
save.<span style="color: #006600;">addEvent</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'click'</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>
unsetTextareaToTinyMCE<span style="color: #66cc66;">&#40;</span>txtID<span style="color: #66cc66;">&#41;</span>;
$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">style</span>.<span style="color: #006600;">display</span> = <span style="color: #3366CC;">'block'</span>;
$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">innerHTML</span> = textarea.<span style="color: #006600;">value</span>;
&nbsp;
<span style="color: #009900; font-style: italic;">//values</span>
<span style="color: #003366; font-weight: bold;">var</span> rel = $<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'rel'</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #003366; font-weight: bold;">var</span> params = parseQuery<span style="color: #66cc66;">&#40;</span>rel.<span style="color: #006600;">substr</span><span style="color: #66cc66;">&#40;</span><span style="color: #CC0000;">5</span>,<span style="color: #CC0000;">999</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #003366; font-weight: bold;">var</span> url = <span style="color: #3366CC;">'/ajax/update.php'</span>;
<span style="color: #003366; font-weight: bold;">var</span> pars = <span style="color: #3366CC;">'module_type='</span>+params<span style="color: #66cc66;">&#91;</span><span style="color: #3366CC;">'module_type'</span><span style="color: #66cc66;">&#93;</span>
+<span style="color: #3366CC;">'&amp;amp;type_sid='</span>+params<span style="color: #66cc66;">&#91;</span><span style="color: #3366CC;">'type_sid'</span><span style="color: #66cc66;">&#93;</span>
+<span style="color: #3366CC;">'&amp;amp;sid='</span>+params<span style="color: #66cc66;">&#91;</span><span style="color: #3366CC;">'sid'</span><span style="color: #66cc66;">&#93;</span>
+<span style="color: #3366CC;">'&amp;amp;content='</span>+escape<span style="color: #66cc66;">&#40;</span>textarea.<span style="color: #006600;">value</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #003366; font-weight: bold;">new</span> Ajax<span style="color: #66cc66;">&#40;</span> url, <span style="color: #66cc66;">&#123;</span>
method: <span style="color: #3366CC;">'post'</span>,
postBody: pars,
update: $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'txtReponse'</span><span style="color: #66cc66;">&#41;</span>,
onComplete: <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>
<span style="color: #003366; font-weight: bold;">var</span> responseFade = <span style="color: #003366; font-weight: bold;">new</span> Fx.<span style="color: #006600;">Style</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'txtReponse'</span>, <span style="color: #3366CC;">'opacity'</span>, <span style="color: #66cc66;">&#123;</span>
duration:<span style="color: #CC0000;">3000</span>,
onComplete:<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>
$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'txtReponse'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
responseFade.<span style="color: #006600;">start</span>.<span style="color: #006600;">pass</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;">1</span>,<span style="color: #CC0000;">0</span><span style="color: #66cc66;">&#93;</span>,responseFade<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">delay</span><span style="color: #66cc66;">&#40;</span><span style="color: #CC0000;">2000</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">request</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
textarea.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
cancel.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
span.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
saveDiv.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
cancel.<span style="color: #006600;">addEvent</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'click'</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>
unsetTextareaToTinyMCE<span style="color: #66cc66;">&#40;</span>txtID<span style="color: #66cc66;">&#41;</span>;
$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">style</span>.<span style="color: #006600;">display</span> = <span style="color: #3366CC;">'block'</span>;
textarea.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
save.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
span.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
saveDiv.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span>$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'rel'</span><span style="color: #66cc66;">&#41;</span> == <span style="color: #3366CC;">'input'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">addEvent</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'click'</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>
$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">style</span>.<span style="color: #006600;">display</span> = <span style="color: #3366CC;">'none'</span>;
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> content = <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">innerHTML</span>;
<span style="color: #003366; font-weight: bold;">var</span> container = <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">parentNode</span>;
&nbsp;
<span style="color: #009900; font-style: italic;">//input</span>
<span style="color: #003366; font-weight: bold;">var</span> textarea = <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'input'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">injectInside</span><span style="color: #66cc66;">&#40;</span>container<span style="color: #66cc66;">&#41;</span>;
textarea.<span style="color: #006600;">value</span> = content;
textarea.<span style="color: #006600;">setProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'size'</span>,<span style="color: #CC0000;">5</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #009900; font-style: italic;">//save + cancel div</span>
<span style="color: #003366; font-weight: bold;">var</span> saveDiv = <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'span'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">injectInside</span><span style="color: #66cc66;">&#40;</span>container<span style="color: #66cc66;">&#41;</span>;
saveDiv.<span style="color: #006600;">setProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'class'</span>, <span style="color: #3366CC;">'inputSave'</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #009900; font-style: italic;">//cancel</span>
<span style="color: #003366; font-weight: bold;">var</span> cancel = <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">injectInside</span><span style="color: #66cc66;">&#40;</span>saveDiv<span style="color: #66cc66;">&#41;</span>;
cancel.<span style="color: #006600;">setProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'href'</span>, <span style="color: #3366CC;">'javascript:;'</span><span style="color: #66cc66;">&#41;</span>;
cancel.<span style="color: #006600;">innerHTML</span> = <span style="color: #3366CC;">'x'</span>;
&nbsp;
<span style="color: #009900; font-style: italic;">//seperator</span>
<span style="color: #003366; font-weight: bold;">var</span> span = <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'span'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">injectAfter</span><span style="color: #66cc66;">&#40;</span>cancel<span style="color: #66cc66;">&#41;</span>;
span.<span style="color: #006600;">innerHTML</span> = <span style="color: #3366CC;">' - '</span>;
&nbsp;
<span style="color: #009900; font-style: italic;">//save</span>
<span style="color: #003366; font-weight: bold;">var</span> save = <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">injectInside</span><span style="color: #66cc66;">&#40;</span>saveDiv<span style="color: #66cc66;">&#41;</span>;
save.<span style="color: #006600;">setProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'href'</span>, <span style="color: #3366CC;">'javascript:;'</span><span style="color: #66cc66;">&#41;</span>;
save.<span style="color: #006600;">innerHTML</span> = <span style="color: #3366CC;">'s'</span>;
&nbsp;
save.<span style="color: #006600;">addEvent</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'click'</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>
$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">style</span>.<span style="color: #006600;">display</span> = <span style="color: #3366CC;">'block'</span>;
$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">innerHTML</span> = textarea.<span style="color: #006600;">value</span>;
&nbsp;
<span style="color: #009900; font-style: italic;">/* new Ajax() */</span>
textarea.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
cancel.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
span.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
saveDiv.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
cancel.<span style="color: #006600;">addEvent</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'click'</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>
$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">style</span>.<span style="color: #006600;">display</span> = <span style="color: #3366CC;">'block'</span>;
textarea.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
save.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
span.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
saveDiv.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span>$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'rel'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">indexOf</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'image'</span><span style="color: #66cc66;">&#41;</span> &amp;gt; -<span style="color: #CC0000;">1</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> rel = $<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'rel'</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #003366; font-weight: bold;">var</span> params = parseQuery<span style="color: #66cc66;">&#40;</span>rel.<span style="color: #006600;">substr</span><span style="color: #66cc66;">&#40;</span><span style="color: #CC0000;">5</span>,<span style="color: #CC0000;">999</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">style</span>.<span style="color: #006600;">cursor</span> = <span style="color: #3366CC;">'pointer'</span>;
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span> $<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">href</span> <span style="color: #66cc66;">&#41;</span> $<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">href</span> = <span style="color: #3366CC;">'#'</span>;
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span> $<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">href</span> <span style="color: #66cc66;">&#41;</span> $<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">href</span> = <span style="color: #3366CC;">'#'</span>;
&nbsp;
$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">addEvent</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'click'</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>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> imgForm = <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'form'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">setProperties</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span>
<span style="color: #3366CC;">'action'</span>: <span style="color: #3366CC;">'/ajax/update.php'</span>,
<span style="color: #3366CC;">'method'</span>: <span style="color: #3366CC;">'post'</span>,
<span style="color: #3366CC;">'id'</span>: <span style="color: #3366CC;">'newImageForm'</span>,
<span style="color: #3366CC;">'enctype'</span>:<span style="color: #3366CC;">'multipart/form-data'</span>
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
imgForm.<span style="color: #006600;">setStyles</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span> <span style="color: #3366CC;">'text-align'</span>:<span style="color: #3366CC;">'left'</span> <span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
imgForm.<span style="color: #006600;">innerHTML</span> = <span style="color: #3366CC;">'&lt;img src=&quot;'</span>+$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">src</span>+<span style="color: #3366CC;">'&quot; alt=&quot;'</span>+$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">alt</span>+<span style="color: #3366CC;">'&quot; /&gt;
&nbsp;
'</span>
+<span style="color: #3366CC;">'
&nbsp;
&lt;input id=&quot;module_type&quot; name=&quot;module_type&quot; value=&quot;skin_variable&quot; type=&quot;hidden&quot; /&gt;'</span>
+<span style="color: #3366CC;">' &lt;input id=&quot;type_sid&quot; name=&quot;type_sid&quot; value=&quot;'</span>+params<span style="color: #66cc66;">&#91;</span><span style="color: #3366CC;">" type="</span>hidden<span style="color: #3366CC;">" /&gt;'
+' &lt;input id="</span>sid<span style="color: #3366CC;">" name="</span>sid<span style="color: #3366CC;">" value="</span><span style="color: #3366CC;">'+params[&quot; type=&quot;hidden&quot; /&gt;'</span>
+<span style="color: #3366CC;">'Alt Tag: &lt;input class=&quot;textField&quot; id=&quot;alt&quot; name=&quot;alt&quot; value=&quot;'</span>+$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">alt</span>+<span style="color: #3366CC;">'&quot; style=&quot;width: 375px&quot; type=&quot;input&quot; /&gt;'</span>
+<span style="color: #3366CC;">'File to Upload:
&lt;input class=&quot;textField&quot; id=&quot;userimage&quot; name=&quot;userimage&quot; type=&quot;file&quot; /&gt;'</span>;var boxHtml = <span style="color: #003366; font-weight: bold;">new</span> MooPrompt<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'Upload a New Image'</span>, imgForm, <span style="color: #66cc66;">&#123;</span>
buttons: <span style="color: #CC0000;">2</span>,
button1: <span style="color: #3366CC;">'Submit'</span>,
button2: <span style="color: #3366CC;">'Cancel'</span>,
width: <span style="color: #CC0000;">500</span>,
height: <span style="color: #CC0000;">400</span>,
onButton1: <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>
console.<span style="color: #006600;">log</span><span style="color: #66cc66;">&#40;</span>$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'userimage'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">value</span>.<span style="color: #006600;">length</span> &amp;gt; <span style="color: #CC0000;">0</span><span style="color: #66cc66;">&#41;</span>
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span> $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'userimage'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">value</span>.<span style="color: #006600;">length</span> &amp;lt; <span style="color: #CC0000;">1</span> ||
$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'userimage'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">value</span>.<span style="color: #006600;">length</span> &amp;gt; <span style="color: #CC0000;">0</span> &amp;amp;&amp;amp;
$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'userimage'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">value</span>.<span style="color: #006600;">indexOf</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.jpg'</span><span style="color: #66cc66;">&#41;</span> &amp;gt; -<span style="color: #CC0000;">1</span><span style="color: #66cc66;">&#41;</span>
$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'newImageForm'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">submit</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #000066; font-weight: bold;">else</span>
<span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'Please only upload .jpg files'</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #009900; font-style: italic;">//////////////////////////////////////////////////////////////////////////</span>
<span style="color: #009900; font-style: italic;">// TinyMCE helper functions</span>
<span style="color: #009900; font-style: italic;">//////////////////////////////////////////////////////////////////////////</span>
bTextareaWasTinyfied = <span style="color: #003366; font-weight: bold;">false</span>; <span style="color: #009900; font-style: italic;">//this should be global, could be stored in a cookie...</span>
<span style="color: #003366; font-weight: bold;">function</span> setTextareaToTinyMCE<span style="color: #66cc66;">&#40;</span>sEditorID<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #003366; font-weight: bold;">var</span> oEditor = document.<span style="color: #006600;">getElementById</span><span style="color: #66cc66;">&#40;</span>sEditorID<span style="color: #66cc66;">&#41;</span>;
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span>oEditor &amp;amp;&amp;amp; !bTextareaWasTinyfied<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
tinyMCE.<span style="color: #006600;">execCommand</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'mceAddControl'</span>, <span style="color: #003366; font-weight: bold;">true</span>, sEditorID<span style="color: #66cc66;">&#41;</span>;
bTextareaWasTinyfied = <span style="color: #003366; font-weight: bold;">true</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #000066; font-weight: bold;">return</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #003366; font-weight: bold;">function</span> unsetTextareaToTinyMCE<span style="color: #66cc66;">&#40;</span>sEditorID<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #003366; font-weight: bold;">var</span> oEditor = document.<span style="color: #006600;">getElementById</span><span style="color: #66cc66;">&#40;</span>sEditorID<span style="color: #66cc66;">&#41;</span>;
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span>oEditor &amp;amp;&amp;amp; bTextareaWasTinyfied<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
tinyMCE.<span style="color: #006600;">execCommand</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'mceRemoveControl'</span>, <span style="color: #003366; font-weight: bold;">true</span>, sEditorID<span style="color: #66cc66;">&#41;</span>;
bTextareaWasTinyfied = <span style="color: #003366; font-weight: bold;">false</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #000066; font-weight: bold;">return</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #009900; font-style: italic;">//////////////////////////////////////////////////////////////////////////</span>
<span style="color: #009900; font-style: italic;">// parseQuery code borrowed from ibox borrowed from thickbox, Thanks Cody!</span>
<span style="color: #009900; font-style: italic;">// retrieve rel attributes with cols=x&amp;amp;rows=x</span>
<span style="color: #009900; font-style: italic;">//////////////////////////////////////////////////////////////////////////</span>
parseQuery = <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>query<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #003366; font-weight: bold;">var</span> Params = <span style="color: #003366; font-weight: bold;">new</span> Object <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>!query<span style="color: #66cc66;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> Params;
<span style="color: #003366; font-weight: bold;">var</span> Pairs = query.<span style="color: #006600;">split</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066FF;">/<span style="color: #66cc66;">&#91;</span>;&amp;amp;<span style="color: #66cc66;">&#93;</span>/</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #003366; font-weight: bold;">var</span> i = <span style="color: #CC0000;">0</span>; i &amp;lt; Pairs.<span style="color: #006600;">length</span>; i++ <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #003366; font-weight: bold;">var</span> KeyVal = Pairs<span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">split</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'='</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span> ! KeyVal || KeyVal.<span style="color: #006600;">length</span> != <span style="color: #CC0000;">2</span> <span style="color: #66cc66;">&#41;</span> <span style="color: #000066; font-weight: bold;">continue</span>;
<span style="color: #003366; font-weight: bold;">var</span> key = unescape<span style="color: #66cc66;">&#40;</span> KeyVal<span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #66cc66;">&#93;</span> <span style="color: #66cc66;">&#41;</span>;
<span style="color: #003366; font-weight: bold;">var</span> val = unescape<span style="color: #66cc66;">&#40;</span> KeyVal<span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #66cc66;">&#93;</span> <span style="color: #66cc66;">&#41;</span>;
val = val.<span style="color: #006600;">replace</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066FF;">/\+/g</span>, <span style="color: #3366CC;">' '</span><span style="color: #66cc66;">&#41;</span>;
Params<span style="color: #66cc66;">&#91;</span>key<span style="color: #66cc66;">&#93;</span> = val;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #000066; font-weight: bold;">return</span> Params;
<span style="color: #66cc66;">&#125;</span></pre></code></div>

So the whole idea, is that you initiate the class at the bottom of the page, and it loops through all class elements applying a conditional editable feature to that element. I decided to add image editing via <a href="http://demo.slajax.com/mooPrompt">moo Prompt</a> so make sure you get that script too. You&#8217;ll also need tinymce for this version (tinypuk support also included).

Ok, now for practical examples so I&#8217;m not answering emails about this:

<div class='codeWrapper'><div class='codeTitle'>html<span class='codeInstruct'>hover edges to scroll</span></div><code><pre>&nbsp;
<span style="color: #009900;"><span style="color: #808080; font-style: italic;">&lt;!-- include script dependancies ---&gt;</span></span>
<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;">"/skin/shared/js/moo.tools.v1.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>
<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;">"/skin/shared/js/moo.prompt.v1.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>
<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;">"/skin/shared/js/tinymce/tiny_mce.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>
<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;">"/skin/shared/js/sLedit.v1.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></pre></code></div>

Now for the different editable areas:

<div class='codeWrapper'><div class='codeTitle'>html<span class='codeInstruct'>hover edges to scroll</span></div><code><pre>&nbsp;
Image:
<span style="color: #009900;"><a href="http://december.com/html/4/element/img.html"><span style="color: #000000; font-weight: bold;">&lt;img</span></a> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"/images/yeahdude.gif"</span> <span style="color: #000066;">alt</span>=<span style="color: #ff0000;">"YEAH DUDE"</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"sLedit"</span> <span style="color: #000066;">rel</span>=<span style="color: #ff0000;">"image"</span> <span style="color: #000066;">border</span>=<span style="color: #ff0000;">"0"</span> /<span style="color: #000000; font-weight: bold;">&gt;</span></a></span>
TextArea:
<span style="color: #009900;"><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">&lt;p</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"sLedit"</span> <span style="color: #000066;">rel</span>=<span style="color: #ff0000;">"textarea&amp;amp;cols=50&amp;amp;rows=20"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>TEXTTEXTTEXT<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/p&gt;</span></span>
input field:
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;">&lt;span</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"sLedit"</span> <span style="color: #000066;">rel</span>=<span style="color: #ff0000;">"input"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>TEXTTEXTTEXT
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/span&gt;</span></span></pre></code></div>
And then just run the class:

<div class='codeWrapper'><div class='codeTitle'>javascript<span class='codeInstruct'>hover edges to scroll</span></div><code><pre>&nbsp;
window.<span style="color: #006600;">onload</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>
<span style="color: #003366; font-weight: bold;">new</span> sLedit<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">".sLedit"</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>;</pre></code></div>

And that should pretty much do it. It&#8217;s a fairly simple but unrevised script. I&#8217;ve done some new variations of it, however those will remain closed source for a while. I was thinking of putting up demos for the image and input fields, but for now I&#8217;ll just give you the textarea example:<br/>

<iframe src="http://demo.slajax.com/sLedit/" frameborder="0" height="400" width="500"></iframe>

Download the source code <a href="http://assets.slajax.com/filestore/code/sLedit.v1.rar" target="_blank">here</a>]]></content:encoded>
			<wfw:commentRss>http://blog.slajax.com/2007/04/26/mooedit-v-1/feed/</wfw:commentRss>
		</item>
		<item>
		<title>sLvalidate v.1</title>
		<link>http://blog.slajax.com/2007/03/20/sl-validate/</link>
        <customfield>validate.gif</customfield>
		<comments>http://blog.slajax.com/2007/03/20/sl-validate/#comments</comments>
		<pubDate>Tue, 20 Mar 2007 22:02:26 +0000</pubDate>
		<dc:creator>Kyle</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[source code]]></category>
		<category><![CDATA[validiation]]></category>

		<guid isPermaLink="false">http://slajax.com/blog/2007/03/20/sl-validate/</guid>
		<description><![CDATA[So I had to write a validation script for sLquantity [1]. The idea is simply that if any items 
//////////////////////////////////////////////////////////////////////////////////////////////////
/* sLvalidate - v1.0 - 5:16 PM 20/03/2007
	@author: kc@slajax.com
	@validates entries for sLquantity before posting to update cookie
			var sLvalidateOpts = { 
					items:'select', // boxes to gather
					submitBtn: 'button', // id of submit button
					valid: true // this must be set to true for validation to occur
					};	
*/
//////////////////////////////////////////////////////////////////////////////////////////////////

var sLvalidate = new Class({
		initialize:function(options){
			this.setOptions(options);
			this.href(options);
		},
		setOptions:function(options){
			this.options = Object.extend( { }, options &#124;&#124; { } );
		},
		gather:function(options){
			this.resetErrors(options);
			this.itemArr = [];
			this.itemObj = {};
			
		$$(options.items).each(function(el,i){
					this.itemArr[i] = $(el).options[$(el).selectedIndex].value;
					this.itemObj[i] = $(el);
				}.bind(this) );
				
			this.validate(options);
		},
		validate:function(options){				
			this.itemArr.each(function(el,i){ 				
				if ( this.itemArr[i] == 0 )
							this.throwError(options, i);							
				}.bind(this) );

		 if( options.valid ) document.forms[0].submit()
		},
		throwError:function(options, i){
			options.valid = false;
				this.itemObj[i].getParent().getParent().setStyle('background-color','#FF0000');
				this.itemObj[i].getParent().getParent().setStyle('padding','2px 0px 2px 2px');
				
		},
		resetErrors:function(options){
			options.valid = true;
			$$(options.items).each(function(el,i){
					$(el).getParent().getParent().setStyle('background-color','#FFFFFF');		
					$(el).getParent().getParent().setStyle('padding','0');
			}.bind(this) );
		},
		href:function(options){
					$(options.submitBtn).addEvent('click', function(){
								this.gather(options);	
						}.bind(this) );		
		}
});

var sLvalidateOpts = { 
			items:'select', // boxes to gather
			submitBtn: 'button', // id of submit button
			valid: true // this must be set to true for validation to occur
			};	

		var validate = new sLvalidate(sLvalidateOpts);


At some point I'll extend this to cover all form validation needs.

[1] http://slajax.com/blog/2007/03/16/sl-quantity/]]></description>
			<content:encoded><![CDATA[So I had to write a validation script for <a href="http://slajax.com/blog/2007/03/16/sl-quantity/">sLquantity</a>. The idea is simply that if any items <div class='codeWrapper'><div class='codeTitle'>javascript<span class='codeInstruct'>hover edges to scroll</span></div><code><pre>&nbsp;
<span style="color: #009900; font-style: italic;">//////////////////////////////////////////////////////////////////////////////////////////////////</span>
<span style="color: #009900; font-style: italic;">/* sLvalidate - v1.0 - 5:16 PM 20/03/2007
	@author: kc@slajax.com
	@validates entries for sLquantity before posting to update cookie
			var sLvalidateOpts = { 
					items:'select', // boxes to gather
					submitBtn: 'button', // id of submit button
					valid: true // this must be set to true for validation to occur
					};	
*/</span>
<span style="color: #009900; font-style: italic;">//////////////////////////////////////////////////////////////////////////////////////////////////</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> sLvalidate = <span style="color: #003366; font-weight: bold;">new</span> <span style="color: #003366; font-weight: bold;">Class</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span>
		initialize:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">setOptions</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span>;
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">href</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>,
		setOptions:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">options</span> = Object.<span style="color: #006600;">extend</span><span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#123;</span> <span style="color: #66cc66;">&#125;</span>, options || <span style="color: #66cc66;">&#123;</span> <span style="color: #66cc66;">&#125;</span> <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>,
		gather:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">resetErrors</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span>;
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">itemArr</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #66cc66;">&#93;</span>;
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">itemObj</span> = <span style="color: #66cc66;">&#123;</span><span style="color: #66cc66;">&#125;</span>;
			
		$$<span style="color: #66cc66;">&#40;</span>options.<span style="color: #006600;">items</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">each</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>el,i<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
					<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">itemArr</span><span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span> = $<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">options</span><span style="color: #66cc66;">&#91;</span>$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">selectedIndex</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">value</span>;
					<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">itemObj</span><span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span> = $<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>;
				<span style="color: #66cc66;">&#125;</span>.<span style="color: #006600;">bind</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
				
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">validate</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>,
		validate:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>				
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">itemArr</span>.<span style="color: #006600;">each</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>el,i<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span> 				
				<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">itemArr</span><span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span> == <span style="color: #CC0000;">0</span> <span style="color: #66cc66;">&#41;</span>
							<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">throwError</span><span style="color: #66cc66;">&#40;</span>options, i<span style="color: #66cc66;">&#41;</span>;							
				<span style="color: #66cc66;">&#125;</span>.<span style="color: #006600;">bind</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
&nbsp;
		 <span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span> options.<span style="color: #006600;">valid</span> <span style="color: #66cc66;">&#41;</span> document.<span style="color: #006600;">forms</span><span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">submit</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#125;</span>,
		throwError:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>options, i<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
			options.<span style="color: #006600;">valid</span> = <span style="color: #003366; font-weight: bold;">false</span>;
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">itemObj</span><span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">setStyle</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'background-color'</span>,<span style="color: #3366CC;">'#FF0000'</span><span style="color: #66cc66;">&#41;</span>;
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">itemObj</span><span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">setStyle</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'padding'</span>,<span style="color: #3366CC;">'2px 0px 2px 2px'</span><span style="color: #66cc66;">&#41;</span>;
				
		<span style="color: #66cc66;">&#125;</span>,
		resetErrors:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
			options.<span style="color: #006600;">valid</span> = <span style="color: #003366; font-weight: bold;">true</span>;
			$$<span style="color: #66cc66;">&#40;</span>options.<span style="color: #006600;">items</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">each</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>el,i<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
					$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">setStyle</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'background-color'</span>,<span style="color: #3366CC;">'#FFFFFF'</span><span style="color: #66cc66;">&#41;</span>;		
					$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">setStyle</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'padding'</span>,<span style="color: #3366CC;">'0'</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #66cc66;">&#125;</span>.<span style="color: #006600;">bind</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>,
		href:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
					$<span style="color: #66cc66;">&#40;</span>options.<span style="color: #006600;">submitBtn</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">addEvent</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'click'</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>
								<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">gather</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span>;	
						<span style="color: #66cc66;">&#125;</span>.<span style="color: #006600;">bind</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;		
		<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> sLvalidateOpts = <span style="color: #66cc66;">&#123;</span> 
			items:<span style="color: #3366CC;">'select'</span>, <span style="color: #009900; font-style: italic;">// boxes to gather</span>
			submitBtn: <span style="color: #3366CC;">'button'</span>, <span style="color: #009900; font-style: italic;">// id of submit button</span>
			valid: <span style="color: #003366; font-weight: bold;">true</span> <span style="color: #009900; font-style: italic;">// this must be set to true for validation to occur</span>
			<span style="color: #66cc66;">&#125;</span>;	
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> validate = <span style="color: #003366; font-weight: bold;">new</span> sLvalidate<span style="color: #66cc66;">&#40;</span>sLvalidateOpts<span style="color: #66cc66;">&#41;</span>;</pre></code></div>

At some point I&#8217;ll extend this to cover all form validation needs.]]></content:encoded>
			<wfw:commentRss>http://blog.slajax.com/2007/03/20/sl-validate/feed/</wfw:commentRss>
		</item>
		<item>
		<title>sLquantity v.1</title>
		<link>http://blog.slajax.com/2007/03/16/sl-quantity/</link>
        <customfield>quantity.gif</customfield>
		<comments>http://blog.slajax.com/2007/03/16/sl-quantity/#comments</comments>
		<pubDate>Fri, 16 Mar 2007 13:23:48 +0000</pubDate>
		<dc:creator>Kyle</dc:creator>
				<category><![CDATA[e-commerce]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[source code]]></category>

		<guid isPermaLink="false">http://slajax.com/blog/2007/03/16/sl-quantity/</guid>
		<description><![CDATA[So the idea was that we needed a form input that could be duplicated multiple times within the shopping cart. This allows the customer to add multiple items with different variations (ie: color / size) to the cart and then post it to the payment gateway. First of all, here is a visual example of the end case so you have a better idea what it is we wanted to achieve:




...and here is the code that makes it work:

var sLquantity = new Class({
	initialize:function(options){
		this.setOptions(options);
		if($(this.options.conId))
		$(this.options.conId).addClass(this.options.conClass.split('.')[1]);
		this.gather(options);
	},
	setOptions:function(options){
		this.options = Object.extend( { }, options &#124;&#124; {} );
	},
	gather:function(options){
	$$(options.plusClass).each(function(el){
			$(el).addEvent('mousedown',this.plusHref.pass([el], this));
		}.bind(this) );
	$$(options.minusClass).each(function(el){
			$(el).addEvent('mousedown', this.minusHref.pass([el], this));
		}.bind(this) );
	},
	fX:function(options, stack){
		introFx = new Fx.Style(stack, 'opacity', {duration: options.introDur, transition: Fx.Transitions.linear});
		introFx.start(0 ,1);
		stack = null;
	},
	minusHref:function(el){		
		if( $$(this.options.conClass).length > 1) 
				$$(this.options.conClass)[$$(this.options.conClass).length-1].remove();
	},
	plusHref:function(){			
		var stack = this.cloneObj(this.options.conClass).injectAfter( $$(this.options.conClass)[$$(this.options.conClass).length-1] ).setOpacity(0);
			stack.getChildren().each(function(el){
				if( $(el).getTag() == 'img')
					$(el).remove()
				}.bind(this) );
		this.fX(this.options, stack);
	},
	cloneObj:function(el){
		return $$(this.options.conClass)[0].clone();
	}
});	

			var sLquantityOpts = { 
			// sLquantity - v1.0 - 3:13 PM 15/03/2007 
			// @author: kc@slajax.com
					conId:'ShoppingDrops', // the container ID of the object to clone
					conClass:'.ShoppingDrops', // the class name of the same object (id will be phased out)
					minusClass:'.ShoppingMinus', // the button class of the element which adds new objects
					plusClass:'.ShoppingPlus', // the button class of the element which removes the last object added
					introDur: 200 // the duration of the fade in for a cloned element
					};	

		var quantity = new sLquantity(sLquantityOpts);


]]></description>
			<content:encoded><![CDATA[So the idea was that we needed a form input that could be duplicated multiple times within the shopping cart. This allows the customer to add multiple items with different variations (ie: color / size) to the cart and then post it to the payment gateway. First of all, here is a visual example of the end case so you have a better idea what it is we wanted to achieve:<br />

<img src="http://slajax.com/blog/wp-content/assets/imgs/sLquantity.jpg" class="reflect rheight10 ropacity60" width="500">


&#8230;and here is the code that makes it work:
<div class='codeWrapper'><div class='codeTitle'>javascript<span class='codeInstruct'>hover edges to scroll</span></div><code><pre>&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> sLquantity = <span style="color: #003366; font-weight: bold;">new</span> <span style="color: #003366; font-weight: bold;">Class</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span>
	initialize:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">setOptions</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span>$<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">options</span>.<span style="color: #006600;">conId</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>
		$<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">options</span>.<span style="color: #006600;">conId</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">addClass</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">options</span>.<span style="color: #006600;">conClass</span>.<span style="color: #006600;">split</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'.'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">gather</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>,
	setOptions:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">options</span> = Object.<span style="color: #006600;">extend</span><span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#123;</span> <span style="color: #66cc66;">&#125;</span>, options || <span style="color: #66cc66;">&#123;</span><span style="color: #66cc66;">&#125;</span> <span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>,
	gather:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
	$$<span style="color: #66cc66;">&#40;</span>options.<span style="color: #006600;">plusClass</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">each</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
			$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">addEvent</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'mousedown'</span>,<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">plusHref</span>.<span style="color: #006600;">pass</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#91;</span>el<span style="color: #66cc66;">&#93;</span>, <span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>.<span style="color: #006600;">bind</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
	$$<span style="color: #66cc66;">&#40;</span>options.<span style="color: #006600;">minusClass</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">each</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
			$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">addEvent</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'mousedown'</span>, <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">minusHref</span>.<span style="color: #006600;">pass</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#91;</span>el<span style="color: #66cc66;">&#93;</span>, <span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>.<span style="color: #006600;">bind</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>,
	fX:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>options, stack<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
		introFx = <span style="color: #003366; font-weight: bold;">new</span> Fx.<span style="color: #006600;">Style</span><span style="color: #66cc66;">&#40;</span>stack, <span style="color: #3366CC;">'opacity'</span>, <span style="color: #66cc66;">&#123;</span>duration: options.<span style="color: #006600;">introDur</span>, transition: Fx.<span style="color: #006600;">Transitions</span>.<span style="color: #006600;">linear</span><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
		introFx.<span style="color: #006600;">start</span><span style="color: #66cc66;">&#40;</span><span style="color: #CC0000;">0</span> ,<span style="color: #CC0000;">1</span><span style="color: #66cc66;">&#41;</span>;
		stack = <span style="color: #003366; font-weight: bold;">null</span>;
	<span style="color: #66cc66;">&#125;</span>,
	minusHref:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>		
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span> $$<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">options</span>.<span style="color: #006600;">conClass</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">length</span> &gt; <span style="color: #CC0000;">1</span><span style="color: #66cc66;">&#41;</span> 
				$$<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">options</span>.<span style="color: #006600;">conClass</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#91;</span>$$<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">options</span>.<span style="color: #006600;">conClass</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">length</span>-<span style="color: #CC0000;">1</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>,
	plusHref:<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>			
		<span style="color: #003366; font-weight: bold;">var</span> stack = <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">cloneObj</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">options</span>.<span style="color: #006600;">conClass</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">injectAfter</span><span style="color: #66cc66;">&#40;</span> $$<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">options</span>.<span style="color: #006600;">conClass</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#91;</span>$$<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">options</span>.<span style="color: #006600;">conClass</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">length</span>-<span style="color: #CC0000;">1</span><span style="color: #66cc66;">&#93;</span> <span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">setOpacity</span><span style="color: #66cc66;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #66cc66;">&#41;</span>;
			stack.<span style="color: #006600;">getChildren</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">each</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span> $<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getTag</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> == <span style="color: #3366CC;">'img'</span><span style="color: #66cc66;">&#41;</span>
					$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">remove</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
				<span style="color: #66cc66;">&#125;</span>.<span style="color: #006600;">bind</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">fX</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">options</span>, stack<span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>,
	cloneObj:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> $$<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">options</span>.<span style="color: #006600;">conClass</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">clone</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;	
&nbsp;
			<span style="color: #003366; font-weight: bold;">var</span> sLquantityOpts = <span style="color: #66cc66;">&#123;</span> 
			<span style="color: #009900; font-style: italic;">// sLquantity - v1.0 - 3:13 PM 15/03/2007 </span>
			<span style="color: #009900; font-style: italic;">// @author: kc@slajax.com</span>
					conId:<span style="color: #3366CC;">'ShoppingDrops'</span>, <span style="color: #009900; font-style: italic;">// the container ID of the object to clone</span>
					conClass:<span style="color: #3366CC;">'.ShoppingDrops'</span>, <span style="color: #009900; font-style: italic;">// the class name of the same object (id will be phased out)</span>
					minusClass:<span style="color: #3366CC;">'.ShoppingMinus'</span>, <span style="color: #009900; font-style: italic;">// the button class of the element which adds new objects</span>
					plusClass:<span style="color: #3366CC;">'.ShoppingPlus'</span>, <span style="color: #009900; font-style: italic;">// the button class of the element which removes the last object added</span>
					introDur: <span style="color: #CC0000;">200</span> <span style="color: #009900; font-style: italic;">// the duration of the fade in for a cloned element</span>
					<span style="color: #66cc66;">&#125;</span>;	
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> quantity = <span style="color: #003366; font-weight: bold;">new</span> sLquantity<span style="color: #66cc66;">&#40;</span>sLquantityOpts<span style="color: #66cc66;">&#41;</span>;</pre></code></div>
]]></content:encoded>
			<wfw:commentRss>http://blog.slajax.com/2007/03/16/sl-quantity/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>

