Software Archive
Read-only legacy content
17061 Discussions

Getting rid of pressed tabs

Brent_K_
Beginner
621 Views

Hey everybody!

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,

Brent Keath

0 Kudos
11 Replies
Swati_S_Intel1
Employee
621 Views

Which template are you using and which framework? Can you share the code so I can point to you where to modify?

 

0 Kudos
Brent_K_
Beginner
621 Views

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:

<script>function unpress(){document.getElementsByClassName("pressed")[0].className="";}</script>

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:

.footer>footer>a.icon.pressed:not(.button):before{color:#3a9de2}#afui.ios>#aside_menu,#afui.ios>#menu.tabletMenu{border-right:0;background:#000;color:#fff}#afui.ios

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.

0 Kudos
Swati_S_Intel1
Employee
621 Views

You should use removeClass to remove a class for an element, just assigning empty does not do the job.

For example:

element.removeClass("pressed");

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.

0 Kudos
Brent_K_
Beginner
621 Views

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.

0 Kudos
Swati_S_Intel1
Employee
621 Views

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>

Use this:

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

 

 

0 Kudos
Brent_K_
Beginner
621 Views

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?

0 Kudos
Swati_S_Intel1
Employee
621 Views

I've attached a working project. See if it works for you.

0 Kudos
gibson_c_
Beginner
621 Views

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

0 Kudos
Brent_K_
Beginner
621 Views

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?

0 Kudos
PaulF_IntelCorp
Employee
621 Views

@gibson -- please start a new thread, your question is unrelated to this forum thread.

0 Kudos
Swati_S_Intel1
Employee
621 Views

@Brent, that project was created using Early Access version. Here you go, I've attached the zip that will work with regular XDK.

0 Kudos
Reply