1. App Creation Studio
  2. Questions
+1
Answered

pager reset

paololuk 12 years ago • updated 12 years ago • 10
I'm using the pager tutorial in my app. A question: how to hide the pager at the start showing only the upbutton? Because the app start with the pager navigation in the "up" state and the upbutton on the bottom (?). A snippet will be nice :)
icahill (Administrator) 12 years ago
Have you read step 2 of the "Action a Pager" tutorial? This explains how to hide the pager until an action calls it. It involves setting the ypos of the pager or panel containing the pager to 100%.
paololuk 12 years ago
Yes, I've used the complete tutorial. At the start of the app the pager panel stay up and the upbutton stay down. It works but it's not nice to see. You have to click the up button, it goes up, then the pager panel can be put down or up.
icahill (Administrator) 12 years ago
What object have you set to a ypos of 100%?

Another to this is making sure you have this translate on the "show-actions" action: <translate valign="bottom" time=".5"/> as well as a clicktarget of "../strip" set on your upbutton.
icahill (Administrator) 12 years ago
This should move your strip panel from a ypos of 100% to a valign bottom.
paololuk 12 years ago

<main>

.....

<image name="upbutton" source="graphics/pager.on.png" valign="bottom" align="center" width="56" height="23" onclick="show-contents" clicktarget="../strip" topof="../strip" ></image>
<image name="downbutton" source="graphics/pager.off.png" valign="bottom" align="center" width="56" height="23" alpha="0" onclick="hide-contents" clicktarget="../strip"></image>

</main>

<actions>

<action name="show-contents">
<alpha value="0" target="../upbutton" time="0"/>
<alpha value="1" target="../downbutton" time="0"/>
<translate valign="bottom" time=".5"/>
<platform device="iPad">
<translate ypos="905" lypos="649" time=".5" target="../upbutton"/>
<translate ypos="905" lypos="649" time=".5" target="../downbutton"/>
</platform>
<platform device="iPhone|iPod">
<translate ypos="305" lypos="144" time=".5" target="../upbutton"/>
<translate ypos="305" lypos="144" time=".5" target="../downbutton"/>
</platform>
</action>
</actions>

.....



This is the code used.
icahill (Administrator) 12 years ago
Can you show me a snippet of code for your pager object and its parent? This is probably where the problem lies. Your actions look ok to me.
paololuk 12 years ago

<action name="hide-contents">
<alpha value="1" target="../upbutton" time="0"/>
<alpha value="0" target="../downbutton" time="0"/>
<translate ypos="100%" time=".5"/>
<translate valign="bottom" time=".5" target="../upbutton"/>
<translate valign="bottom" time=".5" target="../downbutton"/>
</action>


Also this. Sorry.
paololuk 12 years ago


.....

