tags:

views:

128

answers:

2

I'm building an interface for marking dates on a calendar as being booked. The user 'paints' on the dates they want to mark as booked.

here's how it looks:

alt text

here are the functions:

function load_red_paint(){
    $('td').bind('mousedown', function(){
        $(this).addClass('booked');
        $('td').bind('mouseenter', function(){
            $(this).addClass('booked');
        });
    unbind_brush();
    })  
}

function unbind_brush(){
    $('td').bind('mouseup', function(){
        $('td').unbind('mouseenter');
    });
    $('table').bind('mouseleave', function(){
        $('td').unbind('mouseenter');
    });
}

the problem:

My unbind_brush() function works great except for if the user mouseup's outside of the calendar, in which case on returning to the calendar the brush is still 'painting'. I tried to fix this my also unbinding on mouseleave of that calendar with this bit:

$('table').bind('mouseleave', function(){
    $('td').unbind('mouseenter');
});

but with no joy, am i missing something obvious?!!!

edit: added html:

    <div class="table_wrap">
        <p class="table_title">Apr</p>
        <table cellpadding='10'>

            <tr class="col_titles">
                <td>S</td>
                <td>S</td>
                <td>M</td>
                <td>T</td>
                <td>W</td>

                <td>T</td>
                <td>F</td>
            </tr>   

            <tr>
            <td class='indent'> </td><td class='indent'> </td><td class='indent'> </td><td class='indent'> </td><td class='indent'> </td><td id='1270080000' class='past '> 01 </td><td id='1270166400' class='past '> 02 </td></tr><tr><td id='1270252800' class='past '> 03 </td><td id='1270339200' class='past '> 04 </td><td id='1270425600' class='past '> 05 </td><td id='1270512000' class='past '> 06 </td><td id='1270598400' class='past '> 07 </td><td id='1270684800' class='past '> 08 </td><td id='1270771200' class='past '> 09 </td></tr><tr><td id='1270857600' class='past '> 10 </td><td id='1270944000' class='past '> 11 </td><td id='1271030400' class='past '> 12 </td><td id='1271116800' class='past '> 13 </td><td id='1271203200' class='past '> 14 </td><td id='1271289600' class='past '> 15 </td><td id='1271376000' class='past '> 16 </td></tr><tr><td id='1271462400' class='past '> 17 </td><td id='1271548800' class='past '> 18 </td><td id='1271635200' class='past '> 19 </td><td id='1271721600' class='hand today '> 20 </td><td id='1271808000' class='hand '> 21 </td><td id='1271894400' class='hand '> 22 </td><td id='1271980800' class='hand '> 23 </td></tr><tr><td id='1272067200' class='hand '> 24 </td><td id='1272153600' class='hand '> 25 </td><td id='1272240000' class='hand '> 26 </td><td id='1272326400' class='hand '> 27 </td><td id='1272412800' class='hand '> 28 </td><td id='1272499200' class='hand '> 29 </td><td id='1272585600' class='hand '> 30 </td></tr><tr>          </tr>

        </table>
A: 

I am testing your code and it works fine. Check that you aren't accidentally using a cached old version of the code.

kgiannakakis
no luck with the cache clearing,have just tried chaning it to: $('body').bind('mouseup'.... but no better
Haroldo
A: 

worked out what it was big thanks tokgiannakakis, for making me look at the rest of the code.

I was unbinding somewhere else also so the events were clashing..

Haroldo