I'm working on a simple Chrome Extension. I decided to use Bootstrap to help me with design and everything seems to work but the popup window is very high and thin and all elements inside (buttons, forms...) are too huge. It makes sense because the elements are their regular size but in plugin, they should be smaller.
For illustration:
I tried to put this code into popup.js:
$(document).ready(function () {
$('body').height(280);
$('html').height(280);
});
As you can see, the popup should be wider and less smaller.
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body {
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
}
#status {
/* avoid an excessively wide status text */
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;
max-width: 400px;
}
</style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
-->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="bootstrap/html5shiv.js"></script>
<script src="bootstrap/respond.min.js"></script>
<script src="bootstrap/usebootstrap.js"></script>
<script src="popup.js"></script>
<script src="productspy.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href="theme/bootstrap.css" rel="stylesheet">
<link href="theme/usebootstrap.css" rel="stylesheet">
</head>
<body>
<h1>Product Spy Client</h1>
<h2>Please login:</h2>
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required="">
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
</form>
<button id="check-conn-button-id" class="btn-primary">Check Connection</button>
</body>
</html>
How to resize the window of the popup and smaller the elements so every button and everything would be smaller? Is it possible?
In your css, inside popup.html.
body {
max-height:280px;
width:300px;
overflow:auto; /* I suppose you want scroll if something happened*/
}
Related
I am developing a cultural web portal where users, after registering, will be able to add an article via a dedicated form.
As happens in most cultural web portals and also on social media, articles will be accompanied by a cover image that will anticipate the topic, a title and a description, as well as other fields that are not relevant here.
The CMS I have developed for the management (insertion, updating, removal) of articles has been designed for the total management in PHP of the data sent by forms. No forms are or will be loaded via JS/Ajax.
The form for saving articles will contain both mandatory and optional fields. If a mandatory field (e.g. title or text) is not filled in, the PHP script will redirect to the form, displaying the information previously entered in the fields that were filled in, to ease the user by relieving them of the task of having to re-enter all the fields again.
This choice does not create any problems for text, select and textarea type fields. It does, however, create a problem for the file type field dedicated to loading the cover image, since for security reasons it is impossible to save the local path to the image in order to retrieve it in the form and display it in the file type field.
In the form, as can be seen in the snippet below, after choosing the image it will be displayed as a preview, so that the user can check that he has chosen the correct image for his article.
Is there a way or an alternative to be able to pre-fill the file field in order to relieve the user of the task of having to choose the image again? Because the save script will retrieve all the fields via $_POST and the image via $_FILES.
I want to absolutely avoid encoding the image in base64 because some of the images that will be loaded will exceed 1280px in width and the save operation, having to transmit all the base64 encoding, would slow down a lot. Test already carried out.
HTML (fields not pre-filled)
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<script src="js/jquery.js"></script>
<script>
$(function () {
$('input:file').on('change', function () {
var reader = new FileReader();
reader.onload = function () {
$('.row').find('.preview').attr('src', reader.result);
}
reader.readAsDataURL(this.files[0]);
});
});
</script>
<style>
form {
width: 500px;
margin: auto;
}
.row {
padding: 10px 0;
}
.row label {
display: block;
}
.row .preview {
display: block;
margin: 20px 0;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<form method="post" action="save.php" enctype="multipart/form-data">
<fieldset>
<div class="row">
<label for="image">Image</label>
<input type="file" name="image" id="image">
<img src="" alt="" class="preview">
</div>
<div class="row">
<label for="title">Title</label>
<input type="text" name="title" id="title">
</div>
<div class="row">
<label for="text">Text</label>
<textarea name="text" id="text" cols="30" rows="10"></textarea>
</div>
</fieldset>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
HTML (pre-filled fields)
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<script src="js/jquery.js"></script>
<script>
$(function () {
$('input:file').on('change', function () {
var reader = new FileReader();
reader.onload = function () {
$('.row').find('.preview').attr('src', reader.result);
}
reader.readAsDataURL(this.files[0]);
});
});
</script>
<style>
form {
width: 500px;
margin: auto;
}
.row {
padding: 10px 0;
}
.row label {
display: block;
}
.row .preview {
display: block;
margin: 20px 0;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<form method="post" action="save.php" enctype="multipart/form-data">
<fieldset>
<div class="row">
<label for="image">Image</label>
<input type="file" name="image" id="image">
<img src="" alt="" class="preview">
</div>
<div class="row">
<label for="title">Title</label>
<input type="text" name="title" id="title" value="<?php echo $_SESSION['title'] ?>">
</div>
<div class="row">
<label for="text">Text</label>
<textarea name="text" id="text" cols="30" rows="10"><?php echo $_SESSION['text'] ?></textarea>
</div>
</fieldset>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
Screenshot (fields not pre-filled, image chosen)
Screenshot (fields pre-filled, image to be chosen again)
I create a form where I check the length of a password. If length is <6 then an error message appears.
This message is created by javascript. And here is the problem, the message appears with a line break after every word. I also tried it with ' ' but that doesn't work:(
How do I create the message without the line breaks?
Thanks for your help!
$("#registerPass").on("focusout", function() {
if ($("#registerPass").val().length < 6) {
$(this).removeClass("valid").addClass("invalid");
$('#registerPass + label').attr('data-error', 'Mindestens 6 Zeichen nötig!');
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/css/mdb.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/js/mdb.min.js"></script>
<form style="color: #757575;" action="#!">
<div class="md-form mb-5">
<input type="password" id="registerPass" class="form-control" required>
<label data-error="" data-success="OK" for="registerPass">Passwort</label>
</div>
</form>
Try to add width: 100% to the label element. I checked it and updated codebase below.
$("#registerPass").on("focusout", function() {
if ($("#registerPass").val().length < 6) {
$(this).removeClass("valid").addClass("invalid");
$('#registerPass + label').attr('data-error', 'Mindestens 6 Zeichen nötig!');
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/css/mdb.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/js/mdb.min.js"></script>
<form style="color: #757575;" action="#!">
<div class="md-form mb-5">
<input type="password" id="registerPass" class="form-control" required>
<label data-error="" data-success="OK" for="registerPass" style="width: 100%">Passwort</label>
</div>
</form>
Try adding white-space: nowrap to your css and target the ::after pseudo-element of the label.
https://jsfiddle.net/jvko4wdq/
Alternatively, you may also set the label width as 100% with CSS.
Set 100% width to element, thats it!
<label data-error="" data-success="OK" for="registerPass" style='width: 100%'>Passwort</label>
When a user goes to a page that requires them to register, I want to display a Bootstrap modal dialog with id and password. When the user presses the submit button, I want to:
Validate the password and sign them up
Dismiss the dialog
Take them to another page to display some information
What happens currently is when the user presses the Submit button. I go through the validation and try to hide the Bootstrap modal dialog, but then the page re-displays and the dialog comes back. This happens over and over again.
Here is the jsfiddle
Here is the HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Immedia Signup</title>
<script src="https://npmcdn.com/parse/dist/parse.min.js"></script>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<!-- Immedia stylsheet overrides -->
<!-- <link href="css/im-styles.css" rel="stylesheet" /> -->
<style>
html,
body {
background: url() no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* color: #212529; */
/* color: #bccee0; */
color: #bccee0;
}
.big-text-on-bg-img {
width: 75%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
font-size: 2.5rem;
font-weight: 400;
line-height: 1.2;
}
#media (min-width: 450px) {
.container-xs {
max-width: 500px;
}
}
.display-5 {
font-size: 2.5rem;
font-weight: 300;
line-height: 1.2;
}
</style>
<title>Immedia Home</title>
</head>
<body onload="onloadHandler()">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h1 class="masthead-brand">Modal Test Page</h1>
</div>
</header>
</div>
<!-- cover-container -->
<!-- Modal -->
<div
class="modal fade"
id="signupModal"
data-backdrop="static"
tabindex="-1"
role="dialog"
aria-labelledby="signupModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signup-title">
Thanks for entering an email address and password to protect your
account.
</h5>
</div>
<!-- modal-header -->
<div class="modal-body">
<form id="signup-form" onsubmit="submitHandler()">
<div class="form-group">
<label for="email">Email address</label>
<input
type="email"
autocomplete="username"
class="form-control"
id="email"
aria-describedby="emailHelp"
required
/>
<small id="emailHelp" class="form-text text-muted"
>We'll never spam you or share your email.</small
>
</div>
<!-- form-group -->
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
autocomplete="new-password"
class="form-control"
id="pwd-field"
aria-describedby="passwordHelp"
required
/>
<small id="passwordHelp" class="form-text text-muted">
Passwords must have at least 8 characters with one uppercase
one lowercase, one digit and one special character
"!##$%&*()"
</small>
</div>
<!-- form-group -->
<div class="form-group">
<button
id="submit-button"
type="submit"
class="btn btn-primary"
>
Submit
</button>
</div>
<!-- form-group -->
</form>
</div>
<!-- modal-body -->
</div>
<!-- modal-content -->
</div>
<!-- modal-dialog -->
</div>
<!-- modal fade-->
<!-- JavaScript -->
<script>
// Function definitions
//
$("#signupModal").on("hidden.bs.modal", function() {
$("body").removeClass("signupModal");
});
// Hide a DOM element on the page
// Process the signup when the user presses submit
$("#submit-button").click(function() {
const email = $("#email").val();
const password = $("#pwd-field").val();
console.info("email: " + email + ', password: "' + password + '"');
if (true) {
// Do not check for valid password. Assume it is for now.
console.info("valid password: ", password);
try {
// Signup user here
console.info("submitHandler(): successfully signed up");
$("#signupModal").modal(hide);
// They signed up successfully. Send them to the next page (for example only)
window.location.href = "https://www.duckduckgo.com";
} catch (err) {
console.error("Error signing up: ", err);
}
} else {
// invalid password
$("#pwd-field").val("");
}
console.info("submitHandler(): exiting function");
});
// Begin page execution
function onloadHandler() {
console.info("onloadHandler()");
$("body").addClass("#signupModal");
$("#signupModal").modal("toggle");
}
</script>
</body>
</html>
You are clicking on a submit button inside a form. This will trigger a form submit where it attempts to redirect the submit request. since you have not specified any action and method attributes on the form tag, the browser does not know where to redirect the form submit request and you see a blank page.
In your code you have specified an action listener using js on the submit button. The code inside the listener will execute and after this the default action i.e. the form submit will execute. To prevent this add e.preventDefault() and the form submit event is not executed.
Below code works. You will get a blank page with console error Refused to display 'https://duckduckgo.com/' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'" while running the code in jsfiddle or stackoverflow snippet. This shows the page redirect happened correctly and will work in your application. SO and JSFiddle doesnt like to display other websites within its code snippets.
$("#signupModal").on("hidden.bs.modal", function() {
$("body").removeClass("signupModal");
});
// Hide a DOM element on the page
// Process the signup when the user presses submit
$("#submit-button").click(function(e) {
// ************Add below code to prevent defauilt submit button form submit **********
e.preventDefault();
const email = $("#email").val();
const password = $("#pwd-field").val();
console.info("email: " + email + ', password: "' + password + '"');
if (true) {
// Do not check for valid password. Assume it is for now.
console.info("valid password: ", password);
try {
// Signup user here
console.info("submitHandler(): successfully signed up");
$("#signupModal").modal('hide');
// They signed up successfully. Send them to the next page (for example only)
// ************ Change code to replace so that register page is removed from browser history on redirect **********
window.location.replace("https://www.duckduckgo.com");
} catch (err) {
console.error("Error signing up: ", err);
}
} else {
// invalid password
$("#pwd-field").val("");
}
console.info("submitHandler(): exiting function");
});
// Begin page execution
function onloadHandler() {
console.info("onloadHandler()");
$("body").addClass("#signupModal");
$("#signupModal").modal("toggle");
}
html,
body {
background: url() no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* color: #212529; */
/* color: #bccee0; */
color: #bccee0;
}
.big-text-on-bg-img {
width: 75%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
font-size: 2.5rem;
font-weight: 400;
line-height: 1.2;
}
#media (min-width: 450px) {
.container-xs {
max-width: 500px;
}
}
.display-5 {
font-size: 2.5rem;
font-weight: 300;
line-height: 1.2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="viewport" content="width=device-width" />
<title>Immedia Signup</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://npmcdn.com/parse/dist/parse.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<!-- Immedia stylsheet overrides -->
<!-- <link href="css/im-styles.css" rel="stylesheet" /> -->
</head>
<body onload="onloadHandler()">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h1 class="masthead-brand">Modal Test Page</h1>
</div>
</header>
</div>
<!-- cover-container -->
<!-- Modal -->
<div class="modal fade" id="signupModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="signupModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signup-title">
Thanks for entering an email address and password to protect your account.
</h5>
</div>
<!-- modal-header -->
<div class="modal-body">
<!-- ************ Remove form submit code ***********-->
<form id="signup-form">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" autocomplete="username" class="form-control" id="email" aria-describedby="emailHelp" required />
<small id="emailHelp" class="form-text text-muted">We'll never spam you or share your email.</small
>
</div>
<!-- form-group -->
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
autocomplete="new-password"
class="form-control"
id="pwd-field"
aria-describedby="passwordHelp"
required
/>
<small id="passwordHelp" class="form-text text-muted">
Passwords must have at least 8 characters with one uppercase
one lowercase, one digit and one special character
"!##$%&*()"
</small>
</div>
<!-- form-group -->
<div class="form-group">
<button id="submit-button" type="submit" class="btn btn-primary">
Submit
</button>
</div>
<!-- form-group -->
</form>
</div>
<!-- modal-body -->
</div>
<!-- modal-content -->
</div>
<!-- modal-dialog -->
</div>
<!-- modal fade-->
</body>
</html>
So I'm getting the following errors and hints:
Failed to instantiate module stable due to:
Error: [$injector:nomod] http://errors.angularjs.org/1.4.9/$injector/nomod?p0=stable
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:6:416
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:24:186
at b (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:23:252)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:23:495
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:38:153
at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:38:1)
at db (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:41:272)
at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:19:463
Module 'stable' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
So I've tried to figure out why the registering isn't working, but I've had no luck so far.
I've got this in my .js
/*global angular*/
var stable = angular.module('stable',[]);
stable.controller('mainController', function($scope) {
$scope.master = {};
$scope.login = function() {
var loginAttempt = {
"_userName": $scope.userName;
"_password": $scope.userPassword;
};
console.log(loginAttempt);
};
$scope.create_account = function(user) {};
});
and have in my my top level html tag the "ng-app="stable"" attribute. What am I missing?
HTML code here:
<!DOCTYPE html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>
<html lang="en" >
<br xmlns="http://www.w3.org/1999/html">
<head>
<title>User Login</title>
<style>
body {
background: rgb(210, 77, 87) !important;
}
</style>
</head>
<body ng-app="stable" ng-controller="mainController">
<i><span style="color:#FFFFFF; font-family:Segoe UI Black,serif; font-size:50px; margin-left: 1%; margin-top:1%;">STABLE</span></i>
<!-- onclick="location.href = 'http://localhost:63342/AngularJS/AccountPage.html'" removed from Create Account-->
<button type="button" ng-click="create_user(user)" class="btn btn-primary btn-lg" name="create_user_button" style="float:right; margin-right:2.5%; margin-top:1%;">Create Account</button><br>
<div style="text-align: center;">
<br><br><br><br>
<b><span style="color:#FFFFFF; font-size: 32px;">Hello! Please Sign In.</span></b><br><br>
<input style="font-size:28px;" ng-model="userName" type="text" name="username" id="id_username" placeholder="Username" size="32" maxlength="16" /><br><br>
<input style="font-size:28px;" ng-model="userPassword" type="password" name="password" id="id_password" placeholder="Password" size="32" maxlength="16"/><br>
Forgot Password?
<br><br>
<!-- onclick="location.href = 'http://localhost:63342/AngularJS/MainPage.html'" removed from button -->
<button type="submit" ng-click="login()" class="btn btn-primary big-btn btn-lg" name="login_button" >Login</button>
</div>
</body>
</html>
You need to make sure that your javascript file with the module 'stable' is included in your html in a script tag. You also need to ensure that your script tag to load angularjs comes before this other javascript file script tag.
<script type="text/javascript" src="path/to/angularjs"></script>
...
<script type="text/javascript" src="path/to/js/file"></script>
Hopefully this helps. It would also be useful to post your html code that goes along with this. If this isn't a fix.
I am building a simple app that multiplies a number entered by the user by 5 and displays the result. Since, I am a beginner, I need some help with this.
Here's my HTML code:
<!DOCTYPE html>
<head>
<title>Area Calc</title>
<link rel='stylesheet' type='text/css' href='style.css'/>
<link href='http://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type='text/javascript' src='script.js'></script>
<head>
<body>
<div class="heading">Number Of Persons Calc</div>
<div style=" color: white; text-align:auto; width:400px; margin-right:auto; margin-left:auto; border:1px solid white; margin-top: 120px;">
<form method="" action="">
<input type="text" name="area" placeholder="Enter in square metres!" class="input" />
<input class="submit" type="submit" value="Submit" class="button" />
</form>
</div>
<body>
<html>
Can someone tell me what JavaScript/jQuery code could possibly take the value entered by the user from the text input element and multiply it by 5 and then display the result to the user? Please help me with this.
HTML
<input type="text" name="area" placeholder="Enter in square metres!" id="op" class="input" />
<input class="submit" type="button" value="Submit" class="button" onClick="mulBy()" />
SCRIPT
function mulBy(){
var op1=parseFloat(document.getElemntById("op").value);
val ans=op1*5;
alert(ans);
}
suppose you want to display the answer in a div having id "result":
<input type="text" name="area" placeholder="Enter in square metres!" class="input" />
<input class="submit button" type="submit" value="Submit" />
<div id="result"></div>
This div is placed just after the submit button. Now write the following code after the line:
<script type='text/javascript' src='script.js'></script>
$(document).ready(function(){
$(".submit ").click(function(){
$("#result").html(parseInt($(".input").val())*5);
return false;
});
});
Calculate in HTML without using Form and submit button
HTML
<input type="text" id="area" name="area" placeholder="Enter in square metres!"
class="input"/>
<br/>
<div id="result"></div>
JqueryCode
$(document).ready(function(){
$("input#area").change(function(){
var input_box = $('#area').val();
if ( input_box != ''){
$("div#result").html(input_box*5);
}
else{
$("div#result").html("");
}
});
});
LiveDemo JsFiddle