l got a landing page up and running here compare.comxa.com..when l try to view on my android device only the form shows,the background image is no where to be found. please can you help.
this is the code
body {
height:100%;
background: url("http://bit.ly/1MOnMVB") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
#mc_embed_signup {
background:#fff;
clear:left;
font:14px Helvetica,Arial,sans-serif;
position:absolute;
top:85px;
left:35px;
border-radius:5px;
}
h2 {
color:orange;
font-weight:bold;
text-align:center;
}
h5 {
color:#483D8B;
text-align:center;
}
<!DOCTYPE HTML>
<html>
<head>
<title>black friday deals</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="ataga austin">
<meta name="keywords" contents="black friday,deals,black firday deals,black friday deal comapre">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class=" col-xs-12 col-md-12">
<div class="row">
<div class=" col-xs-12 col-md-4">
<div id="mc_embed_signup">
<form action="//comxa.us12.list-manage.com/subscribe/post?u=3380c08f529e58f0eadc50f43&id=ab83c00a63" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Best Black Friday Deals</h2>
<h5>Compare Prices Across Your Favourite Stores</h5>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder=" something#some.com">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">Name </label>
<input type="text" value="" name="NAME" class="" id="mce-NAME" placeholder=" smith davis">
</div>
<div class="mc-field-group">
<label for="mce-PRODUCT">PRODUCT </label>
<input type="text" value="" name="PRODUCT" class="" id="mce-PRODUCT" placeholder="apple tv" >
</div>
<div class="mc-field-group">
<label for="mce-LNAME">FAVORITE STORE </label>
<input type="text" value="" name="STORE" class="" id="mce-STORE" placeholder=" amazon">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"> </div>
<div class="response" id="mce-success-response" style="display:none"> </div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3380c08f529e58f0eadc50f43_ab83c00a63" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-success"></div>
</div>
</form>
</div>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='PRODUCT';ftypes[2]='text';fnames[3]='STORE';ftypes['3']='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
</div>
</div>
</div>
</div>
</body>
</html>
It looks like you're trying to load the background image from a protected ftp server. That works only in the following format ftp://user:password#server.tld
BUT that's clearly not recommended (password in cleartext!)
So rather than doing something stupid as that move the file to the right directory on the web server and just reference it like this: background-image: url(bkg1.jpeg);
Background image is not loading because it can't get access to to your account where you have your image Just change image url and it will work
background: url("http://www.wallpapereast.com/static/images/HD-Wallpapers1_Q75eDHE.jpeg") no-repeat center center fixed;
Related
I am trying to validate my form, but the console never shows me errors. I have done what the Bootstrap documentation says and nothing happened. I want, for example, that when clicking on the button, if any field is empty, it shows an alert or error in that field. If someone can help me, I will be very grateful.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/e6233a0317.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/product.css">
<link rel="stylesheet" href="./css/styles.css">
<link rel="stylesheet" href="./css/help.css">
<link rel="stylesheet" href="./css/tags.css">
<title>TejidosPulido E-Commerce</title>
</head>
<body>
<header id="header_menu"></header>
<br>
<main role="main">
<div class="container rounded" style="background-color: rgb(228, 225, 225);">
<br>
<form class="needs-validation" novalidate style="padding: 15px 40px;">
<div class="row">
<div class="col-sm-6" style="margin-bottom: 50px;">
<div class="input-group mb-3">
<span class="input-group-text title" for="validationDefault01">Número de producto</span>
<input type="text" class="form-control" id="inputNum" style="text-align: end;" required>
<div class="invalid-feedback">Please choose a username.</div>
</div>
<div class="input-group" style="width: 100%;">
<span class="input-group-text title" for="inputNum">Visible</span>
<div class="input-group-text" style="background: white">
<span class="input-group-addon"><input type="radio" id="visible" name="visibilidad" value="always"> Si</span>
<span class="input-group-addon"><input type="radio" id="invisible" name="visibilidad" value="never"> No</span>
</div>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-7"></div>
<div class="col-sm-4">
<span class="input-group-text title">Imagen de producto</span>
</div>
<div class="col-sm-1"></div>
</div>
<div class="row">
<div class="col-sm-6" style="margin-bottom: 15px;">
<div class="input-group mb-3">
<span class="input-group-text title" for="inputName">Nombre del producto</span>
<input type="text" class="form-control" id="inputName" required>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-4">
<div class="input-group mb-3">
<input type="file" class="form-control" id="inputImage" accept="image/*">
</div>
</div>
<div class="col-sm-1"></div>
</div>
<br>
<div class="row">
<div class="col-sm-4" style="vertical-align: middle; padding-bottom: 10px;">
<div class="input-group mb-3">
<span class="input-group-text precio title">Precio</span>
<input type="text" class="form-control" id="inputPrecio" placeholder='0.00' required style="float: left; text-align: end; width: 30%;" pattern="([0-9]*)(.)?([0-9]*)" title="Introduce un número.">
<span class="input-group-text short">€/m</span>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-4" style="vertical-align: middle; padding-bottom: 10px;">
<div class="input-group mb-3">
<span class="input-group-text peso title">Peso</span>
<input type="text" class="form-control" id="inputPeso" placeholder='0' required style="float: left; text-align: end; width: 30%;" pattern="([0-9]*)(.)?([0-9]*)" title="Introduce un número.">
<span class="input-group-text short">gr/m</span>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-4" style="vertical-align: middle; padding-bottom: 10px;">
<div class="input-group mb-3">
<label class="input-group-text tipo-large" for="product_type" style="background: #0bbe83; color: white; font-weight: bold;">Tipo de producto</label>
<select class="form-select" id="product_type">
<option selected>Selecciona...</option>
<option value="referencia">Referencia</option>
<option value="color">Color</option>
</select>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6">
<span class="input-group-text title" for="inputDescripcion">Descripción:</span>
<textarea id="inputDescripcion" name="inputDescripcion" rows="5" style="width: 100%; padding: 10px;"></textarea>
</div>
<div class="col-sm-6">
<span class="input-group-text title" for="inputFunciones">Funciones bàsicas:</span>
<textarea id="inputFunciones" name="inputFunciones" rows="5" style="width: 100%; padding: 10px;"></textarea>
</div>
</div>
<br>
<div class="btn-group" role="group" style="float:right">
<button class="btn btn-dark" id="guardarButton" type="submit" class="btn btn-sm btn-outline-secondary">Guardar </button>
</div>
<br>
<br>
<br>
</form>
</div>
<hr class="featurette-divider">
<footer class="container" id= "footer"></footer>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-storage.js"></script>
<script src='./js/firebaseConfig.js'></script>
<script src="./js/session.js"></script>
<script src="./js/header.js"></script>
<script src="./js/newproducto.js"></script>
<script src="./js/footer.js"></script>
</body>
</html>
This is the javascript function:
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
Span for and input id should be the same.
In your case error is actually detecting but not able to assign to the correct id w.r.t for
"I am trying to validate my form, but the console never shows me
errors"
The console shouldn't show errors because the code is working as expected.
Most likely there's a conflict with one of the many other JS files included in your environment. Also the HTML is poorly is structured (2 class attributes on the button) and the invalid-feedback needs to be in the same parent as the inputs.
I would like to use two mailchimp embedded forms on one page. The second form doesn't work.
This is the first form which works:
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="subscribe_url" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_511911076469753191feb80b9_8aced62855" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
If I add the same form, the previous form works, but this one doesn't.
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="subscribe_url" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_511911076469753191feb80b9_8aced62855" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
I tried to change input attributes in the second form, but it didn't help:
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="subscribe_url" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-MAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="MAIL" class="required email" id="mce-MAIL">
</div>
<div class="mc-field-group">
<label for="mce-NAME">First Name </label>
<input type="text" value="" name="NAME" class="" id="mce-NAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_511911076469753191feb80b9_8aced62855" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
I have no idea how to embed two mailchimp forms on one page.
If you check mailchimp troubleshooting page, you can find there:
If you need to have more than one embedded form on a single web page, use one of these solutions.
Disable JavaScript on the Classic form.
Embed your Classic form in an iFrame.
Display your embedded form as an Unstyled, Condensed, or Horizontal
form type.
If you want to use Javascript validations for multiple mailchimp forms, you need to embed one form into iframe tag. It's pretty easy, but you can find more details in this blog post.
You just need to upload html file which contains html embedded code and then add its url as the iframe attribute:
<iframe src="http://your-site.com/mailchimp-form.html" frameborder="0" width="654" height="200">
Anchor text saying "click here to sign up" or something like that for people whose browsers can't read iframes
</iframe>
I wrote a simple sign up webpage, and want to confirm password and check email address format, and show a check or cross sign after the input elements in the same line.
Before I added Bootstrap to my html file, the check or cross sign appear after the input elements in the same line. But after I added Bootstrap to my html file (especially after adding class="form-control"), the check or cross signs appear in the next line instead.
I wonder how to solve my problem? Thanks.
Here is my html file:
<!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">
<title>Registration</title>
<style>
html, body{
height: 100%;
width: 100%;
/* border: 1px solid black; */
background: linear-gradient(to top, #f2f6fb, #b3cae3);
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript" src="../js/register.js" defer></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-offset-5">
<form class="form-horizontal" action="RegisterProcess" method="post">
<div class="form-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
<span width="5" name="passwordResult" id="passwordResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="passwordConfirm" id="passwordConfirm" placeholder="Confirm Password" style="border-color: grey; background-color\
: white">
<span width="5" name="passwordConfirmResult" id="passwordConfirmResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-5">
<input type="email" class="form-control" name="email" id="email" placeholder="Email" style="border-color: grey; background-color: white">
<span width="5" name="emailResult" id="emailResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-3 col-lg-5">
<input type="submit" id="register" name="register" value="Sign Up">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Here is my javascript
function arePasswordsSame() {
input = this; // document.getElementById("passwordConfirm");
if (input.value != document.getElementById("password").value) {
input.setCustomValidity("Password Must be Matching.");
document.getElementById("passwordConfirmResult").innerHTML = "×";
} else {
input.setCustomValidity("");
document.getElementById("passwordConfirmResult").innerHTML = "✔";
}
}
document.getElementById("passwordConfirm").addEventListener("change",arePasswordsSame);
function validateEmail(){
input = this; // document.getElementById("email");
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(! input.value.match(mailformat)){
input.setCustomValidity("Email is invalid.");
document.getElementById("emailResult").innerHTML = "×";
}else{
input.setCustomValidity("");
document.getElementById("emailResult").innerHTML = "✔";
}
}
document.getElementById("email").addEventListener("change",validateEmail);
You can use the built in input-group-addon that ships with bootstrap
<div class="input-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
<span width="5" class="input-group-addon" name="passwordResult" id="passwordResult"></span>
</div>
</div>
https://getbootstrap.com/docs/4.0/components/input-group/
EDIT
This should be the markup;
<div class="form-group">
<div class="col-lg-5">
<div class="input-group">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
<span class="input-group-addon" name="passwordResult" id="passwordResult"> </span>
</div>
</div>
</div>
In Bootstrap, the form-control class causes the inputs to be display:block; at 100% width. You will have to override the default styling to prevent this(note that you can remove the !important rule as long as you add this CSS after Bootstrap is loaded):
function arePasswordsSame() {
input = this; // document.getElementById("passwordConfirm");
if (input.value != document.getElementById("password").value) {
input.setCustomValidity("Password Must be Matching.");
document.getElementById("passwordConfirmResult").innerHTML = "×";
} else {
input.setCustomValidity("");
document.getElementById("passwordConfirmResult").innerHTML = "✔";
}
}
document.getElementById("passwordConfirm").addEventListener("change",arePasswordsSame);
function validateEmail(){
input = this; // document.getElementById("email");
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(! input.value.match(mailformat)){
input.setCustomValidity("Email is invalid.");
document.getElementById("emailResult").innerHTML = "×";
}else{
input.setCustomValidity("");
document.getElementById("emailResult").innerHTML = "✔";
}
}
document.getElementById("email").addEventListener("change",validateEmail);
.form-control {
display:inline-block!important;
width:95%!important;
}
<!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">
<title>Registration</title>
<style>
html, body{
height: 100%;
width: 100%;
/* border: 1px solid black; */
background: linear-gradient(to top, #f2f6fb, #b3cae3);
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript" src="../js/register.js" defer></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-offset-5">
<form class="form-horizontal" action="RegisterProcess" method="post">
<div class="form-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
<span width="5" name="passwordResult" id="passwordResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="passwordConfirm" id="passwordConfirm" placeholder="Confirm Password" style="border-color: grey; background-color\
: white">
<span width="5" name="passwordConfirmResult" id="passwordConfirmResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-5">
<input type="email" class="form-control" name="email" id="email" placeholder="Email" style="border-color: grey; background-color: white">
<span width="5" name="emailResult" id="emailResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-3 col-lg-5">
<input type="submit" id="register" name="register" value="Sign Up">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
This is my login page I want to place my login-box over canvas now first show canvas and then show the div i want login-box div over this canvas
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="bootstrap/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" /> </head> <body class="login-page"> <canvas id="header-canvas" style="background-color:#999"> <header id="header" > </header> </canvas> <div class="login-box" > <div class="login-box-body"> <form action="" method="post" name="login"> <div class="form-group has-feedback "> <input type="text" class="form-control" placeholder="Username / Email" required name="login_name"/> <span class="glyphicon glyphicon-envelope form-control-feedback"></span> </div> <div class="form-group has-feedback"> <input type="password" class="form-control" placeholder="Password" name="login_pass"required/> <span class="glyphicon glyphicon-lock form-control-feedback"></span> </div> <div class="row"> <div class="col-xs-4"> <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button> </div> </div> </form> </div> </div> <script src="plugins/jQuery/jQuery-2.1.3.min.js"></script> <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="plugins/magnificpopup/plugins.js"></script> </body> </html>
Following way you can put put over canvas using position:absolute;
#header-canvas {
height: 500px;
width: 100%;
}
.login-box {
background: #fff none repeat scroll 0 0;
left: 50%;
padding: 20px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="header-canvas" style="background-color:#999"> <header id="header" > </header> </canvas>
<div class="login-box" > <div class="login-box-body">
<form action="" method="post" name="login">
<div class="form-group has-feedback ">
<input type="text" class="form-control" placeholder="Username / Email" required name="login_name"/>
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password" name="login_pass"required/>
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row"> <div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button> </div>
</div>
</form>
</div>
</div>
Working Fiddle
I have a few form fields, datepickers and a dropdown on my sample html page. On clicking the dropdown menu, it appears to the left of the screen, instead of appearing in the center, as all the other contents are. How to get it in the center of the page?
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Form</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link href="./datepicker.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<center><form>
<div class="input-append date" data-date-format="dd-mm-yyyy" >
<label for="dp1">Starting Date</label> <br>
<input id="dp1" size="16" type="text" value="dd/mm/yyyy"/>
<span class="add-on"><i class="glyphicon glyphicon-calender" id="cal1"></i></span>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Number of students :
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div><br><br><br><br><br>
<div class="form-group">
<label for="inputName">Name of the student</label>
<input type="text" class="form-control" id="inputName" placeholder="">
</div>
<div class="form-group">
<label for="inputFname">Father's Name</label>
<input type="text" class="form-control" id="inputFname" placeholder="">
</div>
<div class="input-append date" data-date="" data-date-format="dd-mm-yyyy">
<label for="dp2">Date of Birth</label> <br>
<input id="dp2" size="16" type="text" value="dd/mm/yyyy"/>
<span class="add-on"><span class="glyphicon glyphicon-calender" id="cal2"></span></span>
</div>
<div class="form-group">
<label for="inputAddress">Address of the student</label>
<textarea type ="text" class = "form-control" id = "inputAddress" rows = "8" placeholder = "" ></textarea>
<span id="addressSpan"></span>
</div>
<div class="form-group">
<label for="inputObjects">hobbies</label>
<textarea type ="text" class = "form-control" id = "inputObjects" rows = "8" placeholder = "" ></textarea>
<span id="objectsSpan"></span>
</div>
<div class="form-group">
<label for="inputschoolName">Name of the school</label>
<input type="text" class="form-control" id="inputschoolName" placeholder="">
</div>
<div class="input-append date" data-date="" data-date-format="dd-mm-yyyy">
<label for="dp3">Date of Commencement of the internship</label> <br>
<input id="dp3" size="16" type="text" value="dd/mm/yyyy"/>
<span class="add-on"><i class="glyphicon glyphicon-calender" id="cal3"></i></span>
</div>
<div class="form-group">
<label for="inputOffice">address of the school</label>
<textarea type ="text" class = "form-control" id = "inputOffice" rows = "8" placeholder = "" ></textarea>
<span id="officeSpan"></span>
</div>
<div class="form-group">
<label for="inputWill">like school?</label>
<input type="text" class="form-control" id="inputWill" placeholder="">
</div>
<div class="form-group">
<label for="inputContribution">achievements</label>
<input type="text" class="form-control" id="inputContribution" placeholder="">
</div>
<div class="form-group">
<label for="inputSalary">fees</label>
<input type="text" class="form-control" id="inputSalary" placeholder="">
</div>
<div class="form-group">
<label for="inputaccolades">accolades</label>
<input type="text" class="form-control" id="inputaccolades" placeholder="">
</div>
</form></center>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./js/jquery-1.11.3.js"></script>
<script>
$(document).ready (function (){
$("#dp1").datepicker();
$("#dp2").datepicker();
$('#dp3').datepicker();
$('.dropdown-toggle').dropdown()
});
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./js/bootstrap.min.js"></script>
<script src="./bootstrap-datepicker.js"></script> </body>
</html>
CSS :
form .form-group {
width : 500px;
}
.datepicker:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 190px;
}
.datepicker:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: 191px;
}
Any help is much appreciated. Thanks in advance
There are many ways to solve this issue:
Solution here: http://jsfiddle.net/lotusgodkk/GCu2D/820/
CSS:
.dropdown, .dropup {
position: relative;
display: inline-block;
}
Or
.dropdown, .dropup {
position: relative;
width: 250px;//any value
}
Explanation: The dropdown container has no defined width and due to which it automatically takes full width. When you click on dropdown,by default the dropdown menu will position itself to the leftmost of the dropdown class which is the left edge of the screen in this case.
Either define a width of the dropdown element so that the dropdown menu can position itself, else just use display:inline-block which will automatically take the width according to the content.
As pointed out in the comments, try to get rid of center tag