Ajax Updates

Ajax Updates


Sexy Combo – jQuery Plugin

Posted: 08 Oct 2009 09:22 AM PDT

Sexy Combo is a jQuery plugin that allows you to turn default browser selectboxes into much more attractive and usable comboboxes. The user can choose whether to select option from the dropdown list or just type it. This widget reaches its maximum efficiency when we have selectboxes with lots of options (e.g. countries or states), so it would be difficult for users to find option in the huge list.

The plugin is usable not only for end users, but also for developers. Sexy Combo has a lot of configuration options so you can modify its behaviour and appearance. FRom this version the core CSS file is separated from the CSS that provides combo’s appearance, and now you are able to easily create new skins for the plugin.

Installation

Please follow these instructions to install Sexy Combo:

1. Download and unpack the archive.
2. Include jQuery and plugin files to your web page:

 	<script type="text/javascript" src="path_to_plugin/lib/jquery-1.3.2.js"></script>       	<script type="text/javascript" src="path_to_plugin/lib/jquery.sexy-combo-2.0.js"></script>

3. Include core and skin CSS files to your page:

    	    <link rel="stylesheet" type="text/css" href="path_to_plugin/lib/sexy-combo.css" />       	    <link rel="stylesheet" type="text/css" href="path_to_plugin/skins/skin_name/skin_name.css" />

4. Done! Now make your selectboxes look and behave sexy!

      	$("select").sexyCombo(); 

Usage and configuration options

Sexy Combo has a number of configuration options that are passed to the plugin in the form of JavaScript object, e.g. $(”select”).sexyCombo({triggerSelected: true});. The full list of options is:

* (string) skin – name of the skin that will be applied to the combobox. Default is “sexy”
* (string) suffix – this option allows you to configure text input’s name. The suffix will be appended to the name of the selectbox. Default is “__sexyCombo”.
* (string) hiddenSuffix – the same as previous, but for the hidden input. Default is “__sexyComboHidden”.
* (string) initialHiddenValue – the initial value of the hidden input of the combo. Default is “” (empty string).
* (string) emptyText – if provided, will be shown when an empty text input has no focus.
* (bool) autoFill – if true, user’s input will be autofilled with the value of the first item of the dropdown list. Default is false.
* (bool) triggerSelected – if true, the selected option of the selectbox will become the initial value of the combo. Default is false.
* (function) filterFn – a filter function that determines which options should be in the dropdown list. This function takes two parameters – current text input value and dropdown list item’s value, and should return true if item should be in the dropdown list, otherwise false. Default is null.
* (bool) dropUp – if true, the dropdown list will appear above text input. Default is false.
* (function) initCallback – function that is called at the end of constrictor. Default is null.
* (function) initEventsCallback – function that is called at the end of initEvents method. Default is null.
* (function) showListCallback – function that is called when the dropdown list appears. Default is null.
* (function) hideListCallback – function that is called when the dropdown list disappears. Default is null.
* (function) changeCallback – function that is called when both text and hidden inputs values are changed. Default is null.
* (function) textChangeCallback – function that is called when text input’s value is changed. Default is null.

Note that all callback functions are called in the scope of sexyCombo instance, so you have access to all of its methids / properties.

It is possible to create multiple comboboxes from which users can choose more than one option. All you need is to set “multiple” attribute of your selectbox to true, or set multiple config option to true if you create combo without selectbox. Currently this option does not work with autoFill config option. It will be fixed in one of the futute releases.

You are also able to create combos without using existing selectboxes. If you want to do this, you should use static method of jQuery.sexyCombo object named create, for example:

       $.sexyCombo.create({           id : "id", 	  name: "name", 	  container: "#container", 	  data: [ 	      {value: "1", text: "First option", selected: true}, 	      {value: "2", text: "Second option"}, 	      {value: "3", text: "Third option"} 	  ]       });

Below is the list of configuration options for static creating of comboboxes. You can pass them to the create method together with options we have discussed above.

* (string) name – the name of the selectbox that will be created. Optional. Default is “” (empty string).
* (string) id – the id of the selectbox that will be created. Optional. Default is “” (empty string)
* (mixed) container – jQuery selector, jQuery object or DOM element that will hold the widget. Optional. Default is $(document).
* (array) data – data that contains information about combo’s options. This is an array of objects, which should have three properties – value(value of the option) and text(text that is displayed for this option) and (optionally) selected (if set to true, option’s “selected” attribute will be set to true. Makes sence only with triggerSelected config option set to true). This option is required.
* (string) url – the URL of JSON object that contains data for combo’s options. Object’s format is the same as for data option. If specified, data option will be ignored.
* (object) ajaxData – data that will be passed to AJAX request.
* (bool) multiple – if true, the combobox will be multiple. Default is false.

