RaphaelJS 2.0 onDragOver limitation


New RaphaelJs 2.0 provides a function to detect if an element is being dragged over another element. It’s called onDragOver and is a shortcut for drag.over.<id> event.

It works very well for 2 elements being directly on top of each other. But if a third element appears in between then unfortunately events are not firing any more. According to the source code it was intentional and I guess functionality is not going to be extended any time soon.

This is a major problem if you have several cascading elements and you need to fire an event on each of them. Unfortunately Element.hover() event is not fired while drag and drop either (at least not in FF that I used for testing).

The only solution I found so far is to use Element.drag() with Element.getBBox() method and compare coordinates myself to determine whether mouse is inside the element “box”. It’s a very ugly solution especially if elements are not of a simple rectangular shape. Otherwise the only option I can see is to check if a dot is inside the polygon etc.

If you have any ideas on better solution please let me know!

1 Comment

Posted by on August 15, 2011 in RaphaelJS


Tags: , , ,

ExtJs: radio buttons are not clickable sometimes…

Radio buttons

Just came across this issue when ExtJs radio buttons are not selectable for some reason.

My initial setup was the following:

{ xtype: 'radiogroup', columns: 1,  fieldLabel: "Languages", autoWidth:true, 
  items: [
      {boxLabel: "Default", name: 'language', inputValue: 'D', id: 'defaultLang', checked: true},
      {boxLabel: "Order", name: 'language', inputValue: 'C', id: 'orderLang'},
      {boxLabel: "Other", name: 'language', inputValue: '0', id: 'otherLang'}

It’s very basic and I spent hours trying to figure out why only last option gets selected no matter what radio button I click.

Long story short – value of “0” in the last radio button causes the issue. There must be something with mixing numeric and non-numeric types of values. And numeric are give the priority.

So changing the value to the same type as other values fixes the issue.

P.S. fond the same issue addressed on StackOverflow

Leave a comment

Posted by on August 12, 2011 in Sencha


Tags: , , ,

RaphaelJS simple text align

Recently I noticed lots of questions on StackOverFlow regarding text alignment in RaphaelJS.

By default RaphaelJS alignes text to the middle as you can see on the image below:

default middle text alignment

To align text to the left you set text-anchor attribute to “start”. Or to “end” to align text to the right.

R.text(50, 100, 'Some text goes here').attr({'font-size': 11, 'text-anchor': 'start'});

Result – text aligned to the left:

text aligned to the left

Leave a comment

Posted by on July 27, 2011 in RaphaelJS



Django send_mail “Connection refused” on MacOS X

Connection refused

If you are getting “Connection refused” error message when trying to send an email from Django with send_mail then one thing to check is whether Postfix is running on your Mac OS X.

For that try the following in the terminal:

sudo postfix status

If Postfix is not running then start it.

postfix/postfix-script: the Postfix mail system is not running

sudo postfix start
postfix/postfix-script: starting the Postfix mail system

This should solve the problem (assuming email settings are correct). For example for localhost:

EMAIL_HOST = 'localhost'

For debugging purposes you could use a local smtp server:

python -m smtpd -n -c DebuggingServer localhost:1025

Try to send an email with Django and you should see it in your terminal:

---------- MESSAGE FOLLOWS ----------
Content-Type: text/plain; charset="utf-8"
MIME-Version: 1.0
Content-Transfer-Encoding: quoted-printable
Subject: Subject here
Date: Sat, 28 May 2011 18:31:04 -0000
Message-ID: <20110528183104.11696.10011@dasha-salos-macbook-pro.local>

Here is the message.
------------ END MESSAGE ------------

You can find more info on testing Django email in the documentation.

Leave a comment

Posted by on May 29, 2011 in misc


Tags: , ,

Turn jQuery slider into a switch

jQuery slider
jQuery slider

Three simple steps to turn jQuery UI slider into a switch.

1. Create HTML structure of the slider:

<span id="slider">
    <label id="on">GapAd ON<img src="/media/images/vsep.png"></label>
    <label id="off">GapAd OFF<img src="/media/images/vsep.png"></label>

2. Initialise jQuery slider object with two positions – on (zero) and one (off). And assign a handler for “slide” event that will change slider image depending on switch state.

$( "#slider" ).slider({
    value: 0,
    min: 0,
    max: 1,
    step: 1,
    slide: function( event, ui ) {
        if (ui.value == 0) {
        } else {

3. Now make a slider look a bit more like a switch with use of some CSS:

#slider {
    width: 170px; 
    background: #d6d5d5; 
    height: 3px; 
    position: relative; 
    display: block; 
#slider .ui-slider-handle {
    top: -16px; 
    background: url('/media/images/on.png') 0 0 no-repeat; 
    border: 0; 
    width: 35px; 
    height: 35px; 
    left: 20px;
/* styling for the labels */    
#slider #on { position: absolute; ... }
#slider #off {position: absolute; ... }

In the end you should get something like on the picture in the beginning of the post.


Posted by on May 28, 2011 in CSS


Tags: , ,

%d bloggers like this: