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. Draggable elements in javascript have been done hundreds of times before - from tutorials to packages to hacked up half working code files.

Javascript - Draggable Elements

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. So how is all this done? Function dragStop(){ if(! 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.