"u.scrollTo is not a function" error when using serialScroll & localScroll jQuery plugins

Firstly, I'm a real novice with debugging JavaScript/jQuery so please pardon any naivety on my part.

I'm trying to replicate a similar end product as is outlined within the following tutorial: http://jqueryfordesigners.com/coda-slider-effect/

The problem I am getting is when I attempt to reference $.localScroll(scrollOptions); but when this is loaded on the page FireBug reports u.scrollTo is not a function.

I should note this is a local file (so I don't think permissions is an issue). From what I can see my HTML mark-up, CSS & javaScript are all coded okay. The plugins are being reference correctly. Any suggestions would be greatly appreciated!

Below is the coding:

JS:

$(document).ready(function () {
var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');
var horizontal = true;
if (horizontal) {
$panels.css({
'float' : 'left',
'position' : 'relative'
});

$container.css('width', $panels[0].offsetWidth * $panels.length);
}

var $scroll = $('#slider .scroll').css('overflow', 'hidden');

$scroll
.before('<img class="scrollButton left" src="images/button_arrow-previous.png" >')
.after('<img class="scrollButton right" src="images/button_arrow-next.png" >');


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

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

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();
}


var offset = parseInt((horizontal ?
$container.css('paddingTop') :
$container.css('paddingLeft'))
|| 0) * -1;

var scrollOptions = {
target: $scroll,
items: $panels,
navigation: '.navigation a',
prev: 'img.left', 
next: 'img.right',
axis: 'xy',
onAfter: trigger,
offset: offset,
duration: 500,
easing: 'swing'
};

$('#slider').serialScroll(scrollOptions);

$.localScroll(scrollOptions);

scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);
});

HTML:

<div id="slider" class="grid_11 suffix_1">
<ul class="navigation grid_1 alpha">
 <li><a href="#slide-1">1</a></li>
 <li><a href="#slide-2">2</a></li>
 <li><a href="#slide-3">3</a></li>
</ul>
<div class="scroll grid_10 omega">
 <div class="scrollContainer">
  <div class="panel" id="slide-1">
   <h2>ONE Lorem ipsum dolor sit amet consectetur adipisicing</h2>
   <h3>incididunt ut labore et dolore magna aliqua ad minim veniam</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat velit sed erat tincidunt tempor. Etiam fermentum, mauris ut pharetra dignissim, lorem ante fringilla magna, ut mollis nunc purus sit amet libero. Phasellus at urna nec purus aliquam porttitor quis ac diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a diam elit. Vivamus scelerisque pellentesque lorem, vel venenatis sapien viverra nec. Proin in mauris neque. Sed sit amet nisl nunc, sed mollis nisl. Quisque tristique, velit eu varius rhoncus, tellus nunc eleifend lorem, ut porttitor ligula urna et libero. Sed tincidunt neque sodales mauris viverra tincidunt. Donec lorem sem, malesuada vel vulputate vel, ullamcorper sed diam.</p>
   <p>Nulla neque leo, posuere ut fringilla vel, lobortis tincidunt elit. Aliquam a dui sit amet nisi rutrum interdum et a metus. Mauris sem dui, pulvinar non placerat vel, sollicitudin sit amet purus. Praesent volutpat auctor leo. Praesent eget porttitor ante. Morbi vulputate tellus vitae turpis tempus vel adipiscing nunc malesuada.</p>
   <p>Praesent volutpat auctor leo. Praesent eget porttitor ante. Morbi vulputate tellus vitae turpis tempus vel adipiscing nunc malesuada.</p>
  </div>
  <div class="panel" id="slide-2">
   <h2>TWO Lorem ipsum dolor sit amet consectetur adipisicing</h2>
   <h3>incididunt ut labore et dolore magna aliqua ad minim veniam</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat velit sed erat tincidunt tempor. Etiam fermentum, mauris ut pharetra dignissim, lorem ante fringilla magna, ut mollis nunc purus sit amet libero. Phasellus at urna nec purus aliquam porttitor quis ac diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a diam elit. Vivamus scelerisque pellentesque lorem, vel venenatis sapien viverra nec. Proin in mauris neque. Sed sit amet nisl nunc, sed mollis nisl. Quisque tristique, velit eu varius rhoncus, tellus nunc eleifend lorem, ut porttitor ligula urna et libero. Sed tincidunt neque sodales mauris viverra tincidunt. Donec lorem sem, malesuada vel vulputate vel, ullamcorper sed diam.</p>
   <p>Nulla neque leo, posuere ut fringilla vel, lobortis tincidunt elit. Aliquam a dui sit amet nisi rutrum interdum et a metus. Mauris sem dui, pulvinar non placerat vel, sollicitudin sit amet purus. Praesent volutpat auctor leo. Praesent eget porttitor ante. Morbi vulputate tellus vitae turpis tempus vel adipiscing nunc malesuada.</p>
   <p>Praesent volutpat auctor leo. Praesent eget porttitor ante. Morbi vulputate tellus vitae turpis tempus vel adipiscing nunc malesuada.</p>
  </div>
  <div class="panel" id="slide-3">
   <h2>THREE Lorem ipsum dolor sit amet consectetur adipisicing</h2>
   <h3>incididunt ut labore et dolore magna aliqua ad minim veniam</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat velit sed erat tincidunt tempor. Etiam fermentum, mauris ut pharetra dignissim, lorem ante fringilla magna, ut mollis nunc purus sit amet libero. Phasellus at urna nec purus aliquam porttitor quis ac diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a diam elit. Vivamus scelerisque pellentesque lorem, vel venenatis sapien viverra nec. Proin in mauris neque. Sed sit amet nisl nunc, sed mollis nisl. Quisque tristique, velit eu varius rhoncus, tellus nunc eleifend lorem, ut porttitor ligula urna et libero. Sed tincidunt neque sodales mauris viverra tincidunt. Donec lorem sem, malesuada vel vulputate vel, ullamcorper sed diam.</p>
   <p>Nulla neque leo, posuere ut fringilla vel, lobortis tincidunt elit. Aliquam a dui sit amet nisi rutrum interdum et a metus. Mauris sem dui, pulvinar non placerat vel, sollicitudin sit amet purus. Praesent volutpat auctor leo. Praesent eget porttitor ante. Morbi vulputate tellus vitae turpis tempus vel adipiscing nunc malesuada.</p>
   <p>Praesent volutpat auctor leo. Praesent eget porttitor ante. Morbi vulputate tellus vitae turpis tempus vel adipiscing nunc malesuada.</p>
  </div>
 </div>
</div>

File references:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.main-nav.js"></script>
<script type="text/javascript" src="js/jquery.main-form.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min" ></script>
<script type="text/javascript" src="js/jquery.serialScroll-1.2.2-min.js" ></script>
<script type="text/javascript" src="js/jjquery.localscroll-1.2.7-min.js" ></script>

I can provide more information if it helps!

ansaurus

tags:

views:

answers:

"u.scrollTo is not a function" error when using serialScroll & localScroll jQuery plugins

related questions