I want to make my html page scale with the mobile screen it is opened on. This is my code I have. I have added the initial scale 1 line but it doesn't seem to work. I want the images the input box and the radio button to scale with the width and height of the device the page is opened on. I am using html/css and bootstrap to make the page and some JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<img class="img-responsive" src="corendonwifi.png" alt="Chania" width="460" align="middle" height="345">
<script>
function myFunc() {
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Corendon WI-FI</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
H1 { text-align: center }
.bs-example{
margin: 20px;
}
body {
position: fixed;
top: 20%;
left: 50%;
transform: translate(-50%, -35%);
}
input, textarea {
max-width:100%
};
img {
max-width: 100%
};
</style>
</head>
<body onload="myFunc();">
<div class="bs-example">
<div class="bs-example">
<form>
<div class="form-group">
<label for="inputticketnummer">Ticketnummer</label>
<input type="ticketnummer" class="form-control" id="inputticketnummer" maxlength="20" placeholder="ticketnummer" size="" required>
</div>
<input type="checkbox" id="checkme"/> Ik heb de voorwaarden gelezen </label>
<br><br>
<input type="submit" name="sendNewSms" class="btn btn-primary" class="btn-xs" disabled="disabled" id="sendNewSms" value=" ga door " />
</form></div></form>
</div>
</div>
</body>
</html>
In order to get proper page scaling using Bootstrap, you must set up a grid system for the page. Right now, Bootstrap can't tie into anything and therefore not scale it.
Have a look at the documentation: http://getbootstrap.com/css/#grid
Correct your code like the following code :
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function myFunc() {
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Corendon WI-FI</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
H1 { text-align: center }
.bs-example{
margin: 20px;
}
/*body{
position: fixed;
top: 20%;
left: 50%;
transform: translate(-50%, -35%);
}*/
input, textarea {
max-width:100%;
}
img {
max-width: 100%;
}
</style>
</head>
<body onload="myFunc();">
<div class="container">
<div class="row">
<div class="col-sm-12">
<img class="img-responsive" src="corendonwifi.png" alt="Chania" width="460" align="middle" height="345">
</div><!--col-sm-12-->
</div><!-- row -->
<div class="row">
<div class="col-sm-12" onload="myFunc();"></div>
</div><!-- row -->
<div class="row">
<div class="col-sm-12 bs-example">
<div class="col-sm-12">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
</div><!-- col-sm-12 -->
<div class="col-sm-12">
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
</div><!-- col-sm-12 -->
<div class="col-sm-12">
<div class="form-group">
<input type="submit" name="sendNewSms" class="btn btn-primary" class="btn-xs" disabled="disabled" id="sendNewSms" value=" ga door " />
</div>
</div><!-- col-sm-12 -->
</div><!-- col-sm-12 bs-example -->
</div><!-- row -->
</div><!-- container -->
</body>
</html>
Firstly, while using bootstrap always use bootstrap classes. Secondly, dont use transform property in your css and position fixed in your css.
Your markup has several errors.
You can use the bootstrap classes to address this issue, but also can become free and use them as needed.
Repalce your CSS code for that:
.form{
max-width: 400px;
padding: 15px;
margin: 0 auto;
}
img{
margin: 0 auto;
}
.row{
margin-bottom:10px
}
And replace your markup, for that:
<body onload="myFunc();">
<div class="container">
<div class="form">
<div class="row">
<img class="img-responsive" src="corendonwifi.png" alt="Chania" width="460" align="middle" height="345">
</div>
</div>
<form class="form">
<div class="row">
<label for="inputticketnummer">Ticketnummer</label>
<input type="ticketnummer" class="form-control" id="inputticketnummer" maxlength="20" placeholder="ticketnummer" size="" required>
</div>
<div class="row">
<input type="checkbox" id="checkme"/> Ik heb de voorwaarden gelezen
</div>
<div class="row">
<input type="submit" name="sendNewSms" class="btn btn-primary" class="btn-xs" disabled="disabled" id="sendNewSms" value=" ga door " />
</div>
</form>
</div>
</body>
See my fiddle HERE!
Related
I have an issues using Selectmenu in jquery-ui everytime I tried to click on the drop it shows me this error in the console:
Uncaught TypeError: Cannot read property 'index' of undefined
I already imported all the needed files for this such as jquery, jquery-ui and all the needed component to make this works. Any ideas what cause the errors?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<link rel ="stylesheet" href = "bootstrap-4.3.1-dist/css/bootstrap.min.css"/>
<link rel ="stylesheet" href = "fontawesome-free-5.15.2-web/css/fontawesome.min.css"/>
<!-- Jquery UI-->
<link rel ="stylesheet" href = "jquery-ui-1.12.1.custom/jquery-ui.css"/>
<link rel ="stylesheet" href = "jquery-ui-1.12.1.custom/jquery-ui.structure.css"/>
<link rel ="stylesheet" href = "jquery-ui-1.12.1.custom/jquery-ui.theme.css"/>
<!-- xxxx-->
<script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
<script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script src="fontawesome-free-5.15.2-web/js/fontawesome.min.js"></script>
<script src="main.js"></script>
<script>
$( function() {
$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function( ul, item ) {
var li = $( "<li>" ),
wrapper = $( "<div>", { text: item.label } );
if ( item.disabled ) {
li.addClass( "ui-state-disabled" );
}
$( "<span>", {
style: item.element.attr( "data-style" ),
"class": "ui-icon " + item.element.attr( "data-class" )
})
.appendTo( wrapper );
return li.append( wrapper ).appendTo( ul );
}
});
$( "#filesB" )
.iconselectmenu()
.iconselectmenu( "menuWidget" )
.addClass( "ui-menu-icons customicons" );
} );
</script>
<div id="main" style="height: 100%; width: 100%;">
<script>
$(function() {
$("#main").load("header.html");
});
</script>
</div>
<style>
/* select with custom icons */
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
padding: 0.5em 0 0.5em 3em;
}
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
height: 24px;
width: 24px;
top: 0.1em;
}
.ui-icon.video {
background: url("logo-small.png") 0 0 no-repeat;
}
.ui-icon.podcast {
background: url("logo-small.png") 0 0 no-repeat;
}
.ui-icon.rss {
background: url("logo-small.png") 0 0 no-repeat;
}
</style>
</head>
<body>
<div id="lineContent" style="width:100%;">
<div class="row" style = "margin:0px;padding:0px;">
<div class="col-md-12" style="margin:0px;padding:0px;">
<div class = "row">
<div class = "col-md-2" style="margin:0px;padding:0px;">
</div>
<div class = "col-md-10" style ="margin:0px;padding:0px;">
<div style="margin-bottom: 30px;">
<p>Add Account >> LINE</p>
</div><br>
<form name="lineform" id = "line-form" action="main.html" method="POST" onsubmit="insertDB(event,'line')">
<div>
<p class="labels required">Channel Name:</p>
<p class="labels"><input pattern="^[a-zA-Z\s]+$" oninvalid="setCustomValidity('Please enter on alphabets only. ')" type="text" id="chname" name="chname" style = "width:50%" value="" placeholder="Enter your Channel Name" required></p>
</div><br>
<div>
<p class="labels required">Channel Id:</p>
<p class="labels "><input type="text" id="chid" name="chid" value="" style = "width:50%" placeholder="Enter your Channel ID" required></p>
</div><br>
<div>
<p class="labels required">Channel Access Token:</p>
<p class="labels "><input type="text" id="chtoken" name="chtoken" value="" placeholder="Enter your Channel Access Token" style = "width: 50%" required></p>
</div><br>
<div><i class="fa fa-line"></i></i></div>
<div class = "select">
<h2>Selectmenu with custom icon images</h2>
<fieldset>
<label for="filesB">Select a podcast:</label>
<select name="filesB" id="filesB">
<option value="mypodcast" data-class="podcast">John Resig Podcast</option>
<option value="myvideo" data-class="video">Scott González Video</option>
<option value="myrss" data-class="rss">jQuery RSS XML</option>
</select>
</fieldset>
</div>
<div>
<button style="background-color:#1f73b7!important;"class="btn btn-primary" type="submit">Submit</button>
</div><br>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
Many thanks.
I was unable to replicate the issue when I run a slightly cleaner version of the code.
$(function() {
$.widget("custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function(ul, item) {
var li = $("<li>"),
wrapper = $("<div>", {
text: item.label
});
if (item.disabled) {
li.addClass("ui-state-disabled");
}
$("<span>", {
style: item.element.attr("data-style"),
"class": "ui-icon " + item.element.attr("data-class")
})
.appendTo(wrapper);
return li.append(wrapper).appendTo(ul);
}
});
$("#filesB")
.iconselectmenu()
.iconselectmenu("menuWidget")
.addClass("ui-menu-icons customicons");
});
/* select with custom icons */
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
padding: 0.5em 0 0.5em 3em;
}
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
height: 24px;
width: 24px;
top: 0.1em;
}
.ui-icon.video {
background: url("logo-small.png") 0 0 no-repeat;
}
.ui-icon.podcast {
background: url("logo-small.png") 0 0 no-repeat;
}
.ui-icon.rss {
background: url("logo-small.png") 0 0 no-repeat;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="lineContent" style="width:100%;">
<div class="row" style="margin:0px;padding:0px;">
<div class="col-md-12" style="margin:0px;padding:0px;">
<div class="row">
<div class="col-md-2" style="margin:0px;padding:0px;"></div>
<div class="col-md-10" style="margin:0px;padding:0px;">
<div style="margin-bottom: 30px;">
<p>Add Account >> LINE</p>
</div><br>
<form name="lineform" id="line-form" action="main.html" method="POST" onsubmit="insertDB(event,'line')">
<div>
<p class="labels required">Channel Name:</p>
<p class="labels"><input pattern="^[a-zA-Z\s]+$" oninvalid="setCustomValidity('Please enter on alphabets only. ')" type="text" id="chname" name="chname" style="width:50%" value="" placeholder="Enter your Channel Name" required></p>
</div><br>
<div>
<p class="labels required">Channel Id:</p>
<p class="labels "><input type="text" id="chid" name="chid" value="" style="width:50%" placeholder="Enter your Channel ID" required></p>
</div><br>
<div>
<p class="labels required">Channel Access Token:</p>
<p class="labels "><input type="text" id="chtoken" name="chtoken" value="" placeholder="Enter your Channel Access Token" style="width: 50%" required></p>
</div><br>
<div><i class="fa fa-line"></i></div>
<div class="select">
<h2>Selectmenu with custom icon images</h2>
<fieldset>
<label for="filesB">Select a podcast:</label>
<select name="filesB" id="filesB">
<option value="mypodcast" data-class="podcast">John Resig Podcast</option>
<option value="myvideo" data-class="video">Scott González Video</option>
<option value="myrss" data-class="rss">jQuery RSS XML</option>
</select>
</fieldset>
</div>
<div>
<button style="background-color:#1f73b7!important;" class="btn btn-primary" type="submit">Submit</button>
</div><br>
</form>
</div>
</div>
</div>
</div>
</div>
This would suggest there is an error in your JavaScript code someplace. You will want to clean up your code and ensure that there are no syntax errors.
I am just a beginner.
Is there a code to use two different images as buttons to disable and enable . Most examples use two separate buttons but I need to use a single button with two images: one for off and the other one for on.
$(function() {
$("#Enable").click(function(){
$(".div1 *").prop('disabled',true);
});
$("#Disable").click(function(){
$(".div1 *").prop('disabled',false);
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="css/multitoggle.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script language="javascript" type="text/javascript"></script>
</head>
<body>
<div class="div1">
Name:<input type="text" id="fullname" value="name"/><br>
<br>
<input type="button" id="button1" value="Submit "/>
<div></div>
</div>
<input type="image" src="assets/trans_off.jpg" id="Enable" value="Enable"/>
<input type="image" src="assets/trans_on.jpg"id="Disable" value="Disable"/>
</body>
</html>
Use image sprite that contains two button images. Use background-position to set what part of image to show.
$(document).ready(function() {
var isDisabled = false;
$('.toggle').click(function() {
isDisabled = !isDisabled; // invert value
$('.div1 input').prop('disabled', isDisabled);
});
});
#button1 {
background: url('http://images.sixrevisions.com/2009/05/04-31_slick_clean_30.png') no-repeat -80px -14px;
width: 246px;
height: 48px;
border: none;
}
#button1:disabled {
background-position: -80px -63px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
Name: <input type="text" id="fullname" value="name" /><br>
<br/>
<input type="button" id="button1"/>
<div></div>
</div>
<hr/>
<button class="toggle">Toggle inputs</button>
i want to make the "img/rsz_indexpage_image.jpg" picture stretchable according to the div size variation.when enlarging the width of the div picture is not enlages as expected.how to do this by bootstrap. now image size is static when enlarging.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/loginjs.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/logincss.css">
</head>
<body>
<div class="container">
<div class="row vertical-offset-100">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row-fluid user-row">
<img src="img/rsz_indexpage_image.jpg" class="img-responsive" alt="Conxole Admin"/>
</div>
</div>
<div class="panel-body">
<form accept-charset="UTF-8" role="form" class="form-signin">
<fieldset>
<label class="panel-login">
<div class="login_result"></div>
</label>
<input class="form-control" placeholder="Username" id="username" type="text">
<input class="form-control" placeholder="Password" id="password" type="password">
<br></br>
<input class="btn btn-lg btn-success btn-block" type="submit" id="login" value="Login »">
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
if you want to keep aspect ratio then put width:100% and height:auto
if you want to cover whole parent element then height:100% and width:100%
and its on you how you put it with .img-responsive
img-responsive
.img-responsive {
display: block;
width: 100%;
height: auto;
margin: auto;
}
window.onresize = function(event) {
updateImageSize()
};
function updateImageSize() {
$(".img-responsive").each(function(){
var ratio_cont = jQuery(this).width()/jQuery(this).height();
var $img = jQuery(this).find("img");
var ratio_img = $img.width()/$img.height();
if (ratio_cont > ratio_img)
{
$img.css({"width": "100%", "height": "auto"});
}
else if (ratio_cont < ratio_img)
{
$img.css({"width": "auto", "height": "100%"});
}
});
};
I'm trying to allow a pop up to display always when a user is basically unregistered and wishes to view the certain page. I saw an example of how to do it but I am completely stuck it's not appearing on my page. Any ideas?
Thanks!
Image: http://puu.sh/cr1Zz/1b5da28635.png
My code on that page(CSS is listed in the image above)
<?php
session_start();
include ('../includes/config.php');
include ('../includes/header.php');
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Honda | </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--start lightbox -->
<link rel="stylesheet" type="text/css" href="../css/jquery.lightbox.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.lightbox.js"></script>
<script>
// Initiate Lightbox
$(function() {
$('.gallery1 a').lightbox();
});
</script>
</head>
<body>
<div class='modalDialog'>You cannot view this page! Please register</div>
<!--start header-->
<div class="h_bg">
<div class="wrap">
<div class="wrapper">
<div class="header">
<div class="logo">
<img src="../images/logo.png">
</div>
<div class="cssmenu">
<ul>
<li><span>Home</span></li>
<li><span>About</span></li>
<li class="active" class="has-sub"><span>Gallery</span>
</li>
<li class="last"><span>Contact</span></li>
<div class="clear"></div>
<div class="search">
<h2>search</h2>
<form>
<input type="text" value="" placeholder="Enter Your search...">
<input type="submit" value="">
</form>
</div>
<?php
if(isset($_POST["submit"])){
if(!empty($_POST['user']) && !empty($_POST['pass'])) {
$user=$_POST['user'];
$pass=$_POST['pass'];
$pass = strip_tags($pass);
$pass = md5($pass); // md5 is used to encrypt your password to make it more secure.
$query=mysql_query("SELECT * FROM login WHERE username='".$user."' AND password='".$pass."'");
$numrows=mysql_num_rows($query);
if($numrows!=0)
{
while($row=mysql_fetch_assoc($query))
{
$dbusername=$row['username'];
$dbpassword=$row['password'];
}
if($user == $dbusername && $pass == $dbpassword)
{
session_start();
$_SESSION['sess_user']=$user;
/* Redirect browser */
header("Location: member.php");
}
} else {
echo "<div class='results'>Invalid username or password!</div>";
}
} else {
echo "All fields are required!";
}
}
?>
<div class="search1">
<h2>login/Register</h2>
<form action="" method="POST">
<label>Username:</label>
<input type="text" name="user" required />
<label>Password:</label>
<input type="password" name="pass" required />
<input type="submit" value="Login" name="submit" class="submit" />
<br><br>
<center>
<h2><p>Register</p></h2>
</center>
</form>
</div>
</div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- start content -->
<div class="footer_bg">
<div class="wrap">
<div class="wrapper">
<div class="footer2">
<div class="copy">
<p class="w3-link">© </p>
</div>
<div class="f_nav">
<ul>
<li>Skype</li>
<li>Linked in</li>
<li>Twitter</li>
<li>Facebook</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Although you include jQuery, the modal dialog is part of the jQueryUI. But that on its own won't solve your problem. You have declared a div with the class modalDialog, so I suppose this is the line to be shown in the dialog. I would suggest you to use id's instead of classes because a class covers multiple document objects, and you really want to show one dialog here. From the jQueryUI docs:
<div id="dialog" title="Please register">
<p>You cannot view this page! Please register</p>
</div>
Add the jQuery call:
$(function() {
$( "#dialog" ).dialog();
});
And that should work just fine
If you decide to go with the lightbox modal dialog your code should look like:
<div id="test-modal" class="white-popup-block mfp-hide">
<h1>lease register</h1>
<p>You cannot view this page! Please register</p>
<p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>
To call the code use:
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
preloader: false,
focus: '#username',
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
When this code runs you can see it doesn't render the programmatically added input field as a mobile styled element. I could force it to by adding all the classes that get put in when a page is rendered (commented out). Is there an easier way?
http://jsfiddle.net/mckennatim/KKTr4/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
</head>
<body>
<div id="thelists" data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<h3>Add List</h3>
<form>
<div data-role="controlgroup" id="addwhat">
<input type="text" name="inp0" class="inp" />
</div>
<div data-role="controlgroup" data-type="horizontal" class="aisubmit">
<input type="submit" data-theme="b" id="addinput" value="Add Input"/>
</div>
</form>
</div><!-- /content -->
</div><!-- /page -->
<script>
var ct =0;
$('body').on('click', "#addinput", function (e) {
ct++;
e.stopImmediatePropagation();
e.preventDefault();
//to add form elemnt you have to add all the class css stuff
//$('#addwhat').append('<input type="text" name="list' + ct + '" class="inp ui-input-text ui-body-c ui-corner-all ui-shadow-inset" />');
$('#addwhat').append('<input type="text" name="list' + ct + '"/>');
});
</script>
</body>
</html>
$('#thelists').trigger('create');
should do the trick.