Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Calendar & Events > Event Widget - Add Status Icon
Mottie (SuperAdmin) 4/6/2010 3:41 PM EST : Event Widget - Add Status Icon
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Event Widget - Add Status Icon

GuildPortal admin site link to the original post

This script adds a status icon to the event widget. So a quick glance will show your signup status for each event. Hovering over the icon will show a tooltip with the actual status text.

 Key
Alternate
Available
Cancelled
Confirmed
Tentative
Wait List
undefined

This script was added on to the same external file as the Event Widget - Add Signups to Tooltip script (as well as a few others) to reduce the number of files you need to load. Add the following script to a Free Form Text/HTML type widget on the same page as your Upcoming Events 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.

Default settings
(basic setup using all default values)
<style type="text/css">
#tooltip .signups td { padding:
5px; }
</style>
<script type="text/javascript" src="/GuildFiles/258012/events-posts-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
/* add event status icon */
 addStatusIcon();
})
</script>
With other event scripts
(using the hiding elements script to hide events that are too far in the future, adding signups lists to the tooltip and it includes standard options for this status icon script)
<style type="text/css">
#tooltip .signups td { padding: 5px; }
.event-status-icon { vertical-align: middle; float: right; padding: 3px; }
</style>
<script src="/GuildFiles/258012/events-posts-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 
/* add signup info to event tooltip, default setup */
 showSignups();
 /* hide events too far in the future, default setup */
 hideNewEvents();
 /* add event status icon */
 addStatusIcon({
  tooltipWidth : 150,
  noStatusText : "You didn't sign up!"
 });
})
</script>

Change Status Icons
(If you want to change the icons in this script, add the following variables. One variable has the options and the second has the status name with the icon url)
<style type="text/css">
.event-status-icon { vertical-align: middle; float: right; padding: 3px; }
</style>
<script src="/GuildFiles/258012/events-posts-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 var options = {
  tooltipWidth : 150,
  noStatusText : "You didn't sign up!"
 };
 var statusImages = {
  'Alternate' : 'http://www.axiomfiles.com/Files/278466/icon-status-alternate.png',
  'Available' : 'http://www.axiomfiles.com/Files/278466/icon-status-available.png',
  'Cancelled' : 'http://www.axiomfiles.com/Files/278466/icon-status-cancelled.png',
  'Confirmed' : 'http://www.axiomfiles.com/Files/278466/icon-status-confirmed.png',
  'Tentative' : 'http://www.axiomfiles.com/Files/278466/icon-status-tentative.png',
  'Wait List' : 'http://www.axiomfiles.com/Files/278466/icon-status-waitlist.png',
  'undefined' : 'http://www.axiomfiles.com/Files/278466/icon-status-notfound.png'
 };
 addStatusIcon( options, statusImages
);
})
</script>
Customizing
  • Please refer to the Events Widget - Hiding Elements post for additional information on how to customize setting for that script.
  • Please refer to the Event Widget - Add Signups to Tooltip post for additions options for that script.

  • This script include some CSS. You can float the image to the right as I have it in the example (in purple), or to the left. And adjust the spacing (padding) between the text and image by modifying the CSS value in red.
    .event-status-icon { vertical-align: middle; float: right; padding: 3px; }
  • Adjust the tooltip width by changing the "tooltipWidth" value in red, this value is in pixels.
  • Currently, if you haven't signed up for an event, it will show "Not Found" in the tooltip. You can change this to whatever text you want by changing the "noStatusText" value in blue.
  • If you want to add your own custom icons, you'll set up a variable (seen in the third script) that has the exact status text and your image url (in orange). The "addStatusIcon" function then needs to have both variables added to work properly.

    If a new status is ever added to GuildPortal, then you can easily add it by using the exact text of the status in quotes following the format above. For example, if a new status named "Event Full" is added, you can add an icon as follows (note that the example below doesn't change any options by using "{}")
    var statusImages = {
     "Event Full" : "http://myhost.com/some-image.gif"
    }
    ;
    addStatusIcon( {}, statusImages );
  • When you add a variable, make sure the last one in the list doesn't have a comma at the end. This doesn't cause a lot of problems except if you are using IE.
Edit (3/28/2012): Updated "addStatusIcon" script to show icons even if you aren't signed up for anything.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Midori (Norgannon) (Applicant) 4/6/2010 4:33 PM EST : RE: Event Widget - Add Status Icon
Midori (Norgannon)
Posts: 1252

0
Like

0
Dislike

cat-saying-hooray.jpg image by st_johnisland

Mottie, you are the best!  Thanks a ton, this is awesome!
TopBottom

Midori (Norgannon) (Applicant) 4/6/2010 9:06 PM EST : RE: Event Widget - Add Status Icon
Midori (Norgannon)
Posts: 1252

0
Like

0
Dislike

Hrmmmmm... the icons aren't showing up in Firefox, although they show in IE just fine.  Any ideas?
TopBottom

Mottie (SuperAdmin) 4/6/2010 10:58 PM EST : RE: Event Widget - Add Status Icon
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Midori!

The icons won't show up for three reasons:
  1. If you aren't logged in.
  2. If you haven't signed up for ANY events.
  3. The events you signed up for have all passed.
Could any of those reasons be the problem?
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Midori (Norgannon) (Applicant) 4/7/2010 1:29 AM EST : RE: Event Widget - Add Status Icon
Midori (Norgannon)
Posts: 1252

0
Like

0
Dislike

Weird, it's working on Firefox at home, but wasn't at work... and I wouldn't have been able to see the page if I were randomly logged out or something.  Bizarre.  Ah well, if it's specific to my work computer, I'm not bothered  Sorry for bugging you, Mottie!
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%