When I was implementing the dragable popup form feature I was pleased at how easy it was to use mooTool’s Drag.Move. My little form was easily moved to anywhere in the browser window, just as I intended. A problem arose when I tried to use the form inside the dragable element. The input elements of the form were not clickable, I could not get them to have focus, as if they were behind an invisible layer, which is actually what was going on. The form elements inside the dragable div they sitting in were not clickable, because they were dragable! Ack!

Happily I was able to find a solution for my problem: the dragable element required a handle.

The above image shows the Drag.Move handle in the upper right corner of the edit list item form div. You cannot move that dragable element unless you grab it by the handle, the move icon. Using a handle frees up the rest of the element for other clickable elements, like a form.

The JavaScript for including a handle in your Drag.Move element is as follows:

new Drag.Move('dragableDivID', {handle: 'dragHandleID'});

and the HTML, with some CSS:

<style>
.dragHandle{
    background:transparent url(/images/move.png) no-repeat scroll 0 0;
    cursor:move;
    float:right;
    height:30px;
    margin:15px 15px 0 0;
    width:30px;
}
</style>
<div class='dragableBox' id='dragableDivID'>
     <div class='dragHandle' id='dragHandleID'></div>
     <div class='dragableInner'> The content goes here</div>
</div>

In looking for this solution I found this great tutorial series by Consider:open called 30 Days of mooTools.  The entire series is very well done. Web developers at any level are likely to learn something new about mooTools there. Check out thethe tutorial on Drag.Move from the series that helped me out.

You might also like...

• Maintaining Dynamic Height on a Fx.Slide element with Mootools

I spent a great deal of time trying out different WYSIWYG editors for List Central. I found many neat ones, but CKEditor was the one that gave me the fewest headaches in integrating the editor into the highly dynamic interface of List Central.  CKEditor is a full featured editor that offers a wealth of features that are not needed on List Central, which makes the editor a little heavier than I would like, but it’s a fair trade off for an editor that works properly.

One thing that I didn’t like about CKEditor is the hideous dialog popup for adding links. It is aesthetically ugly, and offers far too many options. While I certainly wouldn’t be taking away the ability to add links in editor, I couldn’t keep the functionality the way it is, I’m far to picky to let something that looks like this:

to get passed me. Call me shallow if you will, but I had to make my own CKEditor plugin for adding links that would use the KISS (Keep It Simple Stupid) design principle and have the List Central asthetic.

CKEditor is still a young piece of open source software, and lacks proper documentation. Be careful with this, as CKEditor is the next version of FCKEditor, which is very different. Following the FCKEditor documentation is likely to lead you astray. I used the following resources around the web to figure out how to make my plugin work:

• Tommed explains how to make a CKEditor plugin by building a better image uploader
• Ajithmanmu explains how to create a CKEditor plugin by building a simple add link plugin.

Happy plugin making!

Random Posts

• Jamie Oliver’s Food Revolution
• Thank You FAILblog!
• Share Buttons are SO Easy!!

I recently started using FX.Slide in the next iteration of the List Central interface. It lets the user open and close “sliders” (div’s with content in them) as they want them. Check out the < a href="http://demos.mootools.net/Fx.Slide">mooTools demo to see FX.Slide in action.

I had one little problem with Fx.Slide though. The problem was that I wanted to be able to dynamically add content to an Fx.Slide, changing the height of the slider div after it has been opened. To my dismay, the implementation of Fx.Slide set the height of the div to specific numbers in pixel to achieve the vertical slider effect. This means that any content I added to the bottom of the div after it was opened would not be shown. In order for the height of the slider div to remain dynamic, I needed the height to be set to “auto”, not a specific number.

I had to figure out a way to maintain the the div’s ability to change in height while still using FX.Slide. I did some fiddling in mooTools source to try to achieve the effect I desired. I changed where FX.Slide set the height of the div to “auto”. After trying it out, I was astonished that it worked! I had moved on to some other development when I realized that my change to the mooTools source brock the fluid motion of my slider. It now opened all choppy and jumpy. It was no longer pleasing to the eye. I had to put the source back the way I found it. I may have learned some about the inner workings of mooTools though the process, but really, messing with the framework’s source is a path to trouble.

As with many problems, this one’s solution didn’t come to me until I put the problem away for a while, and worked on other things. The solution then came to me, and like many other solutions, it seemed so simple, once I knew it.

The trick to maintain dynamic height on a Fx.Slide is to add an onComplete function on to the slider that sets the height of the slider to “auto” if the slider is open, like this:

var formSlide = new Fx.Slide('FormSlider', {
        onComplete: function(){
            if(this.wrapper.getStyle('height') != "0px"){
                // Check if the slider is open
                this.wrapper.setStyle('height', 'auto');
            }
        }
    }).hide();

That’s it! It works like a charm now, just as I want it to. So much trouble, for such a simple solution!

I expect that this solution would work the same on the width for horizontal FX.Slide’s, though I haven’t tested it.

You might also like...

• Put a handle on mooTools Drag.Move

Random Posts

• Images with Round Corners
• New Music – Imelda May
• Companies that Use Perl

I love the date picker Javascript script I found to help accomplish this new feature. It is the MooTools DatePicker by MonkeyPhysics. The script is flexible and well documented. There are even 4 different skins ready made to use in your application. Thank you MonkeyPhysics for building this date picker script!

You might also like...

• charCode is meaningless

Warning: The ‘charCode’ property of a keyup event should not be used. The value is meaningless.

I’m trying not to be smug, but it does feel good to know that List Central uses the charCode concept while not throwing any Javascript errors. I’ve aimed to keep that Error Console clean through the entire development of List Central.

For those of you that want to get rid of that pesky charCode error, change

var code = event.charCode;

to:

var code;
if (e.keyCode){
    code = e.keyCode;
}else if (e.which) {
    code = e.which;
}
var character = String.fromCharCode(code).toLowerCase();

You might also like...

• MooTools Date Picker

To handle this situation you need a multi-line text input, that enforces a 300 character limit. If the user types more than 300 characters, the extra characters shouldn’t show up so that s/he knows that only what they can see displayed will be saved. For the multi-line requirement, you have to use a textarea, but textarea’s do not have a built in max-length directive like the one line text inputs do. So, we have to make out own. I went looking for a solution today, and found a rather handsome, one liner solution over at psacake. Sadly though this solution is serverly flawed, to a degree in which I would say it’s unusable. The psacake solution stops the user from inputting more than 300 characters, but it also prevents the user from using the backspace to change their input. I have updated psacake’s solution to give the user a chance to chance to edit what they have written after they discover the textarea has a character limit imposed upon it.

function imposeMaxLength(event, object, MaxLen){
    var key = event.keyCode ? event.keyCode : event.which;
    if(key == 8){
        // 8 is the keycode for the backspace key
        return true;
    }else{
        return (object.value.length <= MaxLen);
    }
}

Then, call they function like this:

<textarea onkeypress='return imposeMaxLength(event, this, 300);'></textarea>

Please feel free to use this code on your site. It has passed my tests on both Firefox and IE8.

Random Posts

• Kiva Loans Wordpress Widget
• How come: Another Google Suggest that makes you go hmm
• Will CPAN and Debian ever play nice?