Ajax Updates |
- Sexy Combo – jQuery Plugin
- Mask Passwords Like the iPhone
- Lightweight Portal Framework using jQuery
- Horinaja for proptotype/scriptaculous or jQuery
- Easy Retweet Buttons
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. Please follow these instructions to install Sexy Combo: 1. Download and unpack the archive. <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” 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). 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. Sexy Combo has been tested and works on the following browsers: * Internet Explorer 6 (PC) Related Listings:
| |||||
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. 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!-)]/) && 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' }) }); Related Listings:
| |||||
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:
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. 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. Related Listings:
| |||||
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. 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: when you use mouse wheel , the scroll slide. scriptaculous : <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 : <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 <div id="demo" class="horinaja"> <ul> <li><!-- content 1 --></li> <li><!-- content 2 --></li> ... </ul> </div> Scriptaculous Related Listings:
| |||||
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 <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. Related Listings:
|
You are subscribed to email updates from Ajax Updates To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.