To do a simple override on the JQuery Mobile Background Colour, you can simple change your own css file the properties (making sure it overrides jquery.mobile.css using !important):
.ui-body-c { background:#ffffff !important; }
This changes the background to white!
Building on top of media types the W3C added media queries. A simple media query looks like the following:
1 2 3 |
@media screen and (max-width: 1200px) {
css here
}
|
It begins with the media type (in this case screen) and is followed by the query as a feature: value pair. Here we’re targeting browsers with a max-width of 1200px
The type and the query are joined by the “and” operator. We’ll see in a bit that we can chain this operator to target very specific devices and characteristics
Above we started the media query with @media, but there are actually 3 ways to include media queries.
- @media which is added in your css file — @media screen and (max-width: 1200px) {css here}
- as part of html link element — < link rel=”stylesheet” href=”my-style.css” media=”screen and (max-width: 1200px)” / >
- @import in .css — @import url(“my-style.css”) screen and (max-width: 1200px)
The @media method is probably the most common and it has the advantage of keeping all your css in a single css file. It’s likely what you’ll use most often in practice.
I had used this technique of overriding existing color themes in Jquery Mobile with another intention in mind, and that is to change the colour of the bottom part of the JQuery Mobile page to match the content section page.
For some reason simply chancing the background-color in the content section of the JQuery Mobile Page doesn’t change the entire page background color. E.g.
<div data-role=”content” style=”background: rgb(0, 0, 0);”>
<div id=”contentpage”>
………
</div>
</div>
If you view portrait in a iPad, there is a blank gap at the bottom of the page that hasn’t changed color.
A quick work around is to use override the existing data-themes in JQuery Mobile e.g. data theme a, so you can edit your own css file with the following: –
.ui-body-a, .ui-overlay-a {
color: rgb(0, 0, 0) !important;
text-shadow: none !important;
}
This theme is the dark theme, and !important notation overrides the existing settings set by JQuery Mobile CSS, this sets the entire background color to black including the bottom panel part (I need to find out why it does this!). It also sets the text shadowing to none (which is an annoying trait set by JQuery Mobile), as it doubles the font somehow making it a bit blurry especially on a light text on a darker background.
If you ever receive the error such as the following on JQuery Mobile popups: -
Uncaught Error: cannot call methods on popup prior to initialization;
This is due for some reason that the pop up boxes are not initialised properly as a JQuery object.
All you need to do to resolve this is to call the popup() method beforehand: -
$(“#popUpMessage”).popup();
$(“#popUpMessage”).popup( “open”, {transition: “fade”} );
Having discovered the changepage event in Jquery Mobile, this had resolved a problem you may encounter with any top bar navigation bar to be fixed besides the home page with a Panel.
The problem is that for any other page than the home page or first page, the top bar navigation doesn’t stick to the top of the page, even though you set the top bar like so: -
<div data-role=”header” id=”topbar” data-position=”fixed”>
…..
</div>
with the Panel component.
This can be simple fixed with placing the changpage event handler inside the onclick event like so: -
<div id=”menu” data-role=”panel” data-position-fixed=”true”>
<nav id=”sidenav” class=”">
<h3>HEADER HERE</h3>
<ul>
<li><a href=”#” onclick=”$.mobile.changePage(‘#page1′, { transition: ‘fade’} );”>Page 1</a></li>
<li><a href=”#” onclick=”$.mobile.changePage(‘#page2′, { transition: ‘fade’} );”>Page 2 </a></li>
<li><a href=”#” onclick=”$.mobile.changePage(‘#page3′, { transition: ‘fade’} );”>Page 3</a></li>
<li><a href=”#” onclick=”$.mobile.changePage(‘#page4′, { transition: ‘fade’} );”>Page 4</a></li>
</ul>
</div>
If you now set the extra pages #page1, #page2, #page3, and #page4, the top bar navigation should stay fixed at the top!
Using @media screen in CSS, this is a very useful tip for responsive design for web frameworks of any sort (including which I have used for JQuery Mobile), here the code points to a popup box div element for maximum widths 319px, 639px, 959px, and a minimum width of 960px and changes the CSS accordingly.
It is very dynamic in that it can change on the fly, and is very useful for images.
@media screen
and (min-width : 180px)
and (max-width : 319px)
{
div .popup
{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-100px;
width:200px;
height:66px;
}
div .popuplarge
{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-100px;
width:200px;
height:150px;
}
}
@media screen
and (min-width : 320px)
and (max-width : 639px)
{
div .popup
{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-100px;
width:200px;
height:66px;
}
div .popuplarge
{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-100px;
width:200px;
height:150px;
}
}
@media screen
and (min-width : 640px)
and (max-width : 959px)
{
div .popup
{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-100px;
width:300px;
height:100px;
}
div .popuplarge
{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-100px;
width:300px;
height:150px;
}
}
@media screen
and (min-width : 960px)
{
div .popup
{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-100px;
width:300px;
height:100px;
}
div .popuplarge
{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-100px;
width:300px;
height:150px;
}
}
A very very useful event handler that I have found in JQuery Mobile is the pageshow. It’s useful for when you want to update something inside a function due to a page cahnge or page transition. It acts as a response to a page change and becomes active. Here I wrote code that can update the href link of a#register if you switch between the home page and the register page which changes to #registerpage and #homepage respectively!
$(document).ready(function() {
$(‘#homepage’).on(‘pageshow’, function() {
$(“a#register”).attr(‘href’, ‘#registerpage’);
});
$(‘#registerpage’).on(‘pageshow’, function() {
$(“a#register”).attr(‘href’, ‘#homepage’);
});
});
Hope that helps!
