I'm trying to do a very simple task since 2 days while learning Jquery Mobile framework !!!
How to add a custom icon and a centered title inside the header bar of a JQuery page .. ?
There's a lot of post and all refers to "button" icons, that's not my goal.
I just want to set a custom IMAGE on the left side of my header ... as 99% of any web application I think.
Why is it so hard to put in place such basic things ?
I tried this following official doc and posts:
HTML
<html><head>
<title>JQM</title>
<meta name="viewport" content="width=device-width, user-scalable=no , initial-scale=1"/>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>
<link rel="icon" type="image/icon" href="/images/favicon.ico"/>
<link href="/css/steel/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css"/>
<link href="/css/site-mob.css" rel="stylesheet" type="text/css"/>
<script src="/js/jquery-1.10.2.min.js" type="text/javascript"> </script>
<script src="/js/jquery.mobile-1.4.2.min.js" type="text/javascript"> </script></head>
<body><section data-role="page" id="main-page">
<header data-role="header" id="top" data-icon="myimage"><h1>Page Title</h1></header>
<div id="content" data-role="content"/>
<div id="footer" data-role="footer" data-theme="a"/></section></body></html>
CSS (/css/site-mob.css)
.ui-icon-myimage {
background: url(/images/myimage.png) 50% 50% no-repeat;
background-size: 38px 38px;
}
but it doesn't work. No image displayed. .... I'm certainly missing something ..
Thanks for your help
To put an image/logo in the header you do not need to use a custom icon, just place an img tag within an absolutely positioned container:
<header data-role="header" id="top" data-icon="myimage">
<span style="position: absolute; left: 0; top: 0;"><img src="http://lorempixel.com/38/38/business/2/" alt="" /></span>
<h1>Page Title</h1>
</header>
In this example, I am using a SPAN absolutely positioned to the top left corner of the screen. You can adjust LEFT and TOP or the margins to place it as desired.
To create custom icons in jQM 1.4, use the :after pseudo tag:
.ui-icon-myimage:after {
background: url(http://lorempixel.com/38/38/business/1/) 50% 50% no-repeat;
background-size: 38px 38px;
background-color: transparent;
border-radius: 0;
}
Setting the background to transparent and border-radius to 0 removes the rounding and the gray background disk.
To display the icon inline (not on a button), you can do this:
<span class="ui-icon-myimage ui-btn-icon-notext inlineIcon"></span>
Then add CSS for inLineIcon:
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
DEMO of both image in header and inline custom icon
Related
I am working on an quiz application and I am trying to make it responsive so that it looks good on all devices. The application is an html5 application and is contained in an iframe and set to fill the entire iframe. The native width of the application is 640px and the height is 880px (this is how I calculated the padding-bottom to be 137.5%). It works great on computers and on Android devices but it does not work on iOS devices. Everything I'm reading seems to suggest that I've done it correctly but on the iphone the application is too wide for the screen in portrait mode.
Here is the html code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="iframeresponsive_mobile.css" rel="stylesheet" type="text/css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Student Quizzes</title>
</head>
<body>
<!--comment: this next section makes a container div for the page with a max width (defined by css)-->
<div class="pagecontainer">
<div class="intrinsic-container"><!--comment: iframe div begins-->
<iframe src="scrolling/index.html">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
</div><!--comment: iframe div ends-->
<div class="ad"> <!--comment: ad div starts-->
This is an add div...
</div><!--comment: ad div ends-->
</div><!--comment: pagecontainer div ends-->
</body>
</html>
and here is the CSS code:
body {
margin-left: auto;
margin-right: auto;
background-color: black;
}
.intrinsic-container {
position: relative;
clear:both;
height: 0;
overflow: hidden;
/* to get padding-bottom divide the numbers of aspect ratio */
padding-bottom: 137.5%;
z-index: 3;
margin-left: auto;
margin-right: auto;
max-width: 640px;
}
.intrinsic-container iframe {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
border:0px;
margin:0px;
}
.ad{
background-color:lime;
height:80px;
width:100%
}
/* comment: page formatting make a container to constrain width and center */
.pagecontainer {
margin-left: auto;
margin-right: auto;
max-width: 640px;
}
I have included (to my knowledge) the correct meta viewport tag. Why does this work so well in Android but fails in iOS?
I found that the solution was to add the following code to the canvas element on the page
style="width: 1px; min-width:100%"
I had seen this code on stack overflow before but it didn't work until I added the above css to the canvas. I hope this helps someone with a similar problem.
Brett
I have a Bootstrap header customized with CSS borders to give it a 2px and 1px shadow effect, like this:
<div class="navbar" role="navigation">
<div class="header">
</div>
</div>
And the CSS is:
.navbar{
border-bottom: 1px solid #C7C7C7;
}
.header{
border-bottom: 2px solid #EFEFEF;
}
The HTML tags of the page are:
<meta name="viewport" content="width=970" />
For some strange reason, when viewing the page in iOS on a mobile device like iPad or iPhone, it doesn't show the borders correctly. Initially when loading it, it shows only 1px of the line and when zooming the page the other 2px are visible but somehow distorted. The full line is not shown.
What could be wrong here? Is this a iOS issue or..?
I found the solution. I changed the meta tags to:
<meta name="viewport" content="width=device-width, initial-scale=1">
I'm trying to figure out how to add custom icons on the left and right side of a list item. I found this example (see link and code below) but if you notice the icon does not show up, it's just an empty circle. At first I thought it was because the link was invalid but I tried it on my page with my own image but the same thing happened. Unfortunately I only have a reputation of 13 so I am not allowed to post pictures, however here is a sample of how I would like the li item to have icons on both ends.
-*****************************-
| icon_left TEXT icon_right |
-*****************************-
<html>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<style>
.ui-icon-myapp-smiley {
background-image: url(http://swiftthemes.com/forums/images/icons/icon6.png) !important;
}
</style>
<div data-role="page">
<div data-role="content">
<ul data-role="listview">
<li data-icon="myapp-smiley">My LI!!!</li>
</ul>
</div>
</div>
</html>
Code on jsfiddle page http://jsfiddle.net/KYaQT/
jQM 1.0.1 is quite old and outdated now. You should upgrade to 1.4 and jQuery 1.9 or greater.
<ul data-role="listview" data-inset="true" >
<li data-icon="myicon"><span class="ui-icon-myicon2 ui-btn-icon-notext inlineIcon"></span>Text in list item 1</li>
</ul>
.ui-icon-myicon:after {
background-image: url("http://people.mozilla.org/~shorlander/files/australis-linux-svg-test/images-linux/toolbarButton-bookmark.svg");
}
.ui-icon-myicon2:after {
background-image: url("http://forum.librecad.org/images/gear.png");
}
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
For the icon on the right you had the correct approach. Set the data-icon attribute on the <LI>. In jQM 1.4, the CSS uses the pseudo :after element for the background image.
To add an icon on the left, you can put a span inline with the text and add CSS to position it.
If you don't want the gray disk behind the icon, set the background color transparent:
.ui-icon-myicon2:after {
background-image: url("http://forum.librecad.org/images/gear.png");
background-color: transparent;
}
Here is a DEMO
I'm working with jQuery Mobile for the first time and I'm having trouble accomplishing what seems like a simple change to the icons on a collapsible set (accordion).
I want to change the icon for each of the headings on a collapsible set to an up arrow for the expanded state and a down arrow for the collapsed state.
I've created a Fiddle that seems to have the same problem with code that I pretty much copied directly from the jQuery mobile site and modified a little.
Any help or pointers on this would be much appreciated. Thanks!
The docs page you refered actually uses the latest Work in Progress version of jquery mobile.So this is a feature we can expect in future versions of JQM.In the current stable version,we will not be able to change the icon by means of specifying a data attribute.
Here is an eg: which uses the Work in Progress version of jqm - http://jsfiddle.net/AAYjF/
But it is advisable to use the stable version.So you can use the following code to acheive this:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style>
.ui-collapsible .ui-icon{
background-position: -180px 50%;/*Position of up icon in icon sprite*/
}
.ui-collapsible-collapsed .ui-icon{
background-position: -216px 50%;/*Position of down icon in icon sprite*/
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
<div data-role="collapsible" >
<h3>Section 2</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
The logic is to use the background position of the down and up icons in the icon sprite for the collapsed and expanded icons
Demo : http://jsfiddle.net/6x8ew/
I'm sure you can improve upon this solution but here is a basic idea on one way to accomplish this without hacking into the JQM source.
$(document).on('pageinit',function(){
$('.ui-collapsible .ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-arrow-u');
$('[data-role=collapsible]')
.on('expand',function(){
$(this).find('.ui-icon').removeClass('ui-icon-arrow-u').addClass('ui-icon-arrow-d');
})
.on('collapse',function(){
$(this).find('.ui-icon').removeClass('ui-icon-arrow-d').addClass('ui-icon-arrow-u');
});
});
I am using jqm's collapsible events to switch to the appropriate icon.
See my working example.
I haven't done much with jQuery Mobile yet, so take it for what it's worth.
I think you need to put the attributes on the <div data-role="collapsible-set">, not on each data-role="collapsible". Obviously this would only work for all the children, and it wouldn't let you target individual children.
With jquery mobile version 1.4.0, you can accomplish this by having the following code in your CSS file
For custom right arrow
.ui-icon-arrow-r:after {
background: url("Path to your image file") no-repeat scroll 0px 0px transparent;
}
For custom down arrow
.ui-icon-arrow-d:after {
background: url("Path to your image file") no-repeat scroll 0px 0px transparent;
}
I need to open a popup window to a custom size. Using suggestions from jQuery mobile docs I can get the custom size to work when I load the page with ajax (in the same .html document). When I have a separate .html document, it doesn't load the custom width I specify.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<style>
.ui-dialog .ui-header,
.ui-dialog .ui-content,
.ui-dialog .ui-footer {
max-width: 800px;
margin: 10% auto 15px auto;
}
</style>
</head>
<body>
<div data-role="page" id="popup">
<div data-role="content">
<a data-role="button" href="#" data-rel="back">back</a>
</div>
</div>
</body>
</html>
This is the code. If I link to it within the same file, and just use
popup
It works fine. You can see the css rules that jQuery Mobile says to add if you want to change the width (jQuery Mobile Dialog docs).
I answered my own question. I found that with the ajax loading, when the page is fetched it only gets the content from the target page. If I want to provide some custom CSS to be applied to the target page, I need to have it on the parent page (or the page that is calling the popup).