Downloaded: 2873 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.4 | Last Modified: 2009.01.28
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-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-07-07

Alex replying

To a.blackthorn: You can swap for newer version of prototype if you like, this is no reason for using the old version except that it's a bit smaller in size. To DirtySix: You can save your resizable element in variable like this: var myresize1=new Resize('resize_div_id'); And then call: myresize1.destroy(); or you can extend Resize class with your own functions and call them from any place.

2009-08-05

Prima

Any idea when scroll option will be included in skybytedd.js file. i need that urgently!...

2009-08-09

Alex, replying

To Prima: I haven't tested it properly yet, but if you uncomment line 102 and 104 in skybytedd.js, you will have scroll enabled.

2009-08-09

Prima

Alex, i tried the same but doesnt work. Also i have no drop target defined. As there can be lots of droppable. i have my own script to decided the drop target. My draggable elements lies under a main DIV which is scrollable. so if the dragged element reaches the main DIV's boundary, it should scroll the main DIV.

2009-08-12

Alex replying

I took in consideration everyone's suggestions, thanks. Already made some changes to scroll window and overflow:auto divs. Will put it live after testing in all browsers.

2009-09-04

Jensovic

Hi Alex, how can I reposition one of the resize knobs. I just cannot manipulate the position. Height and width OK, but position keeps stuck.

2009-09-09

Alex, replying

To Jensovic: Thanks, let's discuss it in the email I sent you.

2010-01-02

Hardik

Great work sir, it would be better if you give a 'download with example' option. It helps you know. Thanx n e way.:)

2010-01-07

massimo

2010-01-01

Rockey

Hi Thanks for wonderful demo & code. How do I stop my image to grow vertically? I need only to expand horizontally. And also can you point me how to display growing parameters (like width, hight) to display on a text box instead of displaying on top of image. Thanks Rock

2010-01-03

Alex,replying

Please download a new version of the library. horizontal/vertical options are now available for resize class.

2010-01-03

Alex,replying

To display indicator in a textbox, you could find/replace SkybyteRS.js file with the following line: if(opt.indicator==true){ $('YOUR_TEXTBOX_ID').value=c.w+'x'+c.h; }

2010-03-09

Vasanth

I have to implement the iGoogle like functionality for the project iam working on. I have planned to use your scripts for that, but still iam not able to bring a page with your scripts working on. I just want a starting push, it would be great help, if you share any sample example with us, even a very basic one is sufficient. Please help

2010-03-09

Alex, replying

Please find the example links at the right navigation bar.

2010-04-02

Akhil

Hi it's very urgent. I have multiple drop in a HTML. Each tr have id and I have to drag the tr and drop on to other but it is not working in IE7 working fine in Mozilla. In IE it is assuming drag and drop is the same id. Please help

2010-05-04

Alex, replying

Hi Akhil, hope I helped you by the email. If you have any more queries, please dont hesitate to contact, I will try to respond as soon as possible.

2010-07-08

PetrKunkAlpinist1977

Da haste dir aber viel m

Examples

Who use library

COMBO CMS

SkyByte JavaScript Library

Introduction

Drag and Drop Class Features

Resize Class Features

Comments

Leave a comment (E-mail address never displayed)

Examples

Who use library

Subscribe for updates