Need help in jQuery Mobile

jch02140

jch02140

New Member
Messages
18
Reaction score
0
Points
1
Hi, I tried getting the default icons that comes with the jQuery mobile framework to show up in the navbar, but all I get is a blank circle.
I stored all the static page under "/mobile" and images under "/mobile/images"
How can I fix it? Any help is much appreciated.

Here are the snippet of codes.
You can also take a look at it here: http://jch02140.x10hosting.com/mobile/index.php

From js/jquery.mobile-1.0.1.css
Code: 
[COLOR=#333333][FONT=arial].ui-icon,
.ui-icon-searchfield:after {
    background:                         #666 /*{global-icon-color}*/;
    background:                         rgba(0,0,0,.4) /*{global-icon-disc}*/;
    background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
    background-repeat: no-repeat;
    -moz-border-radius:                 9px;
    -webkit-border-radius:                 9px;
    border-radius:                         9px;
}[/FONT][/COLOR]


From mobile/index.php

HTML: 
<!-- JavaScript Files -->
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/jquery-ui-1.8.18.custom.min.js"></script>
        <script src="js/jquery.mobile-1.0.1.min.js"></script>
 ...
    <div data-theme="a" data-role="footer" data-position="fixed">
                <!-- Navigation Menu -->
                  <div data-role="navbar" data-iconpos="top">
                    <ul>
                        <li>
                            <a href="#page1" data-theme="a" data-icon="home" class="ui-btn-active">
                                Home
                            </a>
                        </li>
                        <li>
                            <a href="#page2" data-theme="b" data-icon="info">
                                Battle
                            </a>
                        </li>
                        <li>
                            <a href="#page3" data-theme="c" data-icon="">
                                Shop
                            </a>
                        </li>
                        <li>
                            <a href="#page4" data-theme="d" data-icon="">
                                Button
                            </a>
                        </li>
                        <li>
                            <a href="#page5" data-theme="e" data-icon="">
                                Help
                            </a>
                        </li>
                    </ul>
                </div>
             </div>


​
 
Last edited:
descalzo

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
URLs in CSS are relative to the .css file directory, NOT the page displayed

background-image: url(images/icons-18-white.png)

will make the browser look in the images directory located in the directory that contains the .css file. Which isn't there.
 
K

kloadx10

New Member
Messages
24
Reaction score
0
Points
0
Why not include the css and js files in the normal way like
Code: 
<head>     
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
you know simple is better just a thought
 
Last edited:
jch02140

jch02140

New Member
Messages
18
Reaction score
0
Points
1
Thanks for the tips.

I have modified the css file to include my own icons but it doesn't seem to work even with the default icons...

I tried to change the code to

Code: 
background-image: url('http://jch02140.x10hosting.com/mobile/images/icons-18-white.png')

but still didn't solve my problem...
 
descalzo

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
Try changing the name of the dir from images to img OR put it in a subdirectory. If I remember right, the Apache setup here aliases /images to the default Apache images folder used to display directory listings.
 
jch02140

jch02140

New Member
Messages
18
Reaction score
0
Points
1
Hi descalzo,

Thanks for the tips, I will try that and see if it works :D
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
descalzo said:
If I remember right, the Apache setup here aliases /images to the default Apache images folder used to display directory listings.
Click to expand...

You're probably thinking of "/icons". "/images" should be fine. It's used on far too many sites to store images for it to be aliased.

@jch02140: leave the scheme and server name out of the URL. All you need is an absolute path (e.g. "/mobile/images/icons-18-white.png"). In some cases, the proper relative path (e.g. "../images/icons-18-white.png") is also appropriate.

When posting a link to a live page, make it as minimized as the sample code. There shouldn't be anything extraneous, yet the issue must be reproducible. The page should also be complete and reproduce the issue, whereas the page you link to has no .ui-icon or .ui-icon-searchfield elements.
 
Last edited:
descalzo

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
Seems to be working now. What was the fix? (guessing it might have to do with offsets into the sprite image)
 
jch02140

jch02140

New Member
Messages
18
Reaction score
0
Points
1
Thanks for the help guys. :D

After checking everything, it was a typo somewhere within my CSS files... >_<
 
You must log in or register to reply here.
Top