<?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>Slickr for Mootools</title>
		<link>http://blog.slajax.com/2009/08/26/slickr-for-mootools/</link>
        <customfield>slickr.jpg</customfield>
		<comments>http://blog.slajax.com/2009/08/26/slickr-for-mootools/#comments</comments>
		<pubDate>Wed, 26 Aug 2009 17:36:00 +0000</pubDate>
		<dc:creator>Kyle</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://blog.slajax.com/?p=109</guid>
		<description><![CDATA[I was implementing slickr [1], a flickr plugin for wordpress, on my newest site http://scenemap.net [2] yesterday, and I realized right away that it wasn't going to be compatiable with my code because I exclusively use mootools. So, I rewrote the javascript for mootools. You can get the code here [3] or look at it here:



var slickrchangeddiv;
var delayfades = 1000;

function slickrInit(target){
    $(target).setStyles({'opacity':0,'display':'block'});
    new Fx.Morph(target,{duration: delayfades}).start({'opacity':[0,1]});

    $$('#slickr a').each(function(anchor,i){
        anchor.removeEvents();
        var relAttribute = String(anchor.getAttribute('rel'));
        if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('slickrajaxcontent&#124;slickrajaxmenu'))){
            anchor.addEvent('click',function(e){ //When this matching item is clicked, trigger AJAX updates
                new Event(e).stop();
                slickrchangeddiv = this.getAttribute('rel');
                slickrrelurl = this.getAttribute('href'); //the url that has the new content
                new Fx.Morph(slickrchangeddiv,{ duration: delayfades,
                        onComplete:function(){
                            new Request.HTML({url:slickrrelurl,
                                update: slickrchangeddiv,
                                onSuccess: function() { slickrInit(slickrchangeddiv); }
                                }).get();
                        }
                    }).start({'opacity':[1,0]});
            });
        }
    });

     SqueezeBox.assign($$('a[rel=squeeze]'));
}

window.addEvent('load',function(){
    new Request.HTML({url:$$('#slickrajaxmenu a')[0].getProperty('href'),
        update: $('slickrajaxcontent'),
        onSuccess: function(){
            slickrInit($('slickrajaxcontent'));
            $('slickrajaxmenu').setStyles({'opacity':0,'display':'block'});
            new Fx.Morph('slickrajaxmenu',{duration: delayfades}).start({'opacity':[0,1]});
        }
    }).get();
});




Other updates you will need to make for this to work:

	I implemented squeezebox  [4] as the lightbox gallery so you'll need to get that in your page
	I  And I also modified slickr.php slightly. Find all instances of rel="lightbox[...]" and replace with rel="squeezebox".






