One of the guys I love chatting it up with is Jacob Gube of Six Revisions. Jacob recently posted a great Mootools tutorial on automatically adding image captions using Mootools. I enjoyed the tutorial so much I thought I would expand upon it and make it a MooTools class that can be reused for various purposes as needed.
(more…)
Posts by Tag: JavaScript Tips
-
Expanding on How to Auto Caption Images Using MooTools
-
5 Useful JavaScript Library Cheat Sheets
Sometimes while working on various client projects, I need to familiarize myself with the JavaScript library my client is using. Below are some great quick reference “cheat sheets” that can get you started using libraries you are particularly unfamiliar with. (more…)
-
Convert a value to pixels with JavaScript
I was working on something the other day and needed a quick snippet of JavaScript to convert values to pixels from any string. Below is a quick function:
function px(val) { return parseInt(val)+"px"; } }To use it, just wrap your string with the function and it should convert it to pixels for you:
var oldValue = '65'; var newValue = px(oldValue);Let me know how this works for you and if you make any modifications to improve it. Thanks!
-
Finding Window Dimensions with Javascript
Sometimes you may want to find the dimensions of the user’s browser window. Below is a list of the propertiesthat are accessible with different browsers. Traditionally,
window.innerWidth/window.innerHeightis the most widely accepted way to obtain these values, however, there is deviation between IE 4 and IE 6+ in “standards compliant mode.” Below, I have listed the different ways to find the window height and width.Non-IE Browsers
- window.innerWidth
- window.innerHeight
IE 6+ in “standards compliant mode”
- document.documentElement.clientWidth
- document.docuementElement.clientHeight
IE 4
- document.body.clientWidth
- document.body.clientHeight
Sample code for finding the inner window dimensions
The script below will alert the proper window height and width in various browsers.
function alertSize() { var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } window.alert( 'Width = ' + myWidth ); window.alert( 'Height = ' + myHeight ); } -
Basic Instant Form Validation
To continue my series of form validation and presentation posts, I have built a simple form validation script that does not require a library to use, which makes it very small, even uncompressed, totaling only 7kb. This validation script currently handles the following types of fields:
- Required Field: user must enter a value
- Email Address: user must enter an email address
- Digits-only: user must enter only digits (includes optional phone number formatting (US only, for now): if user enters a phone number, the script automatically converts it to “(555) 555-5555″)
- Minimum/Maximum Length: user input must meet a minimum length and cannot exceed a maximum length
The script relies on class names assigned to each input field such as “required” “isemail” “minlength:4″ or “phone” to apply validation rules. (more…)
-
Highlight Form Elements on Focus with CSS and Javascript
This is the first in a series of posts on simple CSS and JavaScript form enhancements and validation. More specifically, these are for people using Prototype or jQuery to handle one or two small tasks on a page and really should be using a simple script like this one to handle such tasks.
This method uses CSS to add a pseudo class of :focus to all form elements and for users on browsers that don’t understand this pseudo element, the javascript adds a class of focus to each element. This method ensures the highest level of compatibility and visual consistency for all users.
- Example of Highlighted Form Field
View the demo:
highlightOnFocus DemoDownload the example:
highlightOnFocus.zipTo the right, you’ll see an example of what this object does. It adds a classname of “focus” to a form element when the cursor has entered the field and removes the class when the cursor leaves the field.
You will need to include the following code in the <head> section of your page:
<link rel="stylesheet" type="text/css" href="./css/highlightOnFocus.css"> <!--[if lte IE 7]> <script type="text/javascript" src="./js/highlightOnFocus.js"></script> <![endif]-->When IE is the browser, the script will automatically walk through your page elements, identify any forms, loop through the form elements and add focus and blur events that basically add and remove a class of “focus” to the fields. Firefox 3, Safari 3, and Chrome do not need the javascript thanks to the :focus pseudo selector.
