How do I move between cards in my stack?

When creating a LiveCode application you will usually want to be able to move between the cards in your stack, in this lesson we will see how to do this.

Moving Between Cards.livecode

Example Stack

Example Stack

For this lesson we will use a very simple example stack made up of three cards.

Create a new stack from the File Menu and add 2 additional cards using the New Card item in the Object menu. If you open the Project Browser from the Tools menu you will be able to see the 3 cards in your stack.

You can name the cards using the card inspector, for this example I have also added a number field to each card so we can see which card we are on as we develop the application. I unchecked opaque and show border for this field, used the Text tab to increase the text size to 24, and centered it.

Adding navigation buttons

Adding navigation buttons

Now we will add "Back" and "Next" buttons to each card. These will allow us to navigate between card. Drag 2 buttons on to the card from the Tools Palette and name them "Back" and "Next".

We will need to add these buttons to each card. Right click on a button, and copy it.  Double clicking a card in the Project Browser will take you to that card, so double click on card 2 in the Project Browser, and then use right click again to paste the button using "Paste Objects".

Scripting the navigation buttons

Scripting the navigation buttons

Now we need to add some LiveCode to the buttons so that we can move between cards. Right click on the "Next" button (1) on card 1 and open the script editor (2). Set its script (3) to: 

on mouseUp
   go to the next card
end mouseUp

similarly the script for the back button is

on mouseUp
   go to the previous card
end mouseUp

Now try clicking the "Next" button, you should move to card 2.

Now add the same scripts to the other buttons.

Adding checks for the first and last card

Adding checks for the first and last card

What if we are on the first card and we try to go back, or the last card and we try to go next. We will set the buttons to disabled as appropriate.

Move to the first card and select the "Back" button, open the Property Inspector for the button and tick the Disabled property. The button is visible, which is good for layout consistency across the cards, but it is inactive.

Now move to card 3, we know this is the last card so in this case we want to disable the "Next" button.

Disabling a button in script

If you do not want to manually set the disabled status of all your buttons you can check what status the should have in the card script instead. For example if you want to check whether or not you are on the first or last card and therefore whether or not the "Back" or "Next" button should be disabled you can use this script in the card script.

on openCard
   local tCardNum
   put the number of this card into tCardNum
   set the disabled of button "Back" to (tCardNum is 1)
   set the disabled of button "Next" to (tCardNum is the number of cards of this stack)
end openCard

Note that the line for the "Next" button is written such that it should work even when a new card is added.

Also note that this code can work in the stack script, but only if the controls are already present when it runs.

Using groups

This is a good example of a case where you might want to use the same controls over multiple cards, for example the "Back" button, "Next" button and card number field. This means you only need to write the script once and any changes you make are applied to all cards. For more information on this see the lesson How do I use the same controls on multiple cards?

12 Comments

Nick

Thanks for all the help, I just have a question that I can't find the answer to.

I would like the user to go to a page "notes" make their notes then be able to go to the previous card they came from. Putting previous card obviously just takes them to the previous card in the list not the card from where they came from. I was thinking "go to last card" or something similar but nothing appears to work.

Thanks.

Elanor Buchanan

Hi Nick

I think what you are looking for is the "recent" keyword. If you do

go to recent card

it will take the user to the previously visited card.

I hope that helps.

Kind regards

Elanor

Nick

Thanks Elanor!
That's exactly what I was looking for.
Thanks again.

Robert Teeter

I have a field listing music albums. after adding a new album I have a button script to update that field. Repeat loops though each album card, extracting the card title, thus updating the field. Success, however I see each album momentarily during the repeat loop. Lock Screen and hide card don't work. Using go "invisible" locks up LiveCode 9.6.1. What am I doing wrong?

Elanor Buchanan

Hi Robert

Lock screen should work in this case. How are you using it? Something like this should work

command updateAlbumList
lock screen

repeat with x = 1 to the number of elements in tAlbums
put tAlbums[x]["name"] & return after field "albums"
end repeat

