Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Changing Property based on width of page #549

Closed
ecurtis opened this Issue Feb 15, 2013 · 6 comments

Comments

Projects
None yet
2 participants

ecurtis commented Feb 15, 2013

I would like to change the flexslider direction property from horizontal to vertical based on the window size.

Question based on this example.
http://flexslider.woothemes.com/dynamic-carousel-min-max.html

ecurtis commented Feb 15, 2013

Here is what I am trying to get working. The direction is set properly but it does not update on resize.

(function() {
// store the slider in a local variable
    var $window = $(window),flexslider;

// tiny helper function to add breakpoints
function getSliderDirection() {
    return (window.innerWidth < 768) ? "vertical" : "horizontal";
}

$window.load(function() {
    $('#mainNav').flexslider({
        animation: "slide",
        animationLoop: false,
        slideshow: false,
        controlNav: false,
        directionNav: true,
        reverse:true,
        direction: getSliderDirection()
    });
});

// check slider direction on resize event
$(window).resize(function() {
    var sliderDirection = getSliderDirection();
    flexslider.vars.direction = sliderDirection;
    flexslider.vars.direction = sliderDirection;
});
}());
Owner

mattyza commented Feb 16, 2013

Hi Eric,

Replacing "flexslider.vars" with "$('#mainNav').vars" should provide the desired result, as "$('#mainNav')" should contain a FlexSlider object.

I hope this helps. :)

ecurtis commented Feb 16, 2013

Thanks mattyza. Once I clarified that the working version is in the development branch I got a little more success. This actually works for getting to the flexslider object, however it only dynamically changes the min and max items. It seems like it is just not coded to dynamically change the direction of the slider.

If there were a way to reset and kickstart the flexslider once a user crosses the 768px barrier that would be great in my case (no need to maintain the slide the user is on).

Alas I might have to just make two sliders and show/hide them based on the user screen size.

    (function() {

      // store the slider in a local variable
      var $window = $(window),
          flexslider;

      // tiny helper function to add breakpoints
      function getGridSize() {
        return (window.innerWidth < 600) ? 2 :
               (window.innerWidth < 900) ? 3 : 4;
      }

            // tiny helper function to add breakpoints
            function getSliderDirection() {
                return (window.innerWidth < 768) ? "vertical" : "horizontal";
            }

      $window.load(function() {
        $('.flexslider').flexslider({
          animation: "slide",
          animationSpeed: 400,
          animationLoop: false,
          itemWidth: 210,
          direction:getSliderDirection(),
          itemMargin: 5,
          minItems: getGridSize(), // use function to pull in initial value
          maxItems: getGridSize(), // use function to pull in initial value
          start: function(slider){
            $('body').removeClass('loading');
            flexslider = slider;
          }
        });
      });

      // check grid size on resize event
      $window.resize(function() {
        var gridSize = getGridSize();
        var flowDir = getSliderDirection();
                flexslider.vars.direction = flowDir;
        flexslider.vars.minItems = gridSize;
        flexslider.vars.maxItems = gridSize;
      });
    }());
Owner

mattyza commented Feb 18, 2013

Hi Eric,

Personally, I'd suggest leaving this logic to work only on window.load. I don't know anyone who resizes their browser window up and down, except for web designers. :)

In most general use cases, the end user would load the website at the size they intend to view it in their browser (on a mobile device or a pre-sized desktop screen window, for example).

If the resize event action is mandatory in the case of the project in question, you could try two sliders, although this may create extra delays at load time.

Short of that, you could run flexslider.init() to re-initialise the FlexSlider instance as needed, although I'd recommend running this only when the resizing stops, as the resize() event fires every second that the window is in "drag" mode, regardless of whether the window is actually being scaled or not.

Unfortunately, there is currently no resize stop event, which would mean you'd need to add a trigger for that. There should be a few articles on Stack Overflow about this (I don't have a go-to article on that topic, unfortunately).

I hope this helps, Eric. :)

ecurtis commented Feb 18, 2013

Thanks. Yes I agree that web developers are the main culprit in this. The reason I am looking to do this however is the design I have been given to code is responsive with the slider and controls changing from the mobile layout to the desktop layout.

Thank you for the direction to explore.

Owner

mattyza commented Feb 19, 2013

No problem, Eric. I hope this helps. :)

@mattyza mattyza closed this Feb 19, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment