Ajax Updates |
- SproutCore 1.0
- Make a Password Strength Meter Like Google
- Corner Dock Icons Script
- Simple Double Quotes Script
- jQuery: Share it Script
- dfSmooth Scroll Script
| Posted: 04 Nov 2009 09:13 AM PST SproutCore 1.0 has its first release candidate that you can grab via gem install sproutcore. There are also new demos to play with and other interesting features: Animation Layer I've been working on a mixin to add animation to SproutCore views. The current version only works for layout properties, and does not yet work for centerX and centerY properties (they used to work, but some of the performance optimizations have made it slightly more tricky—I'll be adding it back soon, though).
which you can work with via: ImageView.design({ layout: { left: 100, top: 100, width: 64, height: 64 }, value: "common refresh-64 icon" // using SproutCore's built-in className support for spriting } View.design({ layout: {left: 100, top:100, width:256, height: 256}, classNames: ["common"], // the theme childViews: ["styledView"], styledView: ImageView.design({ layout: { left: 100, top: 100, width: 64, height: 64 }, value: "refresh-64 icon" // using SproutCore's built-in className support for spriting }) })  Related Listings:
| |||||
| Make a Password Strength Meter Like Google Posted: 04 Nov 2009 08:32 AM PST Password strength meters are becoming more and more popular amongst web services. Google uses one when creating a Google account. One can argue how useful these meters really are, but non-the-less they are fairly cool for users. So how does one go about making one of these meters? Well it's fairly straight forward. The basic break down is we add an event handler on your password field that will check the password for every key input the user types. This allows for an updated meter as the user types the password. When you get into the algorithm that actually checks how secure a password is, there are many routes you can go. When researching for this project, I chose to base my code off of the kind folks over at Intelligent Web. There theory is to calculate how many different combinations there are for the password you enter, then determine how many days it would take to crack your password. The algorithm returns a percentage that we then in turn convert to a nice GUI for the end user to see. So let's take a look at the code: The JavaScript is fairly straight forward. There are settings at the top for different checks to enable or disable. Here is the JavaScript: // Password strength meter v1.0 // Matthew R. Miller – 2007 // www.codeandcoffee.com // Based off of code from http://www.intelligent-web.co.uk // Settings // — Toggle to true or false, if you want to change what is checked in the password var bCheckNumbers = true; var bCheckUpperCase = true; var bCheckLowerCase = true; var bCheckPunctuation = true; var nPasswordLifetime = 365; // Check password function checkPassword(strPassword) { // Reset combination count nCombinations = 0; // Check numbers if (bCheckNumbers) { strCheck = "0123456789″; if (doesContain(strPassword, strCheck) > 0) { nCombinations += strCheck.length; } } // Check upper case if (bCheckUpperCase) { strCheck = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; if (doesContain(strPassword, strCheck) > 0) { nCombinations += strCheck.length; } } // Check lower case if (bCheckLowerCase) { strCheck = "abcdefghijklmnopqrstuvwxyz"; if (doesContain(strPassword, strCheck) > 0) { nCombinations += strCheck.length; } } // Check punctuation if (bCheckPunctuation) { strCheck = ";:-_=+\|//?^&!.@$£#*()%~<>{}[]"; if (doesContain(strPassword, strCheck) > 0) { nCombinations += strCheck.length; } } // Calculate // — 500 tries per second => minutes var nDays = ((Math.pow(nCombinations, strPassword.length) / 500) / 2) / 86400; // Number of days out of password lifetime setting var nPerc = nDays / nPasswordLifetime; return nPerc; } // Runs password through check and then updates GUI function runPassword(strPassword, strFieldID) { // Check password nPerc = checkPassword(strPassword); // Get controls var ctlBar = document.getElementById(strFieldID + "_bar"); var ctlText = document.getElementById(strFieldID + "_text"); if (!ctlBar || !ctlText) return; // Set new width var nRound = Math.round(nPerc * 100); if (nRound < (strPassword.length * 5)) { nRound += strPassword.length * 5; } if (nRound > 100) nRound = 100; ctlBar.style.width = nRound + "%"; // Color and text if (nRound > 95) { strText = "Very Secure"; strColor = "#3bce08″; } else if (nRound > 75) { strText = "Secure"; strColor = "orange"; } else if (nRound > 50) { strText = "Mediocre"; strColor = "#ffd801″; } else { strColor = "red"; strText = "Insecure"; } ctlBar.style.backgroundColor = strColor; ctlText.innerHTML = "" + strText + ""; } // Checks a string for a list of characters function doesContain(strPassword, strCheck) { nCount = 0; for (i = 0; i < strPassword.length; i++) { if (strCheck.indexOf(strPassword.charAt(i)) > -1) { nCount++; } } return nCount; } On the HTML side, I have setup a simple form to display the interaction the user will receive. Related Listings:
| |||||
| Posted: 04 Nov 2009 08:25 AM PST Move your mouse over one of the smaller icons around the central one to move the docker. Placing your mouse on the icons to the left will move them all around clockwise and placing your mouse on the icons to the bottom will move them around anti clockwise. Each icon is a link and can link to anything in the normal way. You can also move the docker around by calling the functions from other links or buttons. You can have as many icons as you wish. View the source code of this page to see how simple the mark up is. Related Listings:
| |||||
| Posted: 04 Nov 2009 08:15 AM PST This CSS tutorial will show you how to display two double-quote images using one blockquote tag. The trick here is apply one background image to blockquote, and then apply another background to the first-letter (pseudo-element) of blockquote. HTML source code Start with a blockquote and some text. <blockquote>Hello, I am a double quote...</blockquote> 2. Specify blockquote Specify blockquote element as follow: blockquote { font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif; width: 400px; background: url(images/close-quote.gif) no-repeat right bottom; padding-left: 18px; text-indent: -18px; } The CSS code above will display the close-quote.gif graphic background at bottom right corner. The padding-left and text-indent will create a hanging indent of -18px. It will look like this: Now add 18px left padding to the first-letter of blockquote. This will make the text align together. Then display the open-quote.gif at top left corner. Note I made the first letter in different font styles just to look nice. blockquote:first-letter { background: url(images/open-quote.gif) no-repeat left top; padding-left: 18px; font: italic 1.4em Georgia, "Times New Roman", Times, serif; } Related Listings:
| |||||
| Posted: 04 Nov 2009 07:41 AM PST jQuery Share It! Hides and toggles a group of social bookmark icons with a nice slide animation. <link rel="stylesheet" type="text/css" href="shareit.css" media="screen" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.shareit.js"></script> <script type="text/javascript"> $(document).ready(function() { $("a.bmarks-btn").shareitBtn(); // the button function $(".bmarks a").shareitHover(); // the hover effect (optional) }); </script> HTML / XHTML <p><a href="#bmarks-10" class="bmarks-btn">Social Bookmarking</a></p> <div id="bmarks-10" class="bmarks"> <div class="inner"> <p> <a href="#delicious" title="del.icio.us"><img src="images/delicious.gif" alt="del.icio.us" /></a> <a href="#digg" title="Digg"><img src="images/digg.gif" alt="Digg" /></a> <a href="#technorati" title="Technorati"><img src="images/technorati.gif" alt="Technorati" /></a> </p> <p class="tip">Bookmark me!</p> </div> </div> Related Listings:
| |||||
| Posted: 04 Nov 2009 07:05 AM PST Its another interesting miniature javascript called the "df Smooth Scroll". This script is also one of the smallest Smooth Scrolling Javascripts after our Simple Accordions. * Simplest to implement We always see that we have atleast one image on every post of ours… but for this script we were too confused to go about the image and finally put up the above one (sorry if it pains your eyes cos its motion blurred ) Usage: This script is too simple to understand and use. Nothing but playing with Anchor Tags. Include the Javascript and you are set to smoooooooooth scroll… 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.