Draggable Divs





ranking Sort Sort   |   date Sort Sort   |   member Sort Sort
Syndication

« Previous 1 2 3 4 5 6 7 8 9  ...  11 12 Next »
13
Date Submitted Mon. Oct. 2nd, 2006 1:05 PM
Revision 1
Beginner drench
Tags Array | JavaScript | List | Random | shuffle
Comments 3 comments
It works with Array types. The example is a simple list of numbers, but the array could contain anything; lists of strings, functions, DOM nodes, whatever. Unfortunately, a lot of things that seem like arrays in the DOM aren't really, so you can't shuffle the images on a page with just document.images.shuffle() all by itself.
11
Date Submitted Thu. Oct. 5th, 2006 10:26 PM
Revision 1
Scripter Fordiman
Tags "stupid | clock" | JavaScript
Comments 1 comments
This is an analog clock script designed to jump in place of a div element of class 'analogclock'.

The div tag is not replaced in this custom element, but instead is used as a pseudo-document to hold the clock itself. The 'hands' are implemented using arrays of generated divs.

I was actually inspired to write this widget because of an article on About.com's Javascript pages written by a guy named Stephen Chapman. His code was a mess, but I only discovered this after delving through two layers of 'unescape()' obfuscation.

The basics: You control the look of the numbers and the 'box' model of the clock using basic CSS. You control the clock's size (it will always be square) using the 'size' attribute.

The 'seconds', 'minutes', and 'hours' attributes are for the color of the 'hand's. 'numstyle' can be 1, i, I, or '.', each refering to a different type of face-numbering for the clock

The 'localzone' attribute tells the script to use the user's local time zone. If it's '0', 'false' or 'no', the clock will use the 'clockzone' attribute to determine what time it is (the clock zone is relative to GMT, so, for example, US Eastern is -5. The clock automagically figures out if we're in DST, so you don't have to.)

The 'city' and 'country' are for if you want to put in the city/country of origin for your clock. To be honest, you can put anything there.

Lastly, I designed my version of the clock to be able to not 'tick', i.e., work like the old-school analog clocks. If you want ticking, add 'tick=1' to the attribute list

As with all of my widgets, the idea here is that you can just include the .js file and start dropping in tags without needing to know any ECMAScript at all.

Additionally, for you ECMAScripters, I was very careful to keep my pollution of the global namespace to one class: analogClock.

Example of use:




15
Date Submitted Tue. Nov. 7th, 2006 12:41 PM
Revision 1
Scripter Fordiman
Tags ajax | http | JavaScript | XML
Comments 0 comments
This is a simple script to provide basic cross-platform XML request functionality in Javascript. It's meant to be the core component in any AJAX style framework. It is not an instantiable object, but instead is a namespaced microlibrary.

Calling is easy:
XMLRequest.GET(uri, query, callback, fallback)
uri: The location you're after
query: an associative array of form data to provide via the URL
callback: callback function of the form myCallbackFunction(objXMLHttpRequest), which is called upon successful (response = 200 OK) retrieval of the XML data
fallback: myFallbackFunction(objXMLHttpRequest), which is called upon failed (response != 200 OK) retrieval of the XML data.

XMLRequest.POST(uri, query, form, callback, fallback)
Similar, but does the query using the POST method. 'query' is the URL-appended data, still in associative array form, and 'form' is the same for the POST data.
17
Date Submitted Tue. Nov. 7th, 2006 9:04 PM
Revision 1
Scripter Fordiman
Tags ajax | JavaScript | XML
Comments 1 comments
This is a brief revision to my previous snippet. It is still what it was: a small, simple system for using XMLHttpRequest without using globals.

I'll put the API spec in the code this time, so as not to clutter the front page further.

Changes:

