Note that there are some explanatory texts on larger screens.

plurals
  1. POImage Sprite- Navigation Bar
    primarykey
    data
    text
    <p>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</p> <pre><code>.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;} </code></pre> <p>This is the HTML code:</p> <pre><code> &lt;div class="nav-glyphish-example ui-navbar" data-role="navbar" data-iconpos="top" data-theme="g" role="navigation" &gt; &lt;ul class="ui-grid-d"&gt; &lt;li class="ui-block-a"&gt; &lt;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"&gt;&lt;span class="ui-btn-text"&gt; Home &lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="ui-block-b"&gt; &lt;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" &gt;&lt;span class="ui-btn-text"&gt; Me &lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="ui-block-c"&gt; &lt;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" &gt;&lt;span class="ui-btn-text"&gt; Friends &lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="ui-block-d"&gt; &lt;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"&gt;&lt;span class="ui-btn-text"&gt; Companies &lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="ui-block-e"&gt; &lt;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"&gt;&lt;span class="ui-btn-text"&gt; Invites &lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload