Please see www.lancoministorage.com as an example. When I load this site up on my iPhone, the content displays at the top (starting with the call button), and the header is not seen unless someone would manually pull the screen down. Is there a way I can get this to load with the header image displaying at the top?
This is how I did my main layout.
<!DOCTYPE html>
<html>
<head>
<title>Lanco Mini Storage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="c">
<div data-role="header" data-theme="c">
<img src="images/logo.jpg" alt="Lanco Mini Storage">
</div>
<!--header-->
<div data-role="content" data-theme="a">
<ul data-role="listview" data-divider-theme="a" data-theme="b" data-inset="true">
<li>Call Us at (717) 291-6022</li>
<li>Send Us an Email</li>
<li>Map to Our Location</li>
<li>Hours of Operation</li>
</ul>
</div><!--content-->
<div data-role="footer" data-theme="c">
<div data-role="navbar" data-iconpos="top" class="footer">
<ul>
<li>View Full Website</li>
</ul>
</div><!--navbar-->
</div><!--footer-->
</div><!--page-->
...page content continued (not shown)
Thank you for your help!
Related
Trying to make a dialog box in jquerymobile 1.4.5 a larger width. According to an example AND the directions on http://demos.jquerymobile.com/1.4.5/pages-dialog/
I think this should work (but it doesn't seem to). I copied their example and then overrode the .ui-dialog-contain attribute as documented. I'm using a Mac/Chrome to render the page. And I have seen this post before, but I can't get anyone's solution to work. I think some of that might be because of old versions of jquerymobile.
.ui-dialog-contain {
max-width: 200px;
}
<link href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div data-role="page" data-dialog="true">
<div data-role="header" data-theme="b">
<h1>Dialog</h1>
</div>
<div role="main" class="ui-content">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
Sounds good
Cancel
</div>
</div>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dialog example - jQuery Mobile Demos</title>
<link href="favicon.ico" rel="shortcut icon"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<style type="text/css"> {
.ui-dialog-contain {
max-width: 1500px;
}
}
</style>
</head>
<body>
<div data-role="page" data-dialog="true">
<div data-role="header" data-theme="b">
<h1>Dialog</h1>
</div>
<div role="main" class="ui-content">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
Sounds good
Cancel
</div>
</div>
I have tried everything I can think of, but my page loads weirdly. With no style or form, and for the life of me, I have no clue why! Here is my code below : and attached is a picture of the outcome I get when running the code.
My outcome when I run this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Demos</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="js/jquery.js"></script>
<script src="_assets/js/index.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<div data-role="header">
<div class="ui-btn-active" data-role="navbar">
<ul>
<li>
Find Us
</li>
<li>
Call Us
</li>
<ul>
</div>
</div>
<div class="ui-content" data-role="main">
<ul data-filter="true" data-insert="true" data-role="listview">
<li>
Brussels
</li>
<li>
Dublin
</li>
<li>
Cape Town
</li>
</ul>
</div>
<div data-role="footer" style="text-align:centure;">
<button class="ui-btn ui-icon-plus ui-btn-icon-left">Click
Me</button>
</div>
</div>
</body>
</html>
It's a simple typo. The first <ul> in your header's navbar is not closed.
Somehow jquery-mobile dont like this and stops rendering with a error. You should see this error in your browsers dev tools.
If your references to jquery and jquery-mobile are correct. it should work if you close the <li> tag
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Demos</title>
<link rel="shortcut icon" href="favicon.ico">
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="_assets/js/index.js"></script>
<!-- jQuery Mobile -->
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<div data-role="page" data-theme="a">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<div data-role="header">
<div class="ui-btn-active" data-role="navbar">
<ul>
<li>
Find Us
</li>
<li>
Call Us
</li>
</ul>
</div>
</div>
<div class="ui-content" data-role="main">
<ul data-filter="true" data-insert="true" data-role="listview">
<li>
Brussels
</li>
<li>
Dublin
</li>
<li>
Cape Town
</li>
</ul>
</div>
<div data-role="footer" style="text-align:center;">
<button class="ui-btn ui-icon-plus ui-btn-icon-left">
Click Me
</button>
</div>
</div>
Beside that, you have others error in your code.
You should insert your personal javascript code <script src="_assets/js/index.js"></script> after jquery and jquery-mobile. If you do so, you're always sure, that all libraries are loaded before you use them in your "personal" javascript file.
There is no need to include the same CSS Files twice. like you did with
css/themes/default/jquery.mobile-1.4.5.min.css and _assets/css/jqm-demos.css
In Jquery-mobile, there is the possibility to include CSS and/or Javascript file inside of the data-role="page" container. But in this case it makes absolut no sense.
The class ui-btn-active is unnecessary inside of the navbar <div>. If you want to set a button of your navbar active, you have to include this class inside of the <li> tag
And you have a typo inside of your footer. centure
Good afternoon ...
My problem is this (link to issue image).
When using, for example, a COLLAPSIBLE control, this adds me a higher or lower margin.
I see no statement on the same CSS to display as well.
The code is nothing strange.
Appears well in the pages of demonstrations or others pages. This happens to me on multiple browsers including Chrome and Firefox only with my page.
Thanks for your help and sorry my English.
jQueryMobile version 1.4.5.min
jQuery version 1.11.2.min
<!doctype html>
<html>
<head>
<title>Documento sin título</title>
</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" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b" data-content-theme="b">
<div data-role="header">
<h1>Definición de Formulario</h1>
<input type="text" placeholder="Nombre del formulario" value="" id="nombremapa" name="nombre" />
</div><!-- HEADER -->
<div data-role="content" data-position="fixed" id="campos">
</div><!-- CONTENT -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar" >
<ul>
<li>Agregar</li>
<li>Quitar</li>
<li>Editar</li>
<li>Información</li>
<li>Enviar</li>
</ul>
</div>
<div data-role="popup" id="popupMenuAgregar" data-theme="b">
<ul data-role="listview" data-inset="true" style="min-width:210px;">
<li data-role="list-divider">Choose an action</li>
<li><a id="add_texto">Texto</a></li>
<li><a id="add_numero">Numero</a></li>
<li><a id="add_fecha">Fecha</a></li>
<li><a id="add_lista">Lista</a></li>
</ul>
</div>
</div><!-- FOOTER -->
</div><!-- PAGE -->
</body>
</html>
http://jsfiddle.net/zwLvjrc2/
I am trying to create a mobile version of my site using JQuery Mobile. I'd like a fixed header toolbar and a fixed footer toolbar to appear on all pages. However, those portions of the page are instead being written out as simple HTML lists. Here is the relevant header code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Nightscape Creations Wallpapers</title>
<link rel="stylesheet" href="themes/NCMobile.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<div data-role="header" data-position="fixed">
Back
<h1>Nightscape Creations</h1>
Home
<div data-role="navbar">
<ul>
<li>Live Wallpapers</li>
<li>Static Wallpapers</li>
<li>Products</li>
<li>About</li>
</ul>
</div>
</div>
This code is visible at www.NightscapeCreations.com on the mobile site.
It seems like the JQuery code is either not being included correctly or is not being initialized. I'm not sure if maybe I missed something obvious in the installation that I just need a second set of eyes on.
If it's relevant, the remainder of the page might be similar to:
<body>
<div data-role="page" id="home">
Some text
</div>
<div data-role="page" id="liveWallpapers">
Some text
</div>
<div data-role="page" id="products">
Some text
</div>
<div data-role="page" id="about">
Some text
</div>
<div data-role="page" id="staticWallpapers">
Some text
</div>
</body>
<div data-role="footer" data-position="fixed">
<h1>All images, animations, and content © Nightscape Creations</h1>
Visit Desktop Site
</div>
</html>
EDIT 1
Per a suggestion by mwfire I have moved all of my visible code inside of the body tags. A simplified version of the page is now available with this code:
<!DOCTYPE html>
<html>
<head>
<title>Nightscape Creations Wallpapers</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="themes/NCMobile.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="header" data-position="fixed">
Back
<h1>Nightscape Creations</h1>
Home
<div data-role="navbar">
<ul>
<li>Live Wallpapers</li>
<li>Static Wallpapers</li>
<li>Products</li>
<li>About</li>
</ul>
</div>
</div>
<div data-role="page" id="home1">
<div style="font-weight:bold; text-decoration:underline;">Welcome</div>
Welcome to Nightscape Creations Mobile. Here you will find animated live wallpapers, static wallpapers, and links to physical products
with the wallpaper images included. Use the header button above to browse the mobile site, or
click here to visit the main site instead.
</div>
<div data-role="footer" data-position="fixed">
<h1>All images, animations, and content © Nightscape Creations</h1>
Visit Desktop Site
</div>
</body>
</html>
However, this does not cause the toolbars to appear.
Actually all your HTML code belongs inside the body tag. I bet you don't see any footer as well ;)
Edit
Just to clarify, the structure is supposed to be like that:
<!DOCTYPE ...>
<html>
<head>
<title>Page title</title>
</head>
<body>
<!-- All visible HTML content goes here! -->
</body>
</html>
No HTML tags should be outside the body tag (except head, body & Doctype).
You can find more on page structures here.
Edit2
In addition to this, header and footer are supposed to be inside the data-role="page" div. jQuery displays one page at a time, think of it as a single HTML page. It has to include the complete structure of a single page (if you want header and footer, of course), like:
<div data-role="page">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h3>Footer</h3>
</div>
</div>
jQuery 1.7.1 and jQuery Mobile 1.1.0RC1
Hello, I have a JQM radio button on my site and am programmatically changing its value based on a condition I'm checking on pageshow. Everything works fine, but it isn't happening very "smoothly," by which I mean that it is very visible to the user when it changes i.e. it's in its original state for half a second or so and then switches. Maybe I'm being a little picky, but I'd like the switch to be transparent to the user. I'm still trying to understand the various JQM "page*" events and thought if I did it on pagebeforeshow or pagebeforecreate it would make that happen, but that is not the case.
I've tried to do a jsFiddle for it (my first time), it's happening pretty instantaneously there (maybe something to do with my selection of onDomReady in the options?) but should give you an idea of what I'm talking about ... on my site the selection is very obviously in the Off state for a moment when the page loads and then switches over to On. It's not really a big deal, I'm asking more to help my understanding of the various page* events.
http://jsfiddle.net/pdjeU/
More info:
The web app is basically a document browser, constructed like so: the index.html files contains a list of the documents, or rather a list of links to the TOCs of the available documents. Each of these TOCs contains links to the sections of the actual document.
The code is as follows ... It's probably riddled with bad style since I'm a beginner. The code for my radio button issue is in lines 30-39 of custom2.js and 23-28 of ch2-sec1.html. Also, note that the console.log($("link[href$='styleDay.css']").length); line of code in custom2.js prints out "2" when the stylesheet ends with styleDay.css, and I have no idea why (I expect it to be "1"). My main problem, though, is that there is a noticeable lag when browsing through the content files (e.g. ch2-sec1.html as shown below) and the code flips the radio button to "Day Mode" when the condition is true ... can't this be coded so that it's already flipped by the time the page becomes visible?
root/index.html ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="Style/styleNight.css" />
<link rel="stylesheet" type="text/css" href="Style/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile.simpledialog2.min.js"> </script>
<script type="text/javascript" src="JS/custom2.js"> </script>
</head>
<body>
<div data-role="page" data-theme="b" id="main">
<div data-role="header">
<div style="float:left; width:20%">
<a id="openOptions" href="#" data-role="button" data-icon="gear">Settings</a>
</div>
<div style="float:left; width:60%; text-align:center; padding-top:5px">
<h2>DOCUMENT LIST</h2>
</div>
<div style="float:left; width:20%">
<a id="openSearch" href="#" data-role="button" data-icon="search" data-iconpos="right">Search</a>
</div>
</div>
<!-- /header -->
<div data-role="content" style="clear:both">
<div data-role="controlgroup">
Document 1
Document 2
Document 3
Document 4
Document 5
</div>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
</head>
root/doc1-toc.html ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="Style/ftidStyleNight.css"/>
<script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="JS/custom2.js"> </script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" style="position:relative">
<div style="float:left">Home</div>
<h1>Document 1 TOC</h1>
</div>
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true">
<h3>
<font color="white">Chapter 1</font>
</h3>
<ul data-role="listview" data-theme="c">
<li>Chapter 1 Section 1</li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>
<font color="white">Chapter 2</font>
</h3>
<ul data-role="listview" data-theme="c">
<li>Chapter 2 Section 1</li>
<li>Chapter 2 Section 2</li>
<li>Chapter 2 Section 3</li>
<li>Chapter 2 Section 4</li>
</div>
</div>
</div>
</div>
</body>
</html>
root/HTML/ch2-sec1.html ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="../Style/styleNight.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="../js/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="../js/custom1.js"> </script>
<script type="text/javascript" src="../js/custom2.js"> </script>
</head>
<body>
<div data-role="page" id="doc1-ch2-sec1">
<div id="header" data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
<div id="optionsDiv">
<div style="float:left; width:25%; text-align:left">
Home
Previous
</div>
<div style="float:left; width:50%">
<div class="containing-element">
<fieldset data-role="controlgroup" data-type="horizontal" id="day-night">
<input type="radio" name="radio-choice-1" id="day" value="../Style/styleDay.css" data-theme="b"/>
<label for="day">Day Mode</label>
<input type="radio" name="radio-choice-1" id="night" value="../Style/styleNight.css" checked="checked" data-theme="b"/>
<label for="night">Night Mode</label>
</fieldset>
</div>
</div>
<div style="float:left; width:25%; text-align:right">
TOC
Next
</div>
</div>
</div>
<!-- Main content from legacy data source ->
</div>
</body>
</html>
root/JS/custom2.js ...
$("#main").live("pageinit",function(){
$('<div>').simpledialog2({
mode: 'blank',
animate:false,
top:10,
left:10,
themeDialog:'a',
headerText: false,
headerClose: false,
blankContent :
"<span>Active Checklists: </span><select name='slider' id='flip-b' data-role='slider' data-mini='true' data-theme='a'><option value='off'>Off</option><option value='on'>On</option></select>"+
"<a rel='close' data-role='button' data-theme='b' style='color:white' href='#'>Cancel</a>"
});
});
$(document).on('click', '#openSearch', function() {
$('<div>').simpledialog2({
mode: 'blank',
themeDialog:'a',
animate:false,
top:10,
left:'60%',
headerText: false,
headerClose: false,
blankContent :
"<input type='search' name='search' id='searc-basic' value='' placeholder='Under Construction ...' disabled='disabled' data-mini='true' data-theme='c' />"+
"<a rel='close' data-role='button' style='color:white' href='#' data-theme='b'>Cancel</a>"
});
});
});
$("div[data-role='page']").live("pageshow",function(){
console.log($("link[href$='styleDay.css']").length);
if ($("link[href$='styleDay.css']").length > 0){
$("#day").attr("checked",true).checkboxradio("refresh");
$("#night").removeAttr("checked").checkboxradio("refresh");
}
$("input[name='radio-choice-1']").on('change mousedown',function(event) {
$("link").attr("href",$("input[checked][name='radio-choice-1']").val());
});
});