Changed name to HTTPRequest (far more accurate)
Added HEAD requests
Shortened code by making a GenericRequest function
Used a better method for getting an XMLHttpRequest object (checks multiple MS versions and implements the latest one)
14
Date Submitted Sun. Jan. 28th, 2007 1:18 PM
Revision 1
Scripter Fordiman
Tags JavaScript | json | sort
Comments 0 comments
Flexible sorting algorithm based on Quicksort with extra functionality, such as:
- Direction (ie: ascending or descending)
- Sort-by-path (eg: item.name, item.name.firstName or item[5])
- Sorting function (returns true if two items are already sorted)
- Type checking
- All constants and support functions are members of the Sort() function
- Testsuite with hooks for cscript and in-browser javascript, so you can tweak and optimize, and make sure it still works
- Environment agnostic (can use with, say, SpiderMonkey or .Net's jsc)
8
Date Submitted Thu. Mar. 8th, 2007 11:37 PM
Revision 1
Scripter Fordiman
Tags ajax | browser-independent | JavaScript | Library | XML
Comments 0 comments
libNog is a 9k library to provide somewhat easier browser-independence. It is not yet complete, and will be continuously revised. It grew from this snippet, and is still growing as I find things I use often.
Presently, libNog features:

A way to browser-independently get an XMLHttpRequest object.
A set of simple methods for GET, POST, HEAD, and to include other Scripts.
Simple methods for className control
A completely abstracted form of getElement*
Browser-independent methods for attaching and detaching event handlers
An event-normalization routine
A simple one-command 'Stop the Event' routine
And the big one: A simplified Class object by which classes can be built in JavaScript.

The above link will point you to the API documentation and history of libNog, as well as where to download the library.
10
Date Submitted Mon. Jun. 4th, 2007 2:37 PM
Revision 1
Scripter Fordiman
Tags createElement | JavaScript | kiss
Comments 1 comments
This is a function I created to ease headaches caused by creating and inserting new stuff in an HTML document dynamically. Essentially, it allows you to specify an HTML tag, in its entirety (attributes, styles, event handling, etc), via a single command. You can nest it, so as to create an entire element tree programmatically in a lot less time as with document.createElement.

Don't let the goofy function acronym fool you; this is damned powerful.

First, the function spec:
HTMLElement acne(type[,attributes[,styles[,events[,children[,parent[,document]]]]]]);

Arguments:
String type: type of element to create; same information as the argument of document.createElement
mixed Object attributes: attributes you want the new element to have (ie: href, src)
mixed Object styles: styles for the new element (ie: width, borderLeft)
(function|function Array) Object events: event handlers for the new element
HTMLElement|HTMLElement Array children: elements you want to be in the new element (ie: nesting is possible)
HTMLElement parent: parent node of object
HTMLDocument document: document to create element in

Return value: The newly created/configured element
6
Date Submitted Mon. Jun. 4th, 2007 3:06 PM
Revision 1
Scripter Fordiman
Tags "object passing" | JavaScript | PHP | serialize
Comments 6 comments
This is a quick set of overrides for Javascript so that any variable can be passed to PHP in a GET/POST activity. Just call myVar.toPHP();

I use this little set of functions extensively in a little Javascript/PHP RPC handler I wrote. I don't have the reverse function, as I pass JSON back to the browser for the return value.

Note: This lib is not safe for binaries or HTML Elements. The former will come out similar to FTP ASCII breaks, and the latter will cause infinite recursion. If you want to make a speical case for HTML Elements, do so; you could probably just test for parentNode and create a 'safe' object from that. I didn't need it, so I didn't code it.

As for binary safety, at some point between toPHP/escape/post/urldecode/unserialize, the object breaks. Rather than create a huge fix for something I didn't need to do, I put in a quick match/hack. Don't like it? Write the fix yourself.
5
Date Submitted Sat. Jun. 16th, 2007 6:07 AM
Revision 1
Scripter Fordiman
Tags Class | HTML | JavaScript
Comments 1 comments
Simple set of functions for capturing and manipulating the className member of an HTMLElement
5
Date Submitted Thu. Sep. 27th, 2007 8:02 AM
Revision 1
Scripter Fordiman
Tags JavaScript | PHP | Prototype | serialize
Comments 2 comments
This is the final version of my Javascript serializer targetted at PHP.

The point:
Objects are most easily passed over the network as serialized strings. Between serialization and unserialization, serialization is by far the easier of the two. Since object passing can sometimes be a process-hungry thing, we want to do things as quickly as possible.

My solution is to always do the hard part in compiled code, while doing the easy part in script. That is, whichever way you're passing an Object, you want to pass it in a natively decoded format for the target.

Since I work mostly in PHP, this meant writing a module that would be able to generate a string that can be decoded with PHP's unserialize() function into a PHP Associative Array (or other applicable type).

Notes:
This lib REQUIRES the Prototype lib. You can hack prototype out of it, of course (by replacing the references to Object.extend() with explicit assignments), but I can't imagine why you'd want to bother; it's used mostly with Ajax.Request anyway.

Previous versions of this code would add the .toPHP() member to the Object prototype. After trying to enumerate things, I found that this is a REALLY bad thing to do, as toPHP springs up where it's not wanted in ALL objects. As a result, I've opted to go the Prototype route and apply it as a member of the Object object.

Please note that if you pass a serialized string to PHP via GET or POST, you'll need to stripslashes() before unserialization.



Javascript sample of use:

var myObject = {
name:'value',
test:['Array','of','strings'],
bool:false,
timestamp: new Date(),
float: 3.1415926539,
number: 42,
func: function () {
alert('Member functions are always omitted from serialization');
}
}
alert(Object.toPHP(myObject));

Output:
a:7:{s:4:"name";s:5:"value";s:4:"test";a:3:{i:0;s:5:"Array";i:1;s:2:"of";i:2;s:7:"strings";}s:4:"bool";b:0;s:9:"timestamp";i:1190897619824;s:5:"float";d:3.1415926539;s:6:"number";i:42;s:4:"func";null}


Sample of subsequent unserialization in PHP (passed via POST as 'myobject')

$myObject=unserialize(stripslashes($_POST['myobject']));
var_dump($myObject);

Output:
array(7) {
["name"]=>
string(5) "value"
["test"]=>
array(3) {
[0]=>
string(5) "Array"
[1]=>
string(2) "of"
[2]=>
string(7) "strings"
}
["bool"]=>
bool(false)
["timestamp"]=>
int(1192296601)
["float"]=>
float(3.1415926539)
["number"]=>
int(42)
["func"]=>
NULL
}
« Previous 1 2 3 4 5 6 7 8 9  ...  11 12 Next »