[1] http://stimuli.ca/slickr/
[2] http://scenemap.net
[3] http://blog.slajax.com/wp-content/assets/js/slickr.js
[4] http://digitarald.de/project/squeezebox/]]></description>
			<content:encoded><![CDATA[I was implementing <a href="http://stimuli.ca/slickr/">slickr</a>, a flickr plugin for wordpress, on my newest site <a title="Scenemap - Find concerts and tour dates for your favourite bands and venues." href="http://scenemap.net">http://scenemap.net</a> yesterday, and I realized right away that it wasn&#8217;t going to be compatiable with my code because I exclusively use mootools. So, I rewrote the javascript for mootools. You can get the code <a href="http://blog.slajax.com/wp-content/assets/js/slickr.js">here</a> or look at it here:

<div class='codeWrapper'><div class='codeTitle'>javascript<span class='codeInstruct'>hover edges to scroll</span></div><code><pre>&nbsp;
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> slickrchangeddiv;
<span style="color: #003366; font-weight: bold;">var</span> delayfades = <span style="color: #CC0000;">1000</span>;
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> slickrInit<span style="color: #66cc66;">&#40;</span>target<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
    $<span style="color: #66cc66;">&#40;</span>target<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">setStyles</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span><span style="color: #3366CC;">'opacity'</span>:<span style="color: #CC0000;">0</span>,<span style="color: #3366CC;">'display'</span>:<span style="color: #3366CC;">'block'</span><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
    <span style="color: #003366; font-weight: bold;">new</span> Fx.<span style="color: #006600;">Morph</span><span style="color: #66cc66;">&#40;</span>target,<span style="color: #66cc66;">&#123;</span>duration: delayfades<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">start</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span><span style="color: #3366CC;">'opacity'</span>:<span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;">0</span>,<span style="color: #CC0000;">1</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
    $$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'#slickr a'</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>anchor,i<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
        anchor.<span style="color: #006600;">removeEvents</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
        <span style="color: #003366; font-weight: bold;">var</span> relAttribute = String<span style="color: #66cc66;">&#40;</span>anchor.<span style="color: #006600;">getAttribute</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'rel'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>anchor.<span style="color: #006600;">getAttribute</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'href'</span><span style="color: #66cc66;">&#41;</span> &amp;&amp; <span style="color: #66cc66;">&#40;</span>relAttribute.<span style="color: #006600;">toLowerCase</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">match</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'slickrajaxcontent|slickrajaxmenu'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
            anchor.<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>e<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span> <span style="color: #009900; font-style: italic;">//When this matching item is clicked, trigger AJAX updates</span>
                <span style="color: #003366; font-weight: bold;">new</span> Event<span style="color: #66cc66;">&#40;</span>e<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">stop</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
                slickrchangeddiv = <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">getAttribute</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'rel'</span><span style="color: #66cc66;">&#41;</span>;
                slickrrelurl = <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">getAttribute</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'href'</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #009900; font-style: italic;">//the url that has the new content</span>
                <span style="color: #003366; font-weight: bold;">new</span> Fx.<span style="color: #006600;">Morph</span><span style="color: #66cc66;">&#40;</span>slickrchangeddiv,<span style="color: #66cc66;">&#123;</span> duration: delayfades,
                        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;">new</span> Request.<span style="color: #006600;">HTML</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span>url:slickrrelurl,
                                update: slickrchangeddiv,
                                onSuccess: <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> slickrInit<span style="color: #66cc66;">&#40;</span>slickrchangeddiv<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;">get</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>.<span style="color: #006600;">start</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span><span style="color: #3366CC;">'opacity'</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><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>;
&nbsp;
     SqueezeBox.<span style="color: #006600;">assign</span><span style="color: #66cc66;">&#40;</span>$$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'a[rel=squeeze]'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
&nbsp;
window.<span style="color: #006600;">addEvent</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'load'</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> Request.<span style="color: #006600;">HTML</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span>url:$$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'#slickrajaxmenu a'</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;">getProperty</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'href'</span><span style="color: #66cc66;">&#41;</span>,
        update: $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'slickrajaxcontent'</span><span style="color: #66cc66;">&#41;</span>,
        onSuccess: <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>
            slickrInit<span style="color: #66cc66;">&#40;</span>$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'slickrajaxcontent'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
            $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'slickrajaxmenu'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">setStyles</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span><span style="color: #3366CC;">'opacity'</span>:<span style="color: #CC0000;">0</span>,<span style="color: #3366CC;">'display'</span>:<span style="color: #3366CC;">'block'</span><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
            <span style="color: #003366; font-weight: bold;">new</span> Fx.<span style="color: #006600;">Morph</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'slickrajaxmenu'</span>,<span style="color: #66cc66;">&#123;</span>duration: delayfades<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">start</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span><span style="color: #3366CC;">'opacity'</span>:<span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;">0</span>,<span style="color: #CC0000;">1</span><span style="color: #66cc66;">&#93;</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: #006600;">get</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;
&nbsp;</pre></code></div>

Other updates you will need to make for this to work:
<ul>
	<li>I implemented <a href="http://digitarald.de/project/squeezebox/">squeezebox </a> as the lightbox gallery so you&#8217;ll need to get that in your page</li>
	<li>I  And I also modified slickr.php slightly. Find all instances of rel=&#8221;lightbox[...]&#8221; and replace with rel=&#8221;squeezebox&#8221;.</li>

</ul>


]]></content:encoded>
			<wfw:commentRss>http://blog.slajax.com/2009/08/26/slickr-for-mootools/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>BC or Bust &#8211; Halfway Point</title>
		<link>http://blog.slajax.com/2008/06/23/bc-or-bust-halfway-point/</link>
        <customfield></customfield>
		<comments>http://blog.slajax.com/2008/06/23/bc-or-bust-halfway-point/#comments</comments>
		<pubDate>Mon, 23 Jun 2008 08:55:08 +0000</pubDate>
		<dc:creator>Kyle</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[relocating]]></category>
		<category><![CDATA[roadtrip]]></category>
		<category><![CDATA[vancouver]]></category>

		<guid isPermaLink="false">http://blog.slajax.com/?p=23</guid>
		<description><![CDATA[
I always knew that Canada was a very large country, but I never realized exactly how large until we passed Sault St Marie and lobbed ourselves around the Huron and Lake Superior. The truth is that northern Ontario doesn't have much to it. Lots of shoreline, a few Can-ops, and at least one or two places to stop that will make you regret rolling off the highway.

So far the trip has been pretty productive. For the cheesy details I suggest you read the elderly ramblings [1] of our senior passenger. Albeit bless him for starting a blog, but I think someone should install grammar check on his palm treo.



Tonight we're stopped in Brandon Manitoba. Approximately 490 km east of Regina. We're stopped in a Super 8 motel and the lot of them are snoring their faces off across the room. I'm glad their here, it wouldn't be the same alone.

So far we've made great time, and only been stopped by the cops once. The funny part is that it wasn't me driving. The van is holding up great, and I've gotten quite used to the trailer. We're going to be in the rockies in no time.

[1] http://crosscanada08.blogspot.com/]]></description>
			<content:encoded><![CDATA[<img style="float: left;" src="http://blog.slajax.com/wp-content/images/relocate/driving1.jpg" alt="" width="154" height="115" />
I always knew that Canada was a very large country, but I never realized exactly how large until we passed Sault St Marie and lobbed ourselves around the Huron and Lake Superior. The truth is that northern Ontario doesn&#8217;t have much to it. Lots of shoreline, a few Can-ops, and at least one or two places to stop that will make you regret rolling off the highway.<br/><br/><br/>

So far the trip has been pretty productive. For the cheesy details I suggest you read the <a href="http://crosscanada08.blogspot.com/" target="_blank">elderly ramblings</a> of our senior passenger. Albeit bless him for starting a blog, but I think someone should install grammar check on his palm treo.<br/><br/>

<img style="float: left;" src="http://blog.slajax.com/wp-content/images/relocate/portage_main.jpg" alt="" width="172" height="128" /><img style="float: left;" src="http://blog.slajax.com/wp-content/images/relocate/driving2.jpg" alt="" width="173" height="129" />

Tonight we&#8217;re stopped in Brandon Manitoba. Approximately 490 km east of Regina. We&#8217;re stopped in a Super 8 motel and the lot of them are snoring their faces off across the room. I&#8217;m glad their here, it wouldn&#8217;t be the same alone.<br/><br/>

So far we&#8217;ve made great time, and only been stopped by the cops once. The funny part is that it wasn&#8217;t me driving. The van is holding up great, and I&#8217;ve gotten quite used to the trailer. We&#8217;re going to be in the rockies in no time.]]></content:encoded>
			<wfw:commentRss>http://blog.slajax.com/2008/06/23/bc-or-bust-halfway-point/feed/</wfw:commentRss>
		</item>
		<item>
		<title>xentheon &#8211; where is my mind</title>
		<link>http://blog.slajax.com/2008/02/14/xentheon-where-is-my-mind/</link>
        <customfield></customfield>
		<comments>http://blog.slajax.com/2008/02/14/xentheon-where-is-my-mind/#comments</comments>
		<pubDate>Fri, 15 Feb 2008 00:43:36 +0000</pubDate>
		<dc:creator>Kyle</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[linux]]></category>
		<category><![CDATA[source code]]></category>

		<guid isPermaLink="false">http://blog.slajax.com/2008/02/14/xentheon-where-is-my-mind/</guid>
		<description><![CDATA[This is probably one of the coolest source code visualizations I have ever seen. I'm not exactly sure how they did it. Points to whomever can explain it!read more [1] &#124; digg story [2]

[1] http://www.100mb.nl/
[2] http://digg.com/linux_unix/xentheon_where_is_my_mind]]></description>
			<content:encoded><![CDATA[This is probably one of the coolest source code visualizations I have ever seen. I&#8217;m not exactly sure how they did it. Points to whomever can explain it!<br/><br/><a href="http://www.100mb.nl/">read more</a> | <a href="http://digg.com/linux_unix/xentheon_where_is_my_mind">digg story</a>]]></content:encoded>
			<wfw:commentRss>http://blog.slajax.com/2008/02/14/xentheon-where-is-my-mind/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>
