Easily add a scrollbar to either a large block of text or apply it to your site's template. This add-on is very flexible and can be used in a wide variety of situations. It supports both vertical and horizontal scrollbars, and is compatible with the iPhone/iPad. Using this scrollbar is the perfect way to display a lot of content on your page without it looking cluttered. You can even add multiple scrollbars to the same page.
Download from the Concrete5 Marketplace ($15)
Features:
- iPhone/iPad support!
- Cross-browser support
- Uses core Concrete5 "Content" block so you can add any text, links and images
- Set the visible width and height
- Supports vertical or horizontal scrolling
- Scrollbar "thumb" is automatically sized, or you can manually set a size
- Choose to hide scrollbar when mouse moves away
- Can be applied to an area on your template (requires basic CSS knowledge)
- Advanced users can create their own custom block template with different colours (requires CSS knowledge)
Tips:
When using the horizontal scrollbar, you must have assigned a width to the overall content area due to the "wrapping" nature of HTML content.
When using the horizontal scrollbar, if you're only entering text and the scrollbar is not displaying then it is because text will automatically wrap around when it reaches the "edge" of the visible area, so you will need to "force" the width by wrapping the content in a DIV tag (eg. <div style='width:1000px'>my content</div>).
Examples:
Example 1) A standard scrollable area of content that uses the core Concrete5 "Content" block, so you can combine text and images.
Example 2) Fixed thumbnail size plus scrollbar is hidden as mouse moves off scrollable content (with a 1 second delay).
Hover here to see the scrollbar!
While I've got your attention, please follow us on Twitter.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros erat, mattis sit amet pretium sit amet, tempus ut ipsum. Maecenas congue felis vitae libero tincidunt sit amet feugiat justo pulvinar. Aenean semper molestie interdum. Aliquam mauris sem, commodo ullamcorper condimentum sit amet, facilisis euismod odio. Duis fringilla gravida nisl, ut eleifend urna lacinia eu. Vivamus sed hendrerit est. Nullam malesuada venenatis auctor. Nulla facilisi. Aliquam ultrices, dolor ut aliquam dictum, justo massa sodales purus, a pellentesque augue ante vel ligula. Fusce quis vehicula augue. Nam viverra, nunc eget pulvinar posuere, lacus dui blandit mi, non interdum elit sem eget massa. Mauris condimentum, enim nec dictum mattis, tortor dolor aliquam leo, eget commodo lacus nibh quis tortor. Donec id metus lacus. Mauris molestie dolor ac mi bibendum quis interdum lectus pretium.
Duis placerat tempus leo a dapibus. Vivamus porta ante sed lorem vehicula non vulputate erat tincidunt. Proin venenatis auctor dolor et venenatis. Etiam vulputate faucibus odio sit amet pellentesque. Maecenas eros metus, laoreet at congue a, luctus sed augue. Phasellus dapibus elit sodales nisi porttitor sed pharetra ligula ornare. Sed sollicitudin rhoncus ipsum ut semper. Cras non tincidunt arcu. Etiam eu turpis enim, ut venenatis nibh. Vestibulum suscipit sollicitudin nisi tempus suscipit. Aenean vulputate nibh eu quam placerat non accumsan metus tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. In suscipit malesuada mattis. Phasellus nec dolor non tortor scelerisque interdum. Phasellus dolor dolor, adipiscing eget suscipit et, volutpat ut lectus.
Mauris pharetra, enim quis tincidunt cursus, est enim tincidunt arcu, sed gravida elit sem sit amet nulla. Nulla pellentesque ligula quis orci euismod a tempus est porttitor. Duis a orci non ante viverra sodales. Fusce libero ligula, volutpat et condimentum ut, fringilla eu nulla. Pellentesque rhoncus porttitor vulputate. Maecenas a quam elit, vel placerat nisi. Vivamus arcu dolor, dictum vitae placerat a, lacinia quis tellus. Sed non risus a nisi volutpat mattis quis non lorem. Curabitur sollicitudin ullamcorper quam, at rhoncus lacus pharetra ut. Quisque ac velit augue, sit amet auctor elit. Sed sodales sem ac ligula pellentesque tincidunt. In luctus congue tincidunt. Nullam augue mi, eleifend in sagittis in, facilisis vitae metus. Aenean risus sem, suscipit in semper vel, convallis vel arcu. Duis euismod tellus porta lorem dapibus venenatis. Nunc purus metus, molestie eget varius eu, vestibulum a augue. Praesent suscipit orci sit amet ipsum lacinia vel consectetur odio auctor. Sed sit amet nulla eros. Morbi elit nunc, egestas et bibendum et, iaculis et enim.
Donec metus felis, consectetur at faucibus eu, placerat id nunc. Nulla condimentum turpis ac velit imperdiet sodales egestas velit dapibus. Sed fringilla imperdiet bibendum. Curabitur sagittis vehicula metus, a malesuada tellus laoreet semper. Curabitur ut consectetur felis. Phasellus hendrerit dictum fringilla. Cras lorem mauris, aliquet vel molestie ac, volutpat malesuada massa. Ut lobortis laoreet hendrerit. Praesent a ligula a leo lacinia facilisis sit amet a mauris. Donec lorem magna, semper in ullamcorper eu, feugiat id dolor. Aliquam dignissim ante ut lacus ornare accumsan hendrerit mi fringilla. Donec at leo eu quam malesuada congue. In hac habitasse platea dictumst. Etiam sit amet tellus libero, vel gravida ligula.
Donec et nulla est. Aliquam vel justo diam. Nunc nec consequat purus. Aenean eget nisi eros. Suspendisse urna lacus, suscipit vel eleifend vulputate, dapibus sit amet augue. Nunc nec augue enim, et placerat nibh. Aliquam erat volutpat. In hac habitasse platea dictumst. In placerat ligula lorem. Pellentesque bibendum, justo non dignissim varius, sem turpis tristique massa, et eleifend leo leo vel libero. Etiam quis velit ac dolor fermentum feugiat. Nam ut tellus et justo feugiat facilisis. In quis enim et nisl eleifend semper cursus ut ante. Cras nec magna augue
Example 3) Horizontal scrolling (requires content to be wider than the visible area).
Demonstration Video:
Screenshots
Live Example:
See the Scrollbar add-on in action at: malcandi.com.au
Thanks to Ian Johnson for the showcase site!