Sanket Patel http://sankethpatel.com/blog The freelance PHP,Codeigniter Developer Fri, 25 Nov 2011 14:38:31 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 A jQuery inline form validation http://sankethpatel.com/blog/?p=161 http://sankethpatel.com/blog/?p=161#comments Fri, 25 Nov 2011 14:38:31 +0000 Sanket Patel http://sankethpatel.com/blog/?p=161 When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.

Download the source code View demo

Validations range from email, phone, url to more complex calls such as ajax processing.
Bundled in several locales, the error prompts can be translated in the locale of your choice.

**Important**: v2 is a significant rewrite of the original 1.7 branch. Please read the documentation as the API has changed! Also the documentation is always more up to date on the github README

Legacy 1.7 documentation and download can be found under package when you hit download on github

Installation

1. Unpack the archive
2. Include the script jquery.validationEngine.closure.js in your page
3. Pick the locale of the choice, include it in your page: jquery.validationEngine-XX.js
4. **Read this manual** and understand the API

Running the Demos

Most demos are functional by opening their respective HTML file. However, the Ajax demos require the use of Java6 to launch a lightweight http server.

1. Run the script `runDemo.bat` (Windows) or `runDemo.sh` (Unix) from the folder
2. Open a browser pointing at [http://localhost:9173](http://localhost:9173)

References

First link jQuery to the page

  1.     <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js” type=”text/javascript”></script>

Attach *jquery.validationEngine* and its locale

  1.     <script src=”js/jquery.validationEngine-en.js” type=”text/javascript” charset=”utf-8″></script>
  2.     <script src=”js/jquery.validationEngine.js” type=”text/javascript” charset=”utf-8″></script>

Finally link the desired theme

  1.     <link rel=”stylesheet” href=”css/validationEngine.jquery.css” type=”text/css”/>

Field validations

Validations are defined using the field’s **class** attribute. Here are a few examples showing how it happens:

  1.     <input value=”someone@nowhere.com” class=”validate[required,custom[email]]” type=”text” name=”email” id=”email” />
  2.     <input value=”2010-12-01″ class=”validate[required,custom[date]]” type=”text” name=”date” id=”date” />
  3.     <input value=”too many spaces obviously” class=”validate[required,custom[onlyLetterNumber]]” type=”text” name=”special” id=”special” />

For more details about validators, please refer to the section below.

Instantiation

The validator is typically instantiated by using a call of the following form:

  1.     $(“#form.id”).validationEngine(action or options);

The method takes one or several optional parameters, either an action (and parameters) or a list of options to customize the behavior of the engine.

Here comes a glimpse: say you have a form is this kind

  1.     <form id=”formID” method=”post” action=”submit.action”>

  2.         <input value=”2010-12-01″ class=”validate[required,custom[date]]” type=”text” name=”date” id=”date” />
  3.     </form>

The following code would instance the validation engine:

  1.     <script>
  2.     $(document).ready(function(){

  3.         $(“#formID”).validationEngine(‘attach’);
  4.        });
  5.     </script>

Actions

init

Initializes the engine with default settings

  1.     $(“#formID1″).validationEngine({promptPosition : “centerRight”, scroll: false});
  2.     $(“#formID1″).validationEngine(‘init’, {promptPosition : “centerRight”, scroll: false});
  3. <pre>
  4.  
  5. <h3>attach</h3>
  6.  
  7. Attaches jQuery.validationEngine to form.submit and field.blur events.
  8. <pre lang=”html”>
  9.     $(“#formID1″).validationEngine(‘attach’);
  10. <pre/>
  11.  
  12. <h3>detach</h3>
  13.  
  14. Unregisters any bindings that may point to jQuery.validaitonEngine.
  15. <pre lang=”html”>

  16.     $(“#formID1″).validationEngine(‘detach’);

validate

Validates the form and displays prompts accordingly. Returns *true* if the form validates, *false* if it contains errors. Note that if you use an ajax form validator, the actual result will be delivered asynchronously to the function *options.onAjaxFormComplete*.

  1.     alert( $(“#formID1″).validationEngine(‘validate’) );

showPrompt (promptText, type, promptPosition, showArrow)

Displays a prompt on a given element. Note that the prompt can be displayed on any element an id.

The method takes four parameters:
1. the text of the prompt itself
2. a type which defines the visual look of the prompt: ‘pass’ (green), ‘load’ (black) anything else (red)

3. an optional position: either “topLeft”, “topRight”, “bottomLeft”, “centerRight”, “bottomRight”. Defaults to *”topRight”*
4. an optional boolean which tells if the prompt should display a directional arrow

  1.     <fieldset>
  2.        <legend id=”legendid”>Email</legend>

  3.        <a href=”#” onclick=”$(‘#legendid’).validationEngine(‘showPrompt’, ‘This a custom msg’, ‘load’)”>Show prompt</a>
  4.     </fieldset>

hide

Closes error prompts in the current form (in case you have more than one form on the page)

  1.     $(‘#formID1′).validationEngine(‘hide’)”>Hide prompts

hideAll

Closes **all** error prompts on the page.

  1.     $(‘#formID1′).validationEngine(‘hideAll’);

Options

Options are typically passed to the init action as a parameter.
$(“#formID1″).validationEngine({promptPosition : “centerRight”, scroll: false});

validationEventTrigger
Name of the event triggering field validation, defaults to *blur*.

scroll
Tells if we should scroll the page to the first error, defaults to *true*.

promptPosition

Where should the prompt show ? Possible values are “topLeft”, “topRight”, “bottomLeft”, “centerRight”, “bottomRight”. Defaults to *”topRight”*.

ajaxFormValidation
If set to true, turns Ajax form validation logic on. defaults to *false*.
form validation takes place when the validate() action is called or when the form is submitted.

onBeforeAjaxFormValidation(form, options)
When ajaxFormValidation is turned on, function called before the asynchronous AJAX form validation call. May return false to stop the Ajax form validation

onAjaxFormComplete: function(form, status, errors, options)
When ajaxFormValidation is turned on, function is used to asynchronously process the result of the validation.

isOverflown

Set to true when the form shows in a scrolling div, defaults to *false*.

overflownDIV
Selector used to pick the overflown container, defaults to *””*.

Validators

Validators are encoded in the field’s class attribute, as such

required

Speaks by itself, fails if the element has no value. this validator can apply to pretty much any kind of input field.

  1.     <input value=”" class=”validate[required]” type=”text” name=”email” id=”email” />
  2.     <input class=”validate[required]” type=”checkbox” id=”agree” name=”agree”/>
  1.     <select name=”sport” id=”sport” class=”validate[required]” id=”sport”>
  2.        <option value=”">Choose a sport</option>
  3.        <option value=”option1″>Tennis</option>
  4.        <option value=”option2″>Football</option>

  5.        <option value=”option3″>Golf</option>
  6.     </select>

custom[regex_name]

Validates the element’s value to a predefined list of regular expressions.

  1.  
  2. Please refer to the section Custom Regex for a list of available regular expressions.

  3.  
  4. <strong>function[methodName]</strong>
  5.  
  6. Validates a field using a third party function call. If a validation error occurs, the function must return an error message that will automatically show in the error prompt.

  7. <pre lang=”html”>
  8.     function checkHELLO(field, rules, i, options){
  9.       if (field.val() != “HELLO”) {

  10.          // this allows the use of i18 for the error msgs
  11.          return options.allrules.validate2fields.alertText;
  12.       }
  13.     }

The following declaration will do

  1. <input value=”" class=”validate[required,funcCall[checkHELLO]]” type=”text” id=”lastname” name=”lastname” />

ajax[selector]

Delegates the validation to a server URL using an asynchronous Ajax request. The selector is used to identify a block of properties in the translation file, take the following example.

  1.     <input value=”" class=”validate[required,custom[onlyLetterNumber],maxSize[20],ajax[ajaxUserCall]] text-input” type=”text” name=”user” id=”user” />
  1.  
  2.                  

  3.  
  4.     “ajaxUserCall”: {
  5.         “url”: “ajaxValidateFieldUser”,

  6.         “extraData”: “name=eric”,
  7.         “alertText”: “* This user is already taken”,
  8.         “alertTextOk”: “All good!”,
  9.         “alertTextLoad”: “* Validating, please wait”
  10.     },

* url – is the remote restful service to call
* extraData – optional parameters to sent
* alertText – error prompt message is validation fails
* alertTextOk – optional prompt is validation succeeds (shows green)
* alertTextLoad – message displayed while the validation is being performed

This validator is explained in further details in the Ajax section.

equals[field.id]
Check if the current field’s value equals the value of the specified field.

min[float]
Validates when the field’s value if less or equal to the given parameter.

max[float]
Validates when the field’s value if more or equal to the given parameter.

minSize[integer]
Validates if the element content size (in characters) is more or equal to the given *integer*. integer <= input.value.length

maxSize[integer]
Validates if the element content size (in characters) is less or equal to the given *integer*. input.value.length <= integer

past[NOW or a date]

Checks if the element’s value (which is implicitly a date) is earlier than the given *date*. When “NOW” is used as a parameter, the date will be calculate in the browser. Note that this may be different that the server date. Dates use the ISO format YYYY-MM-DD

  1.     <input value=”" class=”validate[required,custom[date],past[now]]” type=”text” id=”birthdate” name=”birthdate” />
  2.     <input value=”" class=”validate[required,custom[date],past[2010-01-01]]” type=”text” id=”appointment” name=”appointment” />

future[NOW or a date]

Checks if the element’s value (which is implicitly a date) is greater than the given *date*. When “NOW” is used as a parameter, the date will be calculate in the browser. Note that this may be different that the server date. Dates use the ISO format YYYY-MM-DD

  1.     <input value=”" class=”validate[required,custom[date],future[now]]” type=”text” id=”appointment” name=”appointment” /> // a date in 2009

  2.     <input value=”" class=”validate[required,custom[date],future[2009-01-01],past[2009-12-31]]” type=”text” id=”d1″ name=”d1″ />

minCheckbox[integer]

Validates when a minimum of *integer* checkboxes are selected.
The validator uses a special naming convention to identify the checkboxes part of the group.

The following example, enforces a minimum of two selected checkboxes

  1.     <input class=”validate[minCheckbox[2]]” type=”checkbox” name=”group1″ id=”maxcheck1″ value=”5″/>
  2.     <input class=”validate[minCheckbox[2]]” type=”checkbox” name=”group1″ id=”maxcheck2″ value=”3″/>
  3.     <input class=”validate[minCheckbox[2]]” type=”checkbox” name=”group1″ id=”maxcheck3″ value=”9″/>

Note how the input.name is identical across the fields.

maxCheckbox[integer]

Same as above but limits the maximum number of selected check boxes.

Selectors

We’ve introduced the notion of selectors without giving much details about them: A selector is a string which is used as a key to match properties in the translation files.

Take the following example:

  1.     “onlyNumber”: {
  2.         “regex”: /^[0-9\ ]+$/,
  3.         “alertText”: “* Numbers only”
  4.     },
  5.     “ajaxUserCall”: {

  6.         “url”: “ajaxValidateFieldUser”,
  7.         “extraData”: “name=eric”,
  8.         “alertText”: “* This user is already taken”,
  9.         “alertTextLoad”: “* Validating, please wait”
  10.     },
  11.     “validate2fields”: {
  12.         “alertText”: “* Please input HELLO”

  13.     }

onlyNumber, onlyLetter and validate2fields are all selectors. jQuery.validationEngine comes with a standard set but you are welcome to add you own to define AJAX backend services, error messages and/or new regular expressions.

Ajax

Ajax validation comes in two flavors:

1. Field Ajax validations, which takes place when the user inputs a value in a field and moves away.

2. Form Ajax validation, which takes place when the form is submitted or when the validate() action is called.

Both options are optional.

Protocol

The client sends the form fields and values as a GET request to the form.action url.

Client calls url?fieldId=id1&fieldValue=value1&…etc ==> Server (form.action)

Server responds with a list of arrays: [fieldid, status, errorMsg].

* fieldid is the name (id) of the field
* status is the result of the validation, true if it passes, false if it fails
* errorMsg is an error string (or a selector) to the prompt text

Client receives <== [["id1", boolean,"errorMsg"],["id2", false, "there is an error "],["id3", true, "this field is good"]] Server

Note that only errors (status=false) shall be returned from the server. However you may also decide to return an entry with a status=true in which case the errorMsg will show as a green prompt.

Callbacks

Since the form validation is asynchronously delegated to the form action, we provide two callback methods:

**onBeforeAjaxFormValidation(form, options)** is called before the ajax form validation call, it may return false to stop the request

**onAjaxFormComplete: function(form, status, json_response_from_server, options)** is called after the ajax form validation call

Custom Regex

jQuery.validationEngine comes with a lot of predefined expressions. Regex are specified as such:

  1. <input value=”" class=”validate[custom[email]]” type=”text” name=”email” id=”email” />

Note that the selector identifies a given regular expression in the translation file, but also its associated error prompt messages and optional green prompt message.

phone

a typical phone number with an optional country code and extension. Note that the validation is **relaxed**, please add extra validations for your specific country.

49-4312 / 777 777
+1 (305) 613-0958 x101
(305) 613 09 58 ext 101
3056130958
+33 1 47 37 62 24 extension 3

(016977) 1234
04312 – 777 777
91-12345-12345
+58 295416 7216

url
matched a url such as http://myserver.com, https://www.crionics.com or ftp://myserver.ws

email

easy, an email : username@hostname.com

date
an ISO date, YYYY-MM-DD

number
floating points with an optional sign. ie. -143.22 or .77 but also +234,23

integer
integers with an optional sign. ie. -635 +2201 738

ipv4

an IP address (v4) ie. 127.0.0.1

onlyNumberSp
Only numbers and spaces characters

onlyLetterSp
Only letters and space characters

onlyLetterNumber
Only letters and numbers, no space

Using the engine in a overflown div

The big change in this method is that normally the engine will append every error boxes to the body. In this case it will append every error boxes before the input validated. This add a bit of complexity, if you want the error box to behave correctly you need to wrap the input in a div being position relative, and exactly wrapping the input width and height. The easiest way to do that is by adding float:left, like in the example provided.

Customizations

What would be a good library without customization ?

Adding regular expressions

Adding new regular expressions is easy: open your translation file and add a new entry to the list

  1.     “onlyLetter”: {
  2.         “regex”: /^[a-zA-Z\ \']+$/,
  3.         “alertText”: “* Letters only”
  4.     },

* “onlyLetter” is a sample selector name
* “regex” is a javascript regular expression
* “alertText” is the message to display when the validation fails

You can now use the new regular expression as such

  1. <input type=”text” id=”myid” name=”myid” class=”validation[custom[onlyLetter]]”/>

Don’t forget to contribute!

Customizing the look and feel

Edit the file *validationEngine.jquery.css* and customize the stylesheet to your likings. it’s trivial if you know CSS.

Adding more locales

You can easy add a locale by taking *jquery.validationEngine-en.js* as an example.

Feel free to share the translation ;-)

Rules of thumb

* field.id are **unique** across the page
* for simplicity and consistency field.id and field.name should match (except with minCheckbox and maxCheckbox validators)
* spaces or special chars should be avoided in field.id or field.name
* use lower cases for input.type ie. *text, password, textarea, checkbox, radio*
* use the Ajax validator last ie. validate[custom[onlyLetter],length[0,100],**ajax[ajaxNameCall]**]
* use only one Ajax validator per field!

* JSON services should live on the same server (or you will get into browser security issues)
* in a perfect RESTful world, http **GET** is used to *READ* data, http **POST** is used to *WRITE* data: which translates into -> Ajax validations should use GET, the actual form post should use a POST request.

]]> http://sankethpatel.com/blog/?feed=rss2&p=161 0 CodeIgniter 2.0.0 Released http://sankethpatel.com/blog/?p=159 http://sankethpatel.com/blog/?p=159#comments Fri, 25 Nov 2011 14:32:33 +0000 Sanket Patel http://sankethpatel.com/blog/?p=159 Today EllisLab and the CodeIgniter Reactor Engineers are proud to announce the first official release of CodeIgniter 2.0.0, which is being released in two flavors:

CodeIgniter Core

Core is a slow-moving branch that will be used as the base for EllisLab commercial products such as ExpressionEngine and MojoMotor. It will continue at a similar pace that CodeIgniter has in the past and will be useful for large commercial applications that require the upmost in stability and backward/forward compatibility at a pace more typical of SLA backed Enterprise products.  Core is publicly available with tagged downloads at BitBucket.

CodeIgniter Reactor

Reactor is a community driven branch of CodeIgniter that will enable faster adoption of the best community submitted code to the framework. This means the community can create a fork of the project on BitBucket and contribute bug fixes, new features, documentation improvements, etc and have it reviewed by a code-review team called Reactor Engineers. These Engineers are primarily responsible for driving the development of the framework.

Changes and features made by EllisLab to Core will be merged into Reactor, and EllisLab will actively contribute to Reactor’s development.  Reactor is the recommended version of CodeIgniter for use in the majority of day to day work. When you see “CodeIgniter” by itself on this web site, it is referring to CodeIgniter Reactor.  The downloads, documentation, and forums all reflect this change.  Put simply, Reactor = CodeIgniter.

Some of the big changes to happen in CodeIgniter 2.0 since CodeIgniter 1.7.3 are:

     
  • Support for PHP 4 is gone, PHP 5.1 is now a requirement.

    •  

  • CSRF Protection built into the form helper

    •  

  • Drivers

    •  

  • Application Packages

    •  

  • Scaffolding, having been deprecated for a number of versions, has been removed.

    •  

  • Removed the deprecated Validation Class.

    •  

  • Plugins have been removed, in favor of Helpers.

    •  

  • Added routing overrides to the main index.php file, enabling the normal routing to be overridden on a per “index” file basis.

    •  

  • Added $route[‘404_override’] to allow 404 pages to be handled by controllers.

    •  

  • 50+ bugs fixed

Reactor contains all of these above and some nice changes of its own:

     
  • Full query-string support

    •  

  • Automatic base_url detecion if left blank

    •  

  • New Cache driver with file system, APC and memcache support

    •  

  • Command line compatibility for easy cron jobs

    •  

  • 20+ tweaks and improvements

Have a look at the change log for the full list of improvements and enhancements.

The Engineer team is also working on, or close to completing these features for a future Q1 release:

User Guide Note Contribution

Users will soon be able to contribute notes to each page in the user guide in the fashion that php.net currently allows. This will make CodeIgniter’s already-extensive documentation even more useful as time goes on. The new comment system is versioned, which will allow obsolete comments to be pruned from newer version without affecting older ones.

Authentication Driver

A common request for a long time (and with almost 800 votes on UserVoice) is an Authentication library. This is something we would like to do if the right solution and approach can be found, but it will take time and a lot of work to make a solution generic enough for everyone without being overly complex.

A More Object-like Model

A backward-compatible tweak currently in testing is a feature that allows active-record results to be returned as instances of the models they represent. This will allow for a more semantic approach to dealing with database rows.

CodeIgniter is now a much more community-oriented framework than it has been in the past. You can submit pull requests via BitBucket or Phil’s GitHub mirror. You’ll also see new releases far more frequently.

What are you waiting for?  Download it now and start cloning!

- The Reactor Team

Posted by Phil Sturgeon on January 28, 2011

]]> http://sankethpatel.com/blog/?feed=rss2&p=159 0 Great Web Hosting, No Bull. http://sankethpatel.com/blog/?p=154 http://sankethpatel.com/blog/?p=154#comments Sun, 31 Jul 2011 14:38:55 +0000 Sanket Patel http://sankethpatel.com/blog/?p=154 Click on the image below to get fatcow hosting

affiliate_link

  • Website Hosting … Our Bread Milk and Butter
    Our robust, all-in-one hosting solution includes everything you need to put your business or personal site online — and to manage it for years to come.
  • 100% Wind-Powered Web Hosting 
    Our offices and our data centers are all 100% powered by wind energy. You can be proud that the machines hosting your website and email are fully eco-friendly!
  • Point & Click Site Building Tools
    Create a professional-looking website with just a few clicks, using a variety of dynamic themes and templates. No programming or HTML experience needed!
  • Integrated Google Webmaster Tools
    Google Webmaster Tools provides you with detailed reports about your pages’ visibility on Google — completely integrated within your FatCow Plan!
  • Application Installation Wizards
    Our simple to use install wizards provides step-by-step instructions for adding a variety of applications to your site — photo galleries, blog software and more!
  • Online Store and Selling Tools
    We offer a variety of tools to help you sell online: shopping carts, catalogs with coupon and sales options, PayPal integration … you can even accept credit cards online.
  • Free Advertising!
    Get the word out about your great new site with credits for major search engines, including Google, Yahoo!, Bing, and for the popular social networking site, Facebook. We give you $150 in free advertising, right up front!
  • Friendly Moo Crew Support
    We’re here to help. If you have questions, our friendly Moo Crew is available 24×7 via phone, email and online chat. Plus, we back our promises with the HeiferCratic Oath.

affiliate_link

]]> http://sankethpatel.com/blog/?feed=rss2&p=154 0 30 Stylish jQuery Tooltip Plugins For Catchy Designs http://sankethpatel.com/blog/?p=146 http://sankethpatel.com/blog/?p=146#comments Wed, 02 Feb 2011 16:43:26 +0000 Sanket Patel http://sankethpatel.com/blog/?p=146 Tooltips on website are small things which can play a big role in website design. If a tooltip on your website is very well made and looks amazing then it can lift up visitors impression about your website. And that’s why here comes jQuery to help with its well made tooltips. And remember that all those small website design things make your website look better.

So this time I will show you my Top 30 of jQuery tooltip plugins. Enjoy!

1. Dynamic tooltip

Very cool tooltip! It’s very well made because it consists of cool transition effects and it also has a transparency and a drop shadow effect.

flowplayer-dynamic-tooltip-jquery-tooltip-plugin-for-web-design

2. Popup Bubble

Brilliant tooltip! It looks so simple but it has awesome transition effects. This tooltip could be very useful for clean and simple websites.

dvq-popup-bubble-jquery-tooltip-plugin-for-web-design

3. jQuery Horizontal Tooltips Menu Tutorials

Beautifully made tooltip! This tooltip never disappears but follows when you hover over other links. Such a simple looking tooltip but its animation is brilliant.

queness-horizontal-tooltips-menu-tutorials-jquery-tooltip-plugin-for-web-design

4. Prototip

A lot of various very good looking tooltips which look awesome and have beautiful effects. Brilliant peace of work!

nickstakenburg-prototip-jquery-tooltip-plugin-for-web-design

5. Coda Popup Bubble

Very nice tooltip with cool transition effect and it also has a drop shadow.

jqueryfordesigners-coda-popup-bubble-jquery-tooltip-plugin-for-web-design

6. Awesomeness

Cool tooltip with nice transition effect and cool transparent border around it.

nettuts-s3-cdn-plus-awesomeness-jquery-tooltip-plugin-for-web-design

7. TipTip

Beautifully made tooltip with fade in / out transition effects, transparency and drop shadow effect.

code-drewwilson-tiptip-jquery-tooltip-plugin-for-web-design

8. (mb)Tooltip

Beautifully made tooltip with nice transition for input fields.

pupunzi-mb-tooltip-jquery-tooltip-plugin-for-web-design

9. vTip

Simple but well made tooltip with a fade in transition effect. It has a cool looking border around it and when this tooltip appears, it also follows your mouse.

vertigo-project-vtip-jquery-tooltip-plugin-for-web-design

10. jGrowl

Cool tooltip which appears when you click on the link and then it sticks on the right-top corner of your window, and disappears after some time or when you close it manually by clicking on the close button. It also has fade in / out transition effects.

stanlemon-jgrowl-jquery-tooltip-plugin-for-web-design

11. jQuery Ajax Tooltip

Interesting tooltip which can handle image and text together like a mini page. It has a drop shadow effect.

rndnext-blogspot-jquery-ajax-tooltip-jquery-tooltip-plugin-for-web-design

12. Digg-style post sharing tool with jQuery

Cool digg-style post sharing tool. This tooltip could be very useful for social networking website.

queness-digg-style-post-sharing-tool-jquery-tooltip-plugin-for-web-design

13. Input Floating Hint Box

Interesting tooltip with rounded corners for input fields. Tooltip fades in when you click on the input field and fades out when you click somewhere else.

nicolae-namolovan-googlepages-input-hint-box-jquery-tooltip-plugin-for-web-design

14. Simpletip

Beautifully made tooltip with fade transitions. When you hover over a link, a tooltip fades in just above or below the link.

simpletip-craigsworks-jquery-tooltip-plugin-for-web-design

15. qTip

Very simple but good looking tooltip. This tooltip is available with rounded corners and also as a speech bubble tip.

craigsworks-qtip-jquery-tooltip-plugin-for-web-design

16. Orbital Tooltip

Interesting tooltip plugin where you can set manually where your tooltip will show up.

userfirst-orbital-jquery-tooltip-plugin-for-web-design

17. Inline HTML Tooltip

Cool tooltip with nice transition effects.

javascriptkit-inline-html-tooltip-jquery-tooltip-plugin-for-web-design

18. tipsy

Interesting good looking tooltip which appears above, below, on the right or left side of the link.

onehackoranother-tipsy-jquery-tooltip-plugin-for-web-design

19. Easiest jQuery Tooltip Ever

Simple tooltip but it could be useful to display an image when you hover over a link.

cssglobe-easiest-jquery-tooltip-ever-jquery-tooltip-plugin-for-web-design

20. BsTip

Various simple tooltips with fade in and fade out transition effects and border around them.

benchsketch-bstip-jquery-tooltip-plugin-for-web-design

21. EZPZ Tooltip

Very simple tooltip with border around it, which follows your mouse.

theezpzway-ezpz-jquery-tooltip-plugin-for-web-design

22. BeautyTips

Nice balloon style tooltip with transparency effect. There are available various tooltip styles, even interesting tooltips with cool animation, so you can choose one that fits best for your needs.

lullabot-beautytips-jquery-tooltip-plugin-for-web-design

23. Tooltip

Various tooltip plugins for your website. Here you can find a simple tooltip with a nice fade transition and also you can find a good looking bubble style tooltip.

bassistance-tooltip-jquery-tooltip-plugin-for-web-design

24. clueTip

Simple tooltip which shows up when you hover over a link and stays until you close it.

plugins-learning-jquery-cluetip-jquery-tooltip-plugin-for-web-design

25. Creating A Simple Tooltip Using jQuery and CSS

Few simple but different tooltips.

demos-blufusion-jquery-tooltips-jquery-tooltip-plugin-for-web-design

26. BetterTip

Tooltip which appears on the right side of the link.

edgarverle-bettertip-jquery-tooltip-plugin-for-web-design

27. jTip

This is simple but useful tooltip for login form.

codylindley-jtip-jquery-tooltip-plugin-for-web-design

28. jqTooltip

Simple tooltip with ajax loaded content. It has fade in and fade out transition effects.

hernan-amiune-jqtooltip-jquery-tooltip-plugin-for-web-design

29. Pop!

Simple tooltip which shows up when you click on the arrow button and disappears when you click somewhere else.

pop-seaofclouds-pop-jquery-tooltip-plugin-for-web-design

30. Create a Simple CSS + Javascript Tooltip with jQuery

Simple tooltip with rounded corners. It follows your mouse movements.

queness-simple-css-javascript-tooltip-jquery-tooltip-plugin-for-web-design

]]> http://sankethpatel.com/blog/?feed=rss2&p=146 0 Don’t put your cell number or address on Facebook http://sankethpatel.com/blog/?p=142 http://sankethpatel.com/blog/?p=142#comments Wed, 26 Jan 2011 18:58:41 +0000 Sanket Patel http://sankethpatel.com/blog/?p=142 A security expert has warned that users should remove their home addresses and phone numbers from their Facebook accounts.

Graham Cluley said the website now gives third parties access to that information.

The website said in a blog post at the weekend that it would give developers of applications access to the contact information of users who install their apps.

“These permissions must be explicitly granted to your application by the user via our standard permissions dialogs. Please note that these permissions only provide access to a user’s address and mobile phone number, not their friend’s addresses or mobile phone numbers,” the Sydney Morning Herald quoted Facebook’s Jeff Bowen as saying.

However, Sophos security expert Cluley, has raised doubts over the move.

“You have to ask yourself – is Facebook putting the safety of its 500+ million users as a top priority with this move?” he said.

“It won’t take long for scammers to take advantage of this new facility, to use for their own criminal ends.”

Cluley advised that users should take personal info such as home addresses and mobile numbers off their pages.

“You can imagine, for instance, that bad guys could set up a rogue app that collects mobile phone numbers and then uses that information for the purposes of SMS spamming or sells on the data to cold-calling companies,” he said.

]]> http://sankethpatel.com/blog/?feed=rss2&p=142 0 40+ CodeIgniter Framework Tutorials for Developing PHP Application faster. http://sankethpatel.com/blog/?p=139 http://sankethpatel.com/blog/?p=139#comments Tue, 11 Jan 2011 16:30:27 +0000 Sanket Patel http://sankethpatel.com/blog/?p=139 Here is the list of 40+ Excellent And Useful CodeIgniter Application Development Framework Tutorials & Resources that includes some useful tutorials and few great resources that has been developed for programer and designers. We are hoping that you will learn further on CodeIgniter Application Development Framework after reading out this post.

Do you want to be the first one to know the latest happenings at 2ExpertsDesign.com just subscribe to our rss feed and you can follow us on twitter as well.

1. CodeIgniter Tutorial: [Creating Accounting Application] Part 1 Setting Up the Environment

2. CodeIgniter: Creating First Application at CodeIgniter


Tutorial to Creating Application at CodeIgniter

3. Building a basic PHP E-Commerce Application using CodeIgniter Framework – Part 1

tutorial to building a basic e-commerce application with codeigniter framework

4. CodeIgniter Advent: Day 1

Codeigniter secure application starting point

5. How to make CodeIgniter file upload class accept all extensions?

CodeIgniter file upload solution

6. An Introduction to CodeIgniter

An Introduction to CodeIgniter

7. 9 Ways to Integrate Ajax with CodeIgniter

Integrate Ajax with CodeIgniter

8. Debugging a CodeIgniter application with FirePHP

Debugging a CodeIgniter Application with FirePHP

9. Getting Started with CodeIgniter

Getting Started with CodeIgniter

10. CodeIgniter From Scratch: Day 1

Learn CodeIgniter from Scratch Day1

11. Building An Application Using CodIgniter Part 1/3

12. FreakAuth_light USERGUIDE

13. Displaying User Comments in a Code Igniter Blog Application

14. Building a Complete CodeIgniter Application: Part 1

15. The Best Way to Make CodeIgniter Website Multi-Lang

16. Codeigniter for Joomla

17. A Guide to Using Template

18. CodeIgniter and jQuery – Real Live Search with Pagination

19. Optimizing and Scaling your CodeIgniter Application – with Benchmarks!

20. Smarty as a template engine in Code Igniter

21. Speed Up your Web Application by CodeIgniter

22. Archive for the ‘CodeIgniter’ Category

23. Building with CodeIgniter: Beginning your Tumblelog

24. Template Library for Ext.CodeIgniter

25. Codeigniter: Setting up multiple sites on one install

26. How to use CodeIgniter’s OpenID library to integrate OpenID in your existing user system

27. CodeIgniter for Rapid PHP Application Development Table of Contents

28. Review: CodeIgniter for Rapid PHP Application Development

29. Book Review: Code Igniter for Rapid PHP Application Development

30. Amazon Book Review: CodeIgniter for Rapid PHP Application Development

31. Code Igniter ExtJs Integration – 3

32. Implementing the Zend Framework with CodeIgniter

33. PHP Application Framework Battle Royale: CodeIgniter vs. Symfony

34. A Quick Code Igniter and JQuery Ajax Tutorial

35. Build Your Portfolio With CodeIgniter

36. How to make a link using Codeigniter

37. Dynamically Dropdown Value On Code Igniter

38. CodeIgniter Resources Useful

39. Rapid Application Development with CodeIgniter

40. SlideShow: CodeIgniter PHP MVC Framework

41. Everything You Need to Get Started With CodeIgniter

42. Run CodeIgniter from the Command Line / SSH

43. PHP Tutorials : Building a basic PHP E-Commerce Application using CodeIgniter Framework – Part 1

If you enjoyed this post, please consider to subscribe to the feed and get future articles delivered to your feed reader.

]]> http://sankethpatel.com/blog/?feed=rss2&p=139 0 Failed to execute child process “testparm” Did u get this error whie sharing folders in ubuntu 10.10? http://sankethpatel.com/blog/?p=128 http://sankethpatel.com/blog/?p=128#comments Tue, 04 Jan 2011 10:17:04 +0000 Sanket Patel http://sankethpatel.com/blog/?p=128 I also ran into a problem trying to create shared directories using samba. The system automatically installs the samba packages just fine, but when I try to actually make a share, it fails with the error “Failed to execute child process “testparm” (No such file or directory).” If this problem affects you, too, hop back into your terminal and type:

