Tuesday, April 2, 2013

Shorten Your Page Content with Pop-Overs!

Content-heavy web pages can get really long, really fast. There are some ways you can embed small web pages into your website (or hints/tips for pieces of content) with jQuery.

Pop-over windows are an easy way for people to quickly get more information about anything on your webpage, without them leaving the page. We use them on AYSO.org to show video content, or give a little extra information on a “Learn More” link. These pop-over windows are called a lightbox, and there are many different versions of code out there to use. AYSO’s National Office uses the lightbox called Fancybox. It works with images (for an image gallery), inline text, iFrames, Flash files, Google Maps and YouTube. It has been tested on every browser too, so you know it works. You can view demos of Fancybox and download the code here.

Tool Tips are another easy to give just a tidbit of information. We have used Tool Tips on the Section Meeting microsite (on the Agenda page). If you hover over the information icon, you will see a description of the course in a Tool Tip. You can use these to give a quick description or tidbit of information to your users. We used the Tip Tip jQuery plugin, as it’s really easy to implement and looks nice and clean on your page. It’s also very small and doesn’t use any images, so it loads nice and fast. You can learn more about Tip Tip here.

Have any questions? Ask them in the comments!

No comments:

Post a Comment