CSSgallery.info

The today tutorial will try to explain how to make an element draggable or resizable - or even both in the same time, using the MooTools framework. To accomplish this we’ll make use of two functions existent in mootools: makeDraggable() and makeResizable().

This is very simple.We simply select the element we want to be resizable or draggable and use one of those functions:

$(’id_of_the_element’).makeDraggable();

or

$(’id_of_the_element’).makeResizable();

A good idea would be to set in css of the elements “position:relative” as, those functions assume that elements are positioned absolute, and may break your layout. But this depends on the layout you have.

Doing so, a drag of the element will drag it or resize it.

There are some parameters we can use for this functions.

One of this is ‘handle‘. Handle passed to the function will tell what other element is used to manage the drag or the resize of the main element.so something like :

$(’id_of_the_element’).makeResizable({handle:$(’id_of_handler’)});

will have the effect we obtain in demo page, for the orange div.

What do you have to pay attention on is that handle is an selected element so we need to use $(’id_of_handler’).

In the next tutorial we will try to use all the knowledge we learned until now - select and create elements, add events and make draggable or resizable, to create a window-like element than can be resized or moved around our page.

After searching through editors for Os X, that can go as close as possible to Quanta, my former editor in linux, before I switched to mac, and not founding anything close - or better said close to my habits - I finished choosing 3 editors - Coda, skEdit, and TextMate.

Coda is nice, but I miss auto-completion, as I was used with , skEdit does a really good job, but I miss a codebrowser panel , and again the auto-completion.

Well, now it comes TextMate.

I wanted for it a codebrowser - i need to see my functions, classes and variables - so i used this plugin TmCodeBrowser . Is not a real panel, but I moved it to the right side of the screen, set normal panel and visible on launch, resized the main window until it touch the edge of codebrowser, and seems ok.

What was very unpleasant for me, was that without a project, files were opening in individual windows. I like my desktop clear, so a file tabs solution would be nice. To fix this, in conjunction with using an external ftp manager - I use ForkLift - I had to create a project, and set to it the folder used by ForkLift to cache it’s files

~/Library/Caches/com.binarynights.ForkLift/

save the project, and take care to have it opened before opening a remote file.

Another thing was the autocomplete feature TextMate it has. I would like to have a classical dropdown, but i think this is the way it reach the speed it has in presenting a suggestion. For a >7000 lines source code, on my G4, other apps become slow, so I get used with this behaviour. What I did not get used with is that key Esc is binded to do operation. Is far, is small and almost always i was pressing the ` key. So I edited the

/Applications/TextMate.app/Contents/Resources/KeyBindings.dict - don’t forget to back-up -

and added this line -

“~ ” = “nextCompletion:”;

that means alt(option) key with spacebar will perform the completion.

I am sure lot of other tricks exist to make TextMate an easier and more pleasant companion for new users of mac, so if you know some, please share.

Thanks.

Well, after some time from the original launch, we managed to alocate some little time to R’born Development, and we re-skinned our site. This change is intended to come with our new range of services for our clients: eCommerce solutions, CMS solutions on top of php, ajax technologies.