<panel name="strip" width="100%" height="100" ypos="85%" lypos="86%" background="#1b1632" alpha=".75">
<pager name="contents" width="100%" height="100" orientation="horizontal" align="center" valign="center" paginate="no">
<panel name="column1" width="25%" height="100%">
<image name="thumb" source="graphics/1.png" align="center" valign="center" onclick="page" clicktarget="../../../../vademecum" _page="1">></image>
<text name="pagenum" width="100%" height="20%" color="#000000" size="12" valign="bottom" alignment="center" text="1"></text>
</panel>
<panel name="column2" width="25%" height="100%">
<image name="thumb" source="graphics/2.png" align="center" valign="center" onclick="page" clicktarget="../../../../vademecum" _page="2">></image>
<text name="pagenum" width="100%" height="20%" color="#000000" size="12" valign="bottom" alignment="center" text="2"></text>
</panel>
<panel name="column3" width="25%" height="100%">
<image name="thumb" source="graphics/3.png" align="center" valign="center" onclick="page" clicktarget="../../../../vademecum" _page="3">></image>
<text name="pagenum" width="100%" height="20%" color="#000000" size="12" valign="bottom" alignment="center" text="3"></text>
</panel>
<panel name="column4" width="25%" height="100%">
<image name="thumb" source="graphics/4.png" align="center" valign="center" onclick="page" clicktarget="../../../../vademecum" _page="4">></image>
<text name="pagenum" width="100%" height="20%" color="#000000" size="12" valign="bottom" alignment="center" text="4"></text>
</panel>
<panel name="column5" width="25%" height="100%">
<image name="thumb" source="graphics/5.png" align="center" valign="center" onclick="page" clicktarget="../../../../vademecum" _page="5">></image>
<text name="pagenum" width="100%" height="20%" color="#000000" size="12" valign="bottom" alignment="center" text="5"></text>
</panel>
<panel name="column6" width="25%" height="100%">
<image name="thumb" source="graphics/6.png" align="center" valign="center" onclick="page" clicktarget="../../../../vademecum" _page="6">></image>
<text name="pagenum" width="100%" height="20%" color="#000000" size="12" valign="bottom" alignment="center" text="6"></text>
</panel>
<panel name="column7" width="25%" height="100%">
<image name="thumb" source="graphics/7.png" align="center" valign="center" onclick="page" clicktarget="../../../../vademecum" _page="7">></image>
<text name="pagenum" width="100%" height="20%" color="#000000" size="12" valign="bottom" alignment="center" text="7"></text>
</panel>
<panel name="column8" width="25%" height="100%">
<image name="thumb" source="graphics/8.png" align="center" valign="center" onclick="page" clicktarget="../../../../vademecum" _page="8">></image>
<text name="pagenum" width="100%" height="20%" color="#000000" size="12" valign="bottom" alignment="center" text="8"></text>
</panel>
<panel name="column9" width="25%" height="100%">
<image name="thumb" source="graphics/9.png" align="center" valign="center" onclick="page" clicktarget="../../../../vademecum" _page="9">></image>
<text name="pagenum" width="100%" height="20%" color="#000000" size="12" valign="bottom" alignment="center" text="9"></text>
</panel>
<panel name="column10" width="25%" height="100%">
<image name="thumb" source="graphics/10.png" align="center" valign="center" onclick="page" clicktarget="../../../../vademecum" _page="10">></image>
<text name="pagenum" width="100%" height="20%" color="#000000" size="12" valign="bottom" alignment="center" text="10"></text>
</panel>
<panel name="column11" width="25%" height="100%">
<image name="thumb" source="graphics/11.png" align="center" valign="center" onclick="page" clicktarget="../../../../vademecum" _page="11">></image>
<text name="pagenum" width="100%" height="20%" color="#000000" size="12" valign="bottom" alignment="center" text="11"></text>
</panel>
<panel name="column12" width="25%" height="100%">
<image name="thumb" source="graphics/12.png" align="center" valign="center" onclick="page" clicktarget="../../../../vademecum" _page="12">></image>
<text name="pagenum" width="100%" height="20%" color="#000000" size="12" valign="bottom" alignment="center" text="12"></text>
</panel>
<panel name="column13" width="25%" height="100%">
<image name="thumb" source="graphics/13.png" align="center" valign="center" onclick="page" clicktarget="../../../../vademecum" _page="13">></image>
<text name="pagenum" width="100%" height="20%" color="#000000" size="12" valign="bottom" alignment="center" text="13"></text>
</panel>
<panel name="column14" width="25%" height="100%">
<image name="thumb" source="graphics/14.png" align="center" valign="center" onclick="page" clicktarget="../../../../vademecum" _page="14"></image>
<text name="pagenum" width="100%" height="20%" color="#000000" size="12" valign="bottom" alignment="center" text="14"></text>
</panel>
</pager>
</panel>
<image name="upbutton" source="graphics/pager.on.png" valign="bottom" align="center" width="56" height="23" onclick="show-contents" clicktarget="../strip" topof="../strip" ></image>
<image name="downbutton" source="graphics/pager.off.png" valign="bottom" align="center" width="56" height="23" alpha="0" onclick="hide-contents" clicktarget="../strip"></image>



This the pager. Thanks. :)
icahill (Administrator) 12 years ago
You don't have your "strip" panel set to 100% for the ypos, it is at 85%, this is probably why you can still see it.

Look like this:


<panel name="strip" width="100%" height="100" ypos="100%" background="#1b1632" alpha=".75">
<pager name="contents" width="100%" height="100" orientation="horizontal" align="center" valign="center" paginate="no">
paololuk 12 years ago
Yes. Thanks. Resolved.

Customer support service by UserEcho