<?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>Ghosts-IT SEO Tips - SEO Blog - Internet Marketing - Make Money Online - Window 7 Tips &#187; Ajax</title>
	<atom:link href="http://ghosts-it.com/tag/ajax/feed/" rel="self" type="application/rss+xml" />
	<link>http://ghosts-it.com</link>
	<description>ghosts-it.com offers advertising affiliate blog blogger facebook google adsense internet marketing keywords make money online marketing search engine optimization seo tips twitter window 7</description>
	<lastBuildDate>Thu, 25 Mar 2010 02:46:13 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Important for webmaster: 55 Quick SEO Tips</title>
		<link>http://ghosts-it.com/affiliates/important-for-webmaster-55-quick-seo-tips/</link>
		<comments>http://ghosts-it.com/affiliates/important-for-webmaster-55-quick-seo-tips/#comments</comments>
		<pubDate>Tue, 24 Nov 2009 13:19:19 +0000</pubDate>
		<dc:creator>Radz Nguyen</dc:creator>
				<category><![CDATA[Affiliates]]></category>
		<category><![CDATA[SEO Tips]]></category>
		<category><![CDATA[Search Engine Optimization]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[webmaster]]></category>

		<guid isPermaLink="false">http://ghosts-it.com/?p=571</guid>
		<description><![CDATA[
			
				
			
		
Everyone loves a good tip, right? Here are 55 quick tips for search engine optimization that even your mother could use to get cooking. Well, not my mother, but you get my point. Most folks with some web design and beginner SEO knowledge should be able to take these to the bank without any problem. [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fghosts-it.com%2Faffiliates%2Fimportant-for-webmaster-55-quick-seo-tips%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fghosts-it.com%2Faffiliates%2Fimportant-for-webmaster-55-quick-seo-tips%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>Everyone loves a good tip, right? Here are 55 quick tips for search engine optimization that even your mother could use to get cooking. Well, not my mother, but you get my point. Most folks with some web design and beginner SEO knowledge should be able to take these to the bank without any problem. <img src="http://www.searchenginejournal.com/mother.jpg" border="0" alt="" align="right" /></p>
<p>1. If you absolutely MUST use Java script drop down menus, image maps or image links, be sure to put text links somewhere on the page for the spiders to follow.</p>
<p>2. Content is king, so be sure to have good, well-written and unique content that will focus on your primary keyword or keyword phrase.</p>
<p>3. If content is king, then links are queen. Build a network of quality backlinks using your keyword phrase as the link. Remember, if there is no good, logical reason for that site to link to you, you don’t want the link.</p>
<p>4. Don’t be obsessed with PageRank. It is just one isty bitsy part of the ranking algorithm. A site with lower PR can actually outrank one with a higher PR.</p>
<p>5. Be sure you have a unique, keyword focused Title tag on every page of your site. And, if you MUST have the name of your company in it, put it at the end. Unless you are a major brand name that is a household name, your business name will probably get few searches.</p>
<p>6. Fresh content can help improve your rankings. Add new, useful content to your pages on a regular basis. Content freshness adds relevancy to your site in the eyes of the search engines.</p>
<p>7. Be sure links to your site and within your site use your keyword phrase. In other words, if your target is “blue widgets” then link to “blue widgets” instead of a “Click here” link.</p>
<p>8. Focus on search phrases, not single keywords, and put your location in your text (“our Palm Springs store” not “our store”) to help you get found in local searches.</p>
<p>9. Don’t design your web site without considering SEO. Make sure your web designer understands your expectations for organic SEO. Doing a retrofit on your shiny new Flash-based site after it is built won’t cut it. Spiders can crawl text, not Flash or images.</p>
<p>10. Use keywords and keyword phrases appropriately in text links, image ALT attributes and even your domain name.</p>
<p>11. Check for canonicalization issues – www and non-www domains. Decide which you want to use and 301 redirect the other to it. In other words, if http://www.domain.com is your preference, then http://domain.com should redirect to it.</p>
<p>12. Check the link to your home page throughout your site. Is index.html appended to your domain name? If so, you’re splitting your links. Outside links go to http://www.domain.com and internal links go to http://www.domain.com/index.html.</p>
<p>Ditch the index.html or default.php or whatever the page is and always link back to your domain.</p>
<p>13. Frames, Flash and AJAX all share a common problem – you can’t link to a single page. It’s either all or nothing. Don’t use Frames at all and use Flash and AJAX sparingly for best SEO results.</p>
<p>14. Your URL file extension doesn’t matter. You can use .html, .htm, .asp, .php, etc. and it won’t make a difference as far as your SEO is concerned.</p>
<p>15. Got a new web site you want spidered? Submitting through Google’s regular submission form can take weeks. The quickest way to get your site spidered is by getting a link to it through another quality site.</p>
<p>16. If your site content doesn’t change often, your site needs a blog because search spiders like fresh text. Blog at least three time a week with good, fresh content to feed those little crawlers.</p>
<p>17. When link building, think quality, not quantity. One single, good, authoritative link can do a lot more for you than a dozen poor quality links, which can actually hurt you.</p>
<p>18. Search engines want natural language content. Don’t try to stuff your text with keywords. It won’t work. Search engines look at how many times a term is in your content and if it is abnormally high, will count this against you rather than for you.</p>
<p>19. Not only should your links use keyword anchor text, but the text around the links should also be related to your keywords. In other words, surround the link with descriptive text.</p>
<p>20. If you are on a shared server, do a blacklist check to be sure you’re not on a proxy with a spammer or banned site. Their negative notoriety could affect your own rankings.</p>
<p style="text-align: center;"><img class="aligncenter" src="http://tutorialblog.org/wp-content/uploads/seo-blocks1.gif" alt="http://tutorialblog.org/wp-content/uploads/seo-blocks1.gif" width="408" height="314" /></p>
<p>21. Be aware that by using services that block domain ownership information when you register a domain, Google might see you as a potential spammer.</p>
<p>22. When optimizing your blog posts, optimize your post title tag independently from your blog title.</p>
<p>23. The bottom line in SEO is Text, Links, Popularity and Reputation.</p>
<p>24. Make sure your site is easy to use. This can influence your link building ability and popularity and, thus, your ranking.</p>
<p>25. Give link love, Get link love. Don’t be stingy with linking out. That will encourage others to link to you.</p>
<p>26. Search engines like unique content that is also quality content. There can be a difference between unique content and quality content. Make sure your content is both.</p>
<p>27. If you absolutely MUST have your main page as a splash page that is all Flash or one big image, place text and navigation links below the fold.</p>
<p>28. Some of your most valuable links might not appear in web sites at all but be in the form of e-mail communications such as newletters and zines.</p>
<p>29. You get NOTHING from paid links except a few clicks unless the links are embedded in body text and NOT obvious sponsored links.</p>
<p>30. Links from .edu domains are given nice weight by the search engines. Run a search for possible non-profit .edu sites that are looking for sponsors.</p>
<p>31. Give them something to talk about. Linkbaiting is simply good content.</p>
<p>32. Give each page a focus on a single keyword phrase. Don’t try to optimize the page for several keywords at once.</p>
<p>33. SEO is useless if you have a weak or non-existent call to action. Make sure your call to action is clear and present.</p>
<p>34. SEO is not a one-shot process. The search landscape changes daily, so expect to work on your optimization daily.</p>
<p>35. Cater to influential bloggers and authority sites who might link to you, your images, videos, podcasts, etc. or ask to reprint your content.</p>
<p>36. Get the owner or CEO blogging. It’s priceless! CEO influence on a blog is incredible as this is the VOICE of the company. Response from the owner to reader comments will cause your credibility to skyrocket!</p>
<p>37. Optimize the text in your RSS feed just like you should with your posts and web pages. Use descriptive, keyword rich text in your title and description.</p>
<p>38. Use captions with your images. As with newspaper photos, place keyword rich captions with your images.</p>
<p>39. Pay attention to the context surrounding your images. Images can rank based on text that surrounds them on the page. Pay attention to keyword text, headings, etc.</p>
<p>40. You’re better off letting your site pages be found naturally by the crawler. Good global navigation and linking will serve you much better than relying only on an XML Sitemap.</p>
<p><img class="aligncenter" title="SEO Tips - Ghosts-IT.com" src="http://www.amitbhawani.com/blog/Images/I/Images-SEO-Tips.PNG" alt="" width="270" height="249" /></p>
<p>41. There are two ways to NOT see Google’s Personalized Search results:</p>
<p>(1) Log out of Google</p>
<p>(2) Append &amp;pws=0 to the end of your search URL in the search bar</p>
<p>42. Links (especially deep links) from a high PageRank site are golden. High PR indicates high trust, so the back links will carry more weight.</p>
<p>43. Use absolute links. Not only will it make your on-site link navigation less prone to problems (like links to and from https pages), but if someone scrapes your content, you’ll get backlink juice out of it.</p>
<p>44. See if your hosting company offers “Sticky” forwarding when moving to a new domain. This allows temporary forwarding to the new domain from the old, retaining the new URL in the address bar so that users can gradually get used to the new URL.</p>
<p>45. Understand social marketing. It IS part of SEO. The more you understand about sites like Digg, Yelp, del.icio.us, Facebook, etc., the better you will be able to compete in search.</p>
<p>46. To get the best chance for your videos to be found by the crawlers, create a video sitemap and list it in your Google Webmaster Central account.</p>
<p>47. Videos that show up in Google blended search results don’t just come from YouTube. Be sure to submit your videos to other quality video sites like Metacafe, AOL, MSN and Yahoo to name a few.</p>
<p>48. Surround video content on your pages with keyword rich text. The search engines look at surrounding content to define the usefulness of the video for the query.</p>
<p>49. Use the words “image” or “picture” in your photo ALT descriptions and captions. A lot of searches are for a keyword plus one of those words.</p>
<p>50. Enable “Enhanced image search” in your Google Webmaster Central account. Images are a big part of the new blended search results, so allowing Google to find your photos will help your SEO efforts.</p>
<p>51. Add viral components to your web site or blog – reviews, sharing functions, ratings, visitor comments, etc.</p>
<p>52. Broaden your range of services to include video, podcasts, news, social content and so forth. SEO is not about 10 blue links anymore.</p>
<p>53. When considering a link purchase or exchange, check the cache date of the page where your link will be located in Google. Search for “cache:URL” where you substitute “URL” for the actual page. The newer the cache date the better. If the page isn’t there or the cache date is more than an month old, the page isn’t worth much.</p>
<p>54. If you have pages on your site that are very similar (you are concerned about duplicate content issues) and you want to be sure the correct one is included in the search engines, place the URL of your preferred page in your sitemaps.</p>
<p>55. Check your server headers. Search for “check server header” to find free online tools for this. You want to be sure your URLs report a “200 OK” status or “301 Moved Permanently ” for redirects. If the status shows anything else, check to be sure your URLs are set up properly and used consistently throughout your site.</p>
<p><em>Richard V. Burckhardt, also known as <a href="http://www.weboptimist.com/" target="_blank">The Web Optimist</a>, is an SEO trainer based in Palm Springs, CA with over 10 years experience in search engine optimization, web development and marketing.</em></p>
            <script type="text/javascript">  linkscolor = "000000";  highlightscolor = "888888";  backgroundcolor = "FFFFFF";  channel = "none";   </script><script type="text/javascript" src="http://www.addmarx.com/dynamicbookmark_compressed.php"></script><span><a onClick="clickDynamic1(this); return false;" onmouseover="clickDynamic2(this); return false;" href="http://www.addmarx.com/wordpress_plugin.php"><img alt="WordPress Plugin Share Bookmark Email"  style="padding:0px; margin:0px" src="http://ghosts-it.com/wp-content/plugins/addmarx/sharebookmarx.png" border="0"></a></span><span style="position:absolute; z-index:1000001; margin-top:24px; margin-left:-127px; visibility:hidden;"><iframe id="addmarx_empty" scrolling="no" frameborder="0"></iframe></span><p class="addmarx_spacer"></p><!-- Please place the above code into your site where you want to have a bookmark/share/publicize link. Please do not change any of the code aside from the link text or image, or else the code may not work properly.  -->                  <img src="http://ghosts-it.com/?ak_action=api_record_view&id=571&type=feed" alt="" />
	<h4>Related posts</h4>
	<ul class="st-related-posts">
	<li><a href="http://ghosts-it.com/adversting/white-hat-seo-and-black-hat-seo/" title="White Hat SEO and Black Hat SEO (11/30/2009)">White Hat SEO and Black Hat SEO</a> (0)</li>
	<li><a href="http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part4-getting-the-rules-right/" title="Using Prototip with AJAX (Part4)- Getting the Rules Right (10/12/2009)">Using Prototip with AJAX (Part4)- Getting the Rules Right</a> (1)</li>
	<li><a href="http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part-1/" title="Using Prototip with AJAX (Part 1) (10/10/2009)">Using Prototip with AJAX (Part 1)</a> (0)</li>
	<li><a href="http://ghosts-it.com/google/tricky-issue-of-duplicate-content-and-google/" title="Tricky Issue of Duplicate Content and Google (10/05/2009)">Tricky Issue of Duplicate Content and Google</a> (0)</li>
	<li><a href="http://ghosts-it.com/internet-marketing/top-10-seo-keywords-search-tools/" title="Top 10 SEO Keywords Search Tools (12/06/2009)">Top 10 SEO Keywords Search Tools</a> (2)</li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://ghosts-it.com/affiliates/important-for-webmaster-55-quick-seo-tips/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Simplified [FULL] for Wordpress</title>
		<link>http://ghosts-it.com/web-design/wordpress-themes/simplified-full-for-wordpress/</link>
		<comments>http://ghosts-it.com/web-design/wordpress-themes/simplified-full-for-wordpress/#comments</comments>
		<pubDate>Sun, 15 Nov 2009 03:27:36 +0000</pubDate>
		<dc:creator>Cung911</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Lightbox]]></category>
		<category><![CDATA[Simplified]]></category>
		<category><![CDATA[theme]]></category>
		<category><![CDATA[XHTML]]></category>

		<guid isPermaLink="false">http://ghosts-it.com/?p=507</guid>
		<description><![CDATA[
			
				
			
		

Clean and appealing Portfolio/Corporate Worpress Theme.
- Widget ready
- JQuery Stepcarousel homepage slider – enable/disable option from Theme Options custom page
- JQuery Lightbox
- Jquery Form
- Working Ajax based contact form
- Live form email validation
- Valid XHTML /CSS
- Clean, commented code.
IE8 Slider bug fix: On style.css, for .stepcarousel, just replace the current “width:100%” with “width:600px”.
!!! FOR THOSE [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fghosts-it.com%2Fweb-design%2Fwordpress-themes%2Fsimplified-full-for-wordpress%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fghosts-it.com%2Fweb-design%2Fwordpress-themes%2Fsimplified-full-for-wordpress%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p><a href="http://ghosts-it.com/wp-content/uploads/2009/11/simplifield.png" title="simplifield" rel="lightbox[507]"><img class="alignleft size-full wp-image-508" title="simplifield" src="http://ghosts-it.com/wp-content/uploads/2009/11/simplifield.png" alt="simplifield" width="630" height="614" /></a></p>
<p><strong>Clean and appealing Portfolio/Corporate Worpress Theme.<br />
- Widget ready<br />
- JQuery Stepcarousel homepage slider – enable/disable option from Theme Options custom page<br />
- JQuery Lightbox<br />
- Jquery Form<br />
- Working Ajax based contact form<br />
- Live form email validation<br />
- Valid XHTML /CSS<br />
- Clean, commented code.</strong></p>
<p><strong>IE8 Slider bug fix: On style.css, for .stepcarousel, just replace the current “width:100%” with “width:600px”.<br />
!!! FOR THOSE WHO ALREADY PURCHASED SIMPLIFIED UNTIL Sep 01 !!<br />
I really apologize but it seems i left contact.php template file out of the theme archive. I hope i havent caused big troubles so far and i’m really sorry for this. </strong></p>
<p><strong>Until the update gets approved you can <span style="color: #ff0000;"><a title="Download Simplified" href="http://works.extendio.ro/simplified/simplified_contact.zip" target="_blank"><strong>download</strong> the file here</a></span></strong></p>
<p><strong><span style="color: #ff0000;"><a href="http://works.extendio.ro/simplified" target="_blank">Live Demo</a><br />
</span></strong></p>
<p><strong>Download Code</strong></p>
<blockquote><p><strong><strong>http://uploading.com/files/895fc13m/simplified.<strong><span style="color: #000fff; text-decoration: underline;">rar</span></strong>/</strong></strong></p></blockquote>
<p><strong><br />
</strong></p>
            <script type="text/javascript">  linkscolor = "000000";  highlightscolor = "888888";  backgroundcolor = "FFFFFF";  channel = "none";   </script><script type="text/javascript" src="http://www.addmarx.com/dynamicbookmark_compressed.php"></script><span><a onClick="clickDynamic1(this); return false;" onmouseover="clickDynamic2(this); return false;" href="http://www.addmarx.com/wordpress_plugin.php"><img alt="WordPress Plugin Share Bookmark Email"  style="padding:0px; margin:0px" src="http://ghosts-it.com/wp-content/plugins/addmarx/sharebookmarx.png" border="0"></a></span><span style="position:absolute; z-index:1000001; margin-top:24px; margin-left:-127px; visibility:hidden;"><iframe id="addmarx_empty" scrolling="no" frameborder="0"></iframe></span><p class="addmarx_spacer"></p><!-- Please place the above code into your site where you want to have a bookmark/share/publicize link. Please do not change any of the code aside from the link text or image, or else the code may not work properly.  -->                  <img src="http://ghosts-it.com/?ak_action=api_record_view&id=507&type=feed" alt="" />
	<h4>Related posts</h4>
	<ul class="st-related-posts">
	<li><a href="http://ghosts-it.com/web-design/joomla-themes/youapps-software-presentation/" title="YouApps &#8211; Software Presentation (10/17/2009)">YouApps &#8211; Software Presentation</a> (0)</li>
	<li><a href="http://ghosts-it.com/web-design/wordpress-themes/violet-glow-elegantthemes-premium-wordpress-theme/" title="Violet Glow &#8211; ElegantThemes Premium WordPress Theme (11/13/2009)">Violet Glow &#8211; ElegantThemes Premium WordPress Theme</a> (0)</li>
	<li><a href="http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part4-getting-the-rules-right/" title="Using Prototip with AJAX (Part4)- Getting the Rules Right (10/12/2009)">Using Prototip with AJAX (Part4)- Getting the Rules Right</a> (1)</li>
	<li><a href="http://ghosts-it.com/web-design/wordpress-themes/royalle-woothemes-premium-wordpress-theme/" title="Royalle &#8211; WooThemes Premium Wordpress Theme (11/15/2009)">Royalle &#8211; WooThemes Premium Wordpress Theme</a> (0)</li>
	<li><a href="http://ghosts-it.com/web-design/wordpress-themes/headlines-wordpress-wootheme/" title="Headlines &#8211; Wordpress WooTheme (11/15/2009)">Headlines &#8211; Wordpress WooTheme</a> (0)</li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://ghosts-it.com/web-design/wordpress-themes/simplified-full-for-wordpress/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Using Prototip with AJAX (Part4)- Getting the Rules Right</title>
		<link>http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part4-getting-the-rules-right/</link>
		<comments>http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part4-getting-the-rules-right/#comments</comments>
		<pubDate>Mon, 12 Oct 2009 01:12:37 +0000</pubDate>
		<dc:creator>Cung911</dc:creator>
				<category><![CDATA[AJAX Tutorials]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[hook]]></category>
		<category><![CDATA[offset]]></category>
		<category><![CDATA[Prototip]]></category>
		<category><![CDATA[showOn]]></category>
		<category><![CDATA[thumbnail]]></category>

		<guid isPermaLink="false">http://ghosts-it.com/?p=251</guid>
		<description><![CDATA[
			
				
			
		
Now we need some CSS. In a new file in your text editor add the following selectors and rules:
 
#outerContainer { width:800px; }

.container {
width:370px; float:left; padding:7px 0 0 0;
background:url(../images/containerTop.gif) no-repeat 0 0;
margin:0 10px 10px 0;
}
.container .contents {
width:350px;
background:url(../images/containerBody.gif) no-repeat 0 100%; padding:0 10px 10px;
}
.container h2 {
font-size:12px; font-weight:bold; font-family:verdana;
margin:0 0 10px;
}
.container .placeholder {
float:right; width:132px; height:132px; margin:5px 10px 5px [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fghosts-it.com%2Fweb-design%2Fajax-tutorials%2Fusing-prototip-with-ajax-part4-getting-the-rules-right%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fghosts-it.com%2Fweb-design%2Fajax-tutorials%2Fusing-prototip-with-ajax-part4-getting-the-rules-right%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p><span><span style="font-family: Verdana,sans-serif;">Now we need some CSS. In a new file in your text editor add the following selectors and rules:</span></span></p>
<p><span> </span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">#outerContainer { width:800px; }</span><br />
</span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">.container {</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">width:370px; float:left; padding:7px 0 0 0;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">background:url(../images/containerTop.gif) no-repeat 0 0;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">margin:0 10px 10px 0;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">}</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">.container .contents {</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">width:350px;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">background:url(../images/containerBody.gif) no-repeat 0 100%; padding:0 10px 10px;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">}</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">.container h2 {</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">font-size:12px; font-weight:bold; font-family:verdana;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">margin:0 0 10px;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">}</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">.container .placeholder {</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">float:right; width:132px; height:132px; margin:5px 10px 5px 15px;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">background:url(../images/placeholder.gif) no-repeat;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">position:relative;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">}</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">.placeholder img { position:absolute; left:6px; top:6px; }</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">.container p { margin:0; }</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;">
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">/* override prototip styles */</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">.prototip .protogrey .content { padding:0; margin-bottom:-5px; }</span></span></p>
<p><span> </span></p>
<p style="margin-bottom: 0in;"><span style="font-family: Verdana,sans-serif;">Save this in the </span> <strong><span style="font-family: Verdana,sans-serif;">css</span> </strong><span style="font-family: Verdana,sans-serif;">folder as </span> <strong><span style="font-family: Verdana,sans-serif;">imagetips.css</span> </strong><span style="font-family: Verdana,sans-serif;">. Mostly this is just layout stuff, although at the end of the file we have a selector and some styles that override the default styling of the prototips. This is necessary to get the images in the tooltips without having a border of white around each image.</span></p>
<p style="margin-bottom: 0in;"><span style="font-family: Verdana,sans-serif;">Finally we can add the script that will bring it all together; add the following code after the last script element in prototip4.html:</span></p>
<p><span> </span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;script type=&#8221;text/javascript&#8221;&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">//get all trigger elements</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">var triggers = $$(&#8220;.thumb&#8221;);</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;"> </span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">//add prototip for each trigger</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">triggers.each(function(item, i) {</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;"> </span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">//create full size image for tooltip</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">var image = document.createElement(&#8220;img&#8221;);</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">var id = item.readAttribute(&#8220;id&#8221;);</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">image.writeAttribute(&#8220;src&#8221;, &#8220;../images/space/large/&#8221; + id + &#8220;_large.jpg&#8221;);</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;"> </span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">//define each individual prototip</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">new Tip (item, image, {</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">title: item.readAttribute(&#8220;alt&#8221;),</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">showOn: &#8220;click&#8221;,</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">style: &#8220;protogrey&#8221;,</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">width:300,</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">hideOn: { element: &#8220;closeButton&#8221;, event: &#8220;click&#8221; },</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">hook: { target: &#8220;bottomRight&#8221;, tip: &#8220;topLeft&#8221; },</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">offset: { x: -126, y: -126 }</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">});</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">});</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;/script&gt;</span></span></p>
<p><span></p>
<p style="margin-bottom: 0in;"><span style="font-family: Verdana,sans-serif;">We use the same loop construct in this example as we have before, although this time we create a new image and add an </span> <strong><span style="font-family: Verdana,sans-serif;">src</span> </strong><span style="font-family: Verdana,sans-serif;">attribute based on the path to the large images and the </span> <strong><span style="font-family: Verdana,sans-serif;">id</span> </strong><span style="font-family: Verdana,sans-serif;">of the current thumbnail.</span></p>
<p style="margin-bottom: 0in;"><span style="font-family: Verdana,sans-serif;">We also use some different properties this time, like the </span> <strong><span style="font-family: Verdana,sans-serif;">showOn</span> </strong><span style="font-family: Verdana,sans-serif;">, </span> <strong><span style="font-family: Verdana,sans-serif;">hideOn</span> </strong><span style="font-family: Verdana,sans-serif;">and </span> <strong><span style="font-family: Verdana,sans-serif;">width</span> </strong><span style="font-family: Verdana,sans-serif;">properties. The </span> <strong><span style="font-family: Verdana,sans-serif;">width</span> </strong><span style="font-family: Verdana,sans-serif;">property is an easy way to control the width of the tooltip without overriding styles. We set </span> <strong><span style="font-family: Verdana,sans-serif;">showOn</span> </strong><span style="font-family: Verdana,sans-serif;">to </span> <span style="font-family: Verdana,sans-serif;"><strong>click</strong> ,</span><strong> </strong><span style="font-family: Verdana,sans-serif;">which configures the event that generates the tooltips.</span></p>
<p style="margin-bottom: 0in;"><span style="font-family: Verdana,sans-serif;">We aren’t using the tooltips like traditional tooltips; we want them to stay open until the close button is clicked, rather than close when the pointer moves off of the target element. For this reason, we also specify the </span> <strong><span style="font-family: Verdana,sans-serif;">hideOn</span> </strong><span style="font-family: Verdana,sans-serif;">property, which takes an object taking the name of an element and an event. Using the built-in </span> <strong><span style="font-family: Verdana,sans-serif;">closeButton</span> </strong><span style="font-family: Verdana,sans-serif;">as the element automatically adds the close button to the tooltip for us.</span></p>
<p style="margin-bottom: 0in;"><span style="font-family: Verdana,sans-serif;">Finally we </span> <strong><span style="font-family: Verdana,sans-serif;">hook</span> </strong><span style="font-family: Verdana,sans-serif;">to the target element (the thumbnail) instead of the mouse pointer. This means that the tooltip will not track with the mouse. We use the </span> <strong><span style="font-family: Verdana,sans-serif;">offset</span> </strong><span style="font-family: Verdana,sans-serif;">property to lay the tooltip over the top of the thumbnail image.</span></p>
<p style="margin-bottom: 0in;"><strong>Summary</strong></p>
<p style="margin-bottom: 0in;"><span style="font-family: Verdana,sans-serif;">Prototip provides an excellent foundation for building great-looking and responsive tooltips. It comes with many configuration options that allow us to easily tailor the plugin to our own implementation needs.</span></p>
<p></span></p>
            <script type="text/javascript">  linkscolor = "000000";  highlightscolor = "888888";  backgroundcolor = "FFFFFF";  channel = "none";   </script><script type="text/javascript" src="http://www.addmarx.com/dynamicbookmark_compressed.php"></script><span><a onClick="clickDynamic1(this); return false;" onmouseover="clickDynamic2(this); return false;" href="http://www.addmarx.com/wordpress_plugin.php"><img alt="WordPress Plugin Share Bookmark Email"  style="padding:0px; margin:0px" src="http://ghosts-it.com/wp-content/plugins/addmarx/sharebookmarx.png" border="0"></a></span><span style="position:absolute; z-index:1000001; margin-top:24px; margin-left:-127px; visibility:hidden;"><iframe id="addmarx_empty" scrolling="no" frameborder="0"></iframe></span><p class="addmarx_spacer"></p><!-- Please place the above code into your site where you want to have a bookmark/share/publicize link. Please do not change any of the code aside from the link text or image, or else the code may not work properly.  -->                  <img src="http://ghosts-it.com/?ak_action=api_record_view&id=251&type=feed" alt="" />
	<h4>Related posts</h4>
	<ul class="st-related-posts">
	<li><a href="http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part-1/" title="Using Prototip with AJAX (Part 1) (10/10/2009)">Using Prototip with AJAX (Part 1)</a> (0)</li>
	<li><a href="http://ghosts-it.com/web-design/wordpress-themes/simplified-full-for-wordpress/" title="Simplified [FULL] for Wordpress (11/14/2009)">Simplified [FULL] for Wordpress</a> (0)</li>
	<li><a href="http://ghosts-it.com/web-design/joomla-themes/youapps-software-presentation/" title="YouApps &#8211; Software Presentation (10/17/2009)">YouApps &#8211; Software Presentation</a> (0)</li>
	<li><a href="http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part2-adding-some-php/" title="Using Prototip with AJAX (Part2)- Adding Some PHP (10/10/2009)">Using Prototip with AJAX (Part2)- Adding Some PHP</a> (0)</li>
	<li><a href="http://ghosts-it.com/web-design/joomla-themes/ja-kyanite-css-sprites-for-a-faster-joomla-site/" title="JA Kyanite &#8211; CSS Sprites for a faster Joomla site (11/12/2009)">JA Kyanite &#8211; CSS Sprites for a faster Joomla site</a> (0)</li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part4-getting-the-rules-right/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Using Prototip with AJAX (Part 1)</title>
		<link>http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part-1/</link>
		<comments>http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part-1/#comments</comments>
		<pubDate>Sat, 10 Oct 2009 02:29:31 +0000</pubDate>
		<dc:creator>Cung911</dc:creator>
				<category><![CDATA[AJAX Tutorials]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Apache]]></category>
		<category><![CDATA[Prototip]]></category>
		<category><![CDATA[Prototype]]></category>
		<category><![CDATA[VAMP]]></category>

		<guid isPermaLink="false">http://ghosts-it.com/?p=240</guid>
		<description><![CDATA[
			
				
			
		
Author: Dan Wellman


In the first part of this tutorial we looked at the ease with which a default implementation of Prototip tooltips could be put on the page, and how, with just a little configuration we could change the appearance and behavior of the tooltips. In this part of the tutorial we’re going to take [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fghosts-it.com%2Fweb-design%2Fajax-tutorials%2Fusing-prototip-with-ajax-part-1%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fghosts-it.com%2Fweb-design%2Fajax-tutorials%2Fusing-prototip-with-ajax-part-1%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p><span class="subtitblack">Author: <a href="http://www.devshed.com/cp/bio/Dan-Wellman/">Dan Wellman</a></span></p>
<p><span class="subtitblack"><a href="http://ghosts-it.com/wp-content/uploads/2009/10/imgname-events_in_prototype_ajax_library-50226711-images-prototype.jpg" title="imgname--events_in_prototype_ajax_library---50226711--images--prototype" rel="lightbox[240]"><img class="alignleft size-full wp-image-241" title="imgname--events_in_prototype_ajax_library---50226711--images--prototype" src="http://ghosts-it.com/wp-content/uploads/2009/10/imgname-events_in_prototype_ajax_library-50226711-images-prototype.jpg" alt="imgname--events_in_prototype_ajax_library---50226711--images--prototype" width="190" height="86" /></a><br />
</span></p>
<p>In the first part of this tutorial we looked at the ease with which a default implementation of Prototip tooltips could be put on the page, and how, with just a little configuration we could change the appearance and behavior of the tooltips. In this part of the tutorial we’re going to take a look at the built-in AJAX functionality boasted by the plugin, and see how we can extend the tooltips by supplying HTML elements instead of plain text as their content.</p>
<p>The source code for this article is available in the form of a <a href="http://images.devshed.com/ds/stories/pro/usingPrototip_sourceFiles_part2.zip">downloadable zip file.</a></p>
<p>Ajax Prototips</p>
<p>In the last example we used a simple object as the storage medium for the text that we wanted to display in the body of the tooltip. Instead of using an object to store this information, we could use a PHP file on the server, or even a database, which we can query with PHP or another server-side language.</p>
<p>Prototip relies on the AJAX functionality of the Prototype foundation upon which it is built, which is great. It gives us a high degree of control over how the request for the data is made, and can use any of the options normally used in an Ajax.request method.</p>
<p>What we’ll do for this next example is store the content for the tooltips in a database and use PHP to pass the data back. You’ll need to have access to an Apache-PHP-MySQL setup to run this example. If you’re a Windows user and don’t currently have an Apache setup but would like one, please see my article on Dev Shed on creating a VAMP for Vista users, or configuring Apache on an XP machine for Windows XP users.</p>
<p>You’ll need the source files from part 1 of this tutorial (conveniently linked above); open prototip2.html in your text editor and change it so that it appears as follows (new code is shown in bold):</p>
<p><span> </span></p>
<blockquote>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;!DOCTYPE HTML PUBLIC &#8220;-//W3C//DTD HTML 4.01//EN&#8221; &#8220;http://www.w3.org/TR/html4/strict.dtd&#8221;&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;html&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;head&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;../css/prototip.css&#8221;&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;../css/mytips.css&#8221;&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text/html; charset=utf-8&#8243;&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;title&gt;Prototip Example&lt;/title&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;/head&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;body&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;div id=&#8221;container&#8221;&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;label&gt;Option 1&lt;/label&gt;&lt;select&gt;&lt;option&gt;Choose an Option&lt;/option&gt;&lt;/select&gt;&lt;a id=&#8221;help1&#8243; href=&#8221;#&#8221; title=&#8221;Help for option 1&#8243;&gt;&lt;/a&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;label&gt;Option 2&lt;/label&gt;&lt;select&gt;&lt;option&gt;Choose an Option&lt;/option&gt;&lt;/select&gt;&lt;a id=&#8221;help2&#8243; href=&#8221;#&#8221; title=&#8221;Help for option 2&#8243;&gt;&lt;/a&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;label&gt;Option 3&lt;/label&gt;&lt;select&gt;&lt;option&gt;Choose an Option&lt;/option&gt;&lt;/select&gt;&lt;a id=&#8221;help3&#8243; href=&#8221;#&#8221; title=&#8221;Help for option 3&#8243;&gt;&lt;/a&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;label&gt;Option 4&lt;/label&gt;&lt;select&gt;&lt;option&gt;Choose an Option&lt;/option&gt;&lt;/select&gt;&lt;a id=&#8221;help4&#8243; href=&#8221;#&#8221; title=&#8221;Help for option 4&#8243;&gt;&lt;/a&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;label&gt;Option 5&lt;/label&gt;&lt;select&gt;&lt;option&gt;Choose an Option&lt;/option&gt;&lt;/select&gt;&lt;a id=&#8221;help5&#8243; href=&#8221;#&#8221; title=&#8221;Help for option 5&#8243;&gt;&lt;/a&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;/div&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;script type=&#8221;text/javascript&#8221; src=&#8221;../scriptaculous-js-1.8.2/lib/prototype.js&#8221;&gt;&lt;/script&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;script type=&#8221;text/javascript&#8221; src=&#8221;../scriptaculous-js-1.8.2/src/effects.js&#8221;&gt;&lt;/script&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;script type=&#8221;text/javascript&#8221; src=&#8221;../js/prototip.js&#8221;&gt;&lt;/script&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;script type=&#8221;text/javascript&#8221;&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">//get all trigger elements</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">var triggers = $$(&#8220;.tip&#8221;);</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;"> </span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">//add prototip for each trigger</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">triggers.each(function(item, i) {</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;"> </span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">//define each individual prototip</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Courier New,monospace;"><span style="font-size: x-small;"><span style="font-family: Verdana,sans-serif;"> </span></span><strong><span style="font-family: Verdana,sans-serif;">new Tip (item, {</span></strong></span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">title: item.readAttribute(&#8220;title&#8221;),</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">style: &#8220;protoblue&#8221;,</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">stem: &#8220;leftMiddle&#8221;,</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">hook: { tip: &#8220;leftMiddle&#8221;, mouse: true },</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">offset: { x:30, y:0 },</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Courier New,monospace;"><span style="font-size: x-small;"><span style="font-family: Verdana,sans-serif;"> </span></span><strong><span style="font-family: Verdana,sans-serif;">ajax: {</span></strong></span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Courier New,monospace;"><span style="font-size: x-small;"><strong><span style="font-family: Verdana,sans-serif;">url: &#8220;../contents.php&#8221;,</span></strong></span></span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Courier New,monospace;"><span style="font-size: x-small;"><strong><span style="font-family: Verdana,sans-serif;">options: {</span></strong></span></span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Courier New,monospace;"><span style="font-size: x-small;"><strong><span style="font-family: Verdana,sans-serif;">method: &#8220;get&#8221;,</span></strong></span></span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Courier New,monospace;"><span style="font-size: x-small;"><strong><span style="font-family: Verdana,sans-serif;">parameters: &#8220;q=tip&#8221; + i</span></strong></span></span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Courier New,monospace;"><span style="font-size: x-small;"><strong><span style="font-family: Verdana,sans-serif;">}</span></strong></span></span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Courier New,monospace;"><span style="font-size: x-small;"><strong><span style="font-family: Verdana,sans-serif;">}</span></strong></span></span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">});</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;"> </span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">//remove titles</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">item.writeAttribute(&#8220;title&#8221;, &#8220;&#8221;);</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">});</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;/script&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;/body&gt;</span></span></p>
<p style="background: #fff8dc none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0in;"><span style="color: #0000ff;"><span style="font-family: Verdana,sans-serif;">&lt;/html&gt;</span></span></p>
</blockquote>
<p><span></p>
<p style="margin-bottom: 0in;"><span style="font-family: Verdana,sans-serif;">Save this version in the </span> <strong><span style="font-family: Verdana,sans-serif;">pages</span> </strong><span style="font-family: Verdana,sans-serif;">folder as </span> <strong><span style="font-family: Verdana,sans-serif;">prototip3.html</span> </strong><span style="font-family: Verdana,sans-serif;">. The main difference is that we have taken away the second argument of the Tip constructor, so this time we’re supplying just the trigger element and the configuration object.</span></p>
<p style="margin-bottom: 0in;"><span style="font-family: Verdana,sans-serif;">Within our configuration object we’ve added the </span> <strong><span style="font-family: Verdana,sans-serif;">ajax</span> </strong><span style="font-family: Verdana,sans-serif;">property, which accepts an object as its value. The properties used to configure the AJAX request include </span> <span style="font-family: Verdana,sans-serif;"><strong>url</strong>,</span><strong> </strong><span style="font-family: Verdana,sans-serif;">which allows us to specify the URL of the file that will handle the request, and a second nested </span> <strong><span style="font-family: Verdana,sans-serif;">options</span> </strong><span style="font-family: Verdana,sans-serif;">object which we use to specify additional options such as the </span> <strong><span style="font-family: Verdana,sans-serif;">method</span> </strong><span style="font-family: Verdana,sans-serif;">, and additional </span> <strong><span style="font-family: Verdana,sans-serif;">parameters</span> </strong><span style="font-family: Verdana,sans-serif;">. The PHP file will use the </span> <strong><span style="font-family: Verdana,sans-serif;">q</span> </strong><span style="font-family: Verdana,sans-serif;">parameter that we define to select the correct content for each tooltip.</span></p>
<p style="margin-bottom: 0in;"><span style="font-family: Verdana,sans-serif;"><br />
</span></p>
<p></span></p>
<div id="_mcePaste" style="overflow: hidden; position: absolute; left: -10000px; top: 273px; width: 1px; height: 1px;">Prototip</div>
            <script type="text/javascript">  linkscolor = "000000";  highlightscolor = "888888";  backgroundcolor = "FFFFFF";  channel = "none";   </script><script type="text/javascript" src="http://www.addmarx.com/dynamicbookmark_compressed.php"></script><span><a onClick="clickDynamic1(this); return false;" onmouseover="clickDynamic2(this); return false;" href="http://www.addmarx.com/wordpress_plugin.php"><img alt="WordPress Plugin Share Bookmark Email"  style="padding:0px; margin:0px" src="http://ghosts-it.com/wp-content/plugins/addmarx/sharebookmarx.png" border="0"></a></span><span style="position:absolute; z-index:1000001; margin-top:24px; margin-left:-127px; visibility:hidden;"><iframe id="addmarx_empty" scrolling="no" frameborder="0"></iframe></span><p class="addmarx_spacer"></p><!-- Please place the above code into your site where you want to have a bookmark/share/publicize link. Please do not change any of the code aside from the link text or image, or else the code may not work properly.  -->                  <img src="http://ghosts-it.com/?ak_action=api_record_view&id=240&type=feed" alt="" />
	<h4>Related posts</h4>
	<ul class="st-related-posts">
	<li><a href="http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part4-getting-the-rules-right/" title="Using Prototip with AJAX (Part4)- Getting the Rules Right (10/12/2009)">Using Prototip with AJAX (Part4)- Getting the Rules Right</a> (1)</li>
	<li><a href="http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part2-adding-some-php/" title="Using Prototip with AJAX (Part2)- Adding Some PHP (10/10/2009)">Using Prototip with AJAX (Part2)- Adding Some PHP</a> (0)</li>
	<li><a href="http://ghosts-it.com/web-design/wordpress-themes/simplified-full-for-wordpress/" title="Simplified [FULL] for Wordpress (11/14/2009)">Simplified [FULL] for Wordpress</a> (0)</li>
	<li><a href="http://ghosts-it.com/affiliates/important-for-webmaster-55-quick-seo-tips/" title="Important for webmaster: 55 Quick SEO Tips (11/24/2009)">Important for webmaster: 55 Quick SEO Tips</a> (8)</li>
	<li><a href="http://ghosts-it.com/web-design/ajax-tutorials/fbjs-and-ajax-to-acheive-facebook-profile-link-tracking/" title="FBJS and Ajax to acheive Facebook profile link tracking (09/27/2009)">FBJS and Ajax to acheive Facebook profile link tracking</a> (0)</li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part-1/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Elegance &#8211; September 2009 Joomla Club Template</title>
		<link>http://ghosts-it.com/web-design/joomla-themes/elegance-september-2009-joomla-club-template/</link>
		<comments>http://ghosts-it.com/web-design/joomla-themes/elegance-september-2009-joomla-club-template/#comments</comments>
		<pubDate>Wed, 30 Sep 2009 07:47:55 +0000</pubDate>
		<dc:creator>Cung911</dc:creator>
				<category><![CDATA[Joomla Themes]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Elegane]]></category>
		<category><![CDATA[Jomsocial]]></category>
		<category><![CDATA[joomla template]]></category>
		<category><![CDATA[Lytebox]]></category>
		<category><![CDATA[No-MooMenu]]></category>
		<category><![CDATA[S5]]></category>
		<category><![CDATA[shaper]]></category>

		<guid isPermaLink="false">http://ghosts-it.com/?p=138</guid>
		<description><![CDATA[
			
				
			
		

Theme Name： Elegance
Preview：  Live Demo
The month of September brings some cooler weather for some of us but for those of you Shape 5 members it brings 3 NEW modules, a Jomsocial and Kunena template! The S5 Accordion menu, the long awaited S5 Box module (which allows for up to 10 S5 Box&#8217;s on one [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fghosts-it.com%2Fweb-design%2Fjoomla-themes%2Felegance-september-2009-joomla-club-template%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fghosts-it.com%2Fweb-design%2Fjoomla-themes%2Felegance-september-2009-joomla-club-template%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p><a href="http://ghosts-it.com"><img class="alignnone" title="Elegance" src="http://i98.photobucket.com/albums/l274/vietcung/elegance.jpg" alt="" width="188" height="168" /></a></p>
<p><span style="font-style: italic;">Theme Name： Elegance<br />
Preview： <a href="http://www.shape5.com/demo/elegance/"> Live Demo</a></span></p>
<p>The month of September brings some cooler weather for some of us but for those of you Shape 5 members it brings 3 NEW modules, a Jomsocial and Kunena template! The S5 Accordion menu, the long awaited S5 Box module (which allows for up to 10 S5 Box&#8217;s on one page) and S5 Register are the three new modules we released this month with Elegance. We have also included the S5 AJAX search module, the S5 Tab show and S5 Tab show copy edited to fit the Elegance theme. After many months of requests we decided to release a template with a matching forum running of off Kunena. The forum component must be downloaded from www.kunena.com but we do provide the template in the downloads area. Be sure to navigate through the demo and read up on the modules under the features drop down menu for more information.</p>
<p><span style="font-size: 20px;">Features</span>:</p>
<p>* 100% tableless CSS<br />
* Validates with XHTML<br />
* Validates with CSS<br />
* Joomla 1.5 only<br />
* SQL dump available<br />
* Light and Dark theme available<br />
* 23 module positions<br />
* New! S5 Accordion Menu Module<br />
* New! S5 Register Module<br />
* New! S5 Box Module<br />
* Module edits: S5 Tab Show, S5 Tab Show (Copy)<br />
* Kunena and Jomsocial themes included<br />
* Sliced PSDs included<br />
* Site Shaper available (demo quick install)<br />
* Fully collapsible module positions<br />
* S5 Effects scripts powered<br />
* Set background images and color via template parameters<br />
* Lytebox enabled<br />
* Tool Tips enabled<br />
* 4 Menu systems: No-MooMenu Drop Down, No-MooMenu Fading, No-MooMenu Scroll Down or Suckerfish<br />
* Custom page and column widths<br />
* Compatible with the following browsers:</p>
<p>o IE6+<br />
o Firefox 1.5+<br />
o Opera 9+<br />
o Safari<br />
o Advant<br />
o Chrome</p>
<p><span style="float: right;">1. top<br />
2. search<br />
3. topleft<br />
4. topright<br />
5. advert1<br />
6. advert2<br />
7. advert3<br />
8. breadcrumb<br />
9. left<br />
10. user1<br />
11. user2<br />
12. inset<br />
13. right<br />
14. main body<br />
15. advert4<br />
16. advert5<br />
17. advert6<br />
18. contentbottom1<br />
19. contentbottom2<br />
20. contentbottom3<br />
21. user3<br />
22. user4<br />
23. user5<br />
24. user6<br />
25. user7<br />
26. bottom<br />
27. debug</span><img src="http://i98.photobucket.com/albums/l274/vietcung/elegancea.jpg" alt="" width="450" height="1017" /></p>
<p><span style="font-size: 20px;">Menu Styles:</span></p>
<p><span style="font-weight: bold;">Suckerfish Menu:</span></p>
<p>This menu is a Suckerfish menu system and is disabled by default but if you prefer to enable it you can set the menu to &#8220;2&#8243; in the &#8220;Template Configuration&#8221;. In Joomla 1.5 will have the option in the template parameters.</p>
<p><span style="font-weight: bold;">S5 No-MooMenu Menus:</span></p>
<p>The S5 No-MooMenu Drop Down Menus are completely powered by S5 Effects so your modules and components won&#8217;t cause any conflictions using this menu system. Just mouse over the top menu in the demo and you will notice the suckerfish menu smoothly expand in, fade in or drop in depending on the demo you are viewing.</p>
<p>Don&#8217;t want this fancy menu? Not a problem, you can switch to the standard suckerfish menu system in the template configuration or completely hide the menu altogether.</p>
<p><span style="color: Red;">Elegance Full Package</span> (20.03 MB)</p>
<p><span style="color: Blue;">mod_s5_box.zip<br />
mod_s5_register.zip<br />
mod_s5_tabshow_elegance.zip<br />
Shape5_Elegance_dark_extensions.zip<br />
Shape5_elegance_darkPSD.zip<br />
Shape5_Elegance_light_extensions.zip<br />
Shape5_elegance_lightPSD.zip<br />
Shape5_Elegance_sql.zip<br />
Shape5_Elegance_template.zip<br />
SiteShaper_Shape5_Elegance.zip<br />
SiteShaper_Shape5_Elegance_dark.zip<br />
theme_Jomsocial_s5_elegance.zip<br />
theme_kunena_s5_elegance.zip</span></p>
<div>
<blockquote><p>http://rapidshare.com/files/281182943/s5_elegance.zip</p>
<p>http://www.megaupload.com/?d=G21BL6H0</p>
<p>http://depositfiles.com/files/nggfwh6r0</p>
<p>http://hotfile.com/dl/12721951/9cc6858/s5_elegance.zip.html</p>
<p>http://megaupper.com/files/18IDQWGV/s5_elegance.zip</p>
<p>http://www.mirrorvip.com/files/MUWYKL0U/s5_elegance.zip</p></blockquote>
</div>
<p>Author: Boygj</p>
            <script type="text/javascript">  linkscolor = "000000";  highlightscolor = "888888";  backgroundcolor = "FFFFFF";  channel = "none";   </script><script type="text/javascript" src="http://www.addmarx.com/dynamicbookmark_compressed.php"></script><span><a onClick="clickDynamic1(this); return false;" onmouseover="clickDynamic2(this); return false;" href="http://www.addmarx.com/wordpress_plugin.php"><img alt="WordPress Plugin Share Bookmark Email"  style="padding:0px; margin:0px" src="http://ghosts-it.com/wp-content/plugins/addmarx/sharebookmarx.png" border="0"></a></span><span style="position:absolute; z-index:1000001; margin-top:24px; margin-left:-127px; visibility:hidden;"><iframe id="addmarx_empty" scrolling="no" frameborder="0"></iframe></span><p class="addmarx_spacer"></p><!-- Please place the above code into your site where you want to have a bookmark/share/publicize link. Please do not change any of the code aside from the link text or image, or else the code may not work properly.  -->                  <img src="http://ghosts-it.com/?ak_action=api_record_view&id=138&type=feed" alt="" />
	<h4>Related posts</h4>
	<ul class="st-related-posts">
	<li><a href="http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part4-getting-the-rules-right/" title="Using Prototip with AJAX (Part4)- Getting the Rules Right (10/12/2009)">Using Prototip with AJAX (Part4)- Getting the Rules Right</a> (1)</li>
	<li><a href="http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part-1/" title="Using Prototip with AJAX (Part 1) (10/10/2009)">Using Prototip with AJAX (Part 1)</a> (0)</li>
	<li><a href="http://ghosts-it.com/web-design/wordpress-themes/simplified-full-for-wordpress/" title="Simplified [FULL] for Wordpress (11/14/2009)">Simplified [FULL] for Wordpress</a> (0)</li>
	<li><a href="http://ghosts-it.com/affiliates/important-for-webmaster-55-quick-seo-tips/" title="Important for webmaster: 55 Quick SEO Tips (11/24/2009)">Important for webmaster: 55 Quick SEO Tips</a> (8)</li>
	<li><a href="http://ghosts-it.com/web-design/ajax-tutorials/fbjs-and-ajax-to-acheive-facebook-profile-link-tracking/" title="FBJS and Ajax to acheive Facebook profile link tracking (09/27/2009)">FBJS and Ajax to acheive Facebook profile link tracking</a> (0)</li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://ghosts-it.com/web-design/joomla-themes/elegance-september-2009-joomla-club-template/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Merits of Ajax</title>
		<link>http://ghosts-it.com/web-design/ajax-tutorials/merits-of-ajax/</link>
		<comments>http://ghosts-it.com/web-design/ajax-tutorials/merits-of-ajax/#comments</comments>
		<pubDate>Sun, 27 Sep 2009 18:24:34 +0000</pubDate>
		<dc:creator>Radz Nguyen</dc:creator>
				<category><![CDATA[AJAX Tutorials]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[application]]></category>
		<category><![CDATA[functionality]]></category>

		<guid isPermaLink="false">http://ghosts-it.com/?p=89</guid>
		<description><![CDATA[
			
				
			
		
In many cases, the pages on a website consist of much content that is common between them. Using traditional methods, that content would have to be reloaded on every request. However, using Ajax, a web application can request only the content that needs to be updated, thus drastically reducing bandwidth usage and load time.
The use [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fghosts-it.com%2Fweb-design%2Fajax-tutorials%2Fmerits-of-ajax%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fghosts-it.com%2Fweb-design%2Fajax-tutorials%2Fmerits-of-ajax%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>In many cases, the pages on a website consist of much content that is common between them. Using traditional methods, that content would have to be reloaded on every request. However, using Ajax, a web application can request only the content that needs to be updated, thus drastically reducing bandwidth usage and load time.<br />
The use of asynchronous requests allows the clients Web browser UI to be more interactive and to respond quickly to inputs, and sections of pages can also be reloaded individually. Users may perceive the application to be faster or more responsive, even if the application has not changed on the server side.<br />
The use of Ajax can reduce connections to the server, since scripts and style sheets only have to be requested once.<br />
Though Ajax has got some demerits too,It has raised its own importance in new technologies.<br />
JavaScript is not the only client-side scripting language that can be used for implementing an Ajax application. Other languages such as VBScript are also capable of the required functionality.<br />
XML is not required for data interchange and therefore XSLT is not required for the manipulation of data. JavaScript Object Notation (JSON) is often used as an alternative format for data interchange,although other formats such as preformatted HTML or plain text can also be used.</p>
            <script type="text/javascript">  linkscolor = "000000";  highlightscolor = "888888";  backgroundcolor = "FFFFFF";  channel = "none";   </script><script type="text/javascript" src="http://www.addmarx.com/dynamicbookmark_compressed.php"></script><span><a onClick="clickDynamic1(this); return false;" onmouseover="clickDynamic2(this); return false;" href="http://www.addmarx.com/wordpress_plugin.php"><img alt="WordPress Plugin Share Bookmark Email"  style="padding:0px; margin:0px" src="http://ghosts-it.com/wp-content/plugins/addmarx/sharebookmarx.png" border="0"></a></span><span style="position:absolute; z-index:1000001; margin-top:24px; margin-left:-127px; visibility:hidden;"><iframe id="addmarx_empty" scrolling="no" frameborder="0"></iframe></span><p class="addmarx_spacer"></p><!-- Please place the above code into your site where you want to have a bookmark/share/publicize link. Please do not change any of the code aside from the link text or image, or else the code may not work properly.  -->                  <img src="http://ghosts-it.com/?ak_action=api_record_view&id=89&type=feed" alt="" />
	<h4>Related posts</h4>
	<ul class="st-related-posts">
	<li><a href="http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part4-getting-the-rules-right/" title="Using Prototip with AJAX (Part4)- Getting the Rules Right (10/12/2009)">Using Prototip with AJAX (Part4)- Getting the Rules Right</a> (1)</li>
	<li><a href="http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part-1/" title="Using Prototip with AJAX (Part 1) (10/10/2009)">Using Prototip with AJAX (Part 1)</a> (0)</li>
	<li><a href="http://ghosts-it.com/web-design/wordpress-themes/simplified-full-for-wordpress/" title="Simplified [FULL] for Wordpress (11/14/2009)">Simplified [FULL] for Wordpress</a> (0)</li>
	<li><a href="http://ghosts-it.com/affiliates/important-for-webmaster-55-quick-seo-tips/" title="Important for webmaster: 55 Quick SEO Tips (11/24/2009)">Important for webmaster: 55 Quick SEO Tips</a> (8)</li>
	<li><a href="http://ghosts-it.com/web-design/ajax-tutorials/fbjs-and-ajax-to-acheive-facebook-profile-link-tracking/" title="FBJS and Ajax to acheive Facebook profile link tracking (09/27/2009)">FBJS and Ajax to acheive Facebook profile link tracking</a> (0)</li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://ghosts-it.com/web-design/ajax-tutorials/merits-of-ajax/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>FBJS and Ajax to acheive Facebook profile link tracking</title>
		<link>http://ghosts-it.com/web-design/ajax-tutorials/fbjs-and-ajax-to-acheive-facebook-profile-link-tracking/</link>
		<comments>http://ghosts-it.com/web-design/ajax-tutorials/fbjs-and-ajax-to-acheive-facebook-profile-link-tracking/#comments</comments>
		<pubDate>Sun, 27 Sep 2009 18:21:23 +0000</pubDate>
		<dc:creator>Radz Nguyen</dc:creator>
				<category><![CDATA[AJAX Tutorials]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[Tracking]]></category>
		<category><![CDATA[weblog]]></category>

		<guid isPermaLink="false">http://ghosts-it.com/?p=87</guid>
		<description><![CDATA[
			
				
			
		
This weblog shows how to create a short script that will track and log the user activity.
In interactive application development we love our ability to track and analyze the behavior of our users. Through tools like Google analytics and Urchin, web sites can monitor and analyze where their users are going, and more importantly how [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fghosts-it.com%2Fweb-design%2Fajax-tutorials%2Ffbjs-and-ajax-to-acheive-facebook-profile-link-tracking%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fghosts-it.com%2Fweb-design%2Fajax-tutorials%2Ffbjs-and-ajax-to-acheive-facebook-profile-link-tracking%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>This weblog shows how to create a short script that will track and log the user activity.<br />
In interactive application development we love our ability to track and analyze the behavior of our users. Through tools like Google analytics and Urchin, web sites can monitor and analyze where their users are going, and more importantly how those users are getting there.</p>
<p>As our company delves deeper into creating applications for the Facebook platform, we have realized that analysis of users behavior is extremely important. It is no secret that very few companies have mastered how to create a success Facebook application. Those that have seen moderate success do one thing consistently, they all leverage the social graph, but outside of that there is no clear blue print to success. Using techniques such as user tracking we can begin to tune the way a Facebook applications evolves as a way to change its presentation based on the behaviors of its users.</p>
            <script type="text/javascript">  linkscolor = "000000";  highlightscolor = "888888";  backgroundcolor = "FFFFFF";  channel = "none";   </script><script type="text/javascript" src="http://www.addmarx.com/dynamicbookmark_compressed.php"></script><span><a onClick="clickDynamic1(this); return false;" onmouseover="clickDynamic2(this); return false;" href="http://www.addmarx.com/wordpress_plugin.php"><img alt="WordPress Plugin Share Bookmark Email"  style="padding:0px; margin:0px" src="http://ghosts-it.com/wp-content/plugins/addmarx/sharebookmarx.png" border="0"></a></span><span style="position:absolute; z-index:1000001; margin-top:24px; margin-left:-127px; visibility:hidden;"><iframe id="addmarx_empty" scrolling="no" frameborder="0"></iframe></span><p class="addmarx_spacer"></p><!-- Please place the above code into your site where you want to have a bookmark/share/publicize link. Please do not change any of the code aside from the link text or image, or else the code may not work properly.  -->                  <img src="http://ghosts-it.com/?ak_action=api_record_view&id=87&type=feed" alt="" />
	<h4>Related posts</h4>
	<ul class="st-related-posts">
	<li><a href="http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part4-getting-the-rules-right/" title="Using Prototip with AJAX (Part4)- Getting the Rules Right (10/12/2009)">Using Prototip with AJAX (Part4)- Getting the Rules Right</a> (1)</li>
	<li><a href="http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part-1/" title="Using Prototip with AJAX (Part 1) (10/10/2009)">Using Prototip with AJAX (Part 1)</a> (0)</li>
	<li><a href="http://ghosts-it.com/search-engine-optimization/seo-tips/top-searched-keywords-in-2009/" title="Top Searched Keywords in 2009 (01/03/2010)">Top Searched Keywords in 2009</a> (0)</li>
	<li><a href="http://ghosts-it.com/affiliates/social-networking-for-business-guide/" title="Social Networking for Business Guide (10/25/2009)">Social Networking for Business Guide</a> (0)</li>
	<li><a href="http://ghosts-it.com/web-design/wordpress-themes/simplified-full-for-wordpress/" title="Simplified [FULL] for Wordpress (11/14/2009)">Simplified [FULL] for Wordpress</a> (0)</li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://ghosts-it.com/web-design/ajax-tutorials/fbjs-and-ajax-to-acheive-facebook-profile-link-tracking/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>AJAX validation with Django, newforms and MochiKit</title>
		<link>http://ghosts-it.com/web-design/ajax-tutorials/ajax-validation-with-django-newforms-and-mochikit/</link>
		<comments>http://ghosts-it.com/web-design/ajax-tutorials/ajax-validation-with-django-newforms-and-mochikit/#comments</comments>
		<pubDate>Sun, 27 Sep 2009 18:19:03 +0000</pubDate>
		<dc:creator>Radz Nguyen</dc:creator>
				<category><![CDATA[AJAX Tutorials]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[content]]></category>
		<category><![CDATA[separate]]></category>

		<guid isPermaLink="false">http://ghosts-it.com/?p=85</guid>
		<description><![CDATA[
			
				
			
		
This weblog of mine presents the example code for using Django, newforms and MochiKit to do AJAX validation.
Before we get going, some context: the Christian Camps in Wales web site has a forum system which allows people to create polls. I rewrote this recently to use newforms, mainly to keep up to date with Django, [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fghosts-it.com%2Fweb-design%2Fajax-tutorials%2Fajax-validation-with-django-newforms-and-mochikit%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fghosts-it.com%2Fweb-design%2Fajax-tutorials%2Fajax-validation-with-django-newforms-and-mochikit%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>This weblog of mine presents the example code for using Django, newforms and MochiKit to do AJAX validation.<br />
Before we get going, some context: the Christian Camps in Wales web site has a forum system which allows people to create polls. I rewrote this recently to use newforms, mainly to keep up to date with Django, and also to try out some AJAX.<br />
<span id="more-85"></span><br />
I first had to write a Form subclass which encapsulates the logic for validating and processing the form. As it happens, the form is based on a model Poll, but it requires more fields. In particular, this single form is used to create all the PollOption objects that are attached to the Poll. This is handled by a simple textarea field, into which all the options are entered on separate lines. In Django, we implement this using a custom Field that uses the Textarea widget and adds the relevant validation.Unlike classic web pages, which must load in their entirety if content changes, AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes</p>
            <script type="text/javascript">  linkscolor = "000000";  highlightscolor = "888888";  backgroundcolor = "FFFFFF";  channel = "none";   </script><script type="text/javascript" src="http://www.addmarx.com/dynamicbookmark_compressed.php"></script><span><a onClick="clickDynamic1(this); return false;" onmouseover="clickDynamic2(this); return false;" href="http://www.addmarx.com/wordpress_plugin.php"><img alt="WordPress Plugin Share Bookmark Email"  style="padding:0px; margin:0px" src="http://ghosts-it.com/wp-content/plugins/addmarx/sharebookmarx.png" border="0"></a></span><span style="position:absolute; z-index:1000001; margin-top:24px; margin-left:-127px; visibility:hidden;"><iframe id="addmarx_empty" scrolling="no" frameborder="0"></iframe></span><p class="addmarx_spacer"></p><!-- Please place the above code into your site where you want to have a bookmark/share/publicize link. Please do not change any of the code aside from the link text or image, or else the code may not work properly.  -->                  <img src="http://ghosts-it.com/?ak_action=api_record_view&id=85&type=feed" alt="" />
	<h4>Related posts</h4>
	<ul class="st-related-posts">
	<li><a href="http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part4-getting-the-rules-right/" title="Using Prototip with AJAX (Part4)- Getting the Rules Right (10/12/2009)">Using Prototip with AJAX (Part4)- Getting the Rules Right</a> (1)</li>
	<li><a href="http://ghosts-it.com/web-design/ajax-tutorials/using-prototip-with-ajax-part-1/" title="Using Prototip with AJAX (Part 1) (10/10/2009)">Using Prototip with AJAX (Part 1)</a> (0)</li>
	<li><a href="http://ghosts-it.com/search-engine-optimization/seo-tips/tips-to-create-and-promote-link-worthy-content/" title="Tips to Create and Promote Link Worthy Content (02/07/2010)">Tips to Create and Promote Link Worthy Content</a> (1)</li>
	<li><a href="http://ghosts-it.com/web-design/wordpress-themes/simplified-full-for-wordpress/" title="Simplified [FULL] for Wordpress (11/14/2009)">Simplified [FULL] for Wordpress</a> (0)</li>
	<li><a href="http://ghosts-it.com/internet-marketing/seo-and-quality-content/" title="SEO and Quality Content (12/23/2009)">SEO and Quality Content</a> (1)</li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://ghosts-it.com/web-design/ajax-tutorials/ajax-validation-with-django-newforms-and-mochikit/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
