CODEWITHSUNDEEP
javascriptjquerycssmedia-queries
John
John

Reputation: 147

css media queries and javascript

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>

Upvotes: 0

Views: 1202

Answers (5)

Amit Vikram Singh
Amit Vikram Singh

Reputation: 2128

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.

Upvotes: 0

4dgaurav
4dgaurav

Reputation: 11506

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>

Upvotes: 0

Aamir Shahzad
Aamir Shahzad

Reputation: 6834

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!

Upvotes: 1

kenicky
kenicky

Reputation: 441

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

Upvotes: 0

Surendheran
Surendheran

Reputation: 197

Try this instead of clientWidth,

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

Upvotes: 0

Related Questions