0

I have a grid that when some cell is clicked, it blinks (thanks to cyclicFade jQuery plugin). I need to stop blink the cell when I click in another one. You can see the complete markup here.

$(".color").click(function () {
    $("#colorPicker").show();
    var number = $(this).attr('id').substr(1);
    var selected = $(this).attr('class');
    if (selected != 'color selected') {
        $('#n'+numero).css({
            'background-color':'#000',
            'border':'1px solid black',
            'margin-top':'0px',
            'margin-left':'0px'}).attr({'class': "color s"});
        var numeroCelda = Number(Number(numero)+1);
        $('#numero').replaceWith('<span id="numero">'+numeroCelda+'</span>');
     }
     $(this).cyclicFade({params: [
         {fadeout:1000, stayout:80, opout:0, fadein:1000, stayin:80, opin:1.0}]
     });    
     return numero;
});

How I could know what was the last element clicked and pass it to the function in order to switch cyclicFade off in that specific cell? Something like this:

$(lastclicked).cyclicFade(stop);

Thanks in advance.

Manu
  • 563
  • 1
  • 5
  • 18
  • 1
    @eme What is `numero`? Did you mean `number`? – Šime Vidas Jun 01 '11 at 23:31
  • @eme What's with the `'class': "color s"`, and all those css properties? Why do you add them only when the cell is selected? Couldn't you place those properties inside the `.selected` CSS rule? – Šime Vidas Jun 01 '11 at 23:50
  • @eme And why is the params property an array with only one element which is an object? Couldn't you set params to be the object in the first place? – Šime Vidas Jun 01 '11 at 23:52
  • @Šime Vidas the css properties are added with jQuery because I want to control the whole process in the same way. About the params property, I did not write the plugin, so I can't answer that... – Manu Jun 02 '11 at 00:05
  • @eme_dlr: There are quite a few problems in the code you linked to. I've knocked it about a bit at http://jsfiddle.net/rob_cowie/K5267/9/embedded/result/. Click the edit button top right of the screen to see the modified javascript. I've tried to keep the modifications simple and the method of operation the same. – Rob Cowie Jun 02 '11 at 00:44
  • @Rob Cowie: Oh, Rob, thank you very much. Very instructive. I really appreciate your time and effort. It helps me to understand a little more what I'm doing (since I am completely new to jQuery). – Manu Jun 02 '11 at 13:51
  • @Rob Cowie: by the way, it is possible to limit (or to lock) the number of squares you pick, to avoid multiple selection? The aim of this is to select just one cell (but with the chance to change it if you change your mind about the color or about position). – Manu Jun 02 '11 at 13:56
  • @eme_dlr: no problem. Add a comment here with my name tagged if you need any questions answering about it. – Rob Cowie Jun 02 '11 at 13:56
  • @eme_dlr: Yeah; On selection of a colour from the swatch, add a `coloured` class (or whatever you want to call it). On click of a square, reset the background colour of any square with the `coloured` class, and remove the class. See http://jsfiddle.net/rob_cowie/MXFKy/3/ – Rob Cowie Jun 02 '11 at 14:03
  • @Rob Cowie: hey, mate, thanks again, you're clarifying me all the stuff I've got in my mind, but I couldn't put in jQuery. Now I am going to start to work hard (maybe I write you with more questions...). Thanks a lot! – Manu Jun 02 '11 at 14:15
  • @Rob Cowie:hi! i've just posted a few comments in your jsfiddle sandbox. – Manu Jun 02 '11 at 23:24
  • Sorry @eme_dlr, I can't find any comments? Can you post a url – Rob Cowie Jun 03 '11 at 16:25
  • @Rob, I posted it via disqus, may you moderate it? http://disqus.com/eme_dlr/ – Manu Jun 05 '11 at 15:05
  • @eme_dlr. I can't find any comments on http://jsfiddle.net/rob_cowie/MXFKy/3/. Your disqus page doesn't list any either. Not really sure if there is anything I can do. Feel free to post some again though. – Rob Cowie Jun 05 '11 at 20:13
  • @Rob. My fault... I think that I deleted it... I just wanna comment that I made 2 little changes in the code: the first one is that I removed the function removeClass, to avoid remove class 'marcado' from the square is selected. This is because the aim is to let the user change the color if he changes his mind. Anyway, I added some features too, you can see it here: http://www.twohundredandsixteencolors.com/demo/ by the way, if you're interested in this project, I will mail you when it's finished, with more info. Now I'm doing the backend (on php) thanks again! cheers! – Manu Jun 05 '11 at 23:47
  • @eme_dlr Looks good. An email would be good, to the address on my Stackoverflow user page. Cheers. – Rob Cowie Jun 06 '11 at 10:44
  • @Rob hey! sorry for writting you here, but I cannot find your email address. I have a new problem here: I made an AJAX request to handle the backend and insert the data in the database via PHP/MySQL. The problem is when the AJAX request is done, I can't control the clicable elements, the square you've just clicked and selected to send it, you are still able to click it (and you should not). I try to do this http://stackoverflow.com/questions/562229/how-to-trigger-ready-in-jquery, but it doesn't work... any ideas? http://www.twohundredandsixteencolors.com/demo/ thanks a lot! – Manu Jun 12 '11 at 01:49
  • @eme_dlr My email address is on my stackoverflow user page http://stackoverflow.com/users/46690/rob-cowie. Feel free to email with the details of what you want to achieve on ajax success; I'm sure it's not difficult I'm just not that sure what you want to do. – Rob Cowie Jun 12 '11 at 11:52
  • sorry @Rob but I can see it in your user page. I suppose that it's hide because the privacy. You may write me to my Gmail account, at mgmerino. Thanks a lot. – Manu Jun 12 '11 at 18:57

1 Answers1

0

In your click handler add:

$('.lastClicked').cyclicFade(stop);
$('.lastClicked').removeClass('lastClicked');
$(this).addClass('lastClicked');

It should be enough.

K

kwicher
  • 2,092
  • 1
  • 19
  • 28
  • Wow, now I really feel silly. Sorry for this simple question. Thanks for your time! – Manu Jun 01 '11 at 23:46