So, if you take a look at the jsfiddle (I posted the code below for consistency) you will see that the input text is centered. However, if I visit the jsfiddle (and on my testing site) on my iPhone (iOS5) the text is just left-aligned. So, am wondering do you guys maybe know is this a know issue (googled - seems not) and do you know of a workaround.
css:
.centerText{
text-align: center;
}
js:
$(document).ready(function(){
$( "#popupLogin" ).popup( "open" );
});
html:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<section id="home" data-role="page">
<header data-role="header">
<h1>test page</h1>
</header>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<h3 class="centerText">Register free!</h3>
<div class="popup">
<form>
<input type="email" name="email" id="email" class="centerText" placeholder="email" data-theme="a"/>
<button type="submit" data-theme="b">Sign me up</button>
<p class="centerText">
text1<br/>
text2<br/>
etc...<br/>
</p>
</form>
</div>
</div>
</section>
</body>
</html>
Here some tinkering from your jsFiddle: http://jsfiddle.net/Twisty/jb8Jx/2/ Just shows you some ways to try and move the placeholder about.
HTML
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<section id="home" data-role="page">
<header data-role="header">
<h1>test page</h1>
</header>
<div data-role="content">
<label>Left Align</label><input type="text" placeholder="email" class="leftText">
<label>Right Align</label><input type="text" placeholder="email" class="rightText">
<label>Center Text</label><input type="text" placeholder="email" class="centerText">
<label>Pad Left</label><input type="text" placeholder="email" class="leftPadText">
</div>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<h3 class="centerText">Register free!</h3>
<div class="popup">
<form>
<input type="email" name="email" id="email" class="centerText" placeholder="email" data-theme="a" style="text-align: center;"/>
<button type="submit" data-theme="b">Sign me up</button>
<p class="centerText">
text1<br/>
text2<br/>
etc...<br/>
</p>
</form>
</div>
</div>
</section>
</body>
</html>
CSS
input.centerText{
text-align: center;
}
input.leftText {
text-align: left;
}
input.rightText {
text-align: right;
}
input.leftPadText {
padding-left: 220px;
}
Related
I am trying to add javascript from partial view to layout.cshtml head section by calling
#RenderSection("scripts", required: false) but failing. Please view my partialview page code.
#{
Layout = null;
}
<div id="modal-login" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" title="Insert Student">
#using (Html.BeginForm("Login", "Home", FormMethod.Post, new { id = "form-login" }))
{
<div style="width:320px; height:320px; padding:0px 15px 15px 15px; border:solid 1px silver">
<div style="width:310px; height:30px; padding-bottom:0px; border:solid 0px red">
<div style="width:320px; height:30px; float:left;">
<div id="loading" style="height:15px; width:120px">
</div>
</div>
</div>
<div style="width:310px; height:30px; padding-bottom:35px; border:solid 0px red">
<div style="width:320px; height:30px; float:left;">
<input type="text" class="textbox" id="tbEmailAddress" name="tbFirstName" size="50" placeholder="First Name" />
</div>
</div>
<div style="width:310px; height:30px; padding-bottom:35px; border:solid 0px red">
<div style="width:320px; height:30px; float:left;">
<input type="text" class="textbox" id="tbPassword" typeof="password" name="tbFirstName" size="50" placeholder="First Name" />
</div>
</div>
<div style="width:320px; height:20px; padding-top:5px; padding-bottom:15px; border:solid 0px red; font-size:9px;">
<div style="width:310px; height:30px; float:left;">
<input id="btnLogin" class="submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="submit" value="Submit" style="border:1px solid gray; width:80px; height:25px ">
</div>
<div style="width:140px; height:30px; float:left;">
</div>
</div>
</div>
}
</div>
#section scripts
{
<script type="text/javascript">
$(document).ready(function () {
$("#modal-login").dialog({
show: "slide",
modal: true,
autoOpen: false,
});
$("#btnLogin").click(function () {
$("#modal-login").dialog("open");
return false;
});
});
</script>
}
And below is layout.chtml head section where iam calling #RenderSection("scripts", required: false) in the second last line of code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#*#Scripts.Render("~/bundles/jqueryui")*#
<link href="~/Content/themes/base/jquery-ui-1.10.4.custom.css" rel="stylesheet" />
#*<script src="~/Scripts/jquery-1.10.2.js"></script>*#
<script src="~/Scripts/jquery-ui-1.10.4.custom.js"></script>
#RenderSection("scripts", required: false)
</head>
Please view my code and suggest if i missed anything? thanks.
the order #section scripts don't work in partialView, erase that and your script work.
but why you try to put the script in the head??
You call JQuery in the head the Script in the partial view works isn't necesary up in the head.
But if I understand your code you make a login form in a partial View for insert in the layout for use in entire web site?
well is more easy if you write the script directly in the head in layout, but better is create a script file with all custom script, mix this with the others scripts in one bundle and finally call this bundle in the head, with this way your site will more faster.
I have the following code snippet for a login home page. I want it to be responsive. how do I make it responsive using jQuery mobile?
Does jqm provide any default css for it?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="./css/custom.css">
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="content">
<img src="./imgs/abc.jpg">
<div class="ui-grid-a">
<div class="ui-block-a"><img src="./imgs/home.jpg">
</div>
<div class="ui-block-b">
<form id="HLogin" method="POST">
<div data-role="fieldcontain">
<label for="url">Username:*</label>
<input class="required" id="Lusername" name="uid_r" type="text" value="">
</div>
<div data-role="fieldcontain">
<label for="url">Password:*</label>
<input id="Lpassword" name="pwd_r" type="password" value="">
</div>
<button data-theme="b" type="submit">Login</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
custom.css:
.ui-block-a {
width:70% !important;
}
.ui-block-b {
width:30% !important;
}
Here you can add your css according screen and add min-width, which you want.
#media screen and (min-width: 320px) {
.ui-block-a {
width:0% !important;
}
.ui-block-b {
width:100% !important;
}
}
#media screen and (min-width: 620px) {
.ui-block-a {
width:70% !important;
}
.ui-block-b {
width:30% !important;
}
}
I'm building my first JQM site so I think I'm missing some simple little thing that's causing me a bunch of problems.
I have setup the page, header, content and footer and a panel for the menu. Then I have I have a js file with the following:
$(document).on('pageinit', function (event) {
alert('this works every time you navigate to another page');
$("#menu-panel").panel("open");//this works the first time only
$("#new-lump-sum").popup("open");//this never works
});
Can anyone tell me why I'm getting this behaviour instead of both the panel and the popup opening every time you navigate to another page?
I also can't open them programmatically from the browser console (using chrome)
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cashflow - IFA Portal</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/Styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link href="/Styles/System.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/jquery.mobile-1.3.1.min.js"></script>
<script src="/Scripts/highcharts.js"></script>
<script src="/Scripts/System.js"></script>
</head>
<body class="computer android">
<div id="page-wrapper">
<div data-role="page" class="page ui-responsive-panel"><!-- Start Page -->
<div data-role="panel" id="menu-panel" data-position="left" data-display="reveal" data-theme="a" data-dismissible="false" class="">
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search Items..." data-theme="a" data-filter-theme="a">
<li><img src="/Images/Icons/home.png" alt="" class="ui-li-icon"/>Home</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Tools</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Cashflow</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Clients</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Proposals</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Funds</li>
</ul>
</div>
<div id="header" data-role="header" data-theme="d">
<div id="top-border"></div>
<div class="floatleft">
</div>
<div id="logo">
<img src="/Images/AllanGray-Logo.png" />
</div>
<div class="floatleft header-toolbar" data-role="controlgroup" data-type="horizontal">
Favourites
<img src="/Images/Icons/179-notepad.png" class="ui-li-icon small-icon" />Notes
Display Settings
</div>
<div id="logout">
<section id="login">
Log In
</section>
</div>
<div id="display-options" data-role="popup" class="ui-content">
Close
<form>
<fieldset id="theme-options" data-role="controlgroup" data-mini="true" data-type="horizontal">
<legend>Theme</legend>
<input type="radio" name="theme" id="theme-1" value="android" checked="checked" />
<label for="theme-1" class="theme-option">Android</label>
<input type="radio" name="theme" id="theme-2" value="apple" />
<label for="theme-2" class="theme-option">Apple</label>
<input type="radio" name="theme" id="theme-3" value="windows" />
<label for="theme-3" class="theme-option">Windows</label>
</fieldset>
<br />
<fieldset id="size-options" data-role="controlgroup" data-mini="true" data-type="horizontal">
<legend>Screen Size</legend>
<input type="radio" name="size" id="size-1" value="computer" checked="checked" />
<label for="size-1" class="size-option">Computer</label>
<input type="radio" name="size" id="size-2" value="tablet" />
<label for="size-2" class="size-option">Tablet</label>
<input type="radio" name="size" id="size-3" value="phone" />
<label for="size-3" class="size-option">Phone</label>
</fieldset>
</form>
</div>
</div>
<div id="content" data-role="content">
<h2>Cashflow Calculator</h2>
<div class="ui-grid-a">
<div class="ui-block-a" style="padding-right:5px;">
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Investment Assumptions</h3>
<div data-role="fieldcontain" class="narrow">
<label for="time">Time horizon (years)</label>
<input type="range" name="time" id="time" value="20" min="0" max="100" data-highlight="true" style="width"/>
<label for="nominal">Nominal return after unit trust fees (%)</label>
<input type="text" name="nominal" id="nominal" value="" />
<label for="inflation">Inflation rate p.a. (%)</label>
<input type="text" name="inflation" id="inflation" value="" />
<label for="administration-fees">Net platform administration fees (%)</label>
<input type="text" name="administration-fees" id="administration-fees" value="" />
<label for="advisor-fees">Financial advisor fees (%)</label>
<input type="text" name="advisor-fees" id="advisor-fees" value="" />
</div>
</div>
Add Contributions or Withdrawals
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Contributions & Withdrawals </h3>
<ul id="lump-sums" data-role="listview" data-split-icon="delete" data-split-theme="d">
<li>
<a>
<h3>Contribution: R20 000</h3>
<p class="topic"><strong>Recurres: 6 times</strong></p>
<p class="ui-li-aside"><strong>Start Date: 01/08/2013</strong></p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Contribution: R5000</h3>
<p class="ui-li-aside"><strong>Start Date: 01/06/2013</strong></p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Withdrawal: -R25 000</h3>
<p class="ui-li-aside"><strong>Start Date: 01/06/2013</strong></p>
</a>
Delete
</li>
</ul>
</div>
<div data-role="popup" id="new-lump-sum" class="ui-content">
Close
<form>
<fieldset id="lump-sum-type" data-role="controlgroup" data-type="horizontal">
<legend>Add New</legend>
<input type="radio" name="lump-sum-type" id="contribution" value="contribution" checked="checked" />
<label for="contribution" class="">Contribution</label>
<input type="radio" name="lump-sum-type" id="withdrawal" value="withdrawal" />
<label for="withdrawal" class="">Withdrawal</label>
</fieldset>
<label for="lump-sum-amount">Amount (R)</label>
<input type="text" name="lump-sum-amount" id="lump-sum-amount" value="" />
<label for="lump-sum-date">Date</label>
<input type="text" name="lump-sum-date" id="lump-sum-date" value="" />
<a data-role="button" data-theme="b" onclick="addLumpSum()">Add</a>
</form>
</div>
</div>
<div class="ui-block-b" style="padding-left:5px;">
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Future Value Graph</h3>
<div id="container" style="width:100%; height:400px;">fgjfjfgjh</div>
<script type="text/javascript">
</script>
</div>
</div>
</div>
</div>
<div id="footer" data-role="footer">
<div id="bottom-border"></div>
<p>Copyright © 2013 Allan Gray. All Rights Reserved.</p>
</div>
<div data-role="panel" id="right-panel" data-position="right" data-display="overlay" data-theme="b">
<h3>Favourites</h3>
<div id="search-box">
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" placeholder="Search..." />
</div>
</div>
<script>
</script>
</div><!-- End Page -->
</div>
</body>
</html>
Popups and dialogs are tricky when it comes to opening them right after a page event occurs. To fix this issue, you need to use setTimeout to open a dialog or a popup.
$(document).on('pageinit', function() {
setTimeout(function () {
$('#new-lump-sum').popup('open');
}, 100); // delay above zero
});
Below is a test page. If I go through all the JQM 'pages' and then go back to the first page, and then click submit, the 'SUBMITTING' alert dialog will pop up 4 times. What am I doing wrong? What should I do to make the submit event fire only once?
<!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>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8" src="js/phonegap.js"></script>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile.css"/>
<link rel="stylesheet" href="css/custom-icons.css"/>
<link href="css/jquery.mobile-swatch-f.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js"></script>
<script src="jquery-mobile/jquery.mobile.js"></script>
<script>
$('div:jqmData(role="page")').live('pageinit', function() {
$('form').submit(function(e) {
alert("SUBMITTING");
});
});
</script>
</head>
<body>
<form id="frm_testform_happy_party">
<div data-role="page" id="testform_menu" data-theme="f" class="dummyclass">
<div data-role="header">
<h1>Testing testing</h1>
</div>
<div data-role="content">
<ul data-role="controlgroup">
<li><a target_id="testform_happy" href="#testform_happy" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right" class=".ui-icon-manditory">happy party</a></li>
<li><a target_id="testform_description" href="#testform_description" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right">Description</a></li>
<li><a target_id="testform_vehicle" href="#testform_vehicle" data-role="button"
style="text-align:left" data-icon="arrow-r" data-iconpos="right">Vehicle</a>
</li>
</ul>
<input id="submit_claim" type="submit" name="send" value="Submit" id="submit"/>
<div id="debug">
</div>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="index.html#claim_menu" rel="external" data-icon="arrow-l" data-direction="reverse"
data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Done</a>
<a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext"
style="float: right; margin-right: 10px; margin-top: 5px"></a>
</div>
</div>
<div data-role="page" id="testform_happy" data-theme="f">
<div data-role="header">
<h1>Happy Party</h1>
</div>
<div data-role="content">
<label for="happy_initials">Initials:</label>
<input type="text" name="happy_initials" id="happy_initials" value="" class="required"/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#testform_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Done</a>
<a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext"
style="float: right; margin-right: 10px; margin-top: 5px"></a>
</div>
</div>
<div data-role="page" id="testform_description" data-theme="f">
<div data-role="header">
<h1>Description</h1>
</div>
<div data-role="content">
<label for="incident_date">Date of Incident:</label>
<input type="date" name="incident_date" id="incident_date" value="" class="required"/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#testform_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Done</a>
<a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext"
style="float: right; margin-right: 10px; margin-top: 5px"></a>
</div>
</div>
<div data-role="page" id="testform_vehicle" data-theme="f">
<div data-role="header">
<h1>Vehicle</h1>
</div>
<div data-role="content">
<label for="vehicle_registration_number">Registration Number:</label>
<input type="text" name="vehicle_registration_number" id="vehicle_registration_number" value=""
class="required"/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#testform_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Done</a>
<a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext"
style="float: right; margin-right: 10px; margin-top: 5px"></a>
</div>
</div>
</form>
</body>
</html>
You're doing this:
<script>
$('div:jqmData(role="page")').live('pageinit', function() {
$('form').submit(function(e) {
alert("SUBMITTING");
});
});
</script>
I think this is firing for every page loaded, correct?
Maybe try something like this:
<script>
$(function() {
$('#submit_claim').click(function() {
$('form').submit(function(e) {
alert("SUBMITTING");
});
});
});
</script>
How to create div with id=test with 100% height?
<div data-role="page" id="device1">
<div data-role="header">
<h1>Title</h1>
</div><!-- /header -->
<div data-role="content">
<div data-role="fieldcontain">
<input type="range" name="slider1" id="slider1" value="0" min="0" max="255" />
</div>
<div id=test height=100%>
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
</div><!-- /footer -->
</div><!-- /page -->
OK, here is what I have for you. Keep in mind though, if the content of the page is tall at all this might not be very usable. The swipe area is everything below the content. So as the content area gets bigger the swipe area gets smaller.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Swipe</title>
<link href="jquery-mobile/jquery.mobile-1.0b3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0b3.min.js" type="text/javascript"></script>
<script src="phonegap.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
// Set the initial window (assuming it will always be #1
window.now = 1;
//get an Array of all of the pages and count
windowMax = $('div[data-role="page"]').length;
$('.swipeArea').bind('swipeleft', turnPage);
$('.swipeArea').bind('swiperight', turnPageBack);
});
// Named handlers for binding page turn controls
function turnPage(){
// Check to see if we are already at the highest numbers page
if (window.now < windowMax) {
window.now++
$.mobile.changePage("#device"+window.now, "slide", false, true);
}
}
function turnPageBack(){
// Check to see if we are already at the lowest numbered page
if (window.now != 1) {
window.now--;
$.mobile.changePage("#device"+window.now, "slide", true, true);
}
}
</script>
<style>
body, div[data-role="page"], div[data-role="content"], .swipeArea {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="device1"">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
Content
<div class=swipeArea></div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="device2" style="height: 100%">
<div data-role="header">
<h1>Content 2</h1>
</div>
<div data-role="content" style="height: 100%">
Content
<div data-role="fieldcontain">
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
<div class=swipeArea></div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="device3" style="height: 100%">
<div data-role="header">
<h1>Content 3</h1>
</div>
<div data-role="content" style="height: 100%">
Content
<div class=swipeArea></div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="device4" style="height: 100%">
<div data-role="header">
<h1>Content 4</h1>
</div>
<div data-role="content" style="height: 100%">
Content
<div class=swipeArea></div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>