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;
}
}
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.
Iam having code with two dialogs one from another, while going back from second dialog to first i have given data-transition as slide but it is not working. Can someone help me please thanks.
Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale="1"">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>
<style>
.ui-simpledialog-screen-modal{
opacity: 0.4;
}
.ui-simpledialog-container {
border: 1px solid rgb(221, 221, 221) !important;
}
.ui-grid-a > div {
padding: 2px;
}
</style>
<script>
$(document).on("pagecreate", "#page1", function () {
$(document).on('click', '#openPopup', function() {
$('#inlinecontent').simpledialog2({
mode: "blank",
headerText: "Select Item(s)",
headerClose: false,
blankContent: true,
themeDialog: 'a',
width: '75%',
zindex: 1000
});
});
$(document).on('click', '#dialogSubmit', function() {
var numChecked = $('#cBoxes').find('[type=checkbox]:checked').length;
if (numChecked > 0){
$(document).trigger('simpledialog', {'method':'close'});
} else {
$('<div>').simpledialog2({
mode: 'blank',
headerText: 'Warning',
headerClose: true,
transition: 'flip',
themeDialog: 'b',
zindex: 2000,
blankContent :
"<div style='padding: 15px;'><p>Please select at least one checkbox first.</p>"+
// NOTE: the use of rel="close" causes this button to close the dialog.
"<a rel='close' data-role='button' href='#'>OK</a></div>"
});
}
});
});
</script>
</head>
<body>
<!-- the page markup -->
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed">
<h1>SimpleDialog2 Chained Popup</h1>
</div>
<div class="ui-content" role="main">
<!-- button that opens the popup -->
<button id="openPopup">Select One or More Item(s)...</button>
</div>
</div>
<!-- the popup markup -->
<div id="inlinecontent" style="display:none" >
<div style="padding: 15px;">
<fieldset id="cBoxes" data-role="controlgroup" >
<legend>Favorite Fruit:</legend>
<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a" />
<label for="checkbox-v-2a">Apple</label>
<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b" />
<label for="checkbox-v-2b">Banana</label>
<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c" />
<label for="checkbox-v-2c">Orange</label>
</fieldset>
<div class="ui-grid-a">
<div class="ui-block-a"><button id="dialogSubmit" data-theme="b">OK</button></div>
<div class="ui-block-b"><button id="dialogCancel" rel='close'>Cancel</button></div>
</div>
</div>
</div>
</body>
</html>
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;
}
On the iphone I have a form:
I'd like to have:
from $37,400 up to $[textbox here]
on the same line. In landscape mode it works but not in portrait no matter how far I pare the text width. I'm searching for a style to override. You can simulate the problem by opening http://jsfiddle.net/mckennatim/xwFW9/1/ and narrowing your browser page way down.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> - jsFiddle demo</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<style type='text/css'>
#upto4 {
width: 65px;
margin-left: 5px;
margin-right: 5px;
}
</style>
<script type='text/javascript'>//<![CDATA[
</script>
</head>
<body>
<div data-role="page" id="calcs" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>graphics2</h1>
</div>
<div data-role="content">
<form action="#" method="get">
<div id="ratelist">
<legend><b>Ordinary Tax Rates</b></legend>
<div data-role="fieldcontain">
<input type="range" name="slider" id="rate4" value="30" min="0" max="100" data-highlight="true" data-mini="true" />
up to $: <br/>
<p id="spupto4"> from $84,600 to
<input type="text" name="nupto4" id="upto4" value="178653" data-mini="true"/>
</p><br/>
</div>
<div data-role="fieldcontain">
<label for="slider">% rate:</label>
<input type="range" name="slider" id="rate5" value="33" min="0" max="70" data-highlight="true" data-mini="true" /><br/>
<label for="slider">up to $</label>
<input type="range" name="slider" id="upto5" value="388350" min="0" max="3000000" data-highlight="true" data-mini="true" /><br/>
</div>
</div>
</form>
</div>
<div data-role="footer" data-position="fixed">
<h4>test</h4>
</div>
</div>
</body>
</html>
to the style:
<style type='text/css'>
#upto4 {
width: 65px;
margin-left: 5px;
margin-right: 5px;
}
added display: inline-block; to override display: block;
<style type='text/css'>
#upto4 {
width: 65px;
margin-left: 5px;
margin-right: 5px;
display: inline-block;
}
When I clone and append/prepend html fragments in jquery mobile, fragment is doubling up. You can plug this code and test.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- standard Jquery/jQuery Mobile Libraries -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<div data-role="page" id="mainmenu">
<div data-role="header" data-position="inline"></div>
<div class="ui-body ui-body-c">
<div data-role="content">
click to view HTML
<pre>
<span id="HTMLOut">
my HTML output goes here...
</span>
</pre>
</div>
</div>
<div id='groupA' class='preGroups'>
<div id='placeholder' ></div>
</div>
<fieldset class="ui-grid-a" data-inline="true">
<div class="ui-block-b"><button type="submit" class="addPart" data-theme="a" data-icon="plus">Add Serial/Part</button></div>
</fieldset>
<div id='template'>
<div data-role="fieldcontain">
<input type="range" name="QTY" id="preQuant01" value="1" min="1" max="10"/>
</div>
</div>
</div>
<style>
#template, #HTMLOut, #XMLOut{
display:none;
}
</style>
<script>
counter = 1;
$(document).ready(function() {
/* Add a listeners to Add Part */
$('.addPart').click(function() {
myClone = $('#template').clone();
myClone.attr("id", "template-" + counter);
counter++;
myClone.appendTo("#placeholder").trigger( "create" );
// myClone.appendTo("#placeholder").page(); does not work in this version?
return false;
});
// Toggle Show/Hide HTML
$('.preShowHTML').click(function() {
$("#HTMLOut").text($("body").html());
$("#HTMLOut").toggle();
return false;
});
});
</script>
I think the counter is in the wrong place. However this does not make the example any more functional.
myClone = $('#template').clone();
myClone.attr("id", "template-" + counter);
//counter++;
myClone.appendTo("#placeholder");
$('#template-'+counter).page();
counter++;
I am not sure that this is correct approach - cloning html after jquery mobile has applied it's listeners and formatting.
AJAX might make it slightly cleaner but here is a start:
$(document).ready(function(){
$("div").live("pageshow", function () {
counter = 0;
$(".addPart").click(function() {
counter++;
$("#placeholder").append('<div id="template-'+counter+'"><div data-role="fieldcontain"><input type="range" name="slider" class="ui-slider-input ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" id="slider'+counter+'" value="0" min="0" max="100" /></div></div>');
$("#template-"+counter).trigger("create");
return false;
});
});
});
</script>