“0.offsetWidth”为空或不是对象“ - Coda Slider - Javascript错误问题 [英] "'0.offsetWidth' is null or not an object" - Coda Slider - Javascript Error Question

问题描述

我成功实施了Coda Slider教程，位于此处： http://jqueryfordesigners.com/ coda-slider-effect /

I implemented the Coda Slider tutorial successfully that is located here: http://jqueryfordesigners.com/coda-slider-effect/

滑块工作得很好，但我得到一个javascript错误，我不知道如何解决。错误说：

The slider works great but I am getting a javascript error that I am not sure how to fix. The error says:

'0.offsetWidth' is null or not an object
coda-slider.js, line 19 character 3

不知道如何解决。任何人都有什么想法？这是我的js和css（不要以为我需要上传的HTML，但让我知道，如果这有帮助）。

Not sure how to fix it. Anyone have any ideas? Here is my js and css (don't think I need to upload the HTML but let me know if that helps).

JS（coda-slider.js） / p>

JS (coda-slider.js)

// when the DOM is ready...
$(document).ready(function () {

var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');

// if false, we'll float all the panels left and fix the width 
// of the container
var horizontal = true;

// float the panels left if we're going horizontal
if (horizontal) {
  $panels.css({
    'float' : 'left',
    'position' : 'relative' // IE fix to ensure overflow is hidden
  });

  // calculate a new width for the container (so it holds all panels)
  $container.css('width', $panels[0].offsetWidth * $panels.length); <------line 19
}

// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#slider .scroll').css('overflow', 'hidden');

// apply our left + right buttons
$scroll
  .before('<img class="scrollButtons left" src="/images/layout/navigation/scroll_left.png" />')
  .after('<img class="scrollButtons right" src="/images/layout/navigation/scroll_right.png" />');

// handle nav selection
function selectNav() {
  $(this)
    .parents('ul:first')
      .find('a')
        .removeClass('selected')
      .end()
    .end()
    .addClass('selected');
}

$('#slider .navigation').find('a').click(selectNav);

// go find the navigation link that has this target and select the nav
function trigger(data) {
  var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
  selectNav.call(el);
}

if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1) });
} else {
  $('ul.navigation a:first').click();
}

// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset.  Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ? 
  $container.css('paddingTop') : 
  $container.css('paddingLeft')) 
  || 0) * -1;


var scrollOptions = {
  target: $scroll, // the element that has the overflow

  // can be a selector which will be relative to the target
  items: $panels,

  navigation: '.navigation a',

  // selectors are NOT relative to document, i.e. make sure they're unique
  prev: 'img.left', 
  next: 'img.right',

  // allow the scroll effect to run both directions
  axis: 'xy',

  onAfter: trigger, // our final callback

  offset: offset,

  // duration of the sliding effect
  duration: 500,

  // easing - can be used with the easing plugin: 
  // http://gsgd.co.uk/sandbox/jquery/easing/
  easing: 'swing'
};

// apply serialScroll to the slider - we chose this plugin because it 
// supports// the indexed next and previous scroll along with hooking 
// in to our navigation.
$('#slider').serialScroll(scrollOptions);

// now apply localScroll to hook any other arbitrary links to trigger 
// the effect
$.localScroll(scrollOptions);

// finally, if the URL has a hash, move the slider in to position, 
// setting the duration to 1 because I don't want it to scroll in the
// very first page load.  We don't always need this, but it ensures
// the positioning is absolutely spot on when the pages loads.
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);

});

CSS

#slider {
  margin-left: 35px;
  position: relative;
  width: 875px;

}

.scroll {
  position: relative;
  width: 875px;
  height: 268px;
  overflow: auto; /* fix for IE to respect overflow */
  background: #FFFFFF scroll 0;
}

.scrollContainer div.panel {
  position: relative;
  height: 210px;
  width: 875px; /* change to 560px if not using JS to remove rh.scroll */
}

.scrollButtons {
  position: absolute;
  top: 115px;
  cursor: pointer;
}

.scrollButtons.left {
  left: -20px;
}

.scrollButtons.right {
  right: -20px;
}

推荐答案

愚蠢的错误，我的部分。我将coda-slider.js包含在每个页面提供的head中，因此每个没有滑块的页面都显示错误。刚刚拿出来只包括在显示和修复滑块的页面上。

Figured it out. Stupid error on my part. I was including the coda-slider.js in the head that was delivered with every page and therefore every page that did not have the slider was displaying the error. Just took it out to include only on the page where the slider was displayed and fixed.

这篇关于“0.offsetWidth”为空或不是对象“ - Coda Slider - Javascript错误问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！