Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Calendar & Events > Event Widget - Add Signups to Tooltip
Mottie (SuperAdmin) 4/5/2010 1:42 AM EST : Event Widget - Add Signups to Tooltip
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Event Widget - Add Signups to Tooltip

GuildPortal admin site link to the original post

This script allows you to preview the calendar event signup table from the event widget or the main calendar! You can see exactly what it does in the screenshots below:

Events (Before) Events (After)

 Calendar

This script was added on to the same external file as the Events Widget - Hiding Elements script to reduce the number of files you need to load. Also, this makes adding it to your site very simple. Add the following script to a Free Form Text/HTML type widget on the same page as your Calendar and/or Event Widget (make sure the editor is in "Raw/Script" mode!), or add it to your Footer Area (Control Panel > Custom HTML & Script > Footer Area) to cover your entire site.

*NOTE* This script does require you to have the modified tooltip script installed.

Script
(basic setup using all default values)
<style type="text/css">
#tooltip .signups td { padding:
5px; }
/* event signup status coloring */
.Alternate, .Alternate a:link { color: #ff8000; }
.Available, .Available a:link { color: #00dd00; }
.Cancelled, .Cancelled a:link { color: #dd0000; text-decoration: line-through; }
.Confirmed, .Confirmed a:link { color: #0080dd; }
.Tentative, .Tentative a:link { color: #888888; }
.WaitList,  .WaitList a:link  { color: #dd00dd; }

</style>
<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/events-posts-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
/* add signup info to event tooltip */
 showSignups();
})
</script>
Script
(using hiding elements script to hide events that are too far in the future. It also shows all the options for this add signups to tooltip script)
<style type="text/css">
#tooltip .signups td { padding:
5px; }
/* event signup status coloring */
.Alternate, .Alternate a:link { color: #ff8000; }
.Available, .Available a:link { color: #00dd00; }
.Cancelled, .Cancelled a:link { color: #dd0000; text-decoration: line-through; }
.Confirmed, .Confirmed a:link { color: #0080dd; }
.Tentative, .Tentative a:link { color: #888888; }
.WaitList,  .WaitList a:link  { color: #dd00dd; }

</style>
<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/events-posts-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 /* hide events more than 3 months in the future */
 hideNewEvents({
  hideNewMonths:
3,   // hide events more than x # of months in the future
  hideUser:     
true // hide the user that added the event
 });
 
/* add signup info to event tooltip */
 showSignups({
  loadingImage : 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/loading6.gif',
  tooltipWidth : 350// Set width of the tooltip
  hideGPUser   : false,
// Hides GP User column, if set to true
  hideStatus   : false, // Hides Status column, if set to true
  hideRole     : false, // Hides role being filled, if set to true
  hideSignedUp : false
, // Hides Signed Up column, if set to true
  hideAdmin    : true// Hides Admin block, if set to true
  showTotal    : false, // Shows total number of signups
  styleRow     : false  // Event status add style to entire row, if set to true
 });
})
</script>
Customizing
  • Please refer to the Events Widget - Hiding Elements post for additional information on how to customize setting for that script.
  • In the CSS, you can add more or less padding to "#tooltip .signups td" (number of pixels in red). There isn't a different class for each table column, so setting the width may not be the best idea. The sign up table is wrapped in a div with the class "signups" so you can add styling as you desire (e.g. background color/image).
  • Change the loading image by adding "loadingImage" in the format seen above. Change the URL in orange to point to your image.
  • Adjust the tooltip width as needed. Make it wider if the contents overflow outside the tooltip wrapper, or more narrow if you decide to hide the role column. Change the number in red to adjust the tooltip width in pixels.
  • If your guild doesn't use the role filled status, then you can hide it by setting the "hideRole" value to true (in red).
  • I've updated the script, so you can now hide the GP user column, Status column and/or Signed up column by setting the appropriate variable to true (also in red).
  • Row styling has been added, change the "styleRow" variable to switch the row styling from the status only to the entire row. You also need to include the CSS for it to work.
Edit (4/5/2010): This script now works with the main calendar. Added a screen shot. You only need to include the script on the calendar page as well as the event widget page (just once if they are both on the same page).
Edit (4/6/2010): Added more variables so you can hide other columns in the tooltip & added a note about requiring the modified tooltip script.
Edit (4/8/2010): Added event status styling. All you need to do is add the CSS & change the "styleRow" variable.
Edit (7/2/2011): Added showTotal which adds the total number of signups to the top of the tooltip.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Midori (Norgannon) (Applicant) 4/5/2010 6:46 PM EST : RE: Event Widget - Add Signups to Tooltip
Midori (Norgannon)
Posts: 1252

0
Like

0
Dislike

Hey Mottie, I'm trying to get rid of the "Signed Up" column in the tooltip because it takes up a lot of room, but I can't figure out what that element is called.  It looks like it should be "added", according to the sorting things on the event page (sort=SUAdded as compared to sort=SURole or sort=SUUser), but adding hideAdded : true to the script doesn't do anything to the tooltip.  I also tried hideSignedUp and hideSigned with no luck.  Is this listed somewhere really obvious and I'm just missing it or what?  >_< 
TopBottom

Mottie (SuperAdmin) 4/6/2010 2:21 PM EST : RE: Event Widget - Add Signups to Tooltip
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Midori!

Hehe, nice try, but the sort parameter in the url isn't related to this script at all, sorry. Anyway, I've updated the script to add a "hideSignedUp" variable. I've added a few others, just in case (see the list in the top post. typer happy
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Midori (Norgannon) (Applicant) 4/6/2010 2:28 PM EST : RE: Event Widget - Add Signups to Tooltip
Midori (Norgannon)
Posts: 1252

0
Like

0
Dislike

Ohhh, I see... I'd missed that it was looking at the external file for the script, and thought you were doing some serious magic there.  I was so confused!  :blush:

Thanks a ton for adding that, Mottie!
TopBottom

Retsuaion (Applicant) 4/6/2010 3:37 PM EST : RE: Event Widget - Add Signups to Tooltip
Retsuaion
Posts: 12

0
Like

0
Dislike

www.daevasofpoo.guildportal.com

I've entered the code as in a Free Form Text/HTML widget on the Home page in order to apply the tooltips to the Events Widget on the left.
At the moment I'm getting cream text on a white background making it pretty difficult to read. Would this be due to the template/theme im using or do I need to add text and background colour code?
TopBottom

Mottie (SuperAdmin) 4/6/2010 3:44 PM EST : RE: Event Widget - Add Signups to Tooltip
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Retsuaion!

It sounds like you are missing the modified tooltip script and CSS. Add the following to your Footer Area (Control Panel > Custom HTML & Scripts > Footer Area)
<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2, #preview, #screenshot { color:#dddddd; background:#222222; border: 1px solid #333333; padding:5px; display:none; opacity: 0.9; filter: alpha(opacity=90); text-align:left; border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; }
</style>
<script src="http://www.axiomfiles.com/Files/258012/tooltip.js" type="text/javascript"></script>
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Retsuaion (Applicant) 4/6/2010 3:55 PM EST : RE: Event Widget - Add Signups to Tooltip
Retsuaion
Posts: 12

0
Like

0
Dislike

Thankyou Mottie!

That was spot on, don't know how I missed that I must have overlooked it if it was cross referenced in one of your tutorials on the guildportals site.
TopBottom

Mottie (SuperAdmin) 4/6/2010 4:43 PM EST : RE: Event Widget - Add Signups to Tooltip
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Retsuaion!

Nope you didn't miss it... I totally forgot to add a note about the tooltips. It's been updated. Sorry about that.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Midori (Norgannon) (Applicant) 4/8/2010 3:27 PM EST : RE: Event Widget - Add Signups to Tooltip
Midori (Norgannon)
Posts: 1252

0
Like

0
Dislike

Hey Mottie, how would I go about making the tooltip display color-coded by signup status, like the setup you have on the calendar here?
TopBottom

Mottie (SuperAdmin) 4/8/2010 4:43 PM EST : RE: Event Widget - Add Signups to Tooltip
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Midori!

I think you're trying to kill me hehe.... ok I've updated the script YAY!

All you need to do is add the CSS (I've added it to the original post) to style the status text or the entire row. You can choose which gets styled by modifying the "styleRow" variable (also in the original post).
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%