Hovers, Lightboxes or Clever CSS?

Widget Ical Event Descriptions are tricky things – they could be long or short, containing plain text or html – they may even have links inside the text.

The default widget in the plugin, assumes that you are not going to show the description directly.  As of version 2.6 there are now more options.

Description on hover over event summary

If a description exists, the widget offers it  as a link title hover text.  The Event URl is expected to provide the link.  In some cases there will be no event url, a calendar page or default url option is provided.

No link?

If there is really no link, a dummy bookmark with a “info” cursor is used to indicate  that this is a information hover, not a link hover.

Descriptive text with html below and clever css

If your descriptive text uses html or is more lengthy than is easily viewed as hover text, then consider either

1. defining a calendar page to support the widget.  Event links in the widget can be setup to jump over to the event in the calendar page, or
2. adding the description to the widget and initially hiding it with css.  It can then be displayed on a hover over the event record.

Hover to the next event

Descriptive text visible on row hover

• Add the description field to your list type
• Then add css to hide that field unless the cursor is hovering over that table record.
• Icallist26.ccs is provided in the configuration for an easy option, or one could add the code below to your theme

How to choose another css file

* css based description hide/display */

#wcompprop0 tr .description  {display:none; z-index:-1;} 

#wcompprop0 tr   { position:relative;}

#wcompprop0 tr:hover .description
{
 background:#fff;
 color: #111;
 opacity: 0.9;
 display:block; width: 90%;
 position:relative;
 right:1px; top:10px;
 z-index:100;
 margin:0 0 10px 0;
 padding:2%;
 overflow: none;
}

Disclaimer

You should thoroughly test all css code yourself and it’s impact in different browsers and with different content.  For example I have found that long urls (ie: content to big for the sidebar) is a problem in some older themes.  It is also handled differently by the browers.  Firefox =, IE 8 and safari seem to work acceptably with the above code.

Lightbox ?

One person has requested a lightbox type pop up, but I am concerned that this is a bit of overkill?   I may come back to this later.