background preloader


Facebook Twitter


Highlighter. Patterns. Gallery. JavaScript Cursor Position. IE’s clientX and clientY measurements start from (2,2) in standards mode, and (0,0) in quirks mode.

JavaScript Cursor Position

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. 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.

frequency decoder - accessible, unobtrusive slider demo

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. View the JavaScript source or read the related article . Horizontal slider & callback function test Vertical slider, negative range & object method callback test SelectList demos Alternative styling demo Don’t forget folks The rather nice png images and styles for the black sliders were located at schillmania . 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.

Javascript Tutorial - Resizeable Textboxes

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. So today I'm going to walk through some resizeable textbox code. It is not very pretty, either code-wise or look-wise, but it does get the job done. So what we are going to create today is a textbox with resize handles on the bottom, right, and bottom-right corner. So here is the example.

Because we have the drag object from the draggable elements tutorial, the code is actually pretty simple. Not really much there. CodeMirror: In-browser code editing. Javascript - Draggable Elements. Base64 and URL Encoding and Decoding. Base64 encode/decode was ported from a Java Base64 encoder/decoder.

Base64 and URL Encoding and Decoding

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.

See the GNU General Public License for more details. The JavaScript Source: Page Details: Copy Selected Text.