unlock screen
end updateAlbumList

Alternatively you could use a variable to build the list and then just update the field once

command updateAlbumList
local tAlbums

repeat with x = 1 to the number of elements in tAlbums
put tAlbums[x]["name"] & return after tAlbumList
end repeat
put tAlbumList into field "albums"

end updateAlbumList

You could also use a lock screen with the variable method.

I hope that helps.

Elanor

Robert Teeter

Thanks Elanor. It doesn't work when the repeat loop goes TO each card to get the name. Today there are 10 albums with 145 tracks. Each time I add an album I update the (card "Albums Alphabetical"). lock screen doesn't work there or immediately after mouseUp. In the current location the visual effect does work. Is there a way to get the card name and data within without going TO the card? Bob

on mouseUp pButtonNumber
put the number of cards of stack "Music" into tEnd
put empty into tData
put empty into tNext
put empty into tCardName
visual effect "shrink" to center to black
lock screen
repeat with i = 7 to tEnd
go card i
put tNext + i into tNext
put the short name of this card & return after tCardName
put tCardName into tData[tNext]["AlbumTitle"]
put empty into tCardName
end repeat
unlock screen
visual effect "stretch" from center to card
go card "Albums Alphabetical"
set the dgData of group "dgAlbums" to tData
end mouseUp)
See script:
local tData, tNext, tEnd, tCardName

on mouseUp pButtonNumber
put the number of cards of stack "Music" into tEnd
put empty into tData
put empty into tNext
put empty into tCardName
visual effect "shrink" to center to black
lock screen
repeat with i = 7 to tEnd
go card i
put tNext + i into tNext
put the short name of this card & return after tCardName
put tCardName into tData[tNext]["AlbumTitle"]
put empty into tCardName
end repeat
unlock screen
visual effect "stretch" from center to card
go card "Albums Alphabetical"
set the dgData of group "dgAlbums" to tData
end mouseUp

Elanor Buchanan

Hi Robert

I see, yes going to a card would override any lock screens. However you can get the name of a card without going to it by using a reference to the card. I think you could replace the repeat loop in your code with something like this and it should work without having to go to the card.

repeat with i = 7 to tEnd
put the short name of card i into tCardName
put tCardName into tData[i]["AlbumTitle"]
end repeat

In case it is useful in the future you can also refer to controls on other cards by using a full reference to the control e.g.

put field "name" of card "settings" into tName

I hope that helps.

Kind regards

Elanor

Peleg

thank you! it helped me a lot and opened a lot of new options for me! (: thank you again.

Karen

I am trying to move randomly between cards in my stack. I used the command "go any card." It works most of the time, but sometimes it stays on the same card (or "goes" to the same card I guess?) The problem is, the buttons on the card that are already clicked are still set as "disabled" because my script to reset the buttons are on the preOpen card and the card is already open when it navigates to the same one. Thoughts?

Elanor Buchanan

Hi Karen

If you want to exclude the current card you won't be able to use "go any card". I would use a small command like this on the Stack Script.

command goAnyCard
// Get the list of card names
put the cardNames of this stack into tCardNames

// Delete the current card from the list
put lineOffset(the short name of this card,tCardNames) into tLine
delete line tLine of tCardNames

// Go to any of the other cards
go to card (any line of tCardNames)
end goAnyCard

If you also want to exclude the previous card, or any card that has already been visited, you could have a look at the recentCards property which provides a complete track of the visitor's navigation.

I hope that helps.

Elanor

Karen

Hi Elanor,

This works great and is so much more efficient than what I was trying to do - which was resetting the properties (such as blendlevel, disabled, bordercolor) for each button in the mouseup handler for the correct answer in an effort to reset everything. You helped eliminate so many lines of code on the individual buttons. Thank you so much!

Karen

Elanor Buchanan

Hi Karen

That's great. I am glad I could help.

Elanor

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.