I've been trying to simplify my code using an '$(input[data-code]").each' function in order to simplify a code. The code is just handling when a user clicks on an anchor link, it animates it down to that spot, it looks like:
$('a.welcome').click(function(){
$('html, body').animate({scrollTop:0}, 2000, function() {
parallaxScroll();
});
return false;
});
$('a.step1').click(function(){
$('html, body').animate({scrollTop: $('#step1').offset().top - 70}, 2000, function() {
parallaxScroll();
});
return false;
});
$('a.step2').click(function(){
$('html, body').animate({scrollTop: $('#step2').offset().top - 70}, 2000, function() {
parallaxScroll();
});
return false;
});
$('a.step3').click(function(){
$('html, body').animate({
scrollTop: $('#step3').offset().top - 70
}, 2000, function() {
parallaxScroll();
});
return false;
});
And what i've come up with so far to simplify it looks like this:
$("input[data-code]").each(function() {
$(this).click(function(){
$('html, body').animate({
scrollTop: $($(this).data("code")).offset().top - 70
}, 2000, function() {
parallaxScroll();
});
return false;
});
});
But it doesn't seem to be working :(
My theory is that the $(this).click(function(){
isn't actually properly calling the elements in the style $(a.welcome).click(function(){
The actual HTML for the links looks like so:
<nav id="primary">
<ul>
<li>
<h1>Welcome</h1>
<a class="welcome" href="#welcome" data-code="0">View</a>
</li>
<li>
<h1>Step 1: Setup</h1>
<a class="step1" href="#step1" data-code="#step1">Step 1</a>
</li>
<li>
<h1>Step 2: Data Management</h1>
<a class="step2" href="#step2" data-code="#step2">Step 2</a>
</li>
<li>
<h1>Step 3: Configure Cameras</h1>
<a class="step3" href="#step3" data-code="#step3">View</a>
</li>
</ul>
</nav>
Any ideas?