<?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>Gaya Design &#187; xhtml</title>
	<atom:link href="http://www.gayadesign.com/tag/xhtml/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.gayadesign.com</link>
	<description>PHP, CSS, xhtml, javascript / jquery tutorials</description>
	<lastBuildDate>Fri, 27 Jan 2012 08:15:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>jQuery convertion: Panoramic Photoviewer in Javascript</title>
		<link>http://www.gayadesign.com/diy/jquery-convertion-panoramic-photoviewer-in-javascript/</link>
		<comments>http://www.gayadesign.com/diy/jquery-convertion-panoramic-photoviewer-in-javascript/#comments</comments>
		<pubDate>Thu, 09 Apr 2009 19:24:27 +0000</pubDate>
		<dc:creator>Gaya</dc:creator>
				<category><![CDATA[DIY]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[images]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[menu]]></category>
		<category><![CDATA[panorama]]></category>
		<category><![CDATA[panoramic]]></category>
		<category><![CDATA[xhtml]]></category>

		<guid isPermaLink="false">http://www.gayadesign.com/?p=252</guid>
		<description><![CDATA[This is part two of my script convertions. From <a href="http://script.aculo.us/">scriptaculous</a> to <a href="http://jquery.com">jQuery</a> in just a few minutes of work. This time it's the <a href="http://www.gayadesign.com/diy/panoramic-photoviewer-in-javascript/">Panoramic Photoviewer</a> to get a <a href="http://www.gayadesign.com/diy/jquery-convertion-panoramic-photoviewer-in-javascript/">jQuery makeover</a>.

<strong>A few highlights:</strong>
From 200 to 80 lines of code (wow).
Works in more browsers.
Lightweight due to jQuery usage.

<strong>For all the jQuery lovers: Here is the Panoramic Photoviewer. Now in jQuery!</strong>

<a class="border" href="http://www.gayadesign.com/diy/jquery-convertion-panoramic-photoviewer-in-javascript/"><img class="aligncenter size-full wp-image-254" title="jqueryphotonav" src="http://www.gayadesign.com/wp-content/uploads/2009/04/jqueryphotonav.jpg" alt="jqueryphotonav" width="532" height="234" /></a>]]></description>
		<wfw:commentRss>http://www.gayadesign.com/diy/jquery-convertion-panoramic-photoviewer-in-javascript/feed/</wfw:commentRss>
		<slash:comments>24</slash:comments>
		</item>
		<item>
		<title>jQuery convertion: Garagedoor effect using Javascript</title>
		<link>http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/</link>
		<comments>http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/#comments</comments>
		<pubDate>Wed, 08 Apr 2009 18:20:53 +0000</pubDate>
		<dc:creator>Gaya</dc:creator>
				<category><![CDATA[DIY]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[effect]]></category>
		<category><![CDATA[effects]]></category>
		<category><![CDATA[garage door]]></category>
		<category><![CDATA[garagedoor]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[valid]]></category>
		<category><![CDATA[xhtml]]></category>

		<guid isPermaLink="false">http://www.gayadesign.com/?p=237</guid>
		<description><![CDATA[Today I finally found the courage to go and try <a title="jQuery" href="http://jquery.com/">jQuery</a>. After getting some people say: "You should use jQuery instead of scriptaculous." I began thinking. What is the reason I choose script.aculo.us again? Must have been something I read in that time.
Anyway, today I found the time to look at jQuery a bit and thought: Let's convert <a href="http://www.gayadesign.com/diy/garagedoor-effect-using-javascript/">my very first posted script</a> to jQuery!

After 5 minutes of reading about selectors in jQuery and 15 minutes of coding it was born. I am super amazed by the results! About 40%/50% less code and about 200% less time needed to write the script. I bet that in the future 400% less time is reachable!

<strong>For all the jQuery lovers: Here is the Garage Door effect. Now in jQuery!</strong>

<a rel="attachment wp-att-238" href="http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/" class="border"><img class="aligncenter size-full wp-image-238" title="jquerygarage" src="http://www.gayadesign.com/wp-content/uploads/2009/04/jquerygarage.jpg" alt="jquerygarage" width="532" height="98" /></a>]]></description>
		<wfw:commentRss>http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/feed/</wfw:commentRss>
		<slash:comments>103</slash:comments>
		</item>
		<item>
		<title>Customize the default alert() function of Javascript</title>
		<link>http://www.gayadesign.com/diy/customize-the-default-alert-function-of-javascript/</link>
		<comments>http://www.gayadesign.com/diy/customize-the-default-alert-function-of-javascript/#comments</comments>
		<pubDate>Wed, 11 Mar 2009 14:41:05 +0000</pubDate>
		<dc:creator>Gaya</dc:creator>
				<category><![CDATA[DIY]]></category>
		<category><![CDATA[alert]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[scriptaculous]]></category>
		<category><![CDATA[xhtml]]></category>

		<guid isPermaLink="false">http://dev.gayadesign.nl/?p=138</guid>
		<description><![CDATA[<p style="text-align: left;">Web designers, developers and web users know them. We all have run across one of these; the Javascript alert message. Most of the time, I don't even read them and click them away. But the more important thing is that they just look ugly, no matter which browser you use.</p>
<p style="text-align: left;">So why not remake the whole Javascript alert function? This article will give you the basics of my customization of the alert message.</p>

<div class="border"><a href="http://www.gayadesign.com/diy/customize-the-default-alert-function-of-javascript/"><img class="aligncenter size-full wp-image-140" title="gdalertintro" src="http://www.gayadesign.com/wp-content/uploads/2009/03/gdalertintro.jpg" alt="gdalertintro" width="532" height="190" /></a></div>]]></description>
		<wfw:commentRss>http://www.gayadesign.com/diy/customize-the-default-alert-function-of-javascript/feed/</wfw:commentRss>
		<slash:comments>24</slash:comments>
		</item>
		<item>
		<title>Lightbox + PhotoNav = LightNav</title>
		<link>http://www.gayadesign.com/diy/lightbox-photonav-lightnav/</link>
		<comments>http://www.gayadesign.com/diy/lightbox-photonav-lightnav/#comments</comments>
		<pubDate>Mon, 09 Feb 2009 14:02:55 +0000</pubDate>
		<dc:creator>Gaya</dc:creator>
				<category><![CDATA[DIY]]></category>
		<category><![CDATA[lightbox]]></category>
		<category><![CDATA[panorama]]></category>
		<category><![CDATA[panoramic]]></category>
		<category><![CDATA[photonav]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[scriptaculous]]></category>
		<category><![CDATA[xhtml]]></category>

		<guid isPermaLink="false">http://dev.gayadesign.nl/?p=91</guid>
		<description><![CDATA[If you've been around the web for a while, you might have heard of <a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox</a>. And if you used it, you might also know the limitations.

One of those limitations is of course the fact that an image wider than your screen goes out of bounds. Very annoying! And it creates ugly scrolbars.

As you might know, I have created a <a href="http://gayadesign.nl/post/4/">Panoramic Photoviewer in Javascript</a> to fix the problem of images going out of bounds. And I thought to myself: "Why not try and implement PhotoNav on top of Lightbox?". With this, even super large images would be viewable.

I created LightNav for this. It runs along Lightbox without changing the script, so you can always update Lightbox if needed.
<div class="border"><a href="http://www.gayadesign.com/diy/lightbox-photonav-lightnav/"><img class="aligncenter size-full wp-image-92" title="lightnav" src="http://www.gayadesign.com/wp-content/uploads/2009/03/lightnav.jpg" alt="lightnav" width="532" height="354" /></a></div>]]></description>
		<wfw:commentRss>http://www.gayadesign.com/diy/lightbox-photonav-lightnav/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>Panoramic Photoviewer in Javascript</title>
		<link>http://www.gayadesign.com/diy/panoramic-photoviewer-in-javascript/</link>
		<comments>http://www.gayadesign.com/diy/panoramic-photoviewer-in-javascript/#comments</comments>
		<pubDate>Wed, 14 Jan 2009 13:24:46 +0000</pubDate>
		<dc:creator>Gaya</dc:creator>
				<category><![CDATA[DIY]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[panoramic]]></category>
		<category><![CDATA[photo viewer]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[scriptaculous]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[xhtml]]></category>

		<guid isPermaLink="false">http://dev.gayadesign.nl/?p=68</guid>
		<description><![CDATA[As a webdesigner you might have had this problem: "I've got a nice looking wide image, but I don't want my visitors to scroll horizontally."

A <a href="http://www.siebdesign.nl/">colleague</a> showed me a new project he was working on. A large image appeared and I had the ability to drag and move the image around in a container. Not super efficient if you ask me, I still had to grab the image and move it around holding my mouse button. Can't there be an easier way?

This article will show you my solution to the problem and maybe even a different approach on navigation.

<a href="http://www.gayadesign.com/diy/panoramic-photoviewer-in-javascript/" class='border'><img class="aligncenter size-full wp-image-69" title="postimage" src="http://www.gayadesign.com/wp-content/uploads/2009/03/postimage.jpg" alt="postimage" width="532" height="234" /></a>]]></description>
		<wfw:commentRss>http://www.gayadesign.com/diy/panoramic-photoviewer-in-javascript/feed/</wfw:commentRss>
		<slash:comments>48</slash:comments>
		</item>
		<item>
		<title>Garagedoor effect using Javascript</title>
		<link>http://www.gayadesign.com/diy/garagedoor-effect-using-javascript/</link>
		<comments>http://www.gayadesign.com/diy/garagedoor-effect-using-javascript/#comments</comments>
		<pubDate>Sun, 28 Dec 2008 16:00:05 +0000</pubDate>
		<dc:creator>Gaya</dc:creator>
				<category><![CDATA[DIY]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[scriptaculous]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[valid]]></category>
		<category><![CDATA[xhtml]]></category>

		<guid isPermaLink="false">http://dev.gayadesign.nl/?p=3</guid>
		<description><![CDATA[You might have noticed the menu at the top right corner of the website. That's something what I like to call the GarageDoor effect.

Creating one has now been made easy! This tutorial explains everything you need to know on how to create the same effect yourself.

<a href="/diy/garagedoor-effect-using-javascript/" class="border"><img src="http://www.gayadesign.com/wp-content/uploads/2009/03/garageprev1.jpg" alt="Garagedoor effect using Javascript" title="Garagedoor effect using Javascript" width="514" height="98" class="aligncenter size-full wp-image-32" /></a>]]></description>
		<wfw:commentRss>http://www.gayadesign.com/diy/garagedoor-effect-using-javascript/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
	</channel>
</rss>