sudo ln -s /usr/bin/testparm.samba3 /usr/bin/testparm ; sudo ln -s /usr/bin/net.samba3 /usr/bin/net

This should get you all fixed up. You don’t even need to reboot again.

]]> http://sankethpatel.com/blog/?feed=rss2&p=128 0 Linux version of XAMPP (LAMP) http://sankethpatel.com/blog/?p=117 http://sankethpatel.com/blog/?p=117#comments Tue, 04 Jan 2011 06:45:14 +0000 Sanket Patel http://sankethpatel.com/blog/?p=117 Step 1: Download

Simply click on one of the links below. It’s a good idea to get the latest version.

A complete list of downloads (older versions) is available at SourceForge.

Step 2: Installation

After downloading simply type in the following commands:

  1. Go to a Linux shell and login as the system administrator root:

    su

  2. Extract the downloaded archive file to /opt:

    tar xvfz xampp-linux-1.7.3a.tar.gz -C /opt

    Warning: Please use only this command to install XAMPP. DON’T use any Microsoft Windows tools to extract the archive, it won’t work.

    Warning 2: already installed XAMPP versions get overwritten by this command.

That’s all. XAMPP is now installed below the
/opt/lampp directory.

Step 3: Start

To start XAMPP simply call this command:

/opt/lampp/lampp start

