Downloaded: 2004 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.20
Licence: 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

2007-11-11

pchapman

Great work! Glad to find a stable resizer utilising Prototype. JQuery has some good resizer examles but it doesn't like being on the same page as Prototype. Any suggestions for de-selecting the container (i.e. removing the highlight) when they click somewhere other than the border? Cheers Paul

2007-11-02

Alex, replying

click: [true|false|element_id] option has been added to Resize class, which hides selection on mouse click anywhere outside the selection or at specific element_id.

2008-09-11

matt

How do I call the init function? I can't seem to get it working.

2008-09-06

Alex, replying

I assume you're asking about calling initialize() function?. If so, then this function launches automatically once you declare the class like var myclass = new MyClass();

2008-10-05

Alister

Hi Alex, I'm using your DD code. Had to modify the xywh function to cope with (overflow) scrolled content in a div. Using Prototype.js 1.6. var c = el.cumulativeOffset(); //... var cso = el.cumulativeScrollOffset(); return {x:c[0] - cso[0], y:c[1]- cso[1], w:d.width, h:d.height};

2008-11-11

Alex replying

Thanks Alister, I will check your modifications and include them in the next release if they work ok

2009-02-11

gopu

hi alex, I did not find any licensing info on the Javascript libs. Do you have any? thanks, gopu

2009-02-01

a.blackthorn

I swaped out the old prototype 1.5.0 you are using with the latest stable version (1.6.0.3). So far I have seen no ill effects, is there a reason you are using the old version?

2009-05-04

Anasayfa

800oloıoıolıoıl

2009-06-06

DirtySix

Hi, great work so far! Works really fine. But I can\'t find out how to get the ResizeElement to deactivate on \"mouseout\"?! Is there any possibility?

2009-06-04

DirtySix

Hi, great work so far! Works really fine. But I can\'t find out how to get the ResizeElement to deactivate on \"mouseout\"?! Is there any possibility?

Examples

Who use library

COMBO CMS