A vertical scrollable
Scrollable demo 2 / 11 : A vertical scrollable
Here we show you a vertical setup for a scrollable. There is a minor change compared to the minimal setup and it's recommended that you study that first before continuing. This scrollable has 12 elements in total and 3 elements are shown at a time. You can scroll these items by:
- Clicking on the "more pictures" link.
- Using the up and down arrow keys.
- Using your mousewheel.
- Clicking on the last or the first item in the list.
1. Barcelona Pavilion
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
2. Barcelona Pavilion
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
3. Barcelona Pavilion
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
4. Barcelona Pavilion
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
5. Barcelona Pavilion
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
6. Barcelona Pavilion
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
7. Barcelona Pavilion
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
8. Barcelona Pavilion
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
9. Barcelona Pavilion
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
10. Barcelona Pavilion
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
11. Barcelona Pavilion
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
12. Barcelona Pavilion
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
HTML code
Our HTML structure is identical to the one presented in the "minimal setup" except that the items that are scrolled are more complex than just a single image. Also, the navigational buttons have been placed inside a wrapping DIV.
<div id="actions">
<a class="prevPage">« Back</a>
<a class="nextPage">More pictures »</a>
</div>
<!-- root element for scrollable -->
<div class="scrollable vertical">
<!-- root element for the items -->
<div class="items">
<!-- first item. can contain anything -->
<div>
<!-- image -->
<img src="http://farm1.static.flickr.com/_m.jpg" />
<!-- title -->
<h3>1. Barcelona Pavilion</h3>
<!-- content -->
<p>
The Pavilion was not only a pioneer ...
</p>
</div>
<!-- second item (and so on) -->
<div>
...
</div>
</div>
</div>CSS code
We have used the following CSS file for above setup. Here are the crucial parts from the CSS file that are requred for a vertical scrollable:
/* root element for scrollable */
div.scrollable {
/* required settings */
position:relative;
overflow:hidden;
/* vertical scrollers have typically larger height than width */
height: 665px;
width: 700px;
}
/* root element for scrollable items */
div.scrollable div.items {
position:absolute;
/* this time we have very large space for the height */
height:20000em;
}In a horizontal scrollable the items are floating side by side by using the float: left property. In vertical scrollables this is not necessary.
JavaScript code
We set the vertical property to true to achieve vertical scrolling. The size property defines how many items are visible at once. We don't want the items to be scrolled when clicked. This can be achieved by disabling the clickable configuration property.
We use the mousewheel plugin to enable scrolling with the mousewheel.
<script>
// execute your scripts when DOM is ready. this is a good habit
$(function() {
// initialize scrollable
$("div.scrollable").scrollable({
vertical:true,
size: 3
// use mousewheel plugin
}).mousewheel();
});
</script>You might want to disable the clickable property if you don't want the items to be scrolled by clicking on them.
