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;
}
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?
In this case, hovering over the left link makes a tiny dash appear to its right (between the two links). How can I get rid of this? I see this in Safari and Chrome both, but I don't see anything in the style sheet that would make it do this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Walls</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="custo.css">
<script src="prettyPhoto_compressed_3/js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="prettyPhoto_compressed_3/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="prettyPhoto_compressed_3/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</head>
</head>
<body>
<br>
<a href="gallery.html">
<img src="test.jpg" class="testclass" alt="test" width="170" />
</a>
<a href="info.html">
<img src="test.jpg" class="testclass" alt="test" width="55" />
</a>
<div class="container-fluid">
<br>
</div><!-- .container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8"> <!--initialize prettyPhoto-->
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
</html>
If you're seeing the same thing I'm seeing (I don't have all the style sheets), you're seeing the underline of the a tag for the image.
You can just remove that using text-decoration: none on your image links;
<a href="gallery.html" style="text-decoration: none !important;">
The !important at the end of the style helps to override any selectors in your css which may have already have an !important emphasis.
Of course this is in practice better done using a class that you set on your image links.
This is an old post, but I would like to contribute to something. This will help other people why the dash (-) appears.
This is because there is an empty space inside the a tag. For example:
<a href="#">
<i>test</i>
</a>
If you set your line like this: <i>test</i> the dash/underline will disappear, but some tools might still format your code and they will add the space. So, using the css mentioned in the previous post will eliminate the issue.
i want to try processing.js on an iOS application,
i have checked the projects on
http://procoding.audiocommander.de/ and
http://luckybite.com/iprocessing/
but none of them have an actual working example, so i went to create one...
SO... I have created a project and uploaded in
https://github.com/mako34/processing_iOS
my understanding is that all I need is just a wrapper for html5 canvas and js, for the
processing-1.4.1.js
to work??
my index.html works fine in a browser, not on the device!
my canvas works fine drawing a line on this test template
my js works fine on this test template
but doesnt work on the iphone actual web view,
So what is missing to make the sketch work?
thanks a lot!
here my index.html
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="jquery-1.6.2.min.js"></script>
<script defer src="script.js"></script>
<script src="processing-1.4.1.js"></script>
</head>
<body id="body">
<div id="container">
<div id="main" role="main">
jQuery Alert<br />
Objective-C Alert<br />
Take a picture<br />
</div><!-- #main -->
<canvas data-processing-sources="example.pde" style="border: 1px solid black;"></canvas>
<img id="testImage" src="iphonebattery.jpeg" />
<canvas id="myCanvas" width="320" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.stroke();
</script>
</div><!-- #container -->
</body>
</html>
First off-- you don't want to have two canvas tags. I recommend checking out the actual ProcessingJS website for better implementation: http://processingjs.org/
I have some tutorials on setting up Processing to compile to iOS and preparing your iDevice:
http://ericmedine.com/processing-for-ios/
Hope this helps!
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