Question

My jQuery slider does not work in Chrome. It only shows the navigation and no other DOM elements. Seems to work fine in Firefox.

I could use some assistance here. Thanks!

HTML:

<div id="featured-event">
  <div id="featured-event-in">
    <div class="event-listing"><a href="/content/annandale/courses/onlinelearning/taxprep.asp">
      <div class="event-caption">
        <h3>content</h3>
        <p>Learn More</p>
      </div>
      </a></div>
    <div class="event-listing"><a href="#"><img src="../images/catalog-ad.png" width="200"/>
      <div class="event-caption">
        <h3>content</h3>
        <p>test</p>
      </div>
      </a></div>
  </div>
</div>

JavaScript:

<script src="../../_assets/js/jquery-1.4.4.js" type="text/javascript"></script>
<script src="../../_assets/js/jquery.cycle.all.2.72.js" type="text/javascript">   </script>
  <script type ="text/javascript">
$(document).ready(function(){
    $('#featured-event-in').after('<div id="navCycle">').cycle({ 
        fx:      'scrollLeft', 
        speed:    300, 
        timeout:  3500,
        pause: 1,  
        next: '#next2', 
        pager: '#navCycle'
    });
})  

Answer 1

Add CSS height to the div (with ID ‘featured-event-in’).