I am using the Intel XDK template with the four tabs at bottom of the app. Whenever one of these buttons is pressed, it highlights the button to show what page you are on, and I found the class that performs this action within the code (pressed). It is also programmed to unpress buttons whenever a new button is pressed, but I cannot figure out how to manipulate it so that, when I go back to homepage it unpresses all of the buttons (so that it does not appear like you are on any specific page.
Thanks for any help you can give,
My entire footer code is:
<footer class="wrap-element uib_w_2" data-uib="app_framework/footer" data-ver="1" id="af-footer-0"> <a href="#Pray" class="widget uib_w_6 d-margins icon home" data-uib="app_framework/button" data-ver="1">Pray</a><a href="#Study" class="widget uib_w_3 d-margins icon paper" data-uib="app_framework/button" data-ver="1">Study</a><a href="#Serve" class="widget uib_w_4 d-margins icon tools" data-uib="app_framework/button" data-ver="1">Serve</a> <a href="#Share" class="widget uib_w_7 d-margins icon user" data-uib="app_framework/button" data-ver="1">Share</a><a href="#Worship" class="widget uib_w_15 icon heart" data-uib="app_framework/button" data-ver="1" style="border-top-right-radius: 6px; border-bottom-right-radius: 6px;">Worship</a> </footer>
Beyond this I have searched everywhere in the code to try to figure out how these are being affected and what I found was that a class called "pressed" was being added to them when they were clicked. The class pressed was mentioned hundreds of times throughout various documents in the project (the tabs template project) and I couldn't find one specific line of code I could manipulate. So, what I tried to do was put the following code into my homepage with hope that it would remove the pressed class from whichever button had it when the user navigated to the homescreen:
But it did not work. I also tried giving the buttons ids and use a similar method, but that did not work either. So far the only piece of code I have even found that can manipulate the class was:
And the only way I know to manipulate that CSS code is to change the colors. Plus, I don't want to manipulate the CSS because I want it to function properly when I navigate away from the homepage as well.
Thank you for any advice you can give. Sorry this was so long, I wanted to be as thorough as I could regarding my thought process and what I have looked at/tried so far.
You should use removeClass to remove a class for an element, just assigning empty does not do the job.
Besides, if you are using the tab view template, the press/unpress is taken care of as part of the UI framework. i.e. when you go back to Home button, all other buttons should appear unpressed.
I tried doing the removeClass as well (and just retried it to double check). Also, I could not find a back to home button within the UI so I created my own. Could you direct me to how I can access the UIs version? I think that would be easier than trying to figure out how to code it.
Back button is implemented as part of App Framework. You only need to put a button it with class backbutton in the header.
<header> <a id="backButton" class="button backButton">Back...</a> <h1>Title</h1> </header>
If you started with the tabview template (without App Designer), by default it uses App Framework 3.0 (you can see the version number in the Appframework.ui.js file under www/lib/appframework/.
Also, if you are using tabview template, the footer code removes the history when you click the button. So, in order to make the back button effective, you have to remove the code onclick="$.afui.clearHistory() from all 4 tabs.
So, essentially instead of this code :
<footer> <a href="#tab1" class="icon home" onclick="$.afui.clearHistory()">Home</a> <a href="#tab2" class="icon heart" onclick="$.afui.clearHistory()">Favorites</a> <a href="#tab3" class="icon message" onclick="$.afui.clearHistory()">Messages</a> <a href="#tab4" class="icon user" onclick="$.afui.clearHistory()">Profile</a> </footer>
<footer> <a href="#tab1" class="icon home">Home</a> <a href="#tab2" class="icon heart">Favorites</a> <a href="#tab3" class="icon message">Messages</a> <a href="#tab4" class="icon user">Profile</a> </footer>
I tried doing exactly as you suggested but it still did not work. Even when I hit the back button the tabs still stay highlighted in the emulator (on both the Samsung Galaxy S6 and the iPhone 6). Any idea why this might be?
I am trying to start XDK on my PC and the message I get is: Attempt to contact authentication server is taking a long time. You can wait, or check your network connection and try again. It have waited for hours but nothing is changing. Please help
It said the file was created by a nwer version of Intel XDK and cannot be read. How do I install the newer version of Intel XDK? Do you think that is the reason it is not working?