Search jQuery

jQuery Forum

jQuery Mobile

jch02140

Custom navbar images?

in jQuery Mobile • 9 years ago

Is there a way to use custom menu images in the navbar which produces something like this?

I tried doing something like this:

<div data-role="navbar">
<ul>
<li><a href="#"><img src="images/home.png></a></li>
<li><a href="#"><img src="images/battle.png></a></li>
<li><a href="#"><img src="images/summon.png></a></li>
<li><a href="#"><img src="images/help.png></a></li>
</ul>
</div>

however, when I view it in the browser there is a black boarder enclosing the images, which is something I do not want. Is there a way to fix that?

Replies(14)

AnthonyC

Re: Custom navbar images?

9 years ago

I believe that if you want to use custom images in a navbar the approach is as follows:

CSS: (Style to suit your image sizes)

For example:

.home_image .ui-icon { background: url(home.png) 50% 50% no-repeat; background-size: 25px 25px; }

HTML:

<div data-role="navbar" data-iconpos="top" >
<ul>
  <li><a data-icon="custom" class="home_image">Home</a></li>
  <li><a data-icon="custom" class="battle_image">Battle</a></li>
  <li><a data-icon="custom" class="summon_image">Summon</a></li>
  <li><a data-icon="custom" class="help_image”>Help</a></li>
  <li><a data-icon="custom" class="menu_image">Menu</a></li>
</ul>
</div>

jch02140

Re: Custom navbar images?

9 years ago

Hi Anthony_ac,

Thanks for the reply. Although my problem isn't about the icon but the actual menu image itself like this:

Here is the test page I upload which you can see there is still a border enclosing the image even after I removed the navbar code:

My problem is that is there a way to remove the surrounding black borders on each image. And is it possible to have the menu image automatically readjusting themselves when more menu items are added?

Edit: The images used here are for testing purposes only and will be replaced. They are no mean in anyway or forms to be use in the production environment.

watusiware

Re: Custom navbar images?

9 years ago

Of course it's possible. It's just CSS.

So, learn CSS.

Borders are just a CSS property.

It's a necessary skill if you are going to create unique jQuery Mobile layouts. Otherwise, JQM gives you a nice, sedate, middle-of-the-road look, and you don't need to know any CSS.

I'd also suggest that you learn to use Web Inspector, Firebug, etc. so that you can experiment directly with CSS changes.

Shreerang

Re: Re: Custom navbar images?

9 years ago

I agree with watusiware. It is just about tweaking the JQM CSS. Shouldn't be difficult at all.

Cheers!
Shreerang
Web Developer

jch02140

Re: Custom navbar images?

9 years ago

I think I just managed to find the part of code that produced the button effect to the image tags and override it.

Thanks for the help :D

AnthonyC

Re: Custom navbar images?

9 years ago

I think you're doing something different (or I am), don't think there should be a need to alter anything? I'm not reproducing your "problem".

jch02140

Re: Re: Custom navbar images?

9 years ago

Hi Anthony,

I am using jQuery 2.0.1 and jQuery Mobile 1.3.1... Not sure if it means anything..

I am getting some other problem after altering the code so I revert back to the default css in the archive... Here are my complete code.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css" />
<title>Hello World</title>
</head>
<body>
<div data-role="page">
<div data-role="content">
Test Page 3
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<a href="#" data-transition="slide" data-direction="reverse"><img src="images/tb_sc_help.png"></a>
<a href="#" data-transition="slide" data-direction="reverse"><img src="images/tb_sc_hl_help.png"></a>
<a href="#"><img src="images/tb_sc_mission.png"></a>
<a href="#"><img src="images/tb_sc_hl_mission.png"></a>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.0.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
</body>
</html>

AnthonyC

Re: Custom navbar images?

9 years ago

I can see a few potential issues, but won't go into detail just now.

I'd be following the example in the docs on how to use custom navbar images, but if you would like to stay on your original post's method, try the following and see how that goes. I see no 'problem' with button borders being applied regardless of data-theme (have used 'c' as it blends with icon background).

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
  <h1>Navbar Test</h1>
</div>
    <div data-role="content">
     Test Page
</div>
<div data-role="footer" data-position="fixed">
  <div data-role="navbar">
   <ul>
    <li><a href="#" data-theme="c"><img src="https://discussions.apple.com/people/psLogic/avatar/46.png?a=1229" /><br />A</a></li>
    <li><a href="#" data-theme="c"><img src="https://discussions.apple.com/people/psLogic/avatar/46.png?a=1229" /><br />B</a></li>
    <li><a href="#" data-theme="c"><img src="https://discussions.apple.com/people/psLogic/avatar/46.png?a=1229" /><br />C</a></li>
    <li><a href="#" data-theme="c"><img src="https://discussions.apple.com/people/psLogic/avatar/46.png?a=1229" /><br />D</a></li>
    <li><a href="#" data-theme="c"><img src="https://discussions.apple.com/people/psLogic/avatar/46.png?a=1229" /><br />E</a></li>
   </ul>
  </div>
</div>
</body>
</html>

Shreerang

Re: Re: Custom navbar images?

9 years ago

Something very similar to what Anthony has shared. Here is a fiddle that I have set up. Have a look.

Cheers!
Shreerang
Web Developer

jch02140

Re: Custom navbar images?

9 years ago

@Anothny_ac and Shreerang

Thanks for the help. Shreerang's code does what I want although there is a little "bug" in the footer bar.

- There is a little "gap" in between the footer bar and the bottom of the browser window.

- The right most image seems to alway have a 1px height extra than any other image even though all images are of the same dimension.

Sample page: http://jch02140.x10.mx/test3.html

Shreerang

Re: Custom navbar images?

9 years ago

Hi jch. I am looking into the bug. Will provide a fix soon.

Cheers!
Shreerang
Web Developer

Shreerang

Re: Re: Custom navbar images?

9 years ago

Hi jch. Here is the fix. http://jsfiddle.net/Shreerang/NnXsn/

Cheers!
Shreerang
Web Developer

jch02140

Re: Custom navbar images?

9 years ago

Thanks Shreerang. :)

watusiware

Re: Custom navbar images?

9 years ago

I don't think it makes much sense to slavishly use jQuery Mobile widgets for everything.

All you want it is a set of images arranged in a grid that you can click on.

There's no reason you need a Navbar for that. You're undoing most of the Navbar functionality and turning it into a set of images that you can click on. Why not simply make a set of images you can click on?

Now, centering things in CSS can be difficult. So, a layout grid might be useful. Take a look at the flex-box CSS on modern browsers as an alternative, though.

Write your own CSS, and then you don't have to fight with the JQM CSS.

Top Reply

Response title

Attachments

jQuery Forum

Custom navbar images?

Replies(14)

Re: Custom navbar images?

Re: Custom navbar images?

Re: Custom navbar images?

Re: Re: Custom navbar images?

Re: Custom navbar images?

Re: Custom navbar images?

Re: Re: Custom navbar images?

Re: Custom navbar images?

Re: Re: Custom navbar images?

Re: Custom navbar images?

Re: Custom navbar images?

Re: Re: Custom navbar images?

Re: Custom navbar images?

Re: Custom navbar images?

Statistics

Tags

Actions