Posts

Showing posts from July, 2010

translate website in multi languages

The web is a global community with rapidly growing international markets. Translation allows sites to reach broader audiences, and tools like  Google Translate  and  Yahoo’s Babelfish  have made the web more accessible. While accessing these translation tools is often too cumbersome for your site’s visitors, leveraging these tools is relatively simple for developers. I wrote this script because I’ve been wanting to offer translation on my blog, and unfortunately all the scripts I looked at online had really clunky front ends. So I decided to write Translate-It: a really clean script that leverages  Google’s translation tool . Why you should use Translate-It Translate-It is a nice script for several reasons. First, it’s incredibly easy to implement, with no CSS or images to upload. The script builds all the flags and links dynamically, so the only HTML markup you include is  <div id="translateFlags"></div > . Besides keeping the document clean, t...

stylish TextboxList from Mootool

Here you can see it. Enter tags (with commas) Type the tag (one or more words) and press comma (,). Use left/right arrows, backspace, delete to navigate The HTML Enter tags (with commas) <div style="width: 500px;"> <input class="input" id="myListBox1" name="myListBox1" type="text" value="" /></div> <div class="note"> Type the tag (one or more words) and press comma (,). Use left/right arrows, backspace, delete to navigate</div> The CSS <style type="text/css"> .textboxlist { font: 11px "Lucida Grande", Verdana; cursor: text; } .textboxlist-bits { zoom: 1; overflow: hidden; margin: 0; padding: 3px 4px 0; border: 1px solid #999; *padding-bottom: 3px; } .textboxlist-bit { list-style-type: none; float: left; display: block; padding: 0; margin: 0 5px 3px 0; cursor: default; } .textboxlist-bit-editable { border: 1px solid #fff; } .textboxlis...

Sexy Link Transformations with CSS

I was recently visiting MooTools Developer Christoph Pojer’s website and noticed a sexy link hover effect: when you hover the link, the the link animates and tilts to the left or the right. To enhance the effect, the background color of the link is changed. I scoped out his JavaScript file to see how he created the effect but there were no link effects in it — the effects were being created with just CSS! .sexy-links a { display: inline-block; padding: 4px; outline: 0; color: #3a599d; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } .sexy-links a:hover { background: #3a59...

Why I moved from Prototype to jQuery

jQuery  is a JavaScript library which follows unobtrusive paradigm for application development using JavaScript. jQuery inherently supports Behavior driven development and is based on traversing HTML documents using CSS Selectors. On the other hand,  Prototype  is a JavaScript library for Class driven development which makes life easier working with JavaScript. Prototype library has a good support in Ruby on Rails via helper functions. I have always used Prototype library for most of my projects until I was introduced to jQuery three months back ... and it enchanted me. The reasons Behavior driven development (BDD) Using jQuery, behavior(s) of HTML elements is defined separately from HTML code similar to defining style of an element using CSS. Lets look at a  simple example  to display alert box on click of an element 1 2 3 4 5 6 $(element).click( function (){ alert ( " warning " ); //fill stub for confirming this action from user }); A comple...

SEO Tips for Small Business Owners

Search engines do not discriminate between small and big businesses. This makes Search Engine marketing a level playing ground, where size does matter – Size of your marketing acumen!! In your pursuit of gaining supremacy in the realm of Search engine marketing, Search Engine Optimization (SEO) will act as a potent tool. Not only does SEO help in reaching to a wider audience, it is also the most economical Online marketing tool available, a tool that will help small website owners take on the Goliaths in their business domain. Whether you want to do the SEO of your site yourself or hire an SEO firm, understanding the SEO strategies is very essential. In this edition of our newsletter, we will discuss 5 essential points that every small website owner must remember while carrying out SEO of their websites. Dealing with the technicalities Site map : Making a site map for your website is very necessary as far as SEO is concerned. It shows the position of all the relevant...