Databases
StackOverflow2013
Postsdbo
POjQuery Mobile/ jqTouch Image width
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Mobile/ jqTouch Image width
    text
    copied!<p>I want to have a static footer image with 5 buttons for navigation in my mobile phone website. The image is here <a href="http://www.pintum.com.au/jm/footer3a.jpg" rel="nofollow">http://www.pintum.com.au/jm/footer3a.jpg</a>. The blue icons should be the default, the yellow icon should only be visible for the hover or active state.</p> <p><em>I want to know how can I make this image scale to the correct width on all mobile devices (landscape and portrait) and have links to other pages and make the current/active pages icon the yellow color?</em></p> <p><strong>What I have tried so far</strong></p> <ul> <li><p>I first tried to make a CSS Sprite but that go ugly (complex) quickly. Painful working with widths everywhere so the image scales correctly as I had no way of knowing the height in pixels since the width is dynamic. I could use JS to find the width and calculate height on the fly. But this sounds like overkill.</p></li> <li><p>Next I tried to have a single image with a width of 100% then place div overlays on top of the image. But with this solution I could not figure out how to navigate pages using JavaScript click event, or figure out how I would be able to change the image icon on the selected page <a href="http://jsbin.com/uraya5/3/" rel="nofollow">http://jsbin.com/uraya5/3/</a> . And detrmining the correct height for the div</p></li> <li><p>Last I tried to make each button a seperate image. These seems like the easist soultion. But jQuery Mobile adds a bunch of extra styles to the button I do not know how to remove. See <a href="http://jsbin.com/uraya5/4" rel="nofollow">http://jsbin.com/uraya5/4</a> </p></li> </ul> <hr> <p>So whats the best/easiest way to do this? </p> <ul> <li>How can I remove the style around links? </li> <li>Or can I use a single image CSS sliding door method? To reduce HTTP request.</li> </ul>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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