1

I've searched everywhere, looked at all answers and still can't find a solution for myself. The custom png image in the link data-icon is not showing up in the header. Here's the structure I have:

<div data-theme="b" data-role="header" data-position="fixed" data-tap-toggle="false" style="height:100px">
    <img style="width:100%; height:100px" src="style/images/appbg.png" alt="Header"/>
    <a data-role="button" data-iconpos="left" data-icon="my-home">Home</a>
</div>

And in the head section I have:

<style>.ui-icon-my-home{background-image: url("style/images/home.png");}</style>

It looks like it should work. I tried adding in the style 50% 50% no-repeat, tried adding this to a css file...nothing worked.

I'm using jquery 2.0 min, jquery-mobile-1.3.1.min, and jquery-mobile-1.3.1.min.css. Maybe these new versions don't work? Should I use an older version?

I'm also loading the CSS first, then jQuery and finally jQuery Mobile. Another thing is the image shows up when I do the regular img tags...so the path is correct. It's only when I try to input the image into the link data-icon, then it doesn't show up. Please help me out here...

user2025469
  • 1,531
  • 2
  • 14
  • 26
  • Does home.png actually exist in the location you specify? Also, you have no class of `ui-icon-my-home` in your html, but maybe it is added by jQuery. – dezman May 28 '13 at 16:54
  • The home.png is in (Phonegap Eclipse) assets-www-style-images. JQM is in the style folder. From other examples, setting data-icon="my-home" should work when I want to style the icon as .ui-icon-my-home{}... – user2025469 May 28 '13 at 16:58
  • 1
    Tell me do you use 1 html multiple pages template or are you using multiple HTML files, and if you are using multiple HTML files is this your first HTML file or any other? This is important. – Gajotres May 28 '13 at 19:00
  • @Gajotres you are correct. This is my second HTML file. I inserted the code in my initial index.html file and the images show up in my second html file. I really hate this JQM ajax loading of all the pages...it's so different and confusing. Inserting code on the first page to make changes to the third page...I don't like it but what's the alternative??? – user2025469 May 29 '13 at 16:26

1 Answers1

0

I can see you have understood my question and I must confess I like people who can see through questions.

If you want to understand this problem you need to understand how jQuery Mobile works. If used in a standard way it stores everything inside a DOM, so every HTML page used will be stored inside a DOM. And this can cause problems if you don't know what is happening, and unfortunately even if you have looked into official documentation you wouldn't find this explicitly told.

Only first page is loaded fully, form every other page only BODY is loaded, even then only data-role="page" DIV. And everything else will be discarded. Unfortunately this is how it is so you will need to take care. In my previous link you can find few methods of prevention.

Other problems are id's. Because how DOM works you can have same id's inside but if you try to access them somehow only first one will be accessed. Basically you need to make sure every page has an unique ID. Rest of the content can be identical because jQuery Mobile has a nice selector:

 $.mobile.activePage

It can be used to access current data in a current active page, for example like this:

$.mobile.activePage.find('someID');
Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130