1 min read

Implementing a Page Scroller in Drupal 7

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

Drupal Enthusiasts to Converge in Washington DC in March 2009

From dc2009.drupalcon.org: Washington (October 22, 2008) '- Registration opens today for Drupalcon DC 2009. DrupalCon is the bi-annual conference/unconference for developers, users and enthusiasts of...
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,...
1 min read

Google Now Showing More Search Results From a Single Domain

Big news from Google today - Google Software Engineer Samarth Keshava posted on the Webmaster Central Blog this morning that Google is now displaying more results from the same domain in its search...
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...