Put a handle on mooTools Drag.Move

In the next version of List Central the little popup form that enables the user to edit list items will be dragable so that the list maker can move it to where ever they would prefer to have it. It is a great little feature that really adds to the usability of List Central.

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.

Posted in Javascript, Usability, Web Development. Tagged with , , , .

By marilyn
January 12, 2010

No comments

CKEditor on List Central

I am currently working on several improvements to the List Central interface, one of which includes the addition of CKEditor. CKEditor is a Javascript What You See Is What You Get (WYSIWYG) editor, which will make it easier for List Central users to include links, and text formatting in the list item descriptions.

ckeditor

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:

Happy plugin making!

Posted in Javascript, Web Development. Tagged with , , .

By marilyn
January 8, 2010

2 comments

Maintaining Dynamic Height on a Fx.Slide element with Mootools

List Central uses mooTools for it’s JavaScript framework. I love it! It makes developing in JavaScript a pleasure, with increased reliability, and nifty eye candy to play with.

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.

Posted in Javascript, Web Development. Tagged with , , .

By marilyn
January 5, 2010

6 comments

Lightbox on List Central changed

A while back I wrote about List Central using Slimbox. While I still love Slimbox, and use it over at one of my other blogs, I’ve decided to use Multibox instead so that I can also use it for some neat AJAX content, as well as the images.

In looking for the right lightbox solution for List Central, I found this awesome, interactive comparison of different lightbox clones by PlanetOzh.com. It allows to to specify the Javascript framework you want as well as the features you need, in order to narrow down your search for the perfect lightbox.

With the Lighbox Clone comparison’s help, I decided to use Phatfusion’s super slick Multibox. But, as with most things in web development, it wasn’t that simple. The Phatfusion Multibox is built for MooTools 1.11. I need to use MooTools 1.2 for other features. Luckily I found Multibox for MooTools 1.2 by Liam Smart. It works great!

There is a bit of a trick with Liam’s Multibox that is yet to be documented properly. If you want to be able to close an open multibox from a button inside an open multibox, or access document elements or Javascript variables from the main page, from within a multibox opened via the AJAX method, you must use the Javascript reserved word “top”, such as:

top.myMultibox.close();

Thank you Phatfusion and Liam Smart for building Multibox and Multibox for MooTools 1.2!

Posted in Javascript, Web Development. Tagged with , , .

By marilyn
December 21, 2009

No comments

MooTools Date Picker

A new feature is on its way to the List Central interface. Soon List Central users will be able to associate a date, and time with any list item in any list, and request List Central to email him/her either once, annually, monthly, weekly or daily on that date and time.

datepicker

timepicker

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!

Posted in Javascript, Web Development. Tagged with , .

By marilyn
December 14, 2009

No comments

Update December 2009 – List Central in Private Beta

List Central reached a major milestone last month: the private beta release! On November 10th 2009 I put my fears aside, and hit send on the invite email to a small selection of my friends and family. Since that time List Central has received some awesome positive feedback, and some really thoughtful suggestions. I am very grateful to my friends and family for helping me out with this very early stage application. I know that everyone’s efforts will contribute to a better List Central on the next release.

Another major development in List Central’s history happened last month as well. On November 25th, I was laid off from my position as Programmer at Population Data BC, as a direct result of recent cutbacks by the BC Provincial government. The layoff was effective immediately, on November 25th, 2009, and I have been day-job-free ever since. On one hand this layoff is sad, and scary. The economic climate is not in a good state, and I just lost my steady and ’secure’  job at the university. On the other hand, this lay off is exhilarating! This is my opportunity to give List Central the time and undivided attention  it has been begging me for! My plan now is to move forward with List Central with everything I have. With the feedback I have received during the private beta, I have been tirelessly improving how List Central works. I will be releasing these changes in early January 2010, which will be followed by beta code promotion to boost the amount of beta users on List Central, and see that its infrastructure can handle higher traffic. I am looking forward to releasing List Central to a wider audience, and to seeing the creative lists my future users make!

Posted in Business, General Musings. Tagged with , , .

By marilyn
December 10, 2009

No comments

charCode is meaningless

I have seen this Javascript error in my Firefox Error Console many times, from many high profile sites about the internet.

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();

Posted in Javascript. Tagged with , .

By marilyn
December 8, 2009

4 comments

List Love 101: A List of Books…About Lists

It’s hard to explain the  List Central concept sometimes.

It usually goes something like this:

Me: “List Central is an online community for people who love lists.”

Random person: “Oooooooh, ok. That sounds neat.”

But even though the response is usually positive, there is a subtle look of confusion that follows. I know the idea of a social networking site dedicated to lists can be puzzling. I mean, why would you spend time on a website that is all about lists? For us the answer is obvious – lists are cool. We love lists because they offer so much in such a simple package.

With all the time we’ve spent working towards getting List Central off the ground, there is something really special that we have come to realize. We are not alone. People who love lists are everywhere, not just online, and they are passionate about lists for more than their ability to organize ideas.

