title: Nivoslider: change width and height of slider afterwards
body: <p>I'm developing a mobile version of a TYPO3 site. There I use the plugin <code>nivoslider</code> which uses the official known Nivo Slider. Now I have to reduce the size of the slider. How can I reach this?</p>
  
  <p>In TYPO3 there is a setting on the plugin page with width and height but this would affect also the full size website. Because there is no manual I don't think I can use Typoscript to set the width and the height afterwards.</p>
  
  <p>I tried to set the width with CSS</p>
  
  <pre><code>.nivoSlider {
      width: 300px !important;
      height: auto !important;
  }
  
  .nivoSlider img {
      width: 300px !important;
      height: auto !important;
  }
  </code></pre>
  
  <p>but when the slider is loaded it uses the normal size of the pictures. Only the slider container itself is cropping the images but it has a wrong height (only dots and a small part of the image can be seen).</p>
  
  <p>I also tried to look into the documentation to see if I could set the width and the height somehow. But I didn't found any settings. Are there any javascript/jquery solutions I could use? This doesn't work:</p>
  
  <pre><code>$(document).ready(function() {
  
    $('.nivoslider img').each(function(index, element){
      alert('test');
      $(this).width(300);
      var src = $(this).attr("src");
      src = 'fileadmin/templates/timthumb/timthumb.php?src=' + src + '&amp;w=300';
      $(this).attr("src", src);
    });
  });
  </code></pre>
  
  <p>It seems that <code>.nivoslider</code> is built afterwards, but my code is executed before. This is the confirmation:</p>
  
  <pre><code>  if ($('.nivoslider').length != 0) {
      alert('element found');
    }else{
      alert('element NOT found');
    }
  </code></pre>
  
  <p>The code above gives me <code>element NOT found</code>, because the initialisation of extension is at the end of the <code>header</code> and my code is before. How can I include Javascript code at the end of the header in TYPO3?</p>
  
  <p>Now I think I will use this CSS, because I don't see any solution:</p>
  
  <p><code>.nivoslider {
      display: none;
  }</code></p>