0

I have a navigation bar where the icons are built using a sprite. I have blue and green icons in the sprite but I am having trouble switching the icon to green when the button is in the .ui-btn-active state in jquery mobile. Can anyone assist? Below is my attempt at accomplishing the desired result. Thanks. Steven

.nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
     .nav-glyphish-example .ui-icon { width: 40px!important; height: 40px!important; margin-   left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
    #home .ui-icon{background: url(glyphish/icons/icons-gray/imagesprite.png) no-repeat center; background-position: -444px 0; width: 28px; height: 30px;}
    #home .ui-icon .ui-btn-active{background: url(glyphish/icons/icons-gray/imagesprite.png) no-repeat center; background-position: -522px 0; width: 28px; height: 30px;}

This is the HTML code:

 <div class="nav-glyphish-example ui-navbar" data-role="navbar" data-iconpos="top" data-theme="g" role="navigation" >
                    <ul class="ui-grid-d">
                        <li class="ui-block-a">
                            <a id="home" href="calendartop.html" data-theme="g" data-icon="home"  data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-inline="true"><span class="ui-btn-text">
                                Home
                            </span></a>
                        </li>
                        <li class="ui-block-b">
                            <a id="me" href="me.html" data-theme="g" data-icon="custom"  data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-inline="true" class="ui-btn ui-btn-up-g ui-btn-inline ui-btn-icon-top" ><span class="ui-btn-text">
                                Me
                            </span></a>
                        </li>
                        <li class="ui-block-c">
                            <a id="friends" href="friendshome.html" data-theme="g" data-icon="custom" class="ui-btn-active ui-state-persist ui-btn ui-btn-up-g ui-btn-inline ui-btn-icon-top" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-inline="true" ><span class="ui-btn-text">
                                Friends
                            </span></a>
                        </li>
                        <li class="ui-block-d">
                            <a id="companies" href="companyhome.html" data-theme="g" data-icon="custom"  data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-inline="true" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-up-g"><span class="ui-btn-text">
                                Companies
                            </span></a>
                        </li>
                        <li class="ui-block-e">
                            <a id="invites" href="eventhome.html" data-theme="g" data-icon="custom" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-inline="true" class="ui-btn ui-btn-up-g ui-btn-inline ui-btn-icon-top"><span class="ui-btn-text">
                                Invites
                            </span></a>
                        </li>
                    </ul>
                </div>
Steven
  • 180
  • 3
  • 3
  • 12

1 Answers1

1

You need to change the last selector to #home .ui-icon.ui-btn-active. That is, assuming that the icon's tag is usually something like <a class="ui-icon"> and becomes <a class="ui-icon ui-btn-active"> when active.

To simplify your CSS, the second rule can just be

#home .ui-icon .ui-btn-active{
    background-position: -522px 0;
}

since the other stuff stays the same.

G-Nugget
  • 8,666
  • 1
  • 24
  • 31