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>

score 1 · Answer 1 · edited May 23 '17 at 12:18

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!

edited May 23 '17 at 12:18

Community

1
1

answered Jun 10 '14 at 04:44

Aamir Shahzad

6,683
8
47
70

I used the other stack question that you referenced to help me get to where I am at currently, but unfortunately this answer leaves me in a similar but opposite position. This works well on resize, but not onload. – John Jun 10 '14 at 05:25
@John i have updated the answer is that what you want? – Aamir Shahzad Jun 10 '14 at 06:08
I am still having similar problems, If you care to take a look, here is the carousel... http://weirdesigns.com/carousel/ Try resizing, then refresh. – John Jun 10 '14 at 17:30

score 0 · Answer 2 · answered Jun 10 '14 at 03:46

0

Try this instead of clientWidth,

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

answered Jun 10 '14 at 03:46

Surendheran

187
1
18

I appreciate the effort, but this does not work. The full size setup still works, but the reduced size doesnt work on load or resize now. – John Jun 10 '14 at 03:59
Yes, in media query itself you have options like max/min width. By specifying that size limits we can obtain responsiveness. – Surendheran Jun 10 '14 at 04:36
The media queries in the css are working fine, it is solely the javascript that is a problem. I can make the javascript work onload or resize, but not both. – John Jun 10 '14 at 05:20

score 0 · Answer 3 · answered Jun 10 '14 at 04:26

0

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

answered Jun 10 '14 at 04:26

kenicky

431
4
14

well... you should do a `$(document).ready(function(){if (screen.width < 860) { // i dont know if Im helping. }})` also. – kenicky Jun 10 '14 at 05:41

4dgaurav · Answer 4 · 2014-06-10T06:18:28.093

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>

Sigh, I had high hopes for this as it looks like what Ive been trying to write to no avail. Unfortunately, it functions exactly as my current code does. Works great on load or refresh, not on resize. Tomorrow Ill work on putting something live to look at, maybe that will help. — John, Jun 10 '14 at 06:11
Im still having similar issues. Ill look into the resources youve supplied. Ive included a link above if you care to take a look at the carousel. — John, Jun 10 '14 at 17:35

Amit Vikram Singh · Answer 5 · 2018-02-08T16:23:55.333

0

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.

edited Feb 08 '18 at 16:23

answered Apr 07 '17 at 08:22

Amit Vikram Singh

2,090
10
20

css media queries and javascript

5 Answers5