title: Jquery Plugin not working in Chrome - jCapSLide
body: <p>The following JQuery plug in is working fine in IE and Firefox, but is not functioning in Chrome. Chrome is not recognizing the plugin at all, and the captions are located below the image. They are supposed to appear on top of the image and have a sliding effect.</p>
  
  <p><a href="http://tympanus.net/codrops/2009/11/23/jcapslide-a-jquery-image-caption-plugin/" rel="nofollow">http://tympanus.net/codrops/2009/11/23/jcapslide-a-jquery-image-caption-plugin/</a></p>
  
  <p>Any ideas as to why it wouldn't work in Chrome? Any thoughts would be appreciated!</p>
  
  <p>Here is my code:</p>
  
  <pre><code>   &lt;div class="demo"&gt;
              &lt;div id="capslide_img_cont" class="ic_container" style="margin-right: 22px;"&gt;
                  &lt;img src="/IC/images/modular-homes.jpg" alt=""/&gt;
                  &lt;div class="overlay" style="display:none;"&gt;&lt;/div&gt;
                  &lt;div class="ic_caption"&gt;
  
                      &lt;h3&gt;MODULAR HOMES&lt;/h3&gt;
                      &lt;p class="ic_text"&gt;
                        Modular Homes are built in a factory environment to state and local building codes. &lt;br&gt;&lt;br&gt;
                        &lt;a href="/home-plans-and-photos/modular-homes"&gt;Learn more about modular homes &gt;&gt;&lt;/a&gt;
  
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
             &lt;div class="demo"&gt;
              &lt;div id="capslide_img_cont2" class="ic_container" style="margin-right: 22px;"&gt;
                  &lt;img src="/IC/images/manufactured-homes.jpg"  alt=""/&gt;
                  &lt;div class="overlay" style="display:none;"&gt;&lt;/div&gt;
                  &lt;div class="ic_caption"&gt;
  
                      &lt;h3&gt;MANUFACTURED HOMES&lt;/h3&gt;
                      &lt;p class="ic_text"&gt;
                         Manufactured Homes are built in a factory envirnment to the federal HUD building code. &lt;br&gt;&lt;br&gt;
                         &lt;a href="/home-plans-and-photos/manufactured--homes"&gt;Learn more about manufactured homes &gt;&gt;&lt;/a&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
  
          &lt;div class="demo"&gt;
              &lt;div id="capslide_img_cont3" class="ic_container" style="margin-right: 0px;"&gt;
                  &lt;img src="/IC/images/park-model-homes.jpg"  alt=""/&gt;
                  &lt;div class="overlay" style="display:none;"&gt;&lt;/div&gt;
                  &lt;div class="ic_caption"&gt;
  
                      &lt;h3&gt;PARK MODEL HOMES&lt;/h3&gt;
                      &lt;p class="ic_text"&gt;
                         Park Model Homes are built in a factory envirnoment to the ANSI code. &lt;br&gt;&lt;br&gt;
                         &lt;a href="/home-plans-and-photos/park-model-homes"&gt;Learn more about park model homes &gt;&gt;&lt;/a&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
    &lt;div style="clear: both;"&gt;&lt;/div&gt;
  
  
  
          &lt;div class="demo"&gt;
              &lt;div id="capslide_img_cont4" class="ic_container" style="margin-right: 22px;"&gt;
                  &lt;img src="/IC/images/Manufactured-Home-Map.jpg"  alt=""/&gt;
                  &lt;div class="overlay" style="display:none;"&gt;&lt;/div&gt;
                  &lt;div class="ic_caption"&gt;
  
                      &lt;h3&gt;FIND A RETAILER&lt;/h3&gt;
                      &lt;p class="ic_text"&gt;
                         There's no better place to find the home of your dreams than at a Champion retail sales center. &lt;br&gt;&lt;br&gt;
                         &lt;a href="/where-to-buy"&gt;Search for retailer in your area &gt;&gt;&lt;/a&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
             &lt;div class="demo"&gt;
              &lt;div id="capslide_img_cont5" class="ic_container" style="margin-right: 22px;"&gt;
                  &lt;img src="/IC/images/about-champion-home-builders.jpg"  alt=""/&gt;
                  &lt;div class="overlay" style="display:none;"&gt;&lt;/div&gt;
                  &lt;div class="ic_caption"&gt;
  
                      &lt;h3&gt;ABOUT CHAMPION&lt;/h3&gt;
                      &lt;p class="ic_text"&gt;
                       Throughout our long history, Champion has been acknowledged as a leader in the manufactured housing industry and one of the largest modular homebuilders in North America. &lt;br&gt;&lt;br&gt;
                       &lt;a href="/about-champion"&gt;Learn more about Champion &gt;&gt;&lt;/a&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
             &lt;div class="demo"&gt;
              &lt;div id="capslide_img_cont6" class="ic_container" style="margin-right: 0px;"&gt;
                  &lt;img src="/IC/images/home-buyers-guide.jpg"  alt=""/&gt;
                  &lt;div class="overlay" style="display:none;"&gt;&lt;/div&gt;
                  &lt;div class="ic_caption"&gt;
  
                      &lt;h3&gt;HOMEBUYERS GUIDE&lt;/h3&gt;
                      &lt;p class="ic_text"&gt;
                         Champion and our independent retailers and builders are committed to making your new home buying experience enjoyable and as stress free as possible. &lt;br&gt;&lt;br&gt;
                         &lt;a href="/where-to-buy/home-buying-guide"&gt;Learn more about the homebuying process &gt;&gt;&lt;/a&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
     &lt;div style="clear: both;"&gt;&lt;/div&gt;
      &lt;hr /&gt;
      &lt;h2 style="color: #0092b8"&gt;Manufactured, Modular and Mobile Home Manufacturers &lt;/h2&gt;
      &lt;p&gt;Champion Home Builders, a lead manufacturer of manufactured, mobile and modular homes, provides a wide variety of factory-built solutions- from single-family and multi-family modular homes, to commercial and government buildings. Our mobile, modular and manufactured homes are distributed through a large network of communities, retailers and builders. As a result, you’ll find Champion-built structures in rural neighborhoods, urban districts and everywhere in between. &lt;/p&gt;
  
      &lt;p&gt;Explore our site to learn more about all of our modular, manufactured and mobile home options including: Manufactured and Mobile Homes, Modular Homes, Single-Family Modular Homes, and Multi-Family Modular Homes. Visit Our Commercial Modular Site to learn more about our modular construction process. &lt;/p&gt;
      &lt;hr /&gt;
  
  
  
      &lt;script type="text/javascript" src="jquery-1.3.2.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.capSlide.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(function() {
              $("#capslide_img_cont").capslide({
                     caption_color    : '#fff',
                  caption_bgcolor : '#bd2736',
                  overlay_bgcolor : '#bd2736',
                  border          : '',
                  showcaption     : true
              });
              $("#capslide_img_cont2").capslide({
                      caption_color   : '#fff',
                  caption_bgcolor : '#bd2736',
                  overlay_bgcolor : '#bd2736',
                  border          : '',
                  showcaption     : true
              });
              $("#capslide_img_cont3").capslide({
                        caption_color : '#fff',
                  caption_bgcolor : '#bd2736',
                  overlay_bgcolor : '#bd2736',
                  border          : '',
                  showcaption     : true
              });
              $("#capslide_img_cont4").capslide({
                caption_color : '#fff',
                  caption_bgcolor : '#bd2736',
                  overlay_bgcolor : '#bd2736',
                  border          : '',
                  showcaption     : true
              });
              $("#capslide_img_cont5").capslide({
                  caption_color   : '#fff',
                  caption_bgcolor : '#bd2736',
                  overlay_bgcolor : '#bd2736',
                  border          : '',
                  showcaption     : true
              });
              $("#capslide_img_cont6").capslide({
               caption_color  : '#fff',
                  caption_bgcolor : '#bd2736',
                  overlay_bgcolor : '#bd2736',
                  border          : '',
                  showcaption     : true
              });
  
  
          });
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here is the Javascript:</p>
  
  <pre><code>(function($) {
  $.fn.capslide = function(options) {
      var opts = $.extend({}, $.fn.capslide.defaults, options);
      return this.each(function() {
          $this = $(this);
          var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
  
          if(!o.showcaption)  $this.find('.ic_caption').css('display','none');
          else $this.find('.ic_text').css('display','none');
  
          var _img = $this.find('img:first');
          var w = _img.css('width');
          var h = _img.css('height');
          $('.ic_caption',$this).css({'color':o.caption_color,'background-color':o.caption_bgcolor,'bottom':'0px','width':w});
          $('.overlay',$this).css('background-color',o.overlay_bgcolor);
          $this.css({'width':w , 'height':h, 'border':o.border});
          $this.hover(
              function () {
                  if((navigator.appVersion).indexOf('MSIE 7.0') &gt; 0)
                  $('.overlay',$(this)).show();
                  else
                  $('.overlay',$(this)).fadeIn();
                  if(!o.showcaption)
                      $(this).find('.ic_caption').slideDown(500);
                  else
                      $('.ic_text',$(this)).slideDown(500);   
              },
              function () {
                  if((navigator.appVersion).indexOf('MSIE 7.0') &gt; 0)
                  $('.overlay',$(this)).hide();
                  else
                  $('.overlay',$(this)).fadeOut();
                  if(!o.showcaption)
                      $(this).find('.ic_caption').slideUp(200);
                  else
                      $('.ic_text',$(this)).slideUp(200);
              }
          );
      });
  };
  $.fn.capslide.defaults = {
      caption_color   : 'white',
      caption_bgcolor : 'black',
      overlay_bgcolor : 'blue',
      border          : '1px solid #fff',
      showcaption     : true
  };
  })(jQuery);
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>&lt;style&gt;
  .demo{
  float:left;
  }
  .sixpack{
  margin-top: 25px;
  }
  .ic_container{
  vertical-align:baseline;
  margin-bottom:20px;
  position:relative;
  /*-moz-border-radius:10px;
  -webkit-border-radius:10px;
  -khtml-border-radius:10px;
  -moz-box-shadow: 0 1px 3px #888;
  -webkit-box-shadow: 0 1px 3px #888;*/
  }
  .overlay{
  opacity:0.3;
  position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  }
  .ic_caption{
  position:absolute;
  overflow:hidden;
  margin:0px;
  padding:5px 0px 0px 0px;
  left:0px;
  right:0px;
  cursor:default;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
  }
  .ic_category{
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:3px;
  padding:5px;
  margin:0px;
  }
  .ic_caption h3{
  padding:0px 5px 5px 5px;
  margin:0px;
  font-size:18px;
  }
  .ic_text{
  padding:5px;
  margin:0px;
  text-align:justify;
  font-size:11px;
  }
  </code></pre>
  
  <p></p>