javascript - Shuffle.js options error fix -
i'm using shuffle.js current project. works pretty well... is, having console error default override-able options.
my issue originates @ columnthreshold option part. if remove line of code, layout becomes unresponsive , messed up. when insert line columnthreshold: has_computed_style ? 0.01 : 0.1, , layout becomes responsive console error , effect of speed: 250 option becomes useless... can't control shuffle speed...
the consol error states uncaught referenceerror: has_computed_style not defined. documentation not provide information regarding possible options columnthreshold. want columnthreshold value not affect speed or other options value.
my entire code looks this:
// overrideable options shuffle.options = { group: all_items, // initial filter group. speed: 250, // transition/animation speed (milliseconds). easing: 'ease-out', // css easing function use. itemselector: '', // e.g. '.picture-item'. sizer: null, // sizer element. use element determine size of columns , gutters. gutterwidth: 0, // static number or function tells plugin how wide gutters between columns (in pixels). columnwidth: 0, // static number or function returns number tells plugin how wide columns (in pixels). delimeter: null, // if group not json, , comma delimeted, set delimeter ','. buffer: 0, // useful percentage based heights when might not same (in pixels). columnthreshold: has_computed_style ? 0.01 : 0.1, // reading width of elements isn't precise enough , can cause columns jump between values. initialsort: null, // shuffle can initialized sort object. same object given sort method. throttle: throttle, // default, shuffle throttle resize events. can changed or removed. throttletime: 300, // how shuffle can called on resize (in milliseconds). sequentialfadedelay: 150, // delay between each item fades in when adding items. supported: can_transition_transforms // whether use transforms or absolute positioning. };<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="js/plugins/jquery-shuffle/jquery.shuffle.modernizr.min.js"></script> <script src="js/plugins/jquery-throttle-debounce/jquery-throttle-debounce.js"></script> <section class="row section-container"> <div class="row"> <div class="container top-padding-only"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 filter-options-list"> <div class="filter-options"> <h3 class="filter-options-title">recent projects</h3> <button type="button" class="btn btn-default" data-group="all">all</button> <button type="button" class="btn btn-default" data-group="photography">photography</button> <button type="button" class="btn btn-default" data-group="design">design</button> <button type="button" class="btn btn-default" data-group="web">engineering</button> </div> </div> </div> </div> <div id="grid" class="row"> <figure class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-box" data-groups='["all", "photography"]'> <a href="#" class=""><img src="img/1.jpg" class="responsive-img" alt=""> <div class="four-portfolio-box-caption"> <div class="four-portfolio-box-caption-content"> <div class="four-portfolio-box-caption-content-header">portfolio caption header</div> <div class="four-portfolio-box-caption-content-description">this brief description of portfoliothis brief description of portfoliothis brief description of portfolio</div> </div> </div> </a> </figure> <figure class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-box" data-groups='["all", "design", "photography"]'> <a href="#"><img src="img/2.jpg" class="responsive-img" alt=""> <div class="four-portfolio-box-caption"> <div class="four-portfolio-box-caption-content"> <div class="four-portfolio-box-caption-content-header">portfolio caption header</div> <div class="four-portfolio-box-caption-content-description">this brief description of portfoliothis brief description of portfoliothis brief description of portfolio</div> </div> </div> </a> </figure> <figure class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-box" data-groups='["all", "photography"]'> <a href="#"><img src="img/3.jpg" class="responsive-img" alt=""> <div class="four-portfolio-box-caption"> <div class="four-portfolio-box-caption-content"> <div class="four-portfolio-box-caption-content-header">portfolio caption header</div> <div class="four-portfolio-box-caption-content-description">this brief description of portfoliothis brief description of portfoliothis brief description of portfolio</div> </div> </div> </a> </figure> <figure class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-box" data-groups='["all", "web", "design"]'> <a href="#"><img src="img/4.jpg" class="responsive-img" alt=""> <div class="four-portfolio-box-caption"> <div class="four-portfolio-box-caption-content"> <div class="four-portfolio-box-caption-content-header">portfolio caption header</div> <div class="four-portfolio-box-caption-content-description">this brief description of portfoliothis brief description of portfoliothis brief description of portfolio</div> </div> </div> </a> </figure> <figure class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-box" data-groups='["all", "design", "photography"]'> <a href="#"><img src="img/5.jpg" class="responsive-img" alt=""> <div class="four-portfolio-box-caption"> <div class="four-portfolio-box-caption-content"> <div class="four-portfolio-box-caption-content-header">portfolio caption header</div> <div class="four-portfolio-box-caption-content-description">this brief description of portfoliothis brief description of portfoliothis brief description of portfolio</div> </div> </div> </a> </figure> <figure class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-box" data-groups='["all", "photography"]'> <a href="#"><img src="img/6.jpg" class="responsive-img" alt=""> <div class="four-portfolio-box-caption"> <div class="four-portfolio-box-caption-content"> <div class="four-portfolio-box-caption-content-header">portfolio caption header</div> <div class="four-portfolio-box-caption-content-description">this brief description of portfoliothis brief description of portfoliothis brief description of portfolio</div> </div> </div> </a> </figure> <figure class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-box" data-groups='["all", "design", "web"]'> <a href="#" class=""><img src="img/1.jpg" class="responsive-img" alt=""> <div class="four-portfolio-box-caption"> <div class="four-portfolio-box-caption-content"> <div class="four-portfolio-box-caption-content-header">portfolio caption header</div> <div class="four-portfolio-box-caption-content-description">this brief description of portfoliothis brief description of portfoliothis brief description of portfolio</div> </div> </div> </a> </figure> <figure class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-box" data-groups='["all", "photography", "web"]'> <a href="#"><img src="img/2.jpg" class="responsive-img" alt=""> <div class="four-portfolio-box-caption"> <div class="four-portfolio-box-caption-content"> <div class="four-portfolio-box-caption-content-header">portfolio caption header</div> <div class="four-portfolio-box-caption-content-description">this brief description of portfoliothis brief description of portfoliothis brief description of portfolio</div> </div> </div> </a> </figure> <!-- sizer --> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 shuffle_sizer"></div> </div> </section>
as far know, has_computed_style variable must have defined, , looks must boolean. keeping in mind this, don't know supposed style must have or not shuffle items, put simple "true" or "false" on variable, whatever want.
by other side, see shuffle options object, think don't need property. should work:
shuffle.options = { group: all_items, speed: 250, easing: 'ease-out', itemselector: '.portfolio-box', sequentialfadedelay: 150 }; 
Comments
Post a Comment