Appearance customization

In this version I have separated core CSS and presentational CSS, so now it’s possible to create new skins for Sexy Combo. The download package contains one example skin. Feel free to create your own based on it.
Browser compatibility

Sexy Combo has been tested and works on the following browsers:

* Internet Explorer 6 (PC)
* Internet Explorer 7 (PC)
* Firefox 1.5 (Linux)
* Firefox 2 (Linux)
* Firefox 3 (PC)
* Opera 9 (PC)





Demo: http://phone.witamean.net/sexy-combo/examples/index.html
Download: http://sexy-combo.googlecode.com/files/sexy-combo-2.1.2.zip
Source: http://phone.witamean.net/sexy-combo/

Related Listings:

  1. Resizable Combo Box – ExtJS Data Sources The combo box can use any type of...
  2. jQuery Select Box This is an unobtrusive jQuery plugin that allows you to...
  3. jQuery Autocomplete Mod This is a modification of Dylan Verheul’s jQuery Autcomplete plug-in....

Mask Passwords Like the iPhone

Posted: 08 Oct 2009 08:58 AM PDT

Passwords are all about security – In some cases passwords are simply about the reassuring appearance of security. A site that has password protection is, to many users, secure – whether the site is really secure or not. When you eliminate masking you might be saving your users a few seconds irritation, but you’ll be damaging your own credibility.

Nielsen’s research was largely based on mobile devices, but mobile devices have one advantage that desktops do not have – ease of obfuscation. If a phone didn’t mask passwords it wouldn’t be the end of the world, because users can much more easily conceal their actions on a tiny device than a full size machine.

Many smartphones, including the iPhone, solved (part) of this issue by showing the most recent character of a password field with a delay of a second or two. You can see what you just typed, but not the entire password. This provides Nielsen’s much vaunted feedback and status, while still retaining the majority of the field’s appearance of security. Just one problem: browsers don’t do what mobile devices do. So, we’ll make them do it with some fancy javascript and a little behind the scenes trickery.

How to Implement It on Your Site

Here’s how we’ll help your visitors keep their security while improving password masking—with just some javascript and CSS magic.

1. Put a standard text input where the password input would be and label it ‘password’ for the user.
2. Create a real, hidden password field which the javascript will copy the password into with a type and ID of password.
3. When the user submits the form, send the username and real password fields, while discarding the fake one they typed into. (Since the field they typed into has been converted to bullet characters we can’t submit that field).

The Code

This version of the solution is written as a Prototype behaviour and requires the lowpro behaviours plugin, but the code isn’t terribly complex and could be adapted to most any system. Here’s the behaviour itself:

  // Behavior Class for Awesome Passwords var AwesomePassword = Behavior.create({          password_string : null,         password_field_id  : null,         password_length : null,          initialize : function (config) {             this.password_string = "";             this.password_length = 0;             this.password_field_id = config['password_field_id'];             this.password_field = $(this.password_field_id);             this.hidden_password_field = $(config['hidden_password']);         },          onblur : function(e) {             this.password_string = "";             this.password_length = "";         },          onkeyup : function(e) {             if(e.which == 8 ) {                 this.password_string = this.password_string.substr(0,this.password_field.value.length);             }         },          onkeypress : function(e) {             var source = Event.element(e);             if ( source.id == this.password_field_id) this._awesomeify_password(source,e);         },         _awesomeify_password : function(source,e) {             // Mask Field With Bullets             var bullet_string = "";              // Loop through and add bullets             for( i = 0; i < this.password_field.value.length; i++ ) {                 bullet_string += String.fromCharCode(8226);             }              // Fill bullets             this.password_field.value = bullet_string;              // If valid Password Character Update Password String             if( String.fromCharCode(e.which).match(/[a-zA-Z0-9!-)]/) &amp;&amp; String.fromCharCode(e.which).match(/[a-zA-Z0-9!-)]/).first ) {                 this.password_string += String.fromCharCode(e.which);                  var password_field = this.password_field;                 // Wait for user to stop typeing                 setTimeout(function() {                     setTimeout(function() {                         password_field.value = password_field.value.replace(/.$/,String.fromCharCode(8226));                     }, 500);                 },1000);             }         },         onsubmit : function(e) {             this.hidden_password_field.value = this.password_string;             return true;         }     });  

