1

I'm working on my first jquery project and have a question regarding the simpletip plugin. I basically have a calendar where the user can click different meeting titles and the corresponding dates get shaded in with a certain color. I am then using the simpletip to display more detailed information about the meeting when the user hovers over that date.

What I want is for the simpletip to only display if the cell is colored in, or "on". When the calendar is blank and no meetings are activated, I don't want all the simpletips to show.

I have tried using an if statement with a .mouseover() - this works at first, when the cells are off, no simpletip. After the meeting is turned on and colored in, the first mouseover does nothing, then the second mouseover shows the simpletip, and then the simpletip remains active even after the cell is turned off.

        $("#jan3").mouseover(function() {
           if ( meeting1 = "on" ) {
              $(this).simpletip({  
                 content: '<b>Meeting</b><br/>&nbsp;9:00-11:00<br/>&nbsp;Some Room'
              });
           }
        });

Hope this makes sense... please help!

Thank you in advance

*EDIT: Here is an example of one of the buttons to turn a meeting on and off...

$(".button1").click(function() {  
   if ( meeting1 == "off" ) {
      $(".meeting1").stop().animate({ backgroundColor: "#009460", color: "white" }, 1000);
      $(".meeting1").css("cursor", "pointer");
      plsc = 'on';
   }
   else {
      $(".meeting1").stop().animate({ backgroundColor: "white", color: "black" }, 1000);
      $(".meeting1").css("cursor", "default");
      plsc = 'off';
   }
});
Michael
  • 33
  • 1
  • 5
  • I'm having the same problem and hammering on it hard; getting pretty confident it's a bug with SimpleTip. :( – Bane Sep 01 '11 at 23:35

1 Answers1

0

I'm not familiar with simpleTip, but the situation you're describing is familiar.

The easiest solution is to use classes to denote which entries are on/off. And register your simpletip function to those that are only on. You can use the jquery live to have the selector update itself with the states

    $("#jan3.stateOn").live('mouseover', function() {
          $(this).simpletip({  
             content: '<b>Meeting</b><br/>&nbsp;9:00-11:00<br/>&nbsp;Some Room'
          });
    });

This selector would fire if your ID is jan3 and that item has a class of stateOn. As long as you write code to toggle the states properly, jquery will take care of firing for the correct item.

JohnP
  • 49,507
  • 13
  • 108
  • 140
  • I think you have answered my question, I just don't know how haha - I'm quite a noob with jquery. So, right now I am using a variable for each different meeting which is "off" to begin with and then the buttons color the corresponding cell if "off" and then sets to "on". Are you saying I need to do this with css classes instead? – Michael Mar 18 '11 at 17:38
  • well it would be easier for you. In the code where you set the variables, just add `$(SELECTOR_FOR_BLOCK).addClass('stateOn');` and `.removeClass('stateOn');` to remove. This would take care of the css class bit. – JohnP Mar 18 '11 at 17:41
  • Is there a way to use the .addClass but still incorporate the .animate() so I can have the smooth fade in? – Michael Mar 18 '11 at 17:57
  • of course, the .addClass is just for markup to help the selector. You don't need to remove any of your existing code to put it in. It just makes your selectors do all the work – JohnP Mar 18 '11 at 17:58
  • Not sure if it is a problem with simpleTip but when I add the class ".on" with the button, and then use that selector in the simpleTip, it doesn't do anything... doesn't make sense... – Michael Mar 18 '11 at 18:30
  • Depends on what element you're adding the class `on` and what selector you're using on simpleTip. Give me a sec, I'll put an example up – JohnP Mar 18 '11 at 18:33
  • Yeah that's what I'm doing but same problem... works correctly when page first loads, cell is "off" and doesn't show tooltip. Then, after the button is clicked to ".addClass", the first mouseover does nothing, then the second mouseover works, but then the tooltip stays on even after a ".removeclass" is pressed. I'm thinking it may be something in the .simpleTip code. – Michael Mar 21 '11 at 15:41
  • @michael hard to say really, have you tried firebug and checkout the dom? you could also add breakboints and debug the code – JohnP Mar 21 '11 at 16:15