How do I scroll a card that is taller or wider than the window?
Occassionally you might want to display more information on a card than can be seen all at once due to the window size. This is not a problem in LiveCode, in this lesson we will see how to use a group to scroll content.
Create your stack
Import the map
How big is our map?
Make the map scrollable
If we want to be able to see different parts of our map we need to be able to scroll it. As we can't make an image scroll we will put our map into a group. It may seem a little unnecessary to group a single object but in this case we do it because when you scroll a group the contents scroll so we can use this to show us different parts of our map.
Firstly we want to position the map so that it's top left corner is in the top left corner of the stack, our scrolling will then be relative from that point. We can do this in the property inspector of the map image, we just set the left (1) and top (2) co-ordinates of the image to 0.
Group the map
Resize and position the group
We now need to make our map scroll, firstly we make the map display group the same size as our stack and lock it's size and position. This means when the group is scrolled the displayed contents scroll but the group itself stays in the same position on the card. This allows us to see different parts of the map. After setting these options you might need to set the topLeft of the map display group back to 0,0.
Make the map scrollable
Improving the look of the stack
Import button graphics
Add button icons
Add button icons (2)
Now go to Icons and Borders, turn off the Three D, Border and Hilite Border properties (1), set the Border width to 0 (2) and use the Icon picker to select the up arrow graphic we just imported (3)
Repeat this for the other buttons, then play around with the size and position of them until you are happy with how it looks.
Scripting the down button
Now that we have our buttons in place it's time to make them do something. What we want our buttons to do is to mimic using the scrollbar to scroll the contents of the group, to do this we set the vScroll and hScroll properties of the group. The vScroll is the amount in pixels the object has been scrolled down, the hScroll is the amount in pixels that the object has been scroll right. If the vScroll or hScroll is zero, the object has not been scrolled.
Lets start with the down button
put the vScroll of group "map display" into tCurrentScroll
add 10 to tCurrentScroll
set the vScroll of group "map display" to tCurrentScroll
Every time the down button is clicked we add 10 to the vScroll of the map display group so the map will scrolls down by 10 pixels.