Conditional Function for Start: setting in Ariel Flesler's SerialScroll

Question

Site is Located @ beattrainsoundsystem.com/home

I'm using serialScroll to animate a number of divs containing dancing characters, and using LocalScroll to animate the content divs. My issue is that when you try and load a URL with a hash ( for example beattrainsoundsystem.com/home#store) the character divs do not animate to the correct position. I know that to make this happen, I need to create a conditional function for the "start:" setting, to change the "start:" value depending on the hash in the URL. As somewhat of a novice at jQuery, I'm not exactly sure how to code this.

I'm already using a URI parser plugin to return the hash in the URL, so for "http://www.beattrainsoundsystem.com/home#store"

var urlHash = $.url.attr('anchor');

will return "store"

So what I need is a function that says:

if (urlHash == home) {
     var start = 0
} else if (urlHash == mixes) {
     var start = 1,
} else if (urlHash == contact) {
     var start = 2,
}

This is obviously not coded correctly, but is a conceptualization of the script that I need to make this work.

Thanks for your help!

Answer 1

You should probably integrate this with localScroll. If you call $.localScroll.hash(), it will scroll to the element pointed by the hash and notify the change to serialScroll.

Answer 2

It doesn't jump right out at me where the click events for the links at the top are being handled which I was trying to find so I could give a specific example.

It looks like the only time the animation doesn't work is when I go directly to some page that has the hash in the URL. So, I might do something like:

1. On page load, grab the #name from the URL
2. Find the element whose href = the name I grabbed (you have them named identically, better would be to give those <a href="#name"> an id such as <a id="name" href="#name">
3. Do a click() event on that element to simulate the normal animation method

This isn't ideal if you want it to load in the correct position without showing an animation.

You should be able to do something like this:

$(document).ready(function(){
      // This whole part is pseudocode since I didn't spend
      // the time to find exactly how you're doing things

      // get the hash portion from the URL
      // (just copying you here, haven't done this myself)
      var sourceLinkHref = $.url.attr('anchor');

      // Find the <a> tag whose href attribute matches the
      // name you just found, and .click() it
      $("a[href=#" + sourceLinkHref + "]")
          .click();
   });

Answer 3

jQuery(function( $ ){
var urlHash = $.url.attr('anchor');
if (urlHash=="mixes") {
    $("#sectionsContent").scrollTo( $("#mixes"), 0 );
    $("#sectionsMid").scrollTo( $("#mixmid"), 0 );
    $("#sectionsTop").scrollTo( $("#mixTop"), 0 );
    $("#sectionsBottom").scrollTo( $("#mixBottom"), 0 );
}

if (urlHash=="contact") {
    $("#sectionsContent").scrollTo( $("#contact"), 0 );
    $("#sectionsMid").scrollTo( $("#storemid"), 0 );
    $("#sectionsTop").scrollTo( $("#storeTop"), 0 );
    $("#sectionsBottom").scrollTo( $("#storeBottom"), 0 );
}

if (urlHash=="store") {
    $("#sectionsContent").scrollTo( $("#store"), 0 );
    $("#sectionsMid").scrollTo( $("#blogmid"), 0 );
    $("#sectionsTop").scrollTo( $("#blogTop"), 0 );
    $("#sectionsBottom").scrollTo( $("#blogBottom"), 0 );
}

});