I am currently working on a project requiring jQuery mobile for a Blackberry Smartphone webworks app. I discovered that I cannot access any content below screen height on my page.
I have tried iscrollview, but it doesn't work well after compiling it into .COD file. Any suggestions will be appreciated.
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.iscrollview-pull.css" />
<script src="js/iscroll.js" type="text/javascript"></script>
<script src="js/jquery.mobile.iscrollview.js"></script>
<div data-role="content" class="content_div">
<div class="content-secondary">
<div class="Main-holder" id="Main-holder" style="background-color:#fff; overflow-y:scroll; height:500px;">
<form id="mylogin" data-iscroll>
<div class="form-row">
<div class="reg-label">Username:</div>
<input name="username" id="username" type="text" />
<div style="clear:both"> </div>
</div>
<div class="form-row">
<div class="reg-label">Password:</div>
<input id="password" name="password" type="password" />
<div style="clear:both"> </div>
</div>
<div class="form-row">
<div align="right" class="sub-but-wrapper">
<a data-role="button" id="loginSubmit"style="width:90px;" data-theme="b">Login</a>New User?<span id="loader" style="display:none"></span>
<!--
<input data-role="button" type="button" name="loginSubmit" id="loginSubmit"style="width:90px;" data-theme="b" value="Login" /> New User?<img src="images/ajax-loader.gif" id="loader" style="display:none" />
-->
</div>
<label></label><div style="clear:both"> </div>
</div>
<div class="form-row" style="height:100px">
<div style="clear:both"> </div>
</div>
</form>
</div>
</div>
</div>
Related
I would like to know if it is possible to position the label and the input on the same line, please. I don't know how to do this in Bootstrap 5.
Thank you in advance for your help.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container pt-5">
<form (ngSubmit)="login()">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">User</label>
<input type="text" class="form-control" name="exampleInputEmail1" style="width: 40%" aria-describedby="emailHelp" [(ngModel)]="loginForm.user" required maxlength="4">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" name="exampleInputPassword1" style="width: 40%" [(ngModel)]="loginForm.password" required maxlength="4">
</div>
<button type="submit" class="btn btn-primary">Connection</button>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container pt-5">
<form (ngSubmit)="login()">
<div class="mb-3">
<div class="d-inline-flex align-items-center">
<label for="exampleInputEmail1" class="form-label" style="min-width: 100px !important">User</label>
<input type="text" class="form-control" name="exampleInputEmail1" style="width: 40%" aria-describedby="emailHelp" [(ngModel)]="loginForm.user" required maxlength="4">
</div>
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<div class="d-inline-flex align-items-center">
<label for="exampleInputPassword1" class="form-label" style="min-width: 100px !important">Password</label>
<input type="password" class="form-control" name="exampleInputPassword1" style="width: 40%" [(ngModel)]="loginForm.password" required maxlength="4">
</div>
</div>
<button type="submit" class="btn btn-primary">Connection</button>
</form>
</div>
</body>
</html>
I've encountered an error while running my application. I'm seeing this error on my console when I run the application
Uncaught TypeError: Cannot read property 'fn' of undefined
at util.js:68
at util.js:10
at bootstrap.min.js:6
at bootstrap.min.js:6
Here is my source code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<!------ Include the above in your HEAD tag ---------->
<div class="sidenav">
<div class="login-main-text">
</div>
</div>
<div class="main">
<div class="col-md-6 col-sm-12">
<div class="login-form">
<form>
<div class="form-group">
<label>User Name</label>
<input type="text"id="userid" class="form-control" placeholder="User Name">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" id="password" class="form-control" placeholder="Password">
</div>
<input type="button" class="btn btn-black" value="Login" onclick="NullValidator()" #*window.location='Url.Action("Dashboard", "Dashboard")*# />
#*<button type="submit" class="btn btn-black">Login</button>*#
<button type="submit" class="btn btn-secondary">Register</button>
<div class="form-group">
<a style="float:left">Forget Password ? </a>
</div>
</form>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
</body>
</html>
I've tried searching for the fn here but I didn't use it in this page and also on other pages of the application. So I can't determine the cause of the error.
I've solved my problem by adding this code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
In w3.css there is no option to prepare a form in such a way so that the inputs and labels are appeared on the same line. I am trying but could not fix the problem. Please help to fix the problem.
<div class="w3-row-padding">
<div class="w3-third">
<label class="w3-label">User Name</label>
</div>
<div class="w3-half">
<input class="w3-input w3-border" type="text" placeholder="Name">
</div>
</div>
This is the code I actually wanted:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-row-padding">
<div class="w3-quarter">
<p> <label class="w3-label" type="text">User Name</label><p>
</div>
<div class="w3-threequarter">
<p><input class="w3-input w3-border w3-round" type="text"
placeholder="Enter your username"></p>
</div>
<div class="w3-quarter">
<p> <label class="w3-label" type="text">Passwords</label></p>
</div>
<div class="w3-threequarter">
<p><input class="w3-input w3-border w3-round" type="text"
placeholder="Enter your passwords"></p>
</div>
</div>
</body>
When I run this project from the terminal like so
cd to AppointmentScheduler
node index.js
I am now receiving the following erorr in the console
Uncaught TypeError: undefined is not a functionangular-route.js:26 (anonymous function)angular-route.js:6 (anonymous function)
This is the index.html
<html>
<head ng-app="appointments">
<title>Appointments</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/controllers/app.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
</head>
<body>
<div class="container">
<h1>Piar Appointments Scheduler</h1>
<div ng-view></div>
</div>
</body>
</html>
This is the login.html
<div class="row-fluid">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label" required>Email</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
This is the public/js/app.js
var appointments = angular.module('appointments', ['ngRoute']);
appointments.config(function ($routeProvider) {
$routeProvider
.when('/',
{templateUrl: 'partials/login.html'})
})
This is the public/js/controllers/app.js That has been edited, sorry about the error of repeating the content of the public/js/app.js here
function LoginCtrl ($scope)
{
}
currently watching up and running with angularjs by Joseph LeBlanc from Lynda.com
Your js/app.js and js/controllers/app.js seems to be exactly the same - but I think the problem is that you are trying to use ngRoute without loading it
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
Also, put ng-app to <html> or <body> element, if you have in on <head>, that will be the root element of your application so it won't even touch <body>
I want to add "back button" panel for my app but only for iphones.
I am using vs2013 Multi Device Hybrid Apps plugin to develope mobile app. After a lot errors and problems I managed to start coding phase, the thing is android devices have panel to "back" or other stuff. But I need to set it also for iphones. Project has "merges" folder, I believe that part using for it. (I dont want to add that extra button for whole project, only iphone is enough for me as you know android devices have panel to "back" or other stuff.)
If its possible; how can I do that? Here is one of my page example ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Föy</title>
<link href="css/index.css" rel="stylesheet" />
<script src="scripts/jquery-1.8.3.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/login.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#btnLogin").click(function () {
window.location = "main.html";
})
});
</script>
</head>
<body>
<div class="container" id="login-block">
<div class="row">
<div class="col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">
<h3 class="animated bounceInDown">FÖY Fatura Ödeme Sistemleri</h3>
<div class="login-box clearfix animated flipInY">
<div class="login-logo">
<img src="images/logo.png" alt="Company Logo" />
</div>
<hr />
<div class="login-form">
<div class="alert alert-error hide">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Hata!</h4>
İşlem Sırasında Hata Oluştu
</div>
<div>
<input type="text" class="form-control" id="txtUser" placeholder="Bayi Kodu" required />
<input type="password" class="form-control" id="txtPassword" placeholder="Şifre" required />
<button type="button" id="btnLogin" class="btn btn-red">GİRİŞ</button>
</div>
<div class="login-links">
<a href="forgot-password.html">
Şifremi Unuttum?
</a>
<br />
<a href="sign-up.html">
Bayi Değilim? <strong>Bayi Ol!</strong>
</a>
</div>
</div>
</div>
<div class="social-login row">
<div class="fb-login col-lg-6 col-md-12 animated flipInX">
<strong>Facebook</strong> ile bağlan
</div>
<div class="twit-login col-lg-6 col-md-12 animated flipInX">
<strong>Twitter</strong> ile bağlan
</div>
</div>
</div>
</div>
</div>
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
Thank You , Best Regards
Put your platform specific file within the merges\ios\ folder and it should get picked up during build. More information and guidance can be found here