css media queries and javascript

Question

I have a project that has a horizontal jquery image carousel. The site is responsive and the carousel needs to have the images get slightly smaller at a certain screen width. I have been able to accomplish this within the css, but the carousel plugin has some javascript settings that I need to change to complete the responsiveness. I have figured out how to work in a media query to get the javascript to change appropriately on page load, but it does not work on resize. Every time I try to include code to change the images on resize the code breaks. Can anybody please help me adapt this code to also work on resize?...

<script type="text/javascript">

  $(window).load(function(){

  if (document.documentElement.clientWidth < 860) {

    $('.flexslider').flexslider({
      animation: "slide",
      animationLoop: false,
      itemWidth: 120,
      itemMargin: 5,
      pausePlay: false,
      start: function(slider){
        $('body').removeClass('loading');
      }
    });
    } 

    $('.flexslider').flexslider({
      animation: "slide",
      animationLoop: false,
      itemWidth: 160,
      itemMargin: 5,
      pausePlay: false,
      start: function(slider){
        $('body').removeClass('loading');
      }
    });

  });

</script>

Answer 1

Working Fiddle

Try this;

$(window).resize(function() {
    if (document.documentElement.clientWidth < 860) {
        // scripts here
    }
});

Check this out:

$(window).width() not the same as media query

According to your comment

Fiddle

var width = $(window).width();
if ((width < 860)) {
alert('Do first action');
} else {
alert('Do Second action');
}

good luck!

Answer 2

Try this instead of clientWidth,

if (screen.width < 860) {....}

Answer 3

$(window).resize(function() {
    if (screen.width < 860) {
        // i dont know if Im helping.
    }
});

Answer 4

Bind to them using on:

$(window).on("load resize",function(){
    // your code
});

Edit

Try using

$(window).bind("load resize", function(e) {
 // your code
});

Alternatively, instead of using .bind() you can use .on() as bind directly maps to on().

$(window).on("load resize", function(e) {
 // your code
});

function(e) it's the event object. You can read about it here

Your final result like this

<script type="text/javascript">

  $(window).on("load resize",function(e){

  if (document.documentElement.clientWidth < 860) {

    $('.flexslider').flexslider({
      animation: "slide",
      animationLoop: false,
      itemWidth: 120,
      itemMargin: 5,
      pausePlay: false,
      start: function(slider){
        $('body').removeClass('loading');
      }
    });
    } 

    $('.flexslider').flexslider({
      animation: "slide",
      animationLoop: false,
      itemWidth: 160,
      itemMargin: 5,
      pausePlay: false,
      start: function(slider){
        $('body').removeClass('loading');
      }
    });

  });

</script>

Answer 5

Use $(document).ready(function() inside the window.resize() function.

I think problem is that @media-query and window.resize() are not synchronised. window.resize() should work after the media-query has done it work. hence use include $(document).ready(function() inside the window.resize(), then write your condition.