I am using jQuery Mobile, I need a popup option for open a form. The popup is working, but I need to make it larger.
<div id="addPopup" data-role="popup" data-overlay-theme="a" data-theme="d" data-transition="pop" >
<div data-role="header" data-theme="c" class="ui-corner-top">
<div class="ui-btn-left">
Save
</div>
<h1 class="ui-title" role="heading">Status</h1>
<div class="ui-btn-right">
Cancel
</div>
Item Code:
<div class="grid_10" style="text-align:left; width:30%; margin-top:0px;">
<input type="text" name="name" id="name" value="" placeholder="Item Code">
</div>
</div>
How do I do this?
Use CSS to adjust the sizing of your popup.
#yourpopup{
width: 200px;
}
Related
Pardon my jargon, I just recently got into web development and have poor communication skills.
I'm using bootstrap 4 alpha and JQuery 3.
I have a chatroom within one fluid container with two rows: a send-message bar and a recieve message column(plus the pm column and userlist column)
Here is my code:
<div class="container-fluid">
<div class="row">
<!-- Chat View Column -->
<div class="col-sm-2">
<ul id="privateChats" class="list-group fixed" style=" margin-top:20px;">
</ul>
</div>
<!-- Message View Column -->
<div class="col-sm-8" style="float: left;">
<ul class="" id="messages" style="margin: 20px;"></ul>
</div>
<!-- Connected Users Column -->
<div class="col-sm-2">
<ul id="connectedUsers" class="list-group fixed" style=" margin-top:20px">
<div class="btn-group-vertical" style="width:100%">
</div>
</ul>
</div>
</div>
<!-- Send message bar -->
<div class="row">
<form action="">
<div class="col-lg-9 col-md-9 text-right">
<input type="text" id="m" style="width:100%; height:55px;" class="form-control" placeholder="Message" autocomplete="off" />
</div>
<div class="col-lg-3 col-md-3 text-left">
<button style="width:50%"><span class="fa fa-paper-plane" style="font-size:38px; color:white;"></span></button>
</div>
</form>
</div>
</div>
When the "Message View Column" fills up, text disappears behind the second row and I can't see the most recent messages. How do I fix this?
Let me know if I should add more detail
I added the Javascript tag because I'm not opposed to using Javascript to solve the problem
Adding a margin-bottom: 98px; (height of the 2nd .row) to the css of the 1st .row, would solve your problem. Then you can use scrollBy(0, 100) to scroll the page to the bottom (used 100 as example)
I am trying to put my form on a slider in such a way that slider seems to be running in the background of form. If I am using position absolute, then I have to apply a lot of margin and top pixels because there is a navbar above the slider and position absolute applies with respect to the parent element(navbar).
How can I exactly target the position absolute w.r.t my form, not navbar (parent element)?
Or
If you guys think that there can be a better option to deal with this then do share ideas!
Thanks in advance!
Here is the demo link
HTML code:
<section id="main-slider" class="carousel">
<!--start-->
<div id="ninja-slider">
<div class="slider-inner">
<ul>
<li class="dummySlide">
<a class="ns-img" href="img/002.jpg"></a>
</li>
<li>
<a class="ns-img" href="img/003.jpg"></a>
</li>
<li>
<a class="ns-img" href="img/004.jpg"></a>
</li>
<li>
<a class="ns-img" href="img/005.jpg"></a>
</li>
<li>
<a class="ns-img" href="img/zess.jpg"></a>
</li>
</ul>
<div class="navsWrapper">
<div id="ninja-slider-prev"></div>
<div id="ninja-slider-next"></div>
</div>
</div>
</div>
<!--end-->
</section><!--/#main-slider-->
<form role="form">
<!--First Row-->
<div class="row">
<div class="form-group col-md-6">
<label for="inputTopic" class="control-label">Title</label>
<select class="form-control" name="title">
<option value="0">Select</option>
<option value="one">Mr.</option>
<option value="two">Miss</option>
<option value="three">Mrs.</option>
<option value="four">Dr.</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="inputTopic" class="control-label">Sur-Name</label>
<input type="text" class="form-control" name="surname" />
</div>
</div>
</form>
I do have a working example which uses TWBS's carousel. I created a wrapper .container which has a slider and a form as children. The slider is fullwidth while the form has a width of 70% so it will always be responsive, the height is static for now, you could change this using media-queries. Here is my example:
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
</div>
<div class="myform">
<h1> My Form </h1>
<form>
...
</form>
</div>
</div>
Bootply: http://www.bootply.com/tNAmbhKWb7
You don't have wrapper with class="formSection" for the form and also you should delete a bottom: 0 from formSection class.
<div class="row" style="position:relative; top:-200px; z-index:3; text-align:center;">
Where you declare the <div class="row">
put this code
<div class="row" style="position:relative; top:-200px; z-index:3; text-align:center;"
This will definitely work
Try to review most posts but not yet solve my case.
Below HTML and Javascript works if all content are static code on page. Sample can be viewed http://jsfiddle.net/adrBJ/
The problem is if content in <div id="coupon-summary" style="">...</div> are dynamically built from programme such as calling ajax, then the click event does not be triggered.
How can I code and make the click event be triggered?
HTML code
<body class="ui-mobile-viewport ui-overlay-a">
<section id="home" data-role="page" data-title="Coupon Statistic Summary" class="footer_default header_home ui-page ui-page-theme-a ui-page-active" data-url="home" tabindex="0" style="min-height: 408px;">
<header data-theme="b" data-role="header" role="banner" class="ui-header ui-bar-b"><h1 class="ui-title" role="heading" aria-level="1">Summary</h1></header>
<article data-role="content" class="ui-content" role="main">
<div id="home-content">
<div id="signin" style="display: none;">
<div class="heading"><img class="signin_logo" src="images/jetso360.png"><br></div>
<div class="frm">
<form action="checklogin.php" name="form" id="form" method="post">
<input type="hidden" name="xcaller" id="xcaller" value="ajax">
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input type="text" name="ad_login" id="ad_login" placeholder="Advertiser Login" spellcheck="false" autocomplete="false" value=""></div>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input type="password" name="password" id="password" placeholder="Password" spellcheck="false" autocomplete="false" value=""></div>
<p id="msgBox" style="" class="plain">Redirecting ...</p>
<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">Sign In<input type="submit" name="submit" id="submit_btn" value="Sign In"></div>
</form>
</div>
</div>
<div id="coupon-summary" style="">
<ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"><li class="ui-li-has-count ui-li-has-thumb ui-first-child"><img src="/dev/data/coupons/1.png" style="max-width: 100px;" class="imageview"><span class="ui-li-count ui-body-inherit">11</span></li><li class="ui-li-has-count ui-li-has-thumb ui-last-child"><img src="/dev/data/coupons/10.png" style="max-width: 100px;" class="imageview"><span class="ui-li-count ui-body-inherit">2</span></li></ul>
</div>
</div> <!-- home-content -->
</article> <!-- article content -->
</section> <!-- section home -->
<section id="detail" data-role="page" data-title="Coupon Statistic Summary" class="footer_default header_home ui-page ui-page-theme-a" data-url="detail" tabindex="0" style="min-height: 408px;">
<header data-theme="b" data-role="header" role="banner" class="ui-header ui-bar-b"><h1 class="ui-title" role="heading" aria-level="1">禮券登記統計</h1></header>
<article data-role="content" class="ui-content" role="main">
<div id="reg-detail">Loading ....</div>
</article> <!-- article content -->
</section> <!-- section detail -->
Javascript
$(document).ready(function () {
$('#coupon-summary').on('click', 'a[href="#detail"]', function (e) {
e.preventDefault();
alert("coupon-summary click");
console.log("coupon-summary click");
}); // coupon-summary a href click
});
I would suggest, bind to click event after your ajax calls instead of doing it on document ready. i.e. place the below code after your ajax calls.
$('#coupon-summary').on('click', 'a[href="#detail"]', function (e) {
e.preventDefault();
alert("coupon-summary click");
console.log("coupon-summary click");
}); // coupon-summary a href click
I am trying my hand at jQuery Mobile and I find it a bit confusing because it's a mark-up driven framework.
I created a test page in which I am just trying to align one button to the right, but I am not able to do that. I tried float: right but it's not working. Although margin-left is working by giving a particular percentage, the same is not working when I resize the page.
Here is my Fiddle code. Any help would be great.
<div data-role="page">
<div data-role="header" data-theme="b" data-position="fixed">
<h1 style="font-size: 1.5em; text-align: left; margin-left: 70px;"
data-role="none">Test</h1>
</div>
<div id="contentLogin" align="center" name="contentConfirmation" data-role="content">
<p style="font-size: 0.85em; color: #000000">
<b>Welcome to my page</b>
</p>
<br>
<div class="ui-grid-b responsive">
<div style="margin: 0px; margin-top: 0px; margin: 0px;" class="ui-block-a">
<div data-role="fieldcontain">
<label for="url" class="alignleft">Username:*</label>
<input id="userId1" class="required" name="uid_r" placeholder="" type="text">
</div>
<div data-role="fieldcontain">
<label for="url" class="alignleft">Password:*</label>
<input id="Password1" class="required" name="pwd_r" value="" type="password">
</div>
<button id="login" data-theme="a" type="button" href="home.html" data-mini="false" data-inline="true" >Login</button>
</div>
<div class="ui-block-b">BLOCK A ADS</div>
<div class="ui-block-c" style="margin-top: 0px;">
BLOCK C
</div>
</div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
</div>
</div>
Why not place your button inside a div and right align the div? everything inside the parent div including the button will be right aligned.
<div align="right"><button id="login" data-theme="a" type="button" href="home.html" data-mini="false" data-inline="true" >Login</button></div>
Check out the fiddle http://jsfiddle.net/mayooresan/96s59/2/
Use ui-btn-right. It's easier, less verbose and (I think) the jquery way to do things.
Login
The previous answer is correct, but you should use CSS styles instead (aling="" is deprecated)
<div style="text-align: right;">
<button data-inline="true">Login</button>
</div>
You can run into problems if you want multiple buttons...
Try:
<div style="float:right">
<button data-inline="true">Login</button>
</div>
if you want to have multiple buttons (both left and right aligned).
If you use:
<div style="text-align: right;">
<button data-inline="true">Login</button>
</div>
the div will start a new block below any existing buttons, so you can't have other icons on the left hand side.
Class ui-btn-icon-left|right lets you align the buttons left|right but I've found that using two buttons with ui-btn-icon-right will overlap them.
The template below worked for me for two left aligned buttons and two right in a footer:
Home
Intro
<div style="float:right">
Review
Exit
</div>
I'm loading 3 jsignature divs into my jquery mobile app. They display and work correctly when I load them into the certain pages:
But when they're loaded into other pages the div shows up with a squished height and is not responsive to touch:
I'm loading them with a document ready function at the bottom of the page, which seems fine:
<div id="info" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>NewF</h1>
</div>
<div data-role="content">
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<input type="text" placeholder="Your Name" name="_fid_14" id="_fid_14" />
</form>
</div></div>
<div id="sigemail" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>Signatures & Email</h1>
</div>
<div data-role="content">
<div id="fcmsig" style="width:600px; height:150px;"></div>
<div id="gcsig" style="width:600px; height:150px;"></div>
<div id="inspsig" style="width:600px; height:150px;"></div>
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<br>
<p>What email address would you like the QAF pdf sent to?</p><input type="text" name="_fid_210" id="_fid_210" />
</form>
</div></div>
<script>
$(document).ready( function(){
$('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
$('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
$('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
});
</script>
But when I change to this, so each signature loads in its own page, they loose size and functionality:
div id="info" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>NewF</h1>
</div>
<div data-role="content">
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<input type="text" placeholder="Your Name" name="_fid_14" id="_fid_14" />
</form>
</div></div>
<div id="sigemail" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>Signatures & Email</h1>
</div>
<div data-role="content">
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<br>
<p>What email address would you like the QAF pdf sent to?</p><input type="text" name="_fid_210" id="_fid_210" />
<a data-theme="a" href="#fcmsignature" data-role="button" data-transition="slidefade" data-inline="true">Field CM Signature</a><br>
<a data-theme="a" href="#gcsignature" data-role="button" data-transition="slidefade" data-inline="true">Contractor Signature</a><br>
<a data-theme="a" href="#inspsignature" data-role="button" data-transition="slidefade" data-inline="true">Inspector Signature</a>
</form>
</div></div>
<div id="fcmsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#fcmsig').jSignature('clear')"/>
Save
<h1>FCM Signature</h1>
</div>
<div data-role="content">
<div id="fcmsig" style="width:600px; height:150px;"></div>
</div></div>
<div id="gcsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#gcsig').jSignature('clear')"/>
Save
<h1>Contractor Signature</h1>
</div>
<div data-role="content">
<div id="gcsig" style="width:600px; height:150px;"></div>
</div></div>
<div id="inspsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#inspsig').jSignature('clear')"/>
Save
<h1>Inspector Signature</h1>
</div>
<div data-role="content">
<div id="inspsig" style="width:600px; height:150px;"></div>
</div></div>
<script>
$(document).ready( function(){
$('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
$('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
$('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
});
</script>
I've tried using pageinit on the signature pages, but I get the same result:
<div id="fcmsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#fcmsig').jSignature('clear')"/>
Save
<h1>FCM Signature</h1>
</div>
<div data-role="content">
<script>
$('#fcmsignature').live('pageinit',function(event){
$('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
});
</script>
<div id="fcmsig" style="width:600px; height:150px;"></div>
</div></div>
I'm not sure why they would work in one sub-page, but not another. Any thoughts?
Update: A direct refresh of /index.html#fcmsignature shows the signature correctly. So the issue is somehow connected to the initiation of the signatures - which is why I tried pageinit (without success). I also tried data-transition="none" on the buttons, but no change.
Try this syntax:
$('#fcmsignature, #gcsignature, #inspsignature').live('pageshow',function(e,data){
$('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
$('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
$('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
});
This syntax will take care that jQuery and jQuery mobile is loaded, and it will work only when pages fcmsignature, #gcsignature, #inspsignature are about to be show. And because you are using one signature per page use it like this:
$('#fcmsignature').live('pageshow',function(e,data){
if($('#fcmsig').find('.jSignature').length == 0){
$('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
}
});
$('#gcsignature').live('pageshow',function(e,data){
if($('#gcsig').find('.jSignature').length == 0){
$('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
}
});
$('#inspsignature').live('pageshow',function(e,data){
if($('#inspsig').find('.jSignature').length == 0){
$('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
}
});
jQM was not built to work with $(document).ready( function(){. Read my other artice to find out why: https://stackoverflow.com/a/14010308/1848600
Just to clarify for anyone else experiencing this issue, attaching jSignature to the "pageshow" event is what worked for me.
$("#signpage").live("pageshow",function(e,data){
if($("#signature").find(".jSignature").length == 0){
$("#signature").jSignature();
}
});
To update the other answers, the jQuery live() function has been deprecated since jQuery 1.7 and removed since jQuery 1.9. Now you will want to use the jQuery Mobile "pagecontainershow" event handler and check to see which page you are currently on, then perform the if block suggested in the other answers, as such:
$(document).on("pagecontainershow", function(evt, ui){
var pageID = $('body').pagecontainer('getActivePage').prop('id');
if(pageID == 'signaturePage'){
if($("#signatureDiv").find(".jSignature").length == 0){
$("#signatureDiv").jSignature();
}
}
}
This method works as of jQuery 1.11.3 and jQuery Mobile 1.4.5.