With that in place you simply have to attach the behaviour when the page loads:

 // Attaches the behavior to the form, password_field_id is the id of the visible form field, hidden_password is the id of the hidden field containing the real password the user types in  , these behaviors get applied onload Event.addBehavior({     'form.awesome' : AwesomePassword({ password_field_id : 'password', hidden_password : 'realPassword' }) });   






Demo: http://www.zurb.com/blog_uploads/0000/0473/iPhonePasswords.html
Download: http://github.com/danwrong/low-pro/raw/2f47a651ab1143b2e067de7d2381f615c389a14e/dist/lowpro.js
Source: http://www.zurb.com/article/279/how-to-mask-passwords-like-the-iphone

Related Listings:

  1. Ajax Login System Demo A very fast login system. Ajax Login system script does...
  2. AJAX Login System Script Ajax Login Script is an example of a login system...
  3. iPhone Interface in Javascript This script can generate and embed Iphone like interface on...

Lightweight Portal Framework using jQuery

Posted: 08 Oct 2009 08:33 AM PDT

Netvibes enables individuals to assemble their favorite widgets on the web all in one place, while I’d like to bring that convenience to web developers to handle content integration tasks in a rapid and convenient manner.

Please share some of my design philosophy:

  • Less is more – instead of building a full-blown framework with tons of features, only minimum necessary ones are provided for easier jump start.
  • Separation of Content, Appearance and Behavior – No action and styling code is used in HTML. By following simple conventions, a plain HTML section can be automatically turned into a vivid control, e.g., Tabs, Accordion …
  • Convention over configuration – By following simple naming conventions, new content can be loaded without complex and error-prone configuration or settings.
  • It is easier to make simple things better than making better things simple – Yes, lots “traditional” portal features are omitted – purposely. But enhancements as well as customization can be applied at ease.

The target of this framework is to provide a handy tool for easy content integration. Yet I believe it is powerful enough to serve as cornerstone for more advanced portals.

Major Features:

* Content Integration – Lots stuff gets aggregated fast and easy.
* Sound User Experiences – Slick UI, responsive interaction …
* Basic Module Themes – Colors can be assigned to modules.

And core JS weighs only 5K minimized

Multiplex Developer Support:

* Content Integrator – Basic HTML skills and a little knowledge about JSON shall be enough to accomplish basic content integration tasks fast.
* Interface Dresser – Advanced CSS knowledge and skills shall be mandatory to customize and improve the look and feel of this framework, i.e., the modules and the overall layout
* Framework Extender – [jQuery] knowledge and JavaScript skills are required to further extend and customize this framework to address your advanced requirements.





Demo: http://www.trilancer.com/jpolite2/
Download: http://jpolite.googlecode.com/files/jpolite-2009-0224.zip
Source: http://www.trilancer.com/jpolite/#t1

Related Listings:

  1. 10 Interesting Lightweight jQuery Plugins In this post I want to suggest you ten interesting...
  2. Simplicity PHP – Ajax Web2.0 Framework Simplicity is a lightweight modular Web development framework. It is...
  3. Zephyr – Ajax PHP Framework zephyr is an ajax based framework for php5 developers. you...

Horinaja for proptotype/scriptaculous or jQuery

Posted: 08 Oct 2009 08:05 AM PDT

Horinaja is a slide-show ready-to-use for scriptaculous/prototype or jQuery.
you have an example on top

Horinaja is innovant because he use your mouse wheel for a best navigation.

when the user are outside, your page scroll too, horinaja scroll when user are hover this :)

How it Works:
Horinaja is a slider.
if you want, horinaja create a pagination.

when you use mouse wheel , the scroll slide.

scriptaculous :
You needed prototypejs and scriptaculous.
For an easy integration of this script, i advise you to read my article : load ajax with google.
Now write this code :

<script src='path_to_your_js/class.horinaja.scriptaculous.js' type='text/javascript'></script> <link rel="stylesheet" href="path_to_your_css/horinaja.css" type="text/css" media="screen" />  

jQuery :
You needed jQuery.
! : for this plug-in to work:
timers (include)
mousewheel
Now write this code :

<script src='jquery.mousewheel.js' type="text/javascript"></script> <script src='path_to_your_js/class.horinaja.jquery.js' type='text/javascript'></script> <link rel="stylesheet" href="path_to_your_css/horinaja.css" type="text/css" media="screen" />  

