+1
Answered

pager reset

paololuk 8 years ago updated 8 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 :)
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%.
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.
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.
This should move your strip panel from a ypos of 100% to a valign bottom.

<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.
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.

<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.


.....

<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. :)
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">
Yes. Thanks. Resolved.