You should now see something like this on your screen:


Starting XAMPP 1.7.3a...

LAMPP: Starting Apache...
LAMPP: Starting MySQL...
LAMPP started.

Ready. Apache and MySQL are running.

Step 4: Stop

To stop XAMPP simply call this command:

/opt/lampp/lampp stop

You should now see something like this on your screen:


Stoping XAMPP 1.7.3a...

LAMPP: Stoping Apache...
LAMPP: Stoping MySQL...
LAMPP stopped.

Apache and MySQL are stopped.

Step 5: Test

OK, that was easy but how can you check that everything really works? Just type in the following URL at your favourite web browser:

http://localhost

Now you should see the start page of XAMPP containing some links to check
the status of the installed software and some small programming examples.

]]> http://sankethpatel.com/blog/?feed=rss2&p=117 0 CodeIgniter 1.7.3 Released http://sankethpatel.com/blog/?p=115 http://sankethpatel.com/blog/?p=115#comments Thu, 30 Dec 2010 05:55:56 +0000 Sanket Patel http://sankethpatel.com/blog/?p=115 Version 1.7.3 is a security maintenance release, including a previously patched file Upload class, and a new security fix to prevent possible directory traversal in certain circumstances (back ported from a fix made to CodeIgniter 2.0 at BitBucket).  There are no other significant changes.

This is a recommended update for all sites running CodeIgniter 1.x.  Download and update at your convenience.

Originally Posted by Derek Jones on December 06, 2010

]]> http://sankethpatel.com/blog/?feed=rss2&p=115 0 How To Upgrade Ubuntu 10.04 (Lucid Lynx) To 10.10 (Maverick Meerkat) (Desktop & Server) http://sankethpatel.com/blog/?p=112 http://sankethpatel.com/blog/?p=112#comments Tue, 28 Dec 2010 10:26:33 +0000 Sanket Patel http://sankethpatel.com/blog/?p=112 Network Upgrade for Ubuntu Desktops (Recommended)

You can easily upgrade over the network with the following procedure.

  1. Open the Software Sources application from the System -> Administration menu

  2. Select the sub menu Updates from the Software Sources application
  3. Change the Release Upgrade drop down to “Normal Releases” and close the application

  4. Press Alt-F2 and type update-manager 

  5. Click the Check button to check for new updates.

  6. If there are any updates to install, use the Install Updates button to install them, and press Check again after that is complete.

  7. A message will appear informing you of the availability of the new release.

  8. Click Upgrade.

  9. Follow the on-screen instructions.
    10. ]]> http://sankethpatel.com/blog/?feed=rss2&p=112 0