<?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>XEWeb &#187; Javascript</title>
	<atom:link href="http://www.xeweb.net/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.xeweb.net</link>
	<description>XEWeb blog, PHP scripts and more...</description>
	<lastBuildDate>Mon, 22 Mar 2010 16:32:38 +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>Thumbnail opacity hover with CSS and jQuery</title>
		<link>http://www.xeweb.net/2010/03/22/thumbnail-opacity-hover-with-css-and-jquery/</link>
		<comments>http://www.xeweb.net/2010/03/22/thumbnail-opacity-hover-with-css-and-jquery/#comments</comments>
		<pubDate>Mon, 22 Mar 2010 16:32:38 +0000</pubDate>
		<dc:creator>Jason</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.xeweb.net/?p=123</guid>
		<description><![CDATA[A nice effect when hovering over thumbnails is to change the opacity, so that it has that fade in and out effect. &#60;ul class=&#34;thumbnails&#34;&#62; &#160;&#60;li&#62;&#60;a href=&#34;#&#34;&#62;&#60;img src=&#34;thumb-1.jpg&#34; alt=&#34;&#34; /&#62;&#60;/a&#62;&#60;/li&#62; &#160;&#60;li&#62;&#60;a href=&#34;#&#34;&#62;&#60;img src=&#34;thumb-2.jpg&#34; alt=&#34;&#34; /&#62;&#60;/a&#62;&#60;/li&#62; &#160;&#60;li&#62;&#60;a href=&#34;#&#34;&#62;&#60;img src=&#34;thumb-3.jpg&#34; alt=&#34;&#34; /&#62;&#60;/a&#62;&#60;/li&#62; &#160;&#60;li&#62;&#60;a href=&#34;#&#34;&#62;&#60;img src=&#34;thumb-4.jpg&#34; alt=&#34;&#34; /&#62;&#60;/a&#62;&#60;/li&#62; &#160;&#60;li&#62;&#60;a href=&#34;#&#34;&#62;&#60;img src=&#34;thumb-5.jpg&#34; alt=&#34;&#34; /&#62;&#60;/a&#62;&#60;/li&#62; &#60;/ul&#62; Take the above example, a [...]]]></description>
			<content:encoded><![CDATA[<p>A nice effect when hovering over thumbnails is to change the opacity, so that it has that fade in and out effect.</p>
<div class="html4strict geshi no html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;thumbnails&quot;</span>&gt;</span><br />
&nbsp;<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;&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;thumb-1.jpg&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp;<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;&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;thumb-2.jpg&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp;<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;&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;thumb-3.jpg&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp;<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;&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;thumb-4.jpg&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
&nbsp;<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;&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;thumb-5.jpg&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span></div>
<p>Take the above example, a simple list of images. Let&#8217;s apply the basic styling for it&#8230;</p>
<div class="css geshi no css" style="font-family:monospace;">ul<span style="color: #6666ff;">.thumbnails</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span><br />
ul<span style="color: #6666ff;">.thumbnails</span> li <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">50px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">50px</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span><br />
ul<span style="color: #6666ff;">.thumbnails</span> li img <span style="color: #00AA00;">&#123;</span> filter<span style="color: #00AA00;">:</span> alpha<span style="color: #00AA00;">&#40;</span>opacity<span style="color: #00AA00;">=</span><span style="color: #cc66cc;">60</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* IE only */</span> opacity<span style="color: #00AA00;">:</span> .60<span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* All other browsers */</span> <span style="color: #00AA00;">&#125;</span></div>
<p>As you can see all of the thumbnails will have a default opacity of 60%. Now comes the jQuery script to add the fade effect&#8230;</p>
<div class="javascript geshi no 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><br />
&nbsp;$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&#39;ul.thumbnails li&#39;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hover</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><br />
&nbsp; $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&#39;img&#39;</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">stop</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>opacity<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><br />
&nbsp;<span style="color: #009900;">&#125;</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><br />
&nbsp; $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&#39;img&#39;</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">stop</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>opacity<span style="color: #339933;">:</span> <span style="color: #CC0000;">0.6</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div>
<p>And that&#8217;s all there is to it!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.xeweb.net/2010/03/22/thumbnail-opacity-hover-with-css-and-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>3D carousel using jQuery</title>
		<link>http://www.xeweb.net/2010/02/02/3d-carousel-using-jquery/</link>
		<comments>http://www.xeweb.net/2010/02/02/3d-carousel-using-jquery/#comments</comments>
		<pubDate>Tue, 02 Feb 2010 16:47:12 +0000</pubDate>
		<dc:creator>Jason</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.xeweb.net/?p=119</guid>
		<description><![CDATA[Inspired by Andrew Sellick&#8217;s Simple 3D Carousel using Mootools I needed a jQuery version of the script, source code of which is below (tested with jQuery 1.4). Please refer to the original tutorial for instructions and a working demo. var count = 0; var baseSpeed = 0.05; var radiusX = 190; var radiusY = 40; [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.xeweb.net/wp-content/uploads/small-simple-3d-carousel-150x122.png" alt="3D carousel using jQuery" width="150" height="122" class="alignleft size-thumbnail wp-image-120" />Inspired by Andrew Sellick&#8217;s <a href="http://www.andrewsellick.com/75/simple-3d-carousel-using-mootools">Simple 3D Carousel using Mootools</a> I needed a jQuery version of the script, source code of which is below (tested with jQuery 1.4).</p>
<p>Please refer to the <a href="http://www.andrewsellick.com/75/simple-3d-carousel-using-mootools">original tutorial</a> for instructions and a working demo.</p>
<div class="javascript geshi no javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> count <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> <br />
<span style="color: #003366; font-weight: bold;">var</span> baseSpeed <span style="color: #339933;">=</span> <span style="color: #CC0000;">0.05</span><span style="color: #339933;">;</span> <br />
<span style="color: #003366; font-weight: bold;">var</span> radiusX <span style="color: #339933;">=</span> <span style="color: #CC0000;">190</span><span style="color: #339933;">;</span><br />
<span style="color: #003366; font-weight: bold;">var</span> radiusY <span style="color: #339933;">=</span> <span style="color: #CC0000;">40</span><span style="color: #339933;">;</span><br />
<span style="color: #003366; font-weight: bold;">var</span> centerX <span style="color: #339933;">=</span> <span style="color: #CC0000;">300</span><span style="color: #339933;">;</span> <br />
<span style="color: #003366; font-weight: bold;">var</span> centerY <span style="color: #339933;">=</span> <span style="color: #CC0000;">190</span><span style="color: #339933;">;</span><br />
<span style="color: #003366; font-weight: bold;">var</span> speed <span style="color: #339933;">=</span> <span style="color: #CC0000;">0.3</span><span style="color: #339933;">;</span><br />
<span style="color: #003366; font-weight: bold;">var</span> imageDivs <span style="color: #339933;">=</span> <span style="color: #3366CC;">&#39;&#39;</span><span style="color: #339933;">;</span><br />
<span style="color: #003366; font-weight: bold;">var</span> numberOfElements <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span><br />
<span style="color: #003366; font-weight: bold;">var</span> carousel <span style="color: #339933;">=</span> <span style="color: #3366CC;">&#39;&#39;</span><span style="color: #339933;">;</span><br />
<span style="color: #003366; font-weight: bold;">var</span> speedTest <span style="color: #339933;">=</span> <span style="color: #3366CC;">&#39;&#39;</span><span style="color: #339933;">;</span></p>
<p>$<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><br />
&nbsp; <br />
&nbsp;carousel <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&#39;#carousel&#39;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;imageDivs <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&#39;#carousel div&#39;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;numberOfElements <span style="color: #339933;">=</span> imageDivs.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> </p>
<p>&nbsp;setInterval<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&#39;startCarousel()&#39;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">40</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<br />
&nbsp;carousel.<span style="color: #660066;">mousemove</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; tempX <span style="color: #339933;">=</span> event.<span style="color: #660066;">clientX</span><span style="color: #339933;">;</span><br />
&nbsp; speed <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>tempX <span style="color: #339933;">-</span> centerX<span style="color: #009900;">&#41;</span> <span style="color: #339933;">/</span> <span style="color: #CC0000;">2500</span><span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></p>
<p><span style="color: #003366; font-weight: bold;">function</span> startCarousel<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><br />
&nbsp;<br />
&nbsp;<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</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> numberOfElements<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span></p>
<p>&nbsp; angle <span style="color: #339933;">=</span> i <span style="color: #339933;">*</span> <span style="color: #009900;">&#40;</span> Math.<span style="color: #660066;">PI</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">2</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">/</span> numberOfElements<span style="color: #339933;">;</span><br />
&nbsp;<br />
&nbsp; posX <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span> Math.<span style="color: #660066;">sin</span><span style="color: #009900;">&#40;</span> count <span style="color: #339933;">*</span> <span style="color: #009900;">&#40;</span> baseSpeed <span style="color: #339933;">*</span> speed <span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> angle <span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span> radiusX <span style="color: #339933;">+</span> centerX <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; posY <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span> Math.<span style="color: #660066;">cos</span><span style="color: #009900;">&#40;</span> count <span style="color: #339933;">*</span> <span style="color: #009900;">&#40;</span> baseSpeed <span style="color: #339933;">*</span> speed <span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> angle <span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span> radiusY <span style="color: #339933;">+</span> centerY <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<br />
&nbsp; imageDivWidth <span style="color: #339933;">=</span> posY<span style="color: #339933;">/</span><span style="color: #CC0000;">3</span><span style="color: #339933;">;</span><br />
&nbsp; imageDivZIndex <span style="color: #339933;">=</span> Math.<span style="color: #660066;">round</span><span style="color: #009900;">&#40;</span>imageDivWidth<span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #CC0000;">100</span><span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&#39;#carousel div&#39;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">eq</span><span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">&#39;position&#39;</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">&#39;absolute&#39;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&#39;left&#39;</span><span style="color: #339933;">:</span> posX <span style="color: #339933;">+</span> <span style="color: #3366CC;">&#39;px&#39;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&#39;top&#39;</span><span style="color: #339933;">:</span> posY <span style="color: #339933;">+</span> <span style="color: #3366CC;">&#39;px&#39;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&#39;width&#39;</span><span style="color: #339933;">:</span> imageDivWidth <span style="color: #339933;">+</span> <span style="color: #3366CC;">&#39;px&#39;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&#39;zIndex&#39;</span><span style="color: #339933;">:</span> imageDivZIndex<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></p>
<p>&nbsp; angle <span style="color: #339933;">+=</span> speed<span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #009900;">&#125;</span><br />
&nbsp;count<span style="color: #339933;">++;</span><br />
<span style="color: #009900;">&#125;</span></div>
]]></content:encoded>
			<wfw:commentRss>http://www.xeweb.net/2010/02/02/3d-carousel-using-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>A simple and lightweight Javascript calendar</title>
		<link>http://www.xeweb.net/2010/01/07/a-simple-and-lightweight-javascript-calendar/</link>
		<comments>http://www.xeweb.net/2010/01/07/a-simple-and-lightweight-javascript-calendar/#comments</comments>
		<pubDate>Thu, 07 Jan 2010 12:35:30 +0000</pubDate>
		<dc:creator>Jason</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.xeweb.net/?p=110</guid>
		<description><![CDATA[This Javascript code will display a calendar in a table, useful for date picking&#8230; // these are labels for the days of the week cal_days_labels = &#91;&#39;Sun&#39;, &#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;&#93;; // these are human-readable month name labels, in order cal_months_labels = &#91;&#39;January&#39;, &#39;February&#39;, &#39;March&#39;, &#39;April&#39;, &#160; &#160; &#160; &#160; &#160; &#160; &#160; [...]]]></description>
			<content:encoded><![CDATA[<p>This Javascript code will display a calendar in a table, useful for date picking&#8230;</p>
<div class="javascript geshi no javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// these are labels for the days of the week</span><br />
cal_days_labels <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&#39;Sun&#39;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&#39;Mon&#39;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&#39;Tue&#39;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&#39;Wed&#39;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&#39;Thu&#39;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&#39;Fri&#39;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&#39;Sat&#39;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></p>
<p><span style="color: #006600; font-style: italic;">// these are human-readable month name labels, in order</span><br />
cal_months_labels <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&#39;January&#39;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&#39;February&#39;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&#39;March&#39;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&#39;April&#39;</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #3366CC;">&#39;May&#39;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&#39;June&#39;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&#39;July&#39;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&#39;August&#39;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&#39;September&#39;</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #3366CC;">&#39;October&#39;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&#39;November&#39;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&#39;December&#39;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></p>
<p><span style="color: #006600; font-style: italic;">// these are the days of the week for each month, in order</span><br />
cal_days_in_month <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">31</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">28</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">31</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">30</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">31</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">30</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">31</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">31</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">30</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">31</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">30</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">31</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></p>
<p><span style="color: #006600; font-style: italic;">// this is the current date</span><br />
<span style="color: #003366; font-weight: bold;">var</span> cal_current_date <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></p>
<p><span style="color: #003366; font-weight: bold;">function</span> Calendar<span style="color: #009900;">&#40;</span>month<span style="color: #339933;">,</span> year<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">month</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>isNaN<span style="color: #009900;">&#40;</span>month<span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> month <span style="color: #339933;">==</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> cal_current_date.<span style="color: #660066;">getMonth</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> month<span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">year</span> &nbsp;<span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>isNaN<span style="color: #009900;">&#40;</span>year<span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> year <span style="color: #339933;">==</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> cal_current_date.<span style="color: #660066;">getFullYear</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> year<span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span></p>
<p>Calendar.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">generateHTML</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></p>
<p>&nbsp; <span style="color: #006600; font-style: italic;">// get first day of month</span><br />
&nbsp; <span style="color: #003366; font-weight: bold;">var</span> firstDay <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">year</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">month</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #003366; font-weight: bold;">var</span> startingDay <span style="color: #339933;">=</span> firstDay.<span style="color: #660066;">getDay</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #006600; font-style: italic;">// find number of days in month</span><br />
&nbsp; <span style="color: #003366; font-weight: bold;">var</span> monthLength <span style="color: #339933;">=</span> cal_days_in_month<span style="color: #009900;">&#91;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">month</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #006600; font-style: italic;">// compensate for leap year</span><br />
&nbsp; <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;">month</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #006600; font-style: italic;">// February only!</span><br />
&nbsp; &nbsp; <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;">this</span>.<span style="color: #660066;">year</span> <span style="color: #339933;">%</span> <span style="color: #CC0000;">4</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">year</span> <span style="color: #339933;">%</span> <span style="color: #CC0000;">100</span> <span style="color: #339933;">!=</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">year</span> <span style="color: #339933;">%</span> <span style="color: #CC0000;">400</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; monthLength <span style="color: #339933;">=</span> <span style="color: #CC0000;">29</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; <span style="color: #009900;">&#125;</span></p>
<p>&nbsp; <span style="color: #006600; font-style: italic;">// get todays date</span><br />
&nbsp; <span style="color: #003366; font-weight: bold;">var</span> cal_today_date <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; checkDay <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>cal_today_date.<span style="color: #660066;">getMonth</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">month</span> <span style="color: #339933;">&amp;&amp;</span> cal_today_date.<span style="color: #660066;">getFullYear</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">year</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #003366; font-weight: bold;">true</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #006600; font-style: italic;">// do the header</span><br />
&nbsp; <span style="color: #003366; font-weight: bold;">var</span> monthName <span style="color: #339933;">=</span> cal_months_labels<span style="color: #009900;">&#91;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">month</span><span style="color: #009900;">&#93;</span><br />
&nbsp; <span style="color: #003366; font-weight: bold;">var</span> html <span style="color: #339933;">=</span> <span style="color: #3366CC;">&#39;&lt;table class=&quot;calendar-table&quot; cellpadding=&quot;4&quot; cellspacing=&quot;0&quot;&gt;&#39;</span><span style="color: #339933;">;</span><br />
&nbsp; html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&#39;&lt;tr&gt;&lt;th&gt;&lt;a href=&quot;javascript:cal.prevMonth()&quot;&gt;&amp;#171;&lt;/a&gt;&lt;/th&gt;&lt;th colspan=&quot;5&quot;&gt;&#39;</span><span style="color: #339933;">;</span><br />
&nbsp; html <span style="color: #339933;">+=</span> &nbsp;monthName <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;&amp;nbsp;&quot;</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">year</span><span style="color: #339933;">;</span><br />
&nbsp; html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&#39;&lt;/th&gt;&lt;th&gt;&lt;a href=&quot;javascript:cal.nextMonth()&quot;&gt;&amp;#187;&lt;/a&gt;&lt;/th&gt;&lt;/tr&gt;&#39;</span><span style="color: #339933;">;</span><br />
&nbsp; html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&#39;&lt;tr class=&quot;calendar-header&quot;&gt;&#39;</span><span style="color: #339933;">;</span><br />
&nbsp; <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> <span style="color: #CC0000;">6</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&#39;&lt;td class=&quot;calendar-header-day&quot;&gt;&#39;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; html <span style="color: #339933;">+=</span> cal_days_labels<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&#39;&lt;/td&gt;&#39;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&#39;&lt;/tr&gt;&lt;tr&gt;&#39;</span><span style="color: #339933;">;</span></p>
<p>&nbsp; <span style="color: #006600; font-style: italic;">// fill in the days</span><br />
&nbsp; <span style="color: #003366; font-weight: bold;">var</span> day <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #006600; font-style: italic;">// this loop is for is weeks (rows)</span><br />
&nbsp; <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> <span style="color: #CC0000;">9</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #006600; font-style: italic;">// this loop is for weekdays (cells)</span><br />
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> j <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> j <span style="color: #339933;">&lt;=</span> <span style="color: #CC0000;">6</span><span style="color: #339933;">;</span> j<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <br />
&nbsp; &nbsp; &nbsp; html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&#39;&lt;td class=&quot;calendar-day&quot;&gt;&#39;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>day <span style="color: #339933;">&lt;=</span> monthLength <span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span>i <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">||</span> j <span style="color: #339933;">&gt;=</span> startingDay<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; ts <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">generateTimestamp</span><span style="color: #009900;">&#40;</span>day<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>checkDay <span style="color: #339933;">==</span> <span style="color: #003366; font-weight: bold;">true</span> <span style="color: #339933;">&amp;&amp;</span> day <span style="color: #339933;">==</span> cal_today_date.<span style="color: #660066;">getDate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&#39;&lt;a class=&quot;today&quot; href=&quot;javascript:void(0)&quot;&gt;&#39;</span> <span style="color: #339933;">+</span> day <span style="color: #339933;">+</span> <span style="color: #3366CC;">&#39;&lt;/a&gt;&#39;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">else</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&#39;&lt;a href=&quot;javascript:void(0)&quot;&gt;&#39;</span> <span style="color: #339933;">+</span> day <span style="color: #339933;">+</span> <span style="color: #3366CC;">&#39;&lt;/a&gt;&#39;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; day<span style="color: #339933;">++;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&#39;&lt;/td&gt;&#39;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #006600; font-style: italic;">// stop making rows if we&#39;ve run out of days</span><br />
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>day <span style="color: #339933;">&gt;</span> monthLength<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&#39;&lt;/tr&gt;&lt;tr&gt;&#39;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&#39;&lt;/tr&gt;&lt;/table&gt;&#39;</span><span style="color: #339933;">;</span><br />
&nbsp; document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&#39;calendar-holder&#39;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> html<span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span></p>
<p>Calendar.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">generateTimestamp</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>day<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; month <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">month</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #3366CC;">&quot;&#39;&quot;</span> <span style="color: #339933;">+</span> day <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;&#39;,&#39;&quot;</span> <span style="color: #339933;">+</span> month <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;&#39;,&#39;&quot;</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">year</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;&#39;&quot;</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span></p>
<p>Calendar.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">prevMonth</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><br />
&nbsp; <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;">month</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">month</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">12</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">year</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">year</span> <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">month</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">month</span> <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">generateHTML</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span></p>
<p>Calendar.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">nextMonth</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><br />
&nbsp; <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;">month</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">11</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">month</span> <span style="color: #339933;">=</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">year</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">year</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">month</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">month</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">generateHTML</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span></div>
<p>To display the calendar for example&#8230;</p>
<div class="html4strict geshi no html4strict" style="font-family:monospace;"><span style="color: #00bbdd;">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span><br />
<span style="color: #00bbdd;"> &nbsp; &nbsp;&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span> xmlns<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://www.w3.org/1999/xhtml&quot;</span> xml:<span style="color: #000066;">lang</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;en&quot;</span> <span style="color: #000066;">lang</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;en&quot;</span> <span style="color: #000066;">dir</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ltr&quot;</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>Select date<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">http-equiv</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Content-Type&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/html; charset=utf-8&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;css/calendar.css&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span><br />
&nbsp; &nbsp; <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;scripts/calendar.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;calendar-holder&quot;</span>&gt;</span><br />
<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><br />
// <span style="color: #009900;">&lt;!<span style="color: #66cc66;">&#91;</span>CDATA<span style="color: #66cc66;">&#91;</span></span><br />
<span style="color: #009900;"> &nbsp;var cal <span style="color: #66cc66;">=</span> new Calendar<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</span><br />
<span style="color: #009900;"> &nbsp;cal.generateHTML<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</span><br />
<span style="color: #009900;"><span style="color: #66cc66;">//</span> <span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#93;</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></div>
]]></content:encoded>
			<wfw:commentRss>http://www.xeweb.net/2010/01/07/a-simple-and-lightweight-javascript-calendar/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Fancybox jQuery lightbox</title>
		<link>http://www.xeweb.net/2009/12/27/fancybox-jquery-lightbox/</link>
		<comments>http://www.xeweb.net/2009/12/27/fancybox-jquery-lightbox/#comments</comments>
		<pubDate>Sun, 27 Dec 2009 19:20:32 +0000</pubDate>
		<dc:creator>Jason</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.xeweb.net/?p=47</guid>
		<description><![CDATA[FancyBox is a tool for displaying images, html content and multi-media in a modal window (lightbox) based on the jQuery library. What I love about FancyBox is loading new windows in an iframe. For example one website that I built used the RPX system allowing users to log in via their favorite social networking site. [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.xeweb.net/wp-content/uploads/fancybox-150x150.jpg" alt="Fancybox jQuery lightbox" width="150" height="150" class="alignleft size-thumbnail wp-image-54" /><a href="http://fancybox.net/">FancyBox</a> is a tool for displaying images, html content and multi-media in a modal window (lightbox) based on the jQuery library.</p>
<p>What I love about FancyBox is loading new windows in an iframe. For example one website that I built used the <a href="https://rpxnow.com/">RPX</a> system allowing users to log in via their favorite social networking site. Rather than just redirect users to the RPX page I had it load in a modal window so they were never taken away from my site.</p>
<div class="javascript geshi no 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><br />
&nbsp;$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&#39;a.iframe&#39;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fancybox</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; <span style="color: #3366CC;">&#39;frameURL&#39;</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">&#39;https://XX.rpxnow.com/openid/embed?token_url=XX&#39;</span><span style="color: #339933;">,</span><br />
&nbsp; <span style="color: #3366CC;">&#39;frameHeight&#39;</span><span style="color: #339933;">:</span> <span style="color: #CC0000;">280</span><span style="color: #339933;">,</span><br />
&nbsp; <span style="color: #3366CC;">&#39;hideOnContentClick&#39;</span><span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">false</span><br />
&nbsp;<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div>
]]></content:encoded>
			<wfw:commentRss>http://www.xeweb.net/2009/12/27/fancybox-jquery-lightbox/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
