abidibo.net

Posted in "javascript"

Bootstrap progress bar animation

bootstrap javascript tips

Boostrap progress bar is a nice component that comes in handy when loading async contents, large images or, for example, when rendering a complex google map.

But as is, it is quite useless if you want to implement a dynamic loader, which progress value changes over time. There are two major problems:

  1. when updating the value there is no animation, but just a jump to the new provided value;
  2. if the value updates are set immediately one after another, you ...

read the full post


Responsive menu for bootstrap

bootstrap css3 javascript jquery

This is a nice one.

Bootstrap is a nice framework, the great advantage of using it is that it saves you a lot of time while building a responsive web site (the same can be said of other css frameworks out there).
The drawback is that the web sites coming out in the last years very often looks the same, all of them have the same navbar and the same menu behavior which collapses for extra-small devices, showing a menu button which reveals the content when pressed.

A good way to differentiate your web site from the others could be a change in the menu collapsing behavior.

Datmenu is a nice responsive menu plugin for Wordpress, so the idea is ...

read the full post



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



How to get the mouseovered half of an element

events javascript

Today I'll write a very simple and short post about a very simple function that you can use to retrieve in which half (left/right) of an element the mouse is moving towards. The function is written in vanilla javascript, no frameworks are involved.

Given the element which captures the event and the event itself the function return the string 'left' or 'right' depending on the cursor position over the element.

/*
 * Gets the mouseovered half of an element
  ...

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


Javascript event dispatcher

javascript programming

Introduction

Too much time has passed since my last post, so today I'll write about a simple javascript component, an event dispatcher which allows two entities to communicate each other.

The simplest use case I can think of is the one in which we have an object which emits an event and another object which should listen to such event.

We could implement all the stuff without the event dispatcher, but then the two entities need to be coupled in ...

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


Your Smartwatch Loves Tasker!

Your Smartwatch Loves Tasker!

Now available for purchase!

Featured