jQuery Forum

I'm working on this JQuery Mobile site using 1.3.1 and JQuery 1.9.1 and my issue is I have a couple of custom icons in the header. One for the logo and one for a Share symbol. Neither are showing up. Instead, I get the generic + symbol. I've done this before so I'm puzzled why I'm not seeing the custom data icon. Here's the code I'm using:

1. <header data-role="header" data-position="fixed" data-id="appHeader"> <a href="#" data-role="button" data-iconpos="notext" data-icon="logo">Back</a>
             <h1>Designer Pearls</h1>
             <a href="#" data-role="button" data-iconpos="notext" data-icon="share">Share</a> </header>
2. /* custom icons */
   .ui-icon-logo {
       background-image: url("images/logo-18-white.png");
   }
   .ui-icon-share {
       background-image: url("images/share-18-white.png");
   }
   
   @media only screen and (-webkit-min-device-pixel-ratio: 2) {
       .ui-icon-logo {
               /*this image should be sized at 36 x 36 */
           background-image: url("images/logo-36-white.png");
           background-size: 18px 18px;
       }
       .ui-icon-share {
               /*this image should be sized at 36 x 36 */
           background-image: url("images/share-36-white.png");
           background-size: 18px 18px;
       }
   }
   

Got an unusual situation here. In JQM, on the ui-listview you basically use the default right arrow indicator or assign a different image to it. However, my client wants it where depending on the page you're on, the arrow indicator is a different color depending on the theme letter being used. Let me try to elaborate. Let's see I have one page with a ui-listview and it's theme A and the background is white. So the arrow should be black. On another page, the background is black and it's theme B so the arrow should be white. Make sense? It's basically how iOS apps work. And I want to do it the same with JQM. How do I attempt that in my stylesheet?

Originally, I had this working and then I made it where the header and footer stay persistent as you scroll through the content, then the client changed their mind and wanted it where the header and footer disappear when you scroll through the content. Now my issue is trying to make this come back to where it originally was. So I got rid of the data-tap-toggle and data-id="persistFooter" or data-id="persist" but the header and footer are still stuck where they are and don't disappear when you start scrolling the content. So how can I make it where the header and footer actually disappear when you scroll that area? Here's the site in question.

Having an issue with this page that features a ui-listview and a ui-navbar and I'm trying to style it where the ui-navbar button that in this example is the same color gradient as the listview, is a completely different background color. It's theme C, but if I style .ui-btn-up-c it affects both the button in the navbar and the button in the listview. So I tried copying that style and doing one for .ui-navbar .ui-btn-up-c but that just makes both buttons in the navbar the exact same color and style. Not good. I want the selected button on the left to be the same blue background color as it currently is. So how can I style it to make this work?

I'm creating a simple iOS/Android app and the client wants a small strip at the bottom of the ui-content div right above the footer that basically only appears if there's more content to scroll in that section. Basically, a simple gradient (using CSS3 properties). Being new to JQM, I'm wondering what the best approach is to accomplish this. Or maybe someone can point me to another forum post, tutorial, etc. that would offer a solution to this.

Key is if there's no content to scroll, the strip does not appear. Only when there's scrolling in the content area. So hopefully that makes some sense.

I guess my question is would it be better to place this div//section for the more strip at the bottom of the content div? Or the top of the footer?