title: Making a jQuery cycle plugin become responsive to the layout pixels?
body: <p>This is my markup for a slideshow. As you can see in my stylesheet I am specifying the slideshow's height explicitly, but I would really like to avoid this, so that when I make the browser larger or smaller the slideshow size changes as well.</p>
  
  <pre><code>&lt;section class="contentSlider"&gt;
      &lt;section class="contentSliderControls"&gt;
          &lt;a href="#" class="controlPrev"&gt;Prev&lt;/a&gt;
          &lt;a href="#" class="controlNext"&gt;Next&lt;/a&gt;
          &lt;ul class="controlSlides"&gt;&lt;/ul&gt;
      &lt;/section&gt;
      &lt;ul class="slides"&gt;
          &lt;li&gt;&lt;img class="sliderImage" src="/images/sliderContent_1.png" alt="" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img class="sliderImage" src="/images/sliderContent_1.png" alt="" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img class="sliderImage" src="/images/sliderContent_1.png" alt="" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img class="sliderImage" src="/images/sliderContent_1.png" alt="" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img class="sliderImage" src="/images/sliderContent_1.png" alt="" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img class="sliderImage" src="/images/sliderContent_1.png" alt="" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img class="sliderImage" src="/images/sliderContent_1.png" alt="" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img class="sliderImage" src="/images/sliderContent_1.png" alt="" /&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>This is my javascript</p>
  
  <pre><code>$(function() {
      $('.slides').cycle({
          fx:      'scrollHorz',
          timeout:  0,
          prev:    '.contentSliderControls &gt; .controlPrev',
          next:    '.contentSliderControls &gt; .controlNext',
          pager:   '.contentSliderControls &gt; .controlSlides',
          pagerAnchorBuilder: pagerFactory
      });
  
  function pagerFactory(idx, slide) {
      return '&lt;li&gt;&lt;a href="#"&gt;'+(idx+1)+'&lt;/a&gt;&lt;/li&gt;';
      };
  });
  </code></pre>
  
  <p>and my css</p>
  
  <pre><code>/* Content Slider */
  
  .contentSlider {
  position: relative;
  }
  
  .contentSlider, .contentSlider &gt; .slides {
  height: 504px;
  }
  
  .controlSlides &gt; li {
  float: left;
  }
  
  .contentSlider &gt; .slides {
  z-index: 1;
  }
  
  .sliderImage {
  width: 100%;
  }
  
  .contentSliderControls {
  height: 504px;
  position: absolute;
  width: 100%;
  z-index: 2;
  }
  
  .contentSliderControls &gt; .controlPrev {
  background-color: #ffffff;
  color: #000000;
  display: block;
  float:left;
  height: 504px;
  opacity: .5;
  width: 10%;
  }
  
  .contentSliderControls &gt; .controlNext {
  background-color: #ffffff;
  color: #000000;
  display: block;
  float:right;
  height: 504px;
  opacity: .5;
  width: 10%;
  }
  </code></pre>
  
  <p>Any help is greatly appreciated </p>