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

<channel>
	<title>notebook &#187; javascript</title>
	<atom:link href="http://eddcouchman.com/notebook/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://eddcouchman.com/notebook</link>
	<description>from edd couchman, the creator of redheat and chopter</description>
	<lastBuildDate>Sat, 24 Jul 2010 13:14:35 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Lazy Load Images with Prototype</title>
		<link>http://eddcouchman.com/notebook/lazy-load-images-with-prototype/</link>
		<comments>http://eddcouchman.com/notebook/lazy-load-images-with-prototype/#comments</comments>
		<pubDate>Fri, 07 Sep 2007 11:13:23 +0000</pubDate>
		<dc:creator>edd</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[prototype]]></category>

		<guid isPermaLink="false">http://eddcouchman.com/notebook/lazy-load-images-with-prototype/</guid>
		<description><![CDATA[Download lazyload.js. Requires prototype.js version 1.6.0_rc0 or above. Element.addMethods({ lazyload: function (element, options) { /** What does it do? It delays loading of images in (long) pages. Images below the fold (far down in the page) won’t be loaded before &#8230; <a href="http://eddcouchman.com/notebook/lazy-load-images-with-prototype/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Download <a title="lazyload.js" href="http://eddcouchman.com/notebook/wp-content/uploads/2007/09/lazyload.js">lazyload.js</a>.</p>
<p>Requires <a href="http://prototypejs.org/">prototype.js</a> version 1.6.0_rc0 or above.</p>
<p><code lang="javascript">
<pre>
Element.addMethods({
    lazyload: function (element, options) {
        /**
         What does it do?
         It delays loading of images in (long) pages. Images below the fold (far down in the
         page) won’t be loaded before the user scrolls down. This is exact opposite of image
         preloading. With long pages containing heavy image content end user result is the
         same. Page feels snappier. Browser is in ready state after loading visible images.
         No need to wait for n pictures to load.</code>

         From Wikipedia:
         Lazy loading is a design pattern commonly used in computer programming to defer
         initialization of an object until the point at which it is needed. It can contribute
         to efficiency in the program’s operation if properly and appropriately used.

         Inspired by:

http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin

         Requires:
         Prototype.js version 1.6.0_rc0 or later
         A page with lots of big images below the fold (optional)
         */

        function $restore() {
            // this function restores the original image source; called when above the fold
            if (true === $(element).hasAttribute('_src')) {
                $(element).writeAttribute({
                    src: $(element).readAttribute('_src')
                });
            }
        }

        function $scroll() {
            // this function returns the amount the page is scrolled vertically
            var scroll_y = self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            return parseInt(scroll_y);
        }

        function $height() {
            // this function returns the height of the viewport
            var window_height = window.innerHeight || document.documentElement.clientHeight;
            return parseInt(window_height);
        }
        var element = $(element);
        var options = Object.extend({
            threshold: 0,
            placeholder: '/images/grey.gif',
            event: 'scroll',
            frequency: 0.1
        }, options || {});

        var offset = $(element).cumulativeOffset()[1];
        var activate_on = (offset - options.threshold) - $height();

        var old_source = $(element).readAttribute('src');
        var new_source = options.placeholder;

        $(element).writeAttribute({
            src: new_source
        }).writeAttribute({
            '_src': old_source
        });

        if ('scroll' === options.event) {
            new PeriodicalExecuter(function ($executor) {
                if (activate_on & lt; = $scroll()) {
                    $restore();
                    $executor.stop();
                }
            }, options.frequency);
        }
        else {
            $(element).observe(options.event, function (event) {
                $restore();
                $(element).stopObserving();
            });
        }

        return $(element);
    }
});

document.observe('contentloaded', function () {
    $$('img').invoke('lazyload');
});
</pre>
<p></code></p>
]]></content:encoded>
			<wfw:commentRss>http://eddcouchman.com/notebook/lazy-load-images-with-prototype/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>Equal Height Columns</title>
		<link>http://eddcouchman.com/notebook/equal-height-columns/</link>
		<comments>http://eddcouchman.com/notebook/equal-height-columns/#comments</comments>
		<pubDate>Tue, 10 Jul 2007 11:48:17 +0000</pubDate>
		<dc:creator>edd</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://eddcouchman.com/notebook/equal-height-columns/</guid>
		<description><![CDATA[There are no CSS hacks that can get equal-sized columns, so I wrote this tiny bit of Javascript to do the work for you. Simply add a class of &#8220;column&#8221; to any &#60;div&#62;s and their heights will match when the &#8230; <a href="http://eddcouchman.com/notebook/equal-height-columns/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>There are no CSS hacks that can get equal-sized columns, so I wrote this tiny bit of Javascript to do the work for you. Simply add a class of &#8220;column&#8221; to any &lt;div&gt;s and their heights will match when the page loads.</p>
<pre><code lang="javascript">
function matchColumns()
{
	var columns = $A($$('div.column'));
	var column_height = 0;
	var max_height = 0;
	columns.each(function(column)
	{
		column_height = column.getHeight();
		max_height = ( column_height > max_height ) ? column_height : max_height;
	});

	columns.each(function(column)
	{
		column.setStyle({
			height: (max_height + 10) + 'px'
		});
	});
}

Event.observe(window, 'load', matchColumns);
</code></pre>
<p>As always, this script requires <a href="http://prototypejs.org/">prototype</a>, and will work better if you have a DOMReady function instead of window.load.</p>
]]></content:encoded>
			<wfw:commentRss>http://eddcouchman.com/notebook/equal-height-columns/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Smooth Scrolling Links</title>
		<link>http://eddcouchman.com/notebook/smooth-scrolling-links/</link>
		<comments>http://eddcouchman.com/notebook/smooth-scrolling-links/#comments</comments>
		<pubDate>Sat, 23 Jun 2007 23:17:31 +0000</pubDate>
		<dc:creator>edd</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[prototype]]></category>

		<guid isPermaLink="false">http://eddcouchman.com/notebook/smooth-scrolling-links/</guid>
		<description><![CDATA[FAQs are tedious, but we can make their usage much more enjoyable (although I use this word lightly) by imroving the User Experience slightly. Normal FAQs jump from the list of questions to the answer; with a simple bit of &#8230; <a href="http://eddcouchman.com/notebook/smooth-scrolling-links/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>FAQs are tedious, but we can make their usage much more enjoyable (although I use this word lightly) by imroving the User Experience slightly.</p>
<p>Normal FAQs jump from the list of questions to the answer; with a simple bit of Javascript the page will smoothly scroll to the answer, and then&#8211;as a bonus&#8211;the answer will flash slightly.</p>
<pre><code lang="javascript">
Event.observe(window, 'load', function()
{
   $$('a[href^=#]:not([href=#])').each(function(element)
   {
      element.observe('click', function(event)
      {
         new Effect.ScrollTo(this.hash.substr(1),
         {
            offset: -12
         });

         if ( this.hash.substr(1) !== 'top' )
         {
            if ( Prototype.Browser.IE )
            {
               $(this.hash.substr(1)).setStyle({
                  backgroundColor: '#fff'
               });
            }

            Effect.Pulsate(this.hash.substr(1),
            {
               from: 0.5,
               pulses: 5
            });
         }

         Event.stop(event);
      }.bindAsEventListener(element));
   });
});
</code></pre>
<p>This script requires <a href="http://script.aculo.us/">script.aculo.us</a></p>
]]></content:encoded>
			<wfw:commentRss>http://eddcouchman.com/notebook/smooth-scrolling-links/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Regular Expression</title>
		<link>http://eddcouchman.com/notebook/regular-expression/</link>
		<comments>http://eddcouchman.com/notebook/regular-expression/#comments</comments>
		<pubDate>Wed, 21 Feb 2007 23:50:25 +0000</pubDate>
		<dc:creator>edd</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[prototype]]></category>

		<guid isPermaLink="false">http://eddcouchman.com/notebook/regular-expression/</guid>
		<description><![CDATA[It&#8217;s been a while since I last wrote anything on here — this blog has been abandoned since I went back to uni. — so I thought it best to show you a small part of the work I&#8217;ve been &#8230; <a href="http://eddcouchman.com/notebook/regular-expression/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s been a while since I last wrote anything on here — this blog has been abandoned since I went back to uni. — so I thought it best to show you a <strong>small</strong> part of the work I&#8217;ve been doing.</p>
<p>So here it is, the regular expression I have written for tradeswomen.biz:<br />
<code lang="javascript">search.match(/^(?:an?\s)?([A-Za-z\s]+)?\s(?:(?:in|from|near|around|<br />
close to|working in|based in)\s)([A-Za-z0-9\s]+)(?:[.,;]?)$/);</code></p>
]]></content:encoded>
			<wfw:commentRss>http://eddcouchman.com/notebook/regular-expression/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>More prototype</title>
		<link>http://eddcouchman.com/notebook/more-prototype/</link>
		<comments>http://eddcouchman.com/notebook/more-prototype/#comments</comments>
		<pubDate>Mon, 21 Aug 2006 20:29:14 +0000</pubDate>
		<dc:creator>edd</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://eddcouchman.com/notebook/more-prototype/</guid>
		<description><![CDATA[Earlier I wrote about prototype and script.aculo.us. I&#8217;ve been using it even more at work, and really, really like it. Who wants to write document.getElementById("searchbox"); when you can write $('searchbox');And Ajax; how could it be easier to make an Ajax &#8230; <a href="http://eddcouchman.com/notebook/more-prototype/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Earlier I wrote about prototype and script.aculo.us. I&#8217;ve been using it even more at work, and really, <strong>really</strong> like it.</p>
<p>Who wants to write <code lang="javascript">document.getElementById("searchbox");</code> when you can write <code lang="javascript">$('searchbox');</code>And Ajax; how could it be easier to make an Ajax request than <code lang="javascript">new Ajax.Request()</code>Exactly, it couldn&#8217;t.</p>
]]></content:encoded>
			<wfw:commentRss>http://eddcouchman.com/notebook/more-prototype/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Prototype and script.aculo.us</title>
		<link>http://eddcouchman.com/notebook/prototype-and-scriptaculous/</link>
		<comments>http://eddcouchman.com/notebook/prototype-and-scriptaculous/#comments</comments>
		<pubDate>Wed, 16 Aug 2006 11:11:44 +0000</pubDate>
		<dc:creator>edd</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://eddcouchman.com/notebook/2006/08/prototype-and-scriptaculous/</guid>
		<description><![CDATA[The prototype javascript library is one of the most brilliant, time-saving tools a web developer can use. It&#8217;s so easy to use this in conjunction with script.aculo.us to create some user-friendly &#8220;drag-and-drog reordering elements with auto-save&#8221; to a page. I&#8217;ve &#8230; <a href="http://eddcouchman.com/notebook/prototype-and-scriptaculous/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>The <a href="http://prototype.conio.net/">prototype javascript library</a> is one of the most brilliant, time-saving tools a web developer can use. It&#8217;s so easy to use this in conjunction with <a href="http://script.aculo.us/">script.aculo.us</a> to create some user-friendly &#8220;drag-and-drog reordering elements with auto-save&#8221; to a page.</p>
<p>I&#8217;ve used it in a giant database-driven application we&#8217;re developing, and it has helped to trim hours of work down to mere minutes.</p>
<p><strong>UPDATE:</strong> My new favourite thing!</p>
]]></content:encoded>
			<wfw:commentRss>http://eddcouchman.com/notebook/prototype-and-scriptaculous/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
