<?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>blog.zenoplex.jp &#187; Javascript</title>
	<atom:link href="http://blog.zenoplex.jp/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.zenoplex.jp</link>
	<description>another day another life</description>
	<lastBuildDate>Wed, 06 Jan 2010 05:30:58 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>widgets w/ jQuery and Google Feed API</title>
		<link>http://blog.zenoplex.jp/2009/09/25/widgets-w-jquery-and-google-feed-api/</link>
		<comments>http://blog.zenoplex.jp/2009/09/25/widgets-w-jquery-and-google-feed-api/#comments</comments>
		<pubDate>Fri, 25 Sep 2009 08:11:51 +0000</pubDate>
		<dc:creator>Gen</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[widget]]></category>

		<guid isPermaLink="false">http://blog.zenoplex.jp/?p=869</guid>
		<description><![CDATA[For a recent project, I was making series of AJAX based blog widgets (blogparts).  There wasn&#8217;t much of a problem except client server didn&#8217;t provide JSON-based API.  Instead of messing with their web-server, I&#8217;ve decided to use their RSS feed and Google&#8217;s Feed API.
Although using jQuery might be excessive for a simple widget, for the [...]]]></description>
			<content:encoded><![CDATA[<p>For a recent project, I was making series of AJAX based blog widgets (blogparts).  There wasn&#8217;t much of a problem except client server didn&#8217;t provide JSON-based API.  Instead of messing with their web-server, I&#8217;ve decided to use their RSS feed and <a href="http://code.google.com/apis/ajaxfeeds/documentation/" target="_blank">Google&#8217;s Feed API</a>.</p>
<p><span id="more-869"></span><span style="background-color: #ffffff;">Although using jQuery might be excessive for a simple widget, for the sake of simplicity I&#8217;m gonna make use of it.</span></p>
<h4>Javascript</h4>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
    <span style="color: #003366; font-weight: bold;">var</span> self <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">var</span> scripts <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'script'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">return</span> scripts<span style="color: #009900;">&#91;</span>scripts.<span style="color: #660066;">length</span> <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #003366; font-weight: bold;">var</span> defaults <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
        lang<span style="color: #339933;">:</span> <span style="color: #3366CC;">'ja'</span><span style="color: #339933;">,</span>
        num<span style="color: #339933;">:</span> <span style="color: #CC0000;">5</span><span style="color: #339933;">,</span>
        url<span style="color: #339933;">:</span> <span style="color: #3366CC;">'http://feeds.feedburner.com/blogspot/MKuf'</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// actually you should stop proccess if url is invalid.</span>
    <span style="color: #003366; font-weight: bold;">var</span> options <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>self.<span style="color: #660066;">src</span>.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/url=([^&amp;]+)/</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> options.<span style="color: #660066;">url</span> <span style="color: #339933;">=</span> RegExp.$<span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>self.<span style="color: #660066;">src</span>.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/num=([^&amp;]+)/</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> options.<span style="color: #660066;">num</span> <span style="color: #339933;">=</span> RegExp.$<span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>self.<span style="color: #660066;">src</span>.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/lang=([^&amp;]+)/</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> options.<span style="color: #660066;">lang</span> <span style="color: #339933;">=</span> RegExp.$<span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #003366; font-weight: bold;">var</span> outerHTML <span style="color: #339933;">=</span> self.<span style="color: #660066;">parentNode</span>.<span style="color: #660066;">insertBefore</span><span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">createElement</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'div'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> self<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #003366; font-weight: bold;">function</span> _initialize<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #006600; font-style: italic;">//options</span>
            options <span style="color: #339933;">=</span> $.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span>defaults<span style="color: #339933;">,</span> options<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #006600; font-style: italic;">//load your custom css</span>
            loadCss<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'http://www.zenoplex.jp/css/bp.css'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #003366; font-weight: bold;">function</span> parse<span style="color: #009900;">&#40;</span>data<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>data.<span style="color: #660066;">responseStatus</span> <span style="color: #339933;">!=</span> <span style="color: #CC0000;">200</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
                <span style="color: #006600; font-style: italic;">// structure the output</span>
                <span style="color: #003366; font-weight: bold;">var</span> html <span style="color: #339933;">=</span> <span style="color: #3366CC;">'&lt;ul&gt;'</span><span style="color: #339933;">;</span>
                <span style="color: #003366; font-weight: bold;">var</span> feed <span style="color: #339933;">=</span> data.<span style="color: #660066;">responseData</span>.<span style="color: #660066;">feed</span><span style="color: #339933;">;</span>
                <span style="color: #003366; font-weight: bold;">var</span> $entries <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>feed.<span style="color: #660066;">entries</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                $entries.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>index<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
                    <span style="color: #003366; font-weight: bold;">var</span> li <span style="color: #339933;">=</span> <span style="color: #3366CC;">'&lt;li&gt;'</span><span style="color: #339933;">;</span>
                    <span style="color: #003366; font-weight: bold;">var</span> imgs <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/(&lt;img(.+?)&gt;)/</span>.<span style="color: #660066;">exec</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">content</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    <span style="color: #003366; font-weight: bold;">var</span> img <span style="color: #339933;">=</span> imgs<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&gt;'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'width=&quot;120px&quot; height=&quot;120px&quot; &gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    li <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'&lt;a href=&quot;'</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">link</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot;&gt;'</span> <span style="color: #339933;">+</span> img <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&lt;/a&gt;'</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&lt;br /&gt;'</span><span style="color: #339933;">;</span>
                    li <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'&lt;a href=&quot;'</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">link</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot;&gt;'</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">title</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&lt;/a&gt;'</span><span style="color: #339933;">;</span>
                    li <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'&lt;/li&gt;'</span><span style="color: #339933;">;</span>
                    html <span style="color: #339933;">+=</span> li<span style="color: #339933;">;</span>
&nbsp;
                <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'&lt;/ul&gt;'</span><span style="color: #339933;">;</span>
&nbsp;
                $<span style="color: #009900;">&#40;</span>outerHTML<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'bp'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span>html<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
            $.<span style="color: #660066;">getJSON</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'http://ajax.googleapis.com/ajax/services/feed/load?q='</span> <span style="color: #339933;">+</span> encodeURIComponent<span style="color: #009900;">&#40;</span>options.<span style="color: #660066;">url</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&amp;hl='</span> <span style="color: #339933;">+</span> options.<span style="color: #660066;">lang</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&amp;num='</span> <span style="color: #339933;">+</span> options.<span style="color: #660066;">num</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&amp;v=1.0'</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&amp;callback=?'</span><span style="color: #339933;">,</span> parse<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #003366; font-weight: bold;">function</span> loadScript<span style="color: #009900;">&#40;</span>url<span style="color: #339933;">,</span> callback<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">var</span> script <span style="color: #339933;">=</span> document.<span style="color: #660066;">createElement</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;script&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        script.<span style="color: #660066;">src</span> <span style="color: #339933;">=</span> url<span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>callback<span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
        script.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> callback<span style="color: #339933;">;</span>
        script.<span style="color: #660066;">onreadystatechange</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/loaded|complete/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">readyState</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                callback<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
        document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;head&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">appendChild</span><span style="color: #009900;">&#40;</span>script<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
    <span style="color: #003366; font-weight: bold;">function</span> loadCss<span style="color: #009900;">&#40;</span>url<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">var</span> links <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;link&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #003366; font-weight: bold;">var</span> len <span style="color: #339933;">=</span> links.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> len<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>links<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">href</span> <span style="color: #339933;">==</span> url<span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">var</span> link <span style="color: #339933;">=</span> document.<span style="color: #660066;">createElement</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'link'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        link.<span style="color: #660066;">rel</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'stylesheet'</span><span style="color: #339933;">;</span>
        link.<span style="color: #660066;">href</span> <span style="color: #339933;">=</span> url<span style="color: #339933;">;</span>
&nbsp;
        document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;head&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">appendChild</span><span style="color: #009900;">&#40;</span>link<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> jQuery <span style="color: #339933;">==</span> <span style="color: #3366CC;">'undefined'</span><span style="color: #009900;">&#41;</span> loadScript<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'</span><span style="color: #339933;">,</span> _initialize<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">else</span> _initialize<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<h4>HTML</h4>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://www.zenoplex.jp/tools/js/bp.js?url=[feedURL here]&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></pre></td></tr></table></div>

<p>In real world situations, you should style the output with either adding classes or styles to adjust the design.<br />
Enough said, check out the demo <a href="http://www.zenoplex.jp/tools/widget_sample.html" target="_blank">here</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.zenoplex.jp/2009/09/25/widgets-w-jquery-and-google-feed-api/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Javascript packer</title>
		<link>http://blog.zenoplex.jp/2009/08/18/javascript-packer/</link>
		<comments>http://blog.zenoplex.jp/2009/08/18/javascript-packer/#comments</comments>
		<pubDate>Tue, 18 Aug 2009 02:29:37 +0000</pubDate>
		<dc:creator>Gen</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[utility]]></category>

		<guid isPermaLink="false">http://blog.zenoplex.jp/?p=822</guid>
		<description><![CDATA[Thanks to Dean Edwards for releasing such a neat program.  I&#8217;ve added a little option to convert script into bookmarklet.  Basically, its just wrapping the compressed script with Bookmarklet script header  
Well there was a single problem I&#8217;ve faced in IE6.  Not sure why but version specific jQuery v1.3.2 on Google [...]]]></description>
			<content:encoded><![CDATA[<p>Thanks to <a href="http://dean.edwards.name/" target="_blank">Dean Edwards</a> for releasing such a neat program.  I&#8217;ve added a little option to convert script into bookmarklet.  Basically, its just wrapping the compressed script with Bookmarklet script header <img src='http://blog.zenoplex.jp/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Well there was a single problem I&#8217;ve faced in IE6.  Not sure why but version specific jQuery v1.3.2 on Google may not be compatible with IE6.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">&lt;!-- &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js&quot;</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;</span>
    (function($){
        //code here
    })(jQuery);
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></pre></td></tr></table></div>

<p>For some reason it says &#8220;jQuery not defined&#8221;.  Using 1.3.1 on Google solved the problem.</p>
<p>You can check out the packer <a href="http://www.zenoplex.jp/tools/javascript_packer.html" target="_blank">here</a>.</p>
<p>[EDIT]<br />
There seems to be a problem with <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" target="_blank">http://&shy;ajax.googleapis.com/&shy;ajax/&shy;libs/&shy;jquery/&shy;1.3.2/&shy;jquery.min.js</a> with IE.  Instead, consider using <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" target="_blank">http://&shy;ajax.googleapis.com/&shy;ajax/&shy;libs/&shy;jquery/&shy;1.3/&shy;jquery.min.js</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.zenoplex.jp/2009/08/18/javascript-packer/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Adding prompt text to text input with jQuery</title>
		<link>http://blog.zenoplex.jp/2009/08/09/adding-prompt-text-to-text-input-with-jquery/</link>
		<comments>http://blog.zenoplex.jp/2009/08/09/adding-prompt-text-to-text-input-with-jquery/#comments</comments>
		<pubDate>Sun, 09 Aug 2009 14:46:22 +0000</pubDate>
		<dc:creator>Gen</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://blog.zenoplex.jp/?p=796</guid>
		<description><![CDATA[A small plugin I made to show helper text for form text inputs.  I&#8217;m sure there are tons of these going around the web already.  Just learning from the basics.
I believe I made this as easy as possible.  Well this requires jQuery color plugin but implementation is pretty straight forward.

1
$&#40;&#34;input[name=single]&#34;&#41;.prompt&#40;&#34;some prompt text&#34;&#41;;

Or [...]]]></description>
			<content:encoded><![CDATA[<p>A small plugin I made to show helper text for form text inputs.  I&#8217;m sure there are tons of these going around the web already.  Just learning from the basics.</p>
<p>I believe I made this as easy as possible.  Well this requires <a href="http://plugins.jquery.com/project/color" target="_blank">jQuery color plugin</a> but implementation is pretty straight forward.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;input[name=single]&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">prompt</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;some prompt text&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Or you can just point whole text inputs and specify prompt text and its color.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;input[type=text]&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">prompt</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span> 
                        text<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;some placeholder text&quot;</span><span style="color: #339933;">,</span> 
                        color<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;#FF0000&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p><span id="more-796"></span>And full code here.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    jQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
        <span style="color: #000066;">prompt</span><span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>option<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #003366; font-weight: bold;">var</span> defaultText<span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> option<span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;string&quot;</span><span style="color: #009900;">&#41;</span> defaultText <span style="color: #339933;">=</span> option<span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>option <span style="color: #339933;">&amp;&amp;</span> option.<span style="color: #660066;">text</span><span style="color: #009900;">&#41;</span> defaultText <span style="color: #339933;">=</span> option.<span style="color: #660066;">text</span><span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #003366; font-weight: bold;">var</span> promptColor <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>option <span style="color: #339933;">&amp;&amp;</span> option.<span style="color: #660066;">color</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> option.<span style="color: #660066;">color</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#999999&quot;</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #003366; font-weight: bold;">var</span> array <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #003366; font-weight: bold;">var</span> $input <span style="color: #339933;">=</span> jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>$input.<span style="color: #000066; font-weight: bold;">is</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;:input&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> $input.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;type&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">!=</span> <span style="color: #3366CC;">&quot;text&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
&nbsp;
                <span style="color: #003366; font-weight: bold;">var</span> normalColor <span style="color: #339933;">=</span> $input.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;color&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #003366; font-weight: bold;">var</span> backgroundColor <span style="color: #339933;">=</span> $input.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;background-color&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
                $input.<span style="color: #000066;">focus</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>jQuery.<span style="color: #660066;">trim</span><span style="color: #009900;">&#40;</span>$input.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> defaultText<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                        $input.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
                            color<span style="color: #339933;">:</span> normalColor
                        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    <span style="color: #009900;">&#125;</span>
                <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">blur</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>jQuery.<span style="color: #660066;">trim</span><span style="color: #009900;">&#40;</span>$input.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                        $input.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
                            color<span style="color: #339933;">:</span> backgroundColor
                        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span>defaultText<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
                            color<span style="color: #339933;">:</span> promptColor
                        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    <span style="color: #009900;">&#125;</span>
                <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
                <span style="color: #003366; font-weight: bold;">var</span> value <span style="color: #339933;">=</span> $j.<span style="color: #660066;">trim</span><span style="color: #009900;">&#40;</span>$input.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>value <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;&quot;</span> <span style="color: #339933;">||</span> value <span style="color: #339933;">==</span> defaultText<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    $input.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
                        color<span style="color: #339933;">:</span> promptColor
                    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span>defaultText<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
&nbsp;
                array<span style="color: #009900;">&#91;</span>array.<span style="color: #660066;">length</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #000066; font-weight: bold;">return</span> array<span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>You can check out working sample <a href="http://www.zenoplex.jp/tools/jquery_prompt_text.html" target="_blank">here</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.zenoplex.jp/2009/08/09/adding-prompt-text-to-text-input-with-jquery/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Generating QRCode with Google Charts API</title>
		<link>http://blog.zenoplex.jp/2009/08/07/generating-qrcode-with-google-charts-api/</link>
		<comments>http://blog.zenoplex.jp/2009/08/07/generating-qrcode-with-google-charts-api/#comments</comments>
		<pubDate>Thu, 06 Aug 2009 17:35:17 +0000</pubDate>
		<dc:creator>Gen</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[service]]></category>

		<guid isPermaLink="false">http://blog.zenoplex.jp/?p=776</guid>
		<description><![CDATA[It seems Google Charts API supported QR Code generation for quite a while, which I didn&#8217;t know up until yesterday&#8230;oh boy.  Anyway, since its so easy to generate QR Code with Google API, tested a quick sample.
I&#8217;m not gonna go into detail of parameters.  Just want to show how quickly it generates the QR [...]]]></description>
			<content:encoded><![CDATA[<p>It seems Google Charts API supported QR Code generation for quite a while, which I didn&#8217;t know up until yesterday&#8230;oh boy.  Anyway, since its so easy to generate QR Code with Google API, tested a quick <a href="http://www.zenoplex.jp/tools/google_charts_qrcode.html" target="_blank">sample</a>.</p>
<p><span id="more-776"></span>I&#8217;m not gonna go into detail of parameters.  Just want to show how quickly it generates the QR code.  Below code will generate QR code containing location of where script is written.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;</span>
	var url = &quot;http://chart.apis.google.com/chart?cht=qr<span style="color: #ddbb00;">&amp;chs=100x100&amp;chl=&quot; + encodeURIComponent(window.location);</span>
	document.write('<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;' + url + '&quot;</span><span style="color: #66cc66;">/</span>&gt;</span>');
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></pre></td></tr></table></div>

<p>It maybe a fun experiment generating tons of QR Code to just visualize all sorts of information.  Will give a try when a have more time to work on this.</p>
<p>Check out the full generator demo <a href="http://www.zenoplex.jp/tools/google_charts_qrcode.html" target="_blank">here</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.zenoplex.jp/2009/08/07/generating-qrcode-with-google-charts-api/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>replacing 404 image with jQuery(2)</title>
		<link>http://blog.zenoplex.jp/2009/08/03/replacing-404-image-with-jquery2/</link>
		<comments>http://blog.zenoplex.jp/2009/08/03/replacing-404-image-with-jquery2/#comments</comments>
		<pubDate>Mon, 03 Aug 2009 11:00:49 +0000</pubDate>
		<dc:creator>Gen</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://blog.zenoplex.jp/?p=760</guid>
		<description><![CDATA[In my previous post, I&#8217;ve mentioned a way to load image using ajax but I&#8217;ve gotta admit it was pure hack &#8216;n slash method which wasn&#8217;t elegant at all.  There&#8217;s an excellent jQuery plugin made by Ariel Flesler to handle image preloading nice and easy.


1
2
3
4
5
6
7
8
9
10
11
var $j = jQuery.noConflict&#40;&#41;;
$j&#40;function&#40;&#41;&#123;
    var phImage	= &#34;placeholder.jpg&#34;; [...]]]></description>
			<content:encoded><![CDATA[<p>In my <a href="http://blog.zenoplex.jp/2009/07/20/swaping-404-image-with-jquery/">previous post</a>, I&#8217;ve mentioned a way to load image using ajax but I&#8217;ve gotta admit it was pure hack &#8216;n slash method which wasn&#8217;t elegant at all.  There&#8217;s an excellent jQuery plugin made by <a href="http://flesler.blogspot.com/2008/01/jquerypreload.html" target="_blank">Ariel Flesler</a> to handle image preloading nice and easy.</p>
<p><span id="more-760"></span></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> $j <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">noConflict</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
$j<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> phImage	<span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;placeholder.jpg&quot;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//url to placeholder image while image loads.</span>
    <span style="color: #003366; font-weight: bold;">var</span> altImage <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;nophoto.jpg&quot;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//alternative image to show if image fails loading.</span>
        $j<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;div.some-class img&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #006600; font-style: italic;">//selector</span>
            .<span style="color: #660066;">preload</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
		placeholder<span style="color: #339933;">:</span>phImage<span style="color: #339933;">,</span>
		notFound<span style="color: #339933;">:</span>altImage<span style="color: #339933;">,</span>
		threshold<span style="color: #339933;">:</span><span style="color: #CC0000;">1</span>
	    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Since I wanted to make images to fade-in, I&#8217;ve added an effect on <em>onComplete</em> handler.  Notice I didn&#8217;t chain <em>hide()</em> before <em>preload()</em>. In some browsers $(document).ready fires so slow thus hiding at $(document).ready can be too late making image to flicker.  So I added the last line to dynamically modify style, rather than hard-coding the css file.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> $j <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">noConflict</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
$j<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> phImage	<span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;placeholder.jpg&quot;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//url to placeholder image while image loads.</span>
    <span style="color: #003366; font-weight: bold;">var</span> altImage <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;nophoto.jpg&quot;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//alternative image to show if image fails loading.</span>
        $j<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;div.some-class img&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #006600; font-style: italic;">//selector</span>
            .<span style="color: #660066;">preload</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
                onComplete<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>data<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		    $j<span style="color: #009900;">&#40;</span>data.<span style="color: #660066;">original</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeIn</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  <span style="color: #006600; font-style: italic;">// this will make image to fadein after loading.</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		placeholder<span style="color: #339933;">:</span>phImage<span style="color: #339933;">,</span>
		notFound<span style="color: #339933;">:</span>altImage<span style="color: #339933;">,</span>
		threshold<span style="color: #339933;">:</span><span style="color: #CC0000;">1</span>
	    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
$j<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'head'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;style&gt;div.some-class img{display:none;}&lt;/style&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://blog.zenoplex.jp/2009/08/03/replacing-404-image-with-jquery2/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>jQuery plugin to increase checkbox accessibility</title>
		<link>http://blog.zenoplex.jp/2009/07/30/jquery-plugin-to-increase-checkbox-accessibility/</link>
		<comments>http://blog.zenoplex.jp/2009/07/30/jquery-plugin-to-increase-checkbox-accessibility/#comments</comments>
		<pubDate>Thu, 30 Jul 2009 07:13:41 +0000</pubDate>
		<dc:creator>Gen</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://blog.zenoplex.jp/?p=711</guid>
		<description><![CDATA[Sometimes on IE and Firefox, when I click on the input label multiple times to toggle on/off quickly, clicking becomes text selection and checkbox won&#8217;t be toggled.  So I made a simple jQuery plugin to fix the checkbox usability.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
jQuery.fn.extend&#40;&#123;
	fixCheckbox: function&#40;&#41;&#123;
		return this.each&#40;function&#40;&#41;&#123;
&#160;
			if&#40;jQuery.browser.safari&#41; return;
&#160;
			jQuery&#40;this&#41;.find&#40;&#34;label[for]&#34;&#41;.each&#40;function&#40;&#41;&#123;
				var id = jQuery&#40;this&#41;.attr&#40;&#34;for&#34;&#41;;
				if&#40;!&#40;jQuery&#40;&#34;#&#34; + id&#41;.is&#40;&#34;:checkbox&#34;&#41;&#41;&#41; return;
&#160;
				jQuery&#40;this&#41;.click&#40;function&#40;e&#41;&#123;
					jQuery&#40;this&#41;.blur&#40;&#41;;
&#160;
					if&#40;e.target.id == id&#41; return;
					e.preventDefault&#40;&#41;;
					var $input = jQuery&#40;&#34;#&#34; + [...]]]></description>
			<content:encoded><![CDATA[<p>Sometimes on IE and Firefox, when I click on the input label multiple times to toggle on/off quickly, clicking becomes text selection and checkbox won&#8217;t be toggled.  So I made a simple jQuery plugin to fix the checkbox usability.</p>
<p><span id="more-711"></span></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">jQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
	fixCheckbox<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>jQuery.<span style="color: #660066;">browser</span>.<span style="color: #660066;">safari</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
&nbsp;
			jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;label[for]&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #003366; font-weight: bold;">var</span> id <span style="color: #339933;">=</span> jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;for&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#&quot;</span> <span style="color: #339933;">+</span> id<span style="color: #009900;">&#41;</span>.<span style="color: #000066; font-weight: bold;">is</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;:checkbox&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
&nbsp;
				jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
					jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">blur</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
					<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">target</span>.<span style="color: #660066;">id</span> <span style="color: #339933;">==</span> id<span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
					e.<span style="color: #660066;">preventDefault</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #003366; font-weight: bold;">var</span> $input <span style="color: #339933;">=</span> jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#&quot;</span> <span style="color: #339933;">+</span> id<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					$input.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;checked&quot;</span><span style="color: #339933;">,</span> <span style="color: #339933;">!</span>$input.<span style="color: #000066; font-weight: bold;">is</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;:checked&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					$input.<span style="color: #660066;">trigger</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;change&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>jQuery.<span style="color: #660066;">browser</span>.<span style="color: #660066;">msie</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">dblclick</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
						jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">blur</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
						<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">target</span>.<span style="color: #660066;">id</span> <span style="color: #339933;">==</span> id<span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
						<span style="color: #003366; font-weight: bold;">var</span> $input <span style="color: #339933;">=</span> jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#&quot;</span> <span style="color: #339933;">+</span> id<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						e.<span style="color: #660066;">preventDefault</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						$input.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;checked&quot;</span><span style="color: #339933;">,</span> <span style="color: #339933;">!</span>$input.<span style="color: #000066; font-weight: bold;">is</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;:checked&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						$input.<span style="color: #660066;">trigger</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;change&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>WebKit-based browsers such as Google Chrome and Safari works fine by default<span style="text-decoration: line-through;"> however Safari doesn&#8217;t seem to fire change event when checkbox checked is modified by javascript</span>.</p>
<p>Here&#8217;s the working <a title="jquery plugin to fix checkbox labels" href="http://www.zenoplex.jp/tools/jquery_fix_checkbox.html" target="_blank">demo</a> and <a title="jquery.fix_checkbox.js" href="http://www.zenoplex.jp/tools/js/jquery.fix_checkbox.js" target="_blank">source</a>.</p>
<p>[EDIT] Maybe Safari is just fine as it is.  Plugin will not affect Safari now.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.zenoplex.jp/2009/07/30/jquery-plugin-to-increase-checkbox-accessibility/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>swfobject generator with 1.5 support</title>
		<link>http://blog.zenoplex.jp/2009/07/30/swfobject-generator/</link>
		<comments>http://blog.zenoplex.jp/2009/07/30/swfobject-generator/#comments</comments>
		<pubDate>Wed, 29 Jul 2009 15:38:34 +0000</pubDate>
		<dc:creator>Gen</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[swfobject]]></category>

		<guid isPermaLink="false">http://blog.zenoplex.jp/?p=704</guid>
		<description><![CDATA[SWFObject is the ultimate solution for embedding Flash contents.  I&#8217;ve used SWFObject2.X for a while but because of the getSWFHTML method in previous SWFObject, I still favor 1.5 over 2.  So I&#8217;ve added 1.5 support for swfobject generator in dynamic publishing.
Check it out here.
]]></description>
			<content:encoded><![CDATA[<p><a href="http://code.google.com/p/swfobject/" target="_blank">SWFObject</a> is the ultimate solution for embedding Flash contents.  I&#8217;ve used SWFObject2.X for a while but because of the getSWFHTML method in previous SWFObject, I still favor 1.5 over 2.  So I&#8217;ve added 1.5 support for swfobject generator in dynamic publishing.</p>
<p>Check it out <a href="http://www.zenoplex.jp/tools/swfobject_generator.html" target="_blank">here</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.zenoplex.jp/2009/07/30/swfobject-generator/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>replacing 404 image with jQuery</title>
		<link>http://blog.zenoplex.jp/2009/07/20/swaping-404-image-with-jquery/</link>
		<comments>http://blog.zenoplex.jp/2009/07/20/swaping-404-image-with-jquery/#comments</comments>
		<pubDate>Sun, 19 Jul 2009 15:59:44 +0000</pubDate>
		<dc:creator>Gen</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://blog.zenoplex.jp/?p=620</guid>
		<description><![CDATA[I did a small experiment using jQuery to avoid broken/404 image.  This shouldn&#8217;t be used regularly but perhaps its a fail safe for some websites which I&#8217;m currently working on.  Nothing new, just going over basics once again.
One way to avoid having broken image is to check whether the image was successfully loaded by [...]]]></description>
			<content:encoded><![CDATA[<p>I did a small experiment using jQuery to avoid broken/404 image.  This shouldn&#8217;t be used regularly but perhaps its a fail safe for some websites which I&#8217;m currently working on.  Nothing new, just going over basics once again.</p>
<p><span id="more-620"></span>One way to avoid having broken image is to check whether the image was successfully loaded by checking img&#8217;s naturalWidth|naturalHeight or its readyState(IE).  Following code must be executed on window complete event (it maybe a good idea to hide target img on document.ready event).</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> altImage <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;images/noimage.jpg&quot;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//path to alternative image</span>
<span style="color: #003366; font-weight: bold;">var</span> query <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;dd.thumb &amp;gt; img&quot;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//selector to img tag.</span>
&nbsp;
$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span>query<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
$<span style="color: #009900;">&#40;</span>window<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">load</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span>query<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">readyState</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'uninitialized'</span> <span style="color: #339933;">||</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">naturalWidth</span> <span style="color: #339933;">!=</span> <span style="color: #3366CC;">&quot;undefined&quot;</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">naturalWidth</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'src'</span><span style="color: #339933;">,</span> altImage<span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#125;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeIn</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Another way is to use ajax.<br />
This way code can be executed at document.ready.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> query <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;dd.thumb&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> altImage <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;images/noimage.jpg&quot;</span><span style="color: #339933;">;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span>query<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> url <span style="color: #339933;">=</span> $.<span style="color: #660066;">trim</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> img <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Image<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span>img<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		$<span style="color: #009900;">&#40;</span>img<span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">load</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeIn</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">error</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;src&quot;</span><span style="color: #339933;">,</span> altImage<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;title&quot;</span><span style="color: #339933;">,</span> url<span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;alt&quot;</span><span style="color: #339933;">,</span> url<span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;class&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;image&quot;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;src&quot;</span><span style="color: #339933;">,</span> url<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>View above examples <a href="http://www.zenoplex.jp/tools/imageswap.html" target="_blank">here</a> and <a href="http://www.zenoplex.jp/tools/imageloader.html" target="_blank">here</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.zenoplex.jp/2009/07/20/swaping-404-image-with-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>unicode range generator</title>
		<link>http://blog.zenoplex.jp/2009/07/07/unicode-range-generator/</link>
		<comments>http://blog.zenoplex.jp/2009/07/07/unicode-range-generator/#comments</comments>
		<pubDate>Mon, 06 Jul 2009 15:54:03 +0000</pubDate>
		<dc:creator>Gen</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://blog.zenoplex.jp/?p=575</guid>
		<description><![CDATA[I made a simple utility for generating unicode range for actionscript.  Since I use FD over Flash these days, I tend to use more of scripted embedding for fonts.  And I just couldn&#8217;t bother to remember any of those unicode codes!
Why bother to make this?  Well if its English based site, &#8220;Basic Latin&#8221; [...]]]></description>
			<content:encoded><![CDATA[<p>I made a simple utility for generating unicode range for actionscript.  Since I use FD over Flash these days, I tend to use more of scripted embedding for fonts.  And I just couldn&#8217;t bother to remember any of those unicode codes!</p>
<p>Why bother to make this?  Well if its English based site, &#8220;Basic Latin&#8221; should be suitable, but when its Japanese then its a different story.  I wanted to specify every unique word to limit the file size.</p>
<p>Thanks to jQuery. Couldn&#8217;t be any easier.<br />
<a href="http://www.zenoplex.jp/tools/unicoderange_generator.html" target="_blank">unicode range generator</a></p>
<p>[EDIT]</p>
<p>Seems options like &#8220;Japanese (All)&#8221; doesn&#8217;t work on IE6.  I don&#8217;t know why but maybe loop is too big?</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.zenoplex.jp/2009/07/07/unicode-range-generator/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>home-delivery box</title>
		<link>http://blog.zenoplex.jp/2009/05/27/home-delivery-box/</link>
		<comments>http://blog.zenoplex.jp/2009/05/27/home-delivery-box/#comments</comments>
		<pubDate>Tue, 26 May 2009 16:56:36 +0000</pubDate>
		<dc:creator>Gen</dc:creator>
				<category><![CDATA[Diary]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[fail]]></category>

		<guid isPermaLink="false">http://blog.zenoplex.jp/?p=347</guid>
		<description><![CDATA[My place has a home-delivery box.  And guess what.  I chose this place so I wouldn&#8217;t have to worry about being home to recieve a package.
SO USE IT!  Otherwise there&#8217;s no way I can receieve it during week days.  Do they expect a man who is single to be home at 6pm or what!?  Dude, [...]]]></description>
			<content:encoded><![CDATA[<p>My place has a home-delivery box.  And guess what.  I chose this place so I wouldn&#8217;t have to worry about being home to recieve a package.</p>
<p>SO USE IT!  Otherwise there&#8217;s no way I can receieve it during week days.  Do they expect a man who is single to be home at 6pm or what!?  Dude, fastest I&#8217;d be home would be after midnight.  Ahh frustrating indeed!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.zenoplex.jp/2009/05/27/home-delivery-box/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- Dynamic Page Served (once) in 0.713 seconds -->
