- Downloaded: 937 times
- DOWNLOAD LIBRARY
- Firefox 1.0+
- Internet Explorer 6+
- Safari 2.0 Mac/Win
- Opera 9+
- Netscape 9+
SkyByte JavaScript Library
Current Version: 1.2.3 | Last Modified: 2008.08.20Licence: Freely distributable under the terms of an MIT-style license
SkyByte.js is a Lightweight JavaScript Library based on prototype.js interface and includes:
- SkyByte.js (3 Kb) - Core Functions
- SkyByteDD.js (10 Kb) - Drag and Drop Class
- SkyByteRS.js (13 Kb) - Resizable Class
- SkyByteED.js - Editor Class (under development and not included)
Introduction
There was a time when I had to create a layout/cms editor for one of my projects and for that purpose I did it first with Scriptaculous JavaScript Framework. Pretty soon, I discovered, that Drag/Drop functions were changing page structure by making elements absolutely positioned and that pushed me to write a new set of functions with similar functionality, but without any IMPACT ON PAGE INTERNAL STRUCTURE.
Drag and Drop Class Features
When you drag an element, it does not move anywhere, but instead, there is a TEXT BOX moving along the mouse and if approached a DROP ZONE,
a message is sent to the TEXT BOX based on what you specify in DROP.MouseOver(d,e), DROP.MouseOut(d,e) and DROP.MouseUp(d,e) functions, where:
(d)=DROP ELEMENT which triggers message.
(e)=DRAG ELEMENT over the current drop zone.
As you can see, (d) DROP element can "see" what's being moved over it=(e). You can create very complex rules in minutes.
Resize Class Features
After initialization, a RESIZE element monitors mouse activity on itself and creates draggable controls around it's frame when clicked on it. A CONTAINER which holds RESIZE element determines resizing {min,max} limits, so element will never grow bigger than it's container.
A very complex alhorhytm calculates { size + border + margin + padding } of resizable element and substracts it from container's free space to guarantee, that element dimensions did not exceed it's parent container dimensions. I'm pretty much sure you won't find anything close to this functionality anywhere on the internet!
Finally, please see examples about each class and if you have any questions, don't hesitate to contact me.
I would appreciate if you send me links with your projects using this library, so I could link to it.
Don't forget to subscribe for updates if you wish to receive news updates on your email occasionally. No spamming guarantee!
Comments