javascript - FlexSlider Uncaught TypeError and ReferenceError - Stack Overflow

I'm using FlexSlider 2.2.2 and he following snippet is generating two jQuery errors

Uncaught TypeError: Cannot read property 'vars' of undefined Uncaught ReferenceError: SyntaxHighlighter is not defined

        jQuery(document).ready(function(){

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

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

  jQuery(function() {
    SyntaxHighlighter.all();
  });

  jQuery('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 290,
    itemMargin: 0,
    prevText: " ",
    nextText: " ",
 minItems: getGridSize(), // use function to pull in initial value
      maxItems: getGridSize() // use function to pull in initial value
    });
 // check grid size on resize event
  jQuery(window).resize(function() {
    var gridSize = getGridSize();

    flexslider.vars.minItems = gridSize;
    flexslider.vars.maxItems = gridSize;
  });
});

Edit : highight error for better visibility.

I'm using FlexSlider 2.2.2 and he following snippet is generating two jQuery errors

Uncaught TypeError: Cannot read property 'vars' of undefined Uncaught ReferenceError: SyntaxHighlighter is not defined

        jQuery(document).ready(function(){

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

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

  jQuery(function() {
    SyntaxHighlighter.all();
  });

  jQuery('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 290,
    itemMargin: 0,
    prevText: " ",
    nextText: " ",
 minItems: getGridSize(), // use function to pull in initial value
      maxItems: getGridSize() // use function to pull in initial value
    });
 // check grid size on resize event
  jQuery(window).resize(function() {
    var gridSize = getGridSize();

    flexslider.vars.minItems = gridSize;
    flexslider.vars.maxItems = gridSize;
  });
});

Edit : highight error for better visibility.

• javascript
• jquery
• flexslider

Share Improve this question Follow edited Apr 3, 2018 at 9:25 vimuth 5,6824949 gold badges9393 silver badges125125 bronze badges asked Nov 1, 2014 at 14:40 SamSam 6,43444 gold badges3232 silver badges5252 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I couldn't reproduce the syntaxhighlighter error. but flexslider error was because you were not initializing the flexslider variable.

Working Demo: http://jsfiddle/lotusgodkk/nwjra/23/

    jQuery('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 290,
    itemMargin: 0,
    prevText: " ",
    nextText: " ",
    minItems: getGridSize(),
    maxItems: getGridSize(),
    start: function (slider) {
        flexslider = slider; //Initializing flexslider here.
    }
});

You can also see that the syntaxhighlight error does not appear here.

start: function(slider){
        flexslider = slider;
       }

and

var $window = $(window),
    flexslider = { vars:{} };

Does the trick for me.

Complete code:

jQuery(document).ready(function() {
    // Carousel with dynamic min/max ranges
    (function() {

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

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

        $window.load(function() {
            $('.flexslider').flexslider({
                animation: "slide",
                animationLoop: true,
                itemWidth: 210,
                itemMargin: 0,
                controlNav: false,
                minItems: getGridSize(), // use function to pull in initial value
                maxItems: getGridSize(), // use function to pull in initial value
                start: function(slider){
                    flexslider = slider;
                }
            });
        });

        // check grid size on resize event
        $window.resize(function() {
            var gridSize = getGridSize();

            flexslider.vars.minItems = gridSize;
            flexslider.vars.maxItems = gridSize;
        });
    }());
});