Coda Bubble Plugin

• >> Configuration
• >> Instructions
• >> Demo

Author: Carlo Tasca
Version: 1.0
Date: July 12, 2009
License: GPL license
Plugin project link: http://plugins.jquery.com/project/codabubble
For help and comments:  http://programmissimo.blogspot.com/

Note: Plugin based on the great tutorial at http://jqueryfordesigners.com/coda-popup-bubbles/

Plugin Configuration

 * @param {array}    distances 
                     Distances of bubbles from their triggers 
                     
 * @param {array}    leftShifts
                     Left positions of bubbles
                     
 * @param {array}    bubbleTimes
                     Life times for bubbles
                     
 * @param {array}    hideDelays
                     Hide delay times for bubbles
                     
 * @param {array}    bubbleWidths
                     width for bubbles
                     
 * @param {string}   bubbleImagesPath
                     Path to skin for bubbles
                     
 * @param {boolean}  msieFix
                     Fix for IE png rendering. Replaces pngs with gifs if true. Default : true
                     
 * @param {boolean}  msiePop
                     If false removes bubbles in IE. Default : true

Coda Bubble Instructions

1. Download the zip file, unzip it and upload the coda_bubble folder to your server

2. Within the head section of a HTML document include the jQuery library, bubble.css and jquery.codabubble.js

   <link href="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/bubble.css" rel="stylesheet" type="text/css" media="all" />
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script>
   <script type="text/javascript" src="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"></script>
      

3. On DOM ready set up configuration options for each bubble. The code below sets up the scenario for two bubbles

   <script type="text/javascript">
   $(function(){
      opts = {
         distances : [40,40],
         leftShifts : [-30,-30],
         bubbleTimes : [400,400],
         hideDelays : [0,0],
         bubbleWidths : [200,200],
         bubbleImagesPath : "YOUR RELATIVE PATH TO SKIN FOLDER",
         msieFix : true
      };
      $('.coda_bubble').codaBubble(opts);
   });
   </script>  
      

4. In the body section use the following code for each bubble.

   Note: css class .trigger has not been defined in bubble.css.

       <div class="coda_bubble">
           <div>
               <p class="trigger">Trigger Bubble</p>
           </div>
           <div class="bubble_html">
              [BUBBLE CONTENT]
           </div>
       </div>
         

That's it! Enjoy.