1

I'm utilizing Flexislider2 for a responsive site, and unsure how to write the code for a challenge I have. I am well versed in HTML and CSS, however not very good at javascript (yet, still learning :>).

The site is utilizing CSS media queries at a few breakpoints, and all CSS responsiveness is fine(just mentioning for fyi).

However, there are some attributes in flexislider that are set inline within the HTML (within tag), that I need to change at the same breakpoints.

I need to dynamically change the value for itemWidth at certain screen widths (including on change, not just load) in the same fashion css Media Queries would kick in.

So my question is, how can I change the value of that attribute when the screen size is (or changes) to <=960px and <=780px and <=480px

Basically I need the value to change at the same time my CSS media queries hit, which just for reference are: @media screen and (max-width: 960px) @media screen and (max-width: 780px) @media screen and (max-width: 480px)

Here is the javascript which currently is inline with the HTML document.

<script type="text/javascript">
    $(window).load(function(){ 
      $('#testimonial_carousel').flexslider({
             animation: "slide",
             animationLoop: false,
             slideshow: false,
             randomize: false,
             itemWidth: 472,
             itemMargin: 0,
             start: function(slider){
               $('body').removeClass('loading');
             }
      });
    });
  </script>
4

1 回答 1

0 
window.resize(function(){
    if(screen.width <= 480){
        //do something
    }else if (screen.width <= 780){
        //do something else
    }else if(screen.width <= 960){
        //do final thing
    }
})

你可以在 resize()和screen.width()中找到更多关于这些的信息。

特别是第二个链接对于您尝试做的事情非常有指导意义。

于 2013-02-22T18:02:28.523 回答