1 min read

Implementing a Page Scroller in Drupal 7

Let's explore two basic ways of getting a page scroller in your site

1) The first we have implemented on our company website at CommonPlaces.com, if you go to our portfolio you can take a look and see a beautiful horizontal scroller. Our approach for this session is AJAX based and uses the jQuery Tools Scrollable JavaScript Plugin to perform the scroller'_ this is what we are doing:

a) We have a view of our clients logos to display all the links (thumbnails) that we transformed in anchors with javascript; Staples Project

b) We have another view that will receive the NID (node id) from the thumbnail that was clicked and will load the content response into the containers that we have pre-defined; Coding behind back end

c) Following the instructions from the Scrollable plugin page you can verify how your HTML needs to be structured in order to work with the JavaScript plugin;

d) The AJAX request will happen on the onBeforeSeek property that happens before the scroller animation;

Stroller code screenshot

e) We have tweaked the JavaScript plugin in order to add the history and adjusted some things that we needed in order to work according our expectations;

2) The second approach it's simpler and you can see it working at lemuelsantos.com, and basically all that is necessary to do is having your content loaded in the page and create anchors before the sections that you want your scroller sliding to.

As you will notice is very simple to implement and very light weight, very easy to understand and to implement'_

lemuelsantos.com

We have had outstanding success with the usability of our site integrating this functionality into our site. It gives the site a smooth feel to it, where everything is there when the user calls upon it. At CommonPlaces we believe design and function should work hand in hand together to deliver an optimal overall product. Hopefully this will add some great functionality and feel to your Drupal site as well.


Related Posts

2 min read

Show Us Your Tweets! It's Motorcycle Week!

The rolling, rumbling thrumm is back. It is mid-June in New Hampshire, the home state of CommonPlaces, and we are again visited by swarms of motorcyclists for Motorcycle Week. Now in its 90th year,...
2 min read

What are Natural and Unnatural Links?

Google's link analysis has become increasingly complex and sophisticated. What passed as standard operating procedure, let's say 18 months ago has since become outdated. More importantly, a...
3 min read

5 Tips for Designing Better Landing Pages

Landing pages are truly one of the most essential components to an effective marketing campaign. Whether you want to generate leads, sell products, or collect data, a well-designed landing page is...
2 min read

CommonPlaces Ranks #3 on List of Top Drupal Developers

CommonPlaces is excited to announce that is has been ranked #3 on Best Web Design Agencies' list of Top Drupal Developers for the month of November 2012. This marks the 19th consecutive month of...