To demonstrate the value of lists in our society, I want to share a few books that offer an in-depth look at lists and their role in documenting and categorizing our cultural and personal experience.  Think of it as recommended reading for the list hobbyist.

1. The Book of Lists – David Wallechinsky, Amy Wallace, Ira Basen & Jane Farrow

We were actually surprised to find this on our bookshelf. Neither Marilyn  nor I remember owning it. We’re not sure where it came from. But it’s filled with a wealth of random facts and trivia.

A few lists featured in the book:

  • The 10 Men Who Conquered the Most Area
  • 11 Unusual Lawsuits
  • 16 Memorable Kisses
  • 13 Famous People Who Went Bankrupt

I don’t want to give anything away, but yeah – Hammer is on that list.

2. The Infinity of Lists: An Illustrated Essay – Umberto Eco

Author and philosopher Umberto Eco provides a more in-depth analysis of lists. Eco examines the role list-building plays in Western culture. He talks about the human obsession with cataloging and categorizing throughout history, from lists of saints to collections of art. He also mentions that lists have the power to be “poetics of catalogs.”

And you thought your grocery list was just a list.

3. To Do List – From Buying Milk to Finding a Soul Mate, What Our Lists Reveal About Us – Sasha Cagen

Speaking of meaningful grocery lists, Sasha Cagen believes that scanning someone’s to-do list will allow you to delve deep into their psyche.

Building on her popular blog theme, Cogen compiled over 5,000 to-do lists from voluntary participants to find that each list offers clues about the list-builders personality. For example, list items like, “call cat psychic” or “think about prostitution” give us a  good sense of that individual’s identity.

4. List Yourself: Listmaking as the Way to Self-Discovery - Ilene Segalove & Bob Paul Velick

If we can learn so much about a stranger by reading their lists, imagine what we could learn about ourselves. This is the idea behind List Yourself. The author offers pages of list headings to be filled in by the reader. The idea being that adding lists items will act as an exercise in introspection and self-discovery.

What would you write if someone asked you to fill in a list with the heading “List all the qualities you love about being human”? What about “List the activities you’d do if you weren’t afraid”? What would that list look like?

So there it is. A list of books that delve deeper into the world of list fanatics and the cultural relevance of the lists they build. And sure, it may still be tough explaining the concept of a social networking site dedicated to lists. But at least I know I have some books to refer to for inspiration.

Posted in General Musings. Tagged with , , , , , , , , , , , , .

By juan
December 3, 2009

No comments

Lists Rule (the online world)!

We are launching the Beta release of List Central today. The morning has been filled with nerves and adrenaline (not to mention a ton of coffee). So as we scramble to get the last details in order, it seems appropriate to write a post to remind ourselves why we love lists.

The love of lists is obvious in the online world. The most interesting blog posts come in the form of a list. Amazon has listmania, and even Twitter is getting in on the list game.

So what is it about lists that grabs our attention? How can there be so much love for something so simple?

The only way to explain the list-love phenomenon is with – well – a great list! So here it is:

1. Clear and Concise

It’s really tough to read through a 1500 word, rambling article online. The best written content on the web is presented in small, easy to read bits. A good post is usually clear and to the point.

This is what makes lists ideal for the web. Lists break down complex theories or ideas into small, descriptive points.

2. Easy to read

Have you ever tried to read a big paragraph online? Even the most interesting post can lose a reader’s attention if it’s buried in a lot of text.

Lists are broken down into aesthetically pleasing tidbits. They break through all the clutter of an essay-style post and present information in a simple, comprehensive way.

3. Organized

A good list organizes ideas so that your message is easier to understand. As a writer, it also forces you to leave out anything unnecessary and get straight to the point.

4. Scannable

You can’t read an article by starting at the end and working your way to the beginning. But with a list, you can start at the end and work your way back, or go right to the middle.

Being able to scan a list is what makes it engaging. You know it’s possible to pick out the exact piece of information you’re looking for, without having to commit to reading everything.

This makes a good list like a buffet of information – you pick and choose only the tastiest morsels that are relevant to you.

5. Insight

There’s something special about sharing lists online. It’s not like writing a grocery list and handing it to your roommate.

Sharing lists online creates a community of like-minded individuals. It unifies people based on similar interests, opinions or values.

A top ten list of history’s best sports teams, is  likely to attract a completely different group of people than, say, a top ten list of fashion trends.

A list also gives you insight into the personality of the list builder. By reading someone’s list, you can get a sense of who they are and what they value.

6. Fun

We love lists because they’re fun! Lists are a creative from of self-expression. There are no rules, no limitations and definitely no lack of ideas. And that’s what makes them so fun.

The possibilities are endless.

This is why we love lists and why we’re dedicated to building an online community for list-lovers everywhere.

Do you love lists?

Posted in General Musings, Lists. Tagged with , , , , , .

By juan
November 10, 2009

No comments