Custom jQuery scroll

Question

I'm new to drupal 7 and I'm having issues getting the smooth div scroll to work. What I'm going for is this! I also need it to be on every page of the site.

I downloaded the Zip file which is actually for this! I figured I'll alter the js and css files later. I placed in both sites/all/libraries and sites/all/modules. I copied the jquery-ui-1.8.23.custom.min file to /modules folder.

I then pasted this code to my template.php :

function best_responsive_preprocess_page(&$vars) {

//  if we are at frontpage, add some jquery code to do the animation
   if ($vars['is_front']) {
      drupal_add_js('sites/all/modules/jquery-ui-1.8.23.custom.min');
      drupal_add_js('sites/all/libraries/SmoothdivScroll/js/jquery.smoothdivscroll-1.3-min.js');
      drupal_add_css('sites/all/libraries/SmoothdivScroll/css/smoothDivScroll.css');
       $vars['script'] = drupal_get_js();
       $vars['styles'] = drupal_get_css();
   }
} 

But that didn't do the trick.

What could be the issue here, or perhaps there is an another way to achieving this?

Many thanks.

Answer 1

is your function called ? put a drupal_set_message('hello'); in it to see.

remove these to lines, they're not needed

$vars['script'] = drupal_get_js();
$vars['styles'] = drupal_get_css();

then - you need to add some custom JS, where you tell which of your div should be modified:

drupal_add_js('jQuery(document).ready(function () { $("#logoParade").smoothDivScroll({ 
    autoScrollingMode: "always", 
    autoScrollingDirection: "endlessLoopRight", 
    autoScrollingStep: 1, 
    autoScrollingInterval: 25 
});

// Logo parade event handlers
$("#logoParade").bind("mouseover", function() {
    $(this).smoothDivScroll("stopAutoScrolling");
}).bind("mouseout", function() {
    $(this).smoothDivScroll("startAutoScrolling");
}); });', 'inline')

is this div already setup ?

else - add it in page.tpl.php or whereever you like to ..