I am newbie to jquery mobile. I am executing the attached code.I have anchor tags whose role is button and attached data-icon as arrow-r but it is not showing properly as I expected.please help.
Arrow icon is showing like this
but I expected to show like this
I expected to show like this
am I missing CDN?Please help.
<!DOCTYPE html>
<!--
Copyright (c) 2012-2014 Adobe Systems Incorporated. All rights reserved.
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<style type="text/css">
.custom-btn{
width:200px !important;;
height: 50px !important;;
}
#btn1{
height: 8px;
}
</style>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header">
<h1 class="head">home</h1>
Blog
Home
</div>
<p>Welcome to the view source app</p>
<!-- <div data-role="controlgroup"> -->
Blog
Videos
Photos
Tweets<!--
</div> -->
</div>
<div data-role="page" id="videos" data-title="View Source:Videos">
<div data-role="header">
<h1>Videos</h1>
Videos
</div>
<p>Videos page</p>
Home
</div>
<div id="Photos" data-role="page" data-title="View Source:Photos">
<div data-role="header">
<h1>Photos</h1>
Photos
</div>
<p>Photos page</p>
Home
</div>
<div id="Tweets" data-role="page" data-title="View Source:Blog">
<div data-role="header">
<h1>Tweets</h1>
Home
</div>
<p>Tweets</p>
Home
</div>
<!-- Start of first page: #one -->
</body>
</html>
Change your data-icon attribute to carat-r:
Home
Please take a look to the icon list: https://api.jquerymobile.com/icons/
And you have linked twice the jQuery Mobile JS library and the stylesheet. Try using only one of each at the same time.
Related
I have created a simple application in Worklight 6.0 with jquery mobile 1.3.2.
This is an single page application with Header, Content and Footer. Necessary jquery mobile javascript and css files are included.
Given below is the html file from the application.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title>DemoApp</title/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
<link rel="shortcut icon" href="images/favicon.png"/>
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"/>
<link rel="stylesheet" href="css/DemoApp.css"/>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css"/>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<div data-role="page">
<div data-role="header"><h1>Header</h1></div>
<div data-role="content">Content</div>
<div data-role="footer" data-position="fixed"><h1>Footer</h1></div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/DemoApp.js"></script>
<script src="js/messages.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
</body>
</html>
I have created the Windows Phone 8 Environment and built the worklight project. With the help of Microsoft Visual Studio Express 2012 for Windows Phone the application is launched in windows phone emulator.
When I scroll the screen I am getting the following response.
Please suggest a way to solve this issue.
If what you want is fixed header/footer with the content in between scrollable, then try:
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h3>Header</h3>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h3>Footer</h3>
</div>
</div>
The tap-toggle setting is to disable hiding the header/footer on tap, but I haven't been able to get JQM fixed headers/footers to behave at all unless I disable it.
I've also found on Windows Phone 8, the footer will position itself too high. So I have to add the following to the CSS:
#media screen and (orientation: portrait) {
#-ms-viewport {
width: 320px;
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
}
Can you show us the app CSS that you are using DemoApp.css. Try disabling the default css in it and running again.
The problem seems to be of the css having been told that the screen size is something bigger than the actual device size.
Regards,
Elvis
I have a header, in that i am trying to user a icon on the left side corner. I have used jquerymobile icons in that page. But i cant able to see the icon symbol, only empty icon i displayed. Find the attached screenshot for reference. below is the code from html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"> </script>
</head>
<body>
<div data-role="page" id="test">
<div data-role="header" data-theme="a">
<h1>Home</h1>
</div>
</div>
</body>
</html>
Just tried it in a fiddle and it seems to work OK for me. http://jsfiddle.net/LYCjv/
Might be worth downloading jQueryMobile hosting the files on your own server and referencing the css/js files locally, might be some issue with the CDN?
As part of my first PhoneGap app, I need to load up an OpenLayers map (ultimately using my own local custom tiles, but for the moment, I'm just testing with online ones, modding the standard OpenLayers examples).
But when I try to initialise the map in the iOS simulator, the tiles don't want to load, using either OpenStreetMap or alternatives. The map initialisation gets as far as placing the controls, and the copyright notice, but I keep getting the blue question-mark boxes instead of live tiles. Testing the map-loading code independently in a browser, it seems to function properly if I remove the jQuery Mobile references, but that doesn't seem to work if I tweak the file in Xcode, and besides that, it screws up my desired appearance and behaviour. Is this a known conflict and does anyone know a way around it?
Thanks in advance!
Giles
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobilecus-1.1.0.min.css"/>
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery.mobile-1.1.0.min.js"></script>
<script src="js/sessionstorage.1.4.js"></script>
<script src="js/OpenLayers.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() { //ready
// JQuery stuff trimmed out
}); //end ready
var map
function init() {
map = new OpenLayers.Map("mapview");
map.addLayer(new OpenLayers.Layer.OSM());
var lonLat = new OpenLayers.LonLat( 0.0 ,51.0).transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection);
var zoom=10;
map.setCenter (lonLat, zoom);
}
</script>
</head>
<body onload="init();">
<div data-role="page" id="page1" class="page">
//html for first page (no map)
</div><!-- /page -->
<div data-role="page" id="page2" class="page">
<div data-role="header" data-id="fixedheader" data-position="fixed" >
<h1>Fixed header</h1>
</div><!-- /header -->
<div data-role="content">
<div id="leftbar">
<img src="images/leftbar.png">
</div><!-- /leftbar -->
<div id="mapview">
//map appears here
</div><!-- /mapview -->
</div><!-- /content -->
<div data-role="footer"data-id="fixedfooter" data-position="fixed">
<a id="ForwardButton">Forward</a><a id = "BackButton" href="#page2">Back</a>
</div><!--/footer -->
</div><!-- /page -->
</body>
</html>
Sorry - forget I spoke! Just discovered that I needed to add a reference to the map server domain to the "ExternalHosts" in Cordova.plist. Now the images seem to be loading okay.
I am trying to use the latest stable Jquery Mobile version 1.1.0 that was announced on april 13 2012. But I noticed something weird.
If I try to float a 'p' tag in the footer, the background becomes white. This is not the case if I use the 1.1.0-rc.1 version. Am I overlooking something? Because now I cant use the latest version.
This is the code, you can just copy and paste it to see it.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- New version 1.1.0 -->
<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.7.1.min.js"></script>
<!-- New version 1.1.0 -->
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style type="text/css">
p {
float:right;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content">
</div>
<div data-role="footer">
<p>test</p>
</div>
</div>
</body>
</html>
This fixed the problem: use text-align: right instead of float: right
It seems that with jQuery Mobile version 1.1.0, the footer doesn't get the height set, so therefore the background is not visible. Your solution works for text, but not when you want to have two divs floated next to each other.
I solved it by applying this style:
#footer {
clear: both;
overflow: hidden;
}
I don't see what I'm doing wrong here - I'm trying to create a baseline jQuery mobile template. Looking at the css panel in Firefox, there's no css being rendered.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="Phillip Senn">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile template</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<script>
$(document).bind("mobileinit", function() {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="myPage">
<div data-role="header">
<h1>jQuery Mobile Template</h1>
</div>
<div data-role="content" id="myContent">
My Content
</div>
<div data-role="footer">
<h4>Copyright © 2012 Your name here</h4>
</div>
</div>
</body>
</html>
It's just not rendering as a jQuery mobile page.
You code looks fine, I think it's a problem with the latest jQM builds
http://jsfiddle.net/ArGXg/1 (using latest linked libraries)
http://jsfiddle.net/ArGXg/4 (using 1.0 released linked libraries)
Latest Linked Libraries
http://code.jquery.com/mobile/latest/jquery.mobile.min.css
http://code.jquery.com/mobile/latest/jquery.mobile.min.js
1.0 Release Linked Libraries
http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css
http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js
Note:
Also jQM does not support jQuery verison 1.7.1 yet
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
used 1.6.4
http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
http://code.jquery.com/jquery-1.6.4.min.js