-1

Have a look at this site that I developed for an agency.

http://oakinteractive.co/

I have used the localScroll plugin to scroll between the sections. They asked me to add another section and for whatever reason the plugin seems to be ignored. Click "Elixir of the Day" Then click the "Submit". Instead of scrolling to the section it just jumps to it and the hash appears in the URL. On none of the other links does this happen.

Here is the code used to invoke the scrolling with the new section highlighted:

$('#navContainer, #navShindigs, #navTidbits, #navBarnburners, #navLegend, #shindigs, **#recipeForm**').localScroll({
        target: '#contentViewport',
        easing: 'easeOutSine'
});

Here is the link to the section:

<a href="#recipeForm"><img id="submit_elixir" src="grfx/submit.png" /></a>

And here is the section:

 <div id="recipeForm">
      <section id="section_recipe">
            <fieldset>
                  <h2>Submit a Recipe</h2>
                  <form id="mailform" name="contact" method="post" action="inc/procMail.php">
                  <label for="yourName">Your Name</label><input type="text" name="yourName" id="yourName" value="" />
                  <label for="yourEmail">E-mail Address</label><input type="text" name="yourEmail" id="yourEmail" value=""/>
                  <label for="yourMessage">Your Recipe</label><textarea name="yourMessage" id="yourMessage" rows="3"></textarea>
                  <input type="image" name="Send Recipe" alt="Send Recipe" class="sendEmail" src="grfx/submit_button.png" />
                  </form>
            </fieldset>
      </section>
</div>

Every other bit of jQuery code on the site works including scrolling for all of the other elements. It is just this added section which seems to be ignored.

Can anyone shed any light or provide any insight? I have never had a problem with the scrollTo or localScroll plugins ever before.

Jay Blanchard
  • 34,243
  • 16
  • 77
  • 119
  • @mplungjan Doesn't work in chrome form me. – Jeemusu Aug 13 '12 at 03:06
  • Tried clearing the cache. Doesn't work in FF, Chrome or IE. All of the other scroll actions work. – Jay Blanchard Aug 13 '12 at 03:08
  • It shows the form, but as the OP asks, it doesn't do the scroll, just jumps to it. – Jeemusu Aug 13 '12 at 03:10
  • Actually it doesn't work on the iPad either - it just jumps to the section where it should scroll. – Jay Blanchard Aug 13 '12 at 03:13
  • Apologies. Missed a "to it" in "jumps to it" – mplungjan Aug 13 '12 at 03:13
  • #recipeForm is right there in your posted code Jeemusu, right before #shindigs – Jay Blanchard Aug 13 '12 at 03:14
  • haha, I just noticed, sorry, I was comparing it to the posted stuff, it wasn't at the very end, sorry chief :S – Jeemusu Aug 13 '12 at 03:14
  • No worries. I have now confirmed that the scroll doesn't work in Safari on the desktop or the iPad. – Jay Blanchard Aug 13 '12 at 03:15
  • I think I may have spotted the problem. Its because the #recipeForm link doesn't originate from the #navContainer div. If you change one of the links in the #navContainer to #recipeForm it works fine. – Jeemusu Aug 13 '12 at 03:18
  • #navContainer should not have direct access to #recipeForm. Navigate to Shindigs and then Photobooth. Click on the submit there to upload a pic and it goes to the photo upload form. That one is not listed in the #navContainer either. All links should navigate properly using localScroll. – Jay Blanchard Aug 13 '12 at 03:20
  • If I change that link to one of the other divs on the page it also just jumps to that div instead of scrolls. I know I must be missing something simple. – Jay Blanchard Aug 13 '12 at 03:24
  • 1
    I found the issue with the help of another set of eyes. Instead of including the selector #recipeForm I needed to include the selector #elixir. Looking at #photobooth it is the same way. The selectors in the the call to localScroll are all containers, not end elements. Hard to see sometimes when some of the end elements are also listed in the selector. – Jay Blanchard Aug 13 '12 at 03:35

1 Answers1

0

I found the issue with the help of another set of eyes. Instead of including the selector #recipeForm I needed to include the selector #elixir. Looking at #photobooth it is the same way. The selectors in the the call to localScroll are all containers, not end elements. Hard to see sometimes when some of the end elements are also listed in the selector.

Jay Blanchard
  • 34,243
  • 16
  • 77
  • 119