Javascript

Facebook Twitter
jquery

highlighter

patterns

gallery

IE’s clientX and clientY measurements start from (2,2) in standards mode, and (0,0) in quirks mode. IE stores this offset in its document.documentElement.clientLeft and document.documentElement.clientTop properties. This code should calculate the correct cursor position in all browsers: I published this in 2006 as I was building Snipshot. This snippet found its way into many popular JavaScript frameworks, and I suggest you use one of them to handle mouse events since they are constantly updated to reflect best practices and new browser implementations. JavaScript Cursor Position JavaScript Cursor Position
frequency decoder - accessible, unobtrusive slider demo Accessible Unobtrusive Slider Demo Accessibility Enhancements ( ARIA ) Whenever a slider has focus, the arrow keys ← , → , ↑ and ↓ can be used to control the slider handle, the Home key to set the slider at it’s minimum value and the End key to set the slider at it’s maximum value. The script automatically assigns each slider the required ARIA role of “slider” and states “valuemax”, “valuemin” and “valuenow”. Should an element with an id of fd_slider_describedby exist, this is used to set the ARIA “describedby“ relationship. Additionally, should the sliders associated form element itself have an associated label , this label is used to set the ARIA “labelledby” relationship. frequency decoder - accessible, unobtrusive slider demo
JavaScript: Ctrl, Alt, Shift keys
Javascript Tutorial - Resizeable Textboxes So something that seems to be popping up a bunch on various sites lately is the resizeable textbox. Some are implemented with a resize handle on the corner, others let you drag any of the sides. I thought they were kind of cool, so I sat down to see how hard it would be to write. And, surprisingly enough, it is actually pretty easy. Javascript Tutorial - Resizeable Textboxes
CodeMirror: In-browser code editing CodeMirror is a JavaScript component that provides a code editor in the browser. When a mode is available for the language you are coding in, it will color your code, and optionally help with indentation. A rich programming API and a CSS theming system are available for customizing CodeMirror to fit your application, and extending it with new functionality. Getting the code All of CodeMirror is released under a MIT-style license. CodeMirror: In-browser code editing
Javascript - Draggable Elements Draggable elements in javascript have been done hundreds of times before - from tutorials to packages to hacked up half working code files. But, hey, I have decided to throw my two cents in anyway - because we all know you wanted yet another option for dragging in javascript, right? Joking aside, what will will cover today are the detailed inner workings of a homegrown solution to draggable elements. Depending on your level of javascript knowledge, you might want to read two previous tutorials on this site: Javascript Objects - A Useful Example (which covers some basics about how objects work in javascript), and Javascript - Working With Events (which covers how to work with events and event objects). The techniques (and some of the code) from both of those articles will be used in this tutorial. The capabilities of the solution in this tutorial are pretty small compared to some of the big packages out there now for javascript dragging. Javascript - Draggable Elements
Base64 and URL Encoding and Decoding Base64 encode/decode was ported from a Java Base64 encoder/decoder. Base64 encode/decode was ported to Macromedia Actionscript. License This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. Base64 and URL Encoding and Decoding