Integration
Horinaja needed a class “horinaja” associate to a div, and a ul li liste :

 <div id="demo" class="horinaja"> <ul> <li><!-- content 1 --></li> <li><!-- content 2 --></li> ... </ul> </div>

Scriptaculous
Init Horinaja :

 






Demo: http://www.davidmassiani.com/horinaja/
Download: http://www.davidmassiani.com/horinaja/forceDownload.php?framework=scriptaculous
or
http://www.davidmassiani.com/horinaja/forceDownload.php?framework=jquery
Source: http://www.davidmassiani.com/horinaja/

Related Listings:

  1. Change Opacity using Scriptaculous Scriptaculous is a great framework to implement superb animated effects...
  2. JQuery Mousewheel Plugin prototype.js mousewheel Event.wheel(e) extension Scroll mouse wheel to see delta...
  3. Scriptaculous Effect Script Script.aculo.us is a set of JavaScript libraries to enhance the...

Easy Retweet Buttons

Posted: 08 Oct 2009 07:45 AM PDT

Ever since I saw the Bit.ly JavaScript API I’ve been wanting to build a simple script for tracking the number of people visiting a blog post from Twitter. This past weekend I built a little script for doing just that – and in a completely unobtrusive manner.

The script itself is completely standalone (no dependencies) and can be included in any page relatively painlessly. Additionally, since it’s just HTML, CSS, and JavaScript, it’s completely themeable and customizable to the style of your site.

Usage Sample Codes:

 <a class="retweet" href="http://ejohn.org/">John Resig's Blog</a>  

Tweet Text: “John Resig’s Blog http://bit.ly/vqYAg”

 <a class="retweet" href="http://jquery.com/">jQuery JavaScript Library</a>  

Tweet Text: “jQuery JavaScript Library http://bit.ly/FGybD”

 <a class="retweet" href="http://google.com/" title="Google Search Engine">Google</a>  

Tweet Text: “Google Search Engine http://bit.ly/ScCbV”

 <a class="retweet self" href=""></a>  

Tweet Text: “John Resig – Easy Retweet Button http://bit.ly/1cliT”

Vertical Style
Sample Code

 <a class="retweet vert" href="http://ejohn.org/">John Resig's Blog</a>
 <a class="retweet vert" href="http://jquery.com/">jQuery JavaScript Library</a>

Tweet Text: “jQuery JavaScript Library

 <a class="retweet vert" href="http://google.com/" title="Google Search Engine">Google</a>

Tweet Text: “Google Search Engine http://bit.ly/ScCbV”

 <a class="retweet vert self" href=""></a>

Tweet Text: “John Resig – Easy Retweet Button http://bit.ly/1cliT”

How to Use / Installation

Getting the Easy Retweet Button running on your site is painfully easy (ha!).

Step 1: Include the retweet.js file in the of your web site.

 <script src="http://ejohn.org/files/retweet.js"></script>   

(Note: You should place and use a copy from your own site, in case mine ever goes down.)

(Note 2: You DO NOT need a bit.ly account in order to use this script. A working one is provided for you by default.)

Step 2: Add a class of ‘retweet’ to any anchor that you wish to turn into a Retweet button – or add a link with classes of ‘retweet’ and ’self’ to add a retweet button for the current page.

Retweet link for the current page: (See example at the end of this blog post.)

 <a class="retweet self"></a>  

Retweet link for other page:

 <a class="retweet" href="http://ejohn.org/">John Resig's Blog</a>   

Wordpress: If you’re using Wordpress you could sculpt a custom button like so, placed in your single.php theme file (although, the above link types should be more than sufficient for most cases):

 <a href="<?php the_permalink() ?>" class="retweet">< ?php the_title(); ?></a>  

The script has been tested in Internet Explorer 6-8, Opera 9-10, Safari 3.2-4, Chrome 2, and Firefox 3-3.5. Please write a comment if you encounter any problems.





Demo: http://ejohn.org/blog/retweet/
Download: http://ejohn.org/files/retweet.js
Source: http://ejohn.org/blog/retweet/

Related Listings:

  1. jQuery Live Search Plugin Updated A Quicksilver-style Live Search to jQuery. Taking a look at...
  2. ModalPopup with Buttons using ASP.Net The wrapped the MoalPopupExtender in an UpdatePanel and explicitly called...
  3. New Styling buttons with CSS Particle Tree recently posted an article describing a technique for...

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.