Scrollable Stack Tutorial
In this brief tutorial, we'll create 2 different Scrollables:
1) A manual version, complete with images and styled text
2) An auto scrolling version, also with images and styled text
You can download this tutorial and sample RW project to play with it and study more closely how the Scrollables have been put together. The download file includes the RW project file as well as the images necessary to create these 2 Scrollables.
1) A manual version, complete with images and styled text
2) An auto scrolling version, also with images and styled text
You can download this tutorial and sample RW project to play with it and study more closely how the Scrollables have been put together. The download file includes the RW project file as well as the images necessary to create these 2 Scrollables.
Please keep in mind that any time that you use javascript libraries like the ones used by this stack, there's a chance of running into conflicts with some themes or other plugins installed on your pages...
The first thing to do is to add a Stacks page to your project and then drop the Scrollable Stack.
Your page should look something like this:
The first thing to do is to add a Stacks page to your project and then drop the Scrollable Stack.
Your page should look something like this:
From here on, all you have to do is modify the settings to suit your needs, drop a stack (Text, HTML, 2 Columns, 3 Columns, etc.) into the "Drop stacks here" area, format the stack as necessary, and you're on your way. Drop additional panels right under the previous one. In the example below, we placed 3 Text Stacks therefore your page will look something like this: 
OK, let's get started with the examples...
Scrollable Stack 1: Manual version
The screenshot on the left shows the settings used to create this sample Scrollable. For details, check the Scrollable info page.
In this example, we used images stored on a server, therefore we used the following code:
<img src="http://rwextras.com/media_files/red_filled_down.png" />
Adjust as necessary to use your images on your own server.
If your images are located in the Page Assets (RapidWeaver 4), the path would follow this pattern:
<img src="assets/leftarrow.png" />
If your images are located in the Resources (RapidWeaver 5), the path would follow this pattern:
<img src="%resource(leftarrow.png)%" />
Lastly, if you want to use text or symbols, use the following pattern:
Text: 'Previous', 'Next' (no quotes)
Special HTML characters: for example '←' to get a left arrow (←) or '»' to get a double right quote (»)
In this example, we used images stored on a server, therefore we used the following code:
<img src="http://rwextras.com/media_files/red_filled_down.png" />
Adjust as necessary to use your images on your own server.
If your images are located in the Page Assets (RapidWeaver 4), the path would follow this pattern:
<img src="assets/leftarrow.png" />
If your images are located in the Resources (RapidWeaver 5), the path would follow this pattern:
<img src="%resource(leftarrow.png)%" />
Lastly, if you want to use text or symbols, use the following pattern:
Text: 'Previous', 'Next' (no quotes)
Special HTML characters: for example '←' to get a left arrow (←) or '»' to get a double right quote (»)
After adding a few Text stacks with images and styled text, your Scrollable will look like the one below. To see how the panels were put together, you can review the Sample Scrollable project in Edit mode...
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Scrollable Stack 2: Auto Scroll version
As before, you can see the settings for the Scrollable shown on the left by calling the HUD (info box).
In this example, we checked Auto Scroll and addedd spaces in the Left Button and Right Button input boxes to "hide" the buttons as they are not needed.
Also, we set the font-size for the buttons to their minimum size.
In this example, we checked Auto Scroll and addedd spaces in the Left Button and Right Button input boxes to "hide" the buttons as they are not needed.
Also, we set the font-size for the buttons to their minimum size.
In this example, we have a wrapping stacks with 2 stacks inside: a Text stack (for the "Latest News" heading) and the Scrollable stack itself. As in the previous example, we've added a few Text stacks with images and styled text, and there you have it, an auto scrolling news ticker...
Latest News
