abidibo.net

Posted in "mootools"


Drag and drop touch compatible with mootools

drag&drop javascript mobile mootools

Drag and drop is a nice feature which often can increase the usability of our web applications. Mootools has a good support for drag and drop in the more package, which actually works well for desktop environments.

But unfortunately we are in 2014, and now targeting our apps for desktop only is something which should be avoided except if we are sure no one will use them with mobile or tablets.

So the problem is, how to extend the drag ...

read the full post


Wordevents boosted up

javascript mootools wordevents

Wordevents is a mootools plugin which allows to listen for word typed events, and execute given callbacks if the word belongs to a given dictionary. Till release 0.1.x it the dictionary could be only filled with strings, which represent the words to listen for. Now things are different.

Improvements

Wordevents accepts as an option a function which says if the typed character should be considered or not, allowing to consider only a certain set of characters (i.e ...

read the full post



Javascript frameworks are really powerful, when you need them

javascript jquery mootools performance programming testing

Introduction

I've always used some kind of javascript framework when developing frontend stuffs. Mootools, jQuery, extjs and friends. All such frameworks provide a set of useful functionality, but above all in my opinion, they provide what is crucial for a web developer: cross browser compatibility.
The time you'll spend in writing cross browser code, even for a small project, is huge, especially if your software must support IE<9, and especially at the beginning, since you need to learn all browser ...

read the full post


Mootools IntervalController mixin

javascript mixin mootools programming

How many times do you need to implement a functionality which has to be run every n seconds and possibly should be stopped and resumed? Not so often probably but it happens and happened to me just today, for this reason I decided to write a mootools Mixin so that I can reuse this code when I need it.

The code

/**
* IntervalController Mixin
* Provides methods to start, stop and resume
* a setInterval functionality
*/
var IntervalController = new Class({
  _started: false ...

read the full post


Django chained selects with mootools

django forms mootools tips

Notice!

A due specification here!
Such method works, but IMHO should not be used with a large amount of data, since it uses a js mapping array, but is simple and requires a few lines of code, so why not to use it when we have a controlled set of data?

Introduction

This is just yet another method to implement chained (cascading) selects in django forms. I'm focusing here on the frontend form construction, not the admin area. If you're interested in the admin area instead, please take a look here.

Scenario

Imagine we have such models:

class ...

read the full post


Calculator mootools plugin

calculator math mootools

Some days ago I was developing a library to show and run mathematics exercises on the web, and I needed a simple calculator widget.

A search in the mootools forge led to 0 results, so I decided to write my own plugin, also because I needed only some basics operations (sum, difference, multiplication, division, percentage, pow and sqrt).

The result is the Calculator plugin, now available on the mootools forge.

demo

Such plugin let's you create a calculator instance ...

read the full post


Reverse selector engineering with mootools

css javascript mootools selectors

What if you need to get the css selector which targets a DOM element given the element itself?

This is the case for example when you want to store some added information over an element and show it after recharging the page. In this case you may store the information in the local storage object together with the path to the element, in other words you must be able to store the element position inside the DOM

In this scenario ...

read the full post


Development of a preview functionality with canvas

canvas javascript mootools

Do you remember the last post about canvas dealing with undo and redo functionality?

Now we'll see how to add a preview functionality, that is I want to see my straight line, or my circle, while keeping pressed the left mouse button and moving the pointer to change the shape size.

The first, bad, idea

Initially I thought that the way was to store the portion of canvas interested by the modification and restore it in the next mousemove call, so that the mousemove function has to respect the following flow:

  • restore the previous saved state
  • save the state of the portion of the canvas that now will be drawed
  • draw the new state

Such flow works, but doesn ...

read the full post


Your Smartwatch Loves Tasker!

Your Smartwatch Loves Tasker!

Now available for purchase!

Featured