Friday, August 1, 2008
Password Strength meter
the password strength meters available on the web. Using prototype/scriptaculous, I stole some code from ZeBadger (thanks!) and created a new meter which dynamically changes while typing your password.
Click here to see the demo
If you want to use this script, feel free to download the source and use it on your website.
Click here to see the demo
If you want to use this script, feel free to download the source and use it on your website.
Labels:
CSS,
Javascript
Pretty Checkboxes & Radiobutton
This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability. If you have any comment/suggestion please post them in the main script post.
Compressed version (Script: 1.8kb)
jQuery can be download here
IMPORTANT: For the script to work properly EVERY labels need to have a "for" attribute linking to the ID of their corresponding checkbox/radio
Please note that you have the hover and selected state in the same image and that the inputs should be at the same position, unless you want/can modify the CSS yourself.
That's it, now your inputs should behave the same as in the demo on this page
Demo
Browser support
This plugin has been tested and is known to work in the following browsers- Firefox 3.0 (Mac/PC/Linux)
- Firefox 2.0 (Mac/PC/Linux)
- Opera 9.5 (Mac/PC)
- Safari 3.1.1 (Mac)
- Internet Explorer 6.0 (PC)
- Internet Explorer 7.0 (PC)
Copyright
This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones. Donations are always welcome.Download
Uncompressed version (Script: 2.2kb)Compressed version (Script: 1.8kb)
Version history
- 1.0: Initial release of prettyCheckboxes.
How to use
Nothing is easier to use. First include the jQuery library then include the prettyCheckboxes javascript in the head of the page(s) where you want to use prettyCheckboxes.jQuery can be download here
IMPORTANT: For the script to work properly EVERY labels need to have a "for" attribute linking to the ID of their corresponding checkbox/radio
Then you need to initalize prettyCheckboxes.
$(document).ready(function(){
$('input[type=checkbox],input[type=radio]').prettyCheckboxes();
});
If you want prettyComments to be initialized on specific inputs, you can specify which element by using a CSS selector, like so:
$(document).ready(function(){
$('input.myCheckbox').prettyCheckboxes();
});
You can provide several parameters to the function if you want to customize it a bit further
$(document).ready(function(){
$('input[type=checkbox],input[type=radio]').prettyCheckboxes({
checkboxWidth: 17, // The width of your custom checkbox
checkboxHeight: 17, // The height of your custom checkbox
className : 'prettyCheckbox', // The classname of your custom checkbox
display: 'list' // The style you want it to be display (inline or list)
});
});
If you can to customize the look of the inputs, you can customize those imagePlease note that you have the hover and selected state in the same image and that the inputs should be at the same position, unless you want/can modify the CSS yourself.
That's it, now your inputs should behave the same as in the demo on this page
Labels:
Ajax,
CSS,
Javascript
jquery Hover Sub Tag Cloud
Tag clouds When, used properly, they can provide visitors with an instant illustration of the main topics of the site’s content. And although we don’t have that much choice in designing them, we can still find our way to come up with new design approaches and solutions.
Here is a new approach: Using jQuery to reduce the size of the tag cloud that you have on your sites, so our demo will introduce "Hover Sub Tags" under each main Tag, for example if you have Ajax as a tag, you can have jquery, mootools, etc… as sub-tags. A Sub Tag Cloud will appear when hovering over the main Tag links.
Check out the link below to see it in action.
[LIVE EXAMPLE]
[Download the code here]
Here is a new approach: Using jQuery to reduce the size of the tag cloud that you have on your sites, so our demo will introduce "Hover Sub Tags" under each main Tag, for example if you have Ajax as a tag, you can have jquery, mootools, etc… as sub-tags. A Sub Tag Cloud will appear when hovering over the main Tag links.
Check out the link below to see it in action.
[LIVE EXAMPLE]
[Download the code here]
Labels:
Ajax,
CSS,
Javascript
Subscribe to:
Posts (Atom)