title: Responsive JavaScript – load/hide specific function related to browser width?
body: <p>first fo all: i'm not into JavaScript/JQuery! …but i will try to point out what i want to do.</p>
  
  <p>i'm using the fantastic bx-slider on my page and i made my website responsive via media queries which both works great so far. …but there are some features from the bx-slider-script which i don't want to get active on a specific browser-width. here's what i want:</p>
  
  <p>browser-width LOWER than 500px = load this function:</p>
  
  <pre><code>$('#slider4').bxSlider({
      minSlides: 2,
      maxSlides: 2,
      slideWidth: 230,
      slideMargin: 10,
      nextSelector: '#next',
      prevSelector: '#prev',
      infiniteLoop: false,
      hideControlOnEnd: true,
      pager: false,
      useCSS: false,
      easing: 'easeInOutExpo',
      speed: 1000
  });
  </code></pre>
  
  <p>browser-width HIGHER than 500px = hide the function above and load this one:</p>
  
  <pre><code>$('#slider4').bxSlider({
      minSlides: 4,
      maxSlides: 4,
      slideWidth: 230,
      slideMargin: 20,
      nextSelector: '#next',
      prevSelector: '#prev',
      infiniteLoop: false,
      hideControlOnEnd: true,
      pager: false,
      useCSS: false,
      easing: 'easeInOutExpo',
      speed: 1000
  });
  </code></pre>
  
  <p>…is that even possible in JavaScript? I tried some scripts which are using breaking points but it think my JS-knowledge is to weak to get this to work as i want. </p>
  
  <p>It would be great if there's someone out here which can show me how to do this easily!</p>