+1
Answered
Nav at bottom of screen
OK this is probably a really easy one! Just wondering how to create a standard navigation that stays stuck to the bottom of the screen, and has 4 buttons on it, which call 4 different pages?
Customer support service by UserEcho
This can be accomplished in a variety of ways using WIRE.
Think of your nav bar as simply objects nested within objects, your background could be a panel or an image with attributes such as valign="bottom" and background="ff0000"
<panel name="navbar" height="100" width="100%" background="ff0000" valign="bottom">
<image name="nav-button1" source="button1.jpg" "onclickup="page1action"></image>
<image name="nav-button2" source="button2.jpg" onclickup="page2action" rightof="nav-button1"></image>
<image name="nav-button3" source="button3.jpg" onclickup="page3action" rightof="nav-button2"></image>
<image name="nav-button4" source="button4.jpg" onclickup="page4action" rightof="nav-button3"></image>
</panel>
Then use images or panel objects nested a children to your nav bar to serve as your buttons.
Check out our documentation on the panel object to give you an idea of the actions you can trigger when a user selects your "buttons"
Because WIRE is so flexible you don't have to rely on "standard". You can design images to serve as buttons and backgrounds to make your nav bar look any way you want, while still remaining native.
Good luck!
onclickup="page4action"
Does this reference a panel called page4action - ie:
I'm guessing that's not the way to do it, but can't work out how that works :-/
Your action can contain a variety of action tags to produced a desired effect. In your example, you might simply have 4 panels that represent your pages and create a set of actions.
<wire>
<main>
<panel name="navbar" height="100" width="100%" background="ff0000" valign="bottom">
<image name="nav-button1" source="button1.jpg" "onclickup="page1action"></image>
<image name="nav-button2" source="button2.jpg" onclickup="page2action" rightof="nav-button1"></image>
<image name="nav-button3" source="button3.jpg" onclickup="page3action" rightof="nav-button2"></image>
<image name="nav-button4" source="button4.jpg" onclickup="page4action" rightof="nav-button3"></image>
</panel>
</main>
<actions>
<action name="page4action">
<alpha value="1" time="1" target="nameofreferencepage4" />
</action>
</actions>
</wire>
Page 1 Content
Page 2 Content
Page 3 Content
Page 4 Content
All of the panels are displaying one on top of each other, and nothing happens when I touch the buttons. What am I doing wrong?
What you can do to fix this is to define what the alpha is for your pages upfront. You will want to do a couple of things:
(panels require a height and width to be defined)
<panel name="page1" height="100%" width="100%" alpha="1">Page 1 Content</panel>
<panel name="page2" height="100%" width="100%" alpha="0">Page 2 Content</panel>
<panel name="page3" height="100%" width="100%" alpha="0">Page 3 Content</panel>
<panel name="page4" height="100%" width="100%" alpha="0">Page 4 Content</panel>
the second thing you want to do is tell the wire which page you want to display on load. use your existing action and add the attribute oninit="yes"
<action name="showPage1" oninit="yes">
<alpha value="1" time="1" target="page1" />
<alpha value="0" time="1" target="page2" />
<alpha value="0" time="1" target="page3" />
<alpha value="0" time="1" target="page4" />
</action>
This will tell the wire to run this action on launch.
looks like your code isn't displaying on this comment either, Ian?
Until you actually have content, it is probably a good test tool to add the background attribute to your panels. This will let you make each page a different color to test that they alpha on ok.