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
Related
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>
I am working on making a slideshow of forms. Here is my working codepen link. As you can see I have two dots on the right side which if I click then it opens another form. Now I want to put an up arrow just above those dots and down arrow just below those dots.
For example as shown in this image. I am trying to replicate exactly like this image and as you can see there is a up arrow just above those dots and down arrow just below those dots and they are perfectly aligned in one vertical line and also their color is orange I believe. I want to do exactly like that. How can I achieve this? I am already using font-awesome css in my actual code, do I have to use that here?
Below is my HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SlidesJS Standard Code Example</title>
<meta name="description" content="SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.">
<meta name="author" content="Nathan Searles">
<!-- SlidesJS Required (if responsive): Sets the page width to the device width. -->
<meta name="viewport" content="width=device-width">
<!-- End SlidesJS Required -->
<!-- CSS for slidesjs.com example -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- End CSS for slidesjs.com example -->
<!-- SlidesJS Optional: If you'd like to use this design -->
<style>
body {
-webkit-font-smoothing: antialiased;
font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #232525;
}
#slides,
#slides2,
#slides3 {
display: none;
margin-bottom:50px;
}
.slidesjs-navigation {
margin-top:3px;
}
.slidesjs-previous {
margin-right: 5px;
float: left;
}
.slidesjs-next {
margin-right: 5px;
float: left;
}
.slidesjs-pagination {
margin: 6px 0 0;
float: right;
list-style: none;
}
.slidesjs-pagination li {
float: left;
margin: 0 1px;
}
.slidesjs-pagination li a {
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url("https://s16.postimg.org/pt4k43i9x/pagination.png");
background-position: 0 0;
float: left;
overflow: hidden;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
background-position: 0 -13px
}
.slidesjs-pagination li a:hover {
background-position: 0 -26px
}
.navbar {
overflow: hidden
}
</style>
<!-- End SlidesJS Optional-->
<!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
<style>
#slides {
display: none
}
.container {
margin: 0 auto
}
/* For tablets & smart phones */
#media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
}
.container {
width: auto
}
}
/* For smartphones */
#media (max-width: 480px) {
.container {
width: auto
}
}
/* For smaller displays like laptops */
#media (min-width: 768px) and (max-width: 979px) {
.container {
width: 724px
}
}
/* For larger displays */
#media (min-width: 1200px) {
.container {
width: 1170px
}
}
</style>
<!-- SlidesJS Required: -->
</head>
<body>
<div class="topnav">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
<nav>
<ul>
<li class="dropdown">
<b>INSURANCE</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>INDIVIDUAL</i>
</li>
<li><i>CORPORATE</i>
</li>
</ul>
</li>
<li class="our-story">OUR STORY</li>
<li class="login-signup">Log In | Sign up</li>
<li class="get-covered">GET <strong style="font-style:italic">COVERED</strong>
</li>
</ul>
</nav>
</div>
<!-- SlidesJS Required: Start Slides -->
<!-- The container is used to define the width of the slideshow -->
<div class="container">
<h3>INSURANCE FORM</h3>
<h4><i>BASIC DETAILS</i></h4>
<br>
<div id="slides" class="container-fluid" >
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 1">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 2">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<i class="icon-chevron-left"></i>
<i class="icon-chevron-right"></i>
</div>
</div>
<!-- End SlidesJS Required: Start Slides -->
<!-- SlidesJS Required: Link to jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Link to jquery.slides.js -->
<script src="js/jquery.slides.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$('#slides').slidesjs({
width: 800,
height: 528,
navigation: false
});
/*
To have multiple slideshows on the same page
they just need to have separate IDs
*/
$('#slides2').slidesjs({
width: 800,
height: 528,
navigation: false,
start: 3,
play: {
auto: true
}
});
$('#slides3').slidesjs({
width: 800,
height: 528,
navigation: false
});
});
</script>
<!-- End SlidesJS Required -->
</body>
</html>
Make use of these elements
<a href="#" class="slidesjs-previous slidesjs-navigation">
<i class="icon-chevron-left"></i>
</a>
<a href="#" class="slidesjs-next slidesjs-navigation">
<i class="icon-chevron-right"></i>
</a>
position these elements absolute align them to right.
https://codepen.io/chandrashekhar/pen/weaxqj?editors=1100
visit the codepen link here
You cas use :after and :before pseudo elements to put arrows before first dot and after last. Just set dots positions to relative and in :after/before add arrow in content and set it absolute position.
When I run these code following Snippet in img Errors
Uncaught Error: [$injector:modulerr] Failed to instantiate module
homeApp due to: Error: [$injector:modulerr] Failed to instantiate
module ngStorage due to: Error: [$injector:nomod] Module 'ngStorage'
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.
Uncaught TypeError: Cannot read property 'push' of undefined.
Are raise And Validation is not Working...
var homeApp= angular.module("homeApp",['ngStorage']);
homeApp.controller("homeController",function($scop,$localStorage){
$scop.saveData=function(){
var leads = document.homeForm.leads.value;
var email = document.homeForm.email.value;
var phone = document.homeForm.phone.value;
var referance = document.homeForm.referance.value;
var nameref = document.homeForm.nameref.value;
var preftime = document.homeForm.preftime.value;
var myObj={"leads":leads , "email":email,
"phone":phone, "referance":referance,
"nameref":nameref, "preftime":preftime}
$localStorage.myObj=myObj;
}
});
homeApp.controller('AppController', [function() {
var self = this;
self.submit = function() {
console.log('Form is submitted with following user', self.user);
};
}]
);
.color {
color: red;
font-size:small;
}
input.ng-touched,select.ng-touched,input.ng-invalid{
border: 2px solid red;
}
input.ng-valid,select.ng-valid{
border: 1px solid #99ff33;
}
input.ng-untouched,select.ng-untouched,checkbox{
border: 1px transparent;
}
#left{
width: 50%;
float: left;
}
#right{
width: 50%;
float: right;
}
.header{
text-align: center;
font-size: 80px;
border: 1px solid black;
}
.bt{
float: left;
}
<html>
<head>
<title>Add Leads</title>
<link rel="stylesheet" href="css/bootstrap.css" >
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/validation.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="js/ngStorage-master/ngStorage.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"> </script>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js'></script>
<script src="app.js"></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script>
<!--Mask Input For Contect Number-->
<script type="text/javascript">
jQuery(function($){
$("#phone").mask("9999-999-999");
});
</script>
<!--/Mask Input For Contect Number-->
<!--Insert In Locale Storage-->
<script type="text/javascript">
function check()
{
var leads = document.homeForm.leads.value;
var email = document.homeForm.email.value;
var phone = document.homeForm.phone.value;
var referance = document.homeForm.referance.value;
var nameref = document.homeForm.nameref.value;
var preftime = document.homeForm.preftime.value;
var data = [{"leads":leads , "email":email,
"phone":phone, "referance":referance,
"nameref":nameref, "preftime":preftime}];
var store= JSON.stringify(data);
var d = localStorage.setItem('Leads',store);
}
</script>
<!--/Insert In Locale Storage-->
</head>
<body ng-app="homeApp" ng-controller="homeController" >
<div class="container">
<div class="header">Add Leads</div>
<br><br>
<form class="form-group" name="homeForm">
<div >
<!-- left Panel-->
<div id="left" class="container">
<label>Leads Name</label>
<input type="text"
id="leads"
class="form-control"
name="leads"
ng-model="leads"
tabindex="1"
placeholder="Enter Lead Name"
required
/>
<span ng-show="homeForm.leads.$touched && homeForm.leads.$error.required"><div class="color">Enter Name</div></span>
<!--<span ng-show="homeForm.leads.$error.required"><div class="color">Lead Name is Required!!!</div></span>--><br>
<label>Contect No</label>
<input type="text"
id=""
class="form-control"
name="phone"
ng-model="phone"
placeholder="Enter Phone Number"
ng-minlength="10"
mask="####-###-###"
ng-maxlength="12"
tabindex="3"
required
/>
<span ng-show="homeForm.phone.$touched && homeForm.phone.$error.required"><div class="color">Enter Contect Number</div></span>
<br>
<div class="checkbox">
<label>
<input type="checkbox"
ng-model="maycontect"
name="maycontect"
id="maycontect"
value=""
tabindex="6">May Contet</label>
</div>
<div class="radio" ng-show="maycontect">
<label class="container"><b>Preffered Time:</b>
<div>
<span >
<input type="radio" name="preftime" ng-model="preftime"> Morning
<input type="radio" name="preftime" ng-model="preftime"> Afternoon
<input type="radio" name="preftime" ng-model="preftime"> Evening
</span>
</div>
</label>
</div>
</div>
<!-- Right Panel-->
<div id="right" class="container">
<label>Email Id:</label>
<input type="email"
name="email"
class="form-control"
ng-model="email"
Placeholder="Enter Email Id"
tabindex="2"
required>
<span ng-show="homeForm.email.$touched && homeForm.email.$error.required"><div class="color">Enter Email Id</div></span><br>
<div ng-switch="referance">
<label>Referance</label>
<select ng-model="referance"
name="referance"
class="form-control"
onChange="changeTextBox()"
id="referance"
tabindex="4"
required >
<option value="byReferance" >By Referance</option>
<option value="newsPaper" >News Paper</option>
<option value="email">Email</option>
<option value="socialMedia" >Social Media</option>
</select>
<span ng-show="homeForm.referance.$touched && homeForm.referance.$error.required">
<div class="color">Select Referance.</div>
</span>
<br>
<div ng-switch-when="byReferance">
<label>Referance Name</label>
<input type="text"
name="nameref"
id="nameref"
class="form-control"
ng-model="nameref"
Placeholder="Enter Name Of Referance"
tabindex="5"
required
>
<span ng-show="homeForm.nameref.$touched && homeForm.nameref.$error.required">
<div class="color">Enter Referance Name.</div>
</span>
<br>
</div>
</div>
</div>
</div>
<div >
<input onClick="return check()" type="submit" class="btn btn-success" value="Submit" ng-disabled="homeForm.$invalid">
<input type="reset" class="btn btn-default" value="Reset">
</div>
</form>
</div>
</body>
</html>
load ngStorage.js after angular.js and not before
<script src="js/ngStorage-master/ngStorage.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js">
change this to
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js">
<script src="js/ngStorage-master/ngStorage.js"></script>
also you have multiple instances of jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
remove that... same with angular, remove multiple versions of angular as well
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;
I'm using PHP, jQuery, Smarty, etc. for my website.
I've one form on which there are three input text fields viz. zip_code, city and state. I've written jQuery code to auto-populate the city and state input text fields when user enters valid US zip code into input text field zip_code.
Other jQuery functionality on the form is working fine and perfect but I'm having issue only with this functionality. I created one demo page for this functionality there this zip_code functionality worked properly. But it's not working in my project.
I'm putting below the whole HTML of the page which contains the form :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Project Name</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Example of Fixed Layout with Twitter Bootstrap version 2.0 from w3resource.com">
<meta name="author" content="">
<link href="http://localhost/project_folder/user_ui_files/css/bootstrap.css" rel="stylesheet">
<link href="http://localhost/project_folder/user_ui_files/css/example-fixed-layout.css" rel="stylesheet">
<link href="http://localhost/project_folder/user_ui_files/css/bootstrap-responsive.css" rel="stylesheet">
<link href="http://localhost/project_folder/user_ui_files/css/bootstrap-modal.css" rel="stylesheet">
<link href="http://localhost/project_folder/user_ui_files/css/slippry.css" rel="stylesheet">
<link href="http://localhost/project_folder/user_ui_files/css/signin.css" rel="stylesheet" type="text/css">
<link href="http://localhost/project_folder/user_ui_files/css/jquery.dateLists.css" rel="stylesheet" type="text/css">
<style type="text/css">
.hideme {
opacity:0;
}
#media (max-width: 979px) {
.navbar-fixed-top.navbar-absolute {
position: absolute;
margin: 0;
}
}
.navbar-absolute + div {
margin-top: 58px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top navbar-absolute">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="http://localhost/project_folder/index.php"><img src="http://localhost/project_folder/user_ui_files/img/logo.png"/></a>
<div class="nav-collapse">
<ul class="nav pull-right navbar-fixed-bottom">
<li><i class="icon-user icon-black"></i> LOGIN</li>
<li><i class="icon-pencil icon-black"></i> REGISTER</li>
<li><i class="icon-edit icon-black"></i> REBATE STATUS</li>
<li><i class="icon-envelope icon-black"></i> CONTACT</li>
<li><i class="icon-map-marker icon-black"></i> STORE LOCATOR</li>
<li>
<form action="index.php" class="navbar-form pull-right" id="formzip" method="post">
<input type="hidden" class="form-control" name="op" id="op" value="zip_code">
<input type="hidden" class="form-control" name="form_submitted" id="form_submitted" value="yes">
<input style="width: 115px;" type="text" placeholder="Enter the zip code" name="zip_code" id="zip_code" value="" > <i class="icon-zip" style="margin-top:3px;" onclick='$("#formzip").submit();'></i>
</form>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<style type="text/css">
.list {
width:60px;
}
.dateLists_container {
}
.dateLists_container .list {
float:left;
}
.dateLists_container .day_container {
}
.dateLists_container .day_container .list {
margin-right:10px;
}
.dateLists_container .month_container {
}
.dateLists_container .month_container .list {
margin-right:10px;
}
.dateLists_container .year_container {
}
.dateLists_container .year_container .list {
}
</style>
<div class="container" style="padding-top: 140px; margin-bottom: 90px;">
<div class="row">
<div class="span12 account-container12">
<legend>New User? Register</legend>
<form action="register.php" class="form-horizontal" method="post">
<div class="row">
<input type="hidden" class="form-control" name="op" id="op" value="preview">
<input type="hidden" class="form-control" name="form_submitted" id="form_submitted" value="yes">
<input type="hidden" class="form-control" name="main_op" id="main_op" value="">
<div class="col-xs-1"></div>
</div>
<div class="span6">
<div style="float: clear;"></div>
<fieldset>
<!-- Form Name -->
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="First Name">First Name<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="first_name" id="first_name" value="" type="text" placeholder="Enter your first name">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Last Name">Last Name<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="last_name" id="last_name" value="" type="text" placeholder="Enter your last name">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Street 1">Address 1<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="street1" id="street1" value="" type="text" placeholder="Enter the address">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Street 2">Address 2</label>
<div class="controls">
<input name="street2" id="street2" value="" type="text" placeholder="Enter your address">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Zip">Zip<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="zip_code" id="zip_code" value="" type="text" placeholder="Enter your zip code" class="input-medium">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="City">City<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="city" id="city" value="" readonly="readonly" type="text" placeholder="Select your city" class="input-medium">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="State Code">State<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="state_code" id="state_code" value="" readonly="readonly" type="text" placeholder="Enter state code" class="input-medium">
</div>
</div>
</fieldset>
</div>
<div class="span5">
<fieldset>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="DOB">Date Of Birth<span style="color:#FF0000">*</span></label>
<div class="controls">
<input class="form-control date_control" type="text" name="dob" id="dob" value="">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Email Id">Email Id<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="email" id="email" value="" type="text" placeholder="Enter your mail ID">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="num">Phone No.</label>
<div class="controls">
<input name="phone_no" id="phone_no" value="" type="text" placeholder="Enter phone no." class="input-medium">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Password">Password<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="password" id="password" value="" type="password" placeholder="Enter the Password" class="input-medium">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Password">Confirm Password<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="password_confirmation" id="password_confirmation" value="" type="password" placeholder="Re-enter the password" class="input-medium">
</div>
</div>
<!-- Multiple Radios -->
<div class="control-group">
<label class="control-label" for="radios">Mode of Payment</label>
<div class="controls">
<label class="radio" for="radios-0">
<input type="radio" name="mode_of_payment" value="paypal">
PayPal
</label>
<label class="radio" for="radios-1">
<input type="radio" name="mode_of_payment" value="check">
Check
</label>
</div>
</div>
<!-- Text input-->
<div id="paypal_op" style="display:none;" class="control-group">
<label class="control-label" for="email">PayPal Email Account</label>
<div class="controls">
<input type="text" name="pay_pal_email" id="pay_pal_email" value="" placeholder="Enter email id" class="input-large">
</div>
</div>
</fieldset>
</div>
<div class="container">
<div class="row">
<div class="span2"></div>
<div class="span5">
<button type="submit" class="btn btn-success"><i class="icon-white icon-ok"></i> Preview</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div> <!-- /container -->
<footer style="background-color:#000" id="footer">
<div class="container">
<div class="row">
<div class="span3 top-buffer-footer">
<p> © 2014 PROJECT NAME</p>
</div>
<div align="center" class="span7 top-buffer-footer">
About Us |
Privacy Policy |
Terms & Conditions
</div>
<div class="span2 top-buffer-footer">
<a style="float:right" href="#">Powered By COMPANY NAME</a>
</div>
</div>
</div>
</footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster and more quicker-->
<script src="http://localhost/project_folder/user_ui_files/js/jquery.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/slippry.min.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-tooltip.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-alert.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-button.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-carousel.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-collapse.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-dropdown.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-modal.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-popover.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-scrollspy.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-tab.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-transition.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-typeahead.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-modalmanager.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/jquery.dateLists.min.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/custom/common.js"></script>
</body>
</html>
The jQuery code to run this zip code functionality is written into file common.js which is included at last of this page.
Following is the code from the file common.js:
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i) {
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > (bottom_of_object - (bottom_of_object * 0.2)) ) {
$(this).animate({'opacity':'1'},300);
}
});
});
/*jQuery code for autopo-populate city and state when customer enters valid zip code*/
$("#zip_code").keyup(function() {
var el = $(this);
if (el.val().length === 5) {
$.ajax({
url: "http://zip.elevenbasetwo.com",
cache: false,
dataType: "json",
type: "GET",
data: "zip=" + el.val(),
success: function(result, success) {
$("#city").val(result.city);
$("#state_code").val(result.state);
}
});
}
});
$('#dob').dateDropDowns({dateFormat:'mm-dd-yy'});
$("input[type='radio']").change(function() {
if($(this).val()=="paypal") {
$("#paypal_op").show();
} else {
$("#paypal_op").hide();
}
});
});
$(function() {
var demo1 = $("#demo1").slippry({
transition: 'fade',
useCSS: true,
speed: 1000,
pause: $('#brand_slider_time').val() * 1000,
auto: true,
preload: 'visible'
});
$('.stop').click(function () {
demo1.stopAuto();
});
$('.start').click(function () {
demo1.startAuto();
});
$('.prev').click(function () {
demo1.goToPrevSlide();
return false;
});
$('.next').click(function () {
demo1.goToNextSlide();
return false;
});
$('.reset').click(function () {
demo1.destroySlider();
return false;
});
$('.reload').click(function () {
demo1.reloadSlider();
return false;
});
$('.init').click(function () {
demo1 = $("#demo1").slippry();
return false;
});
});
I'm using jQuery v1.7.1 in my project.
I've also created a jsFiddle with only these necessary fields it's working fine. You can see the fiddle here.
In my project I tried to debug the code, tried to put alert inside the function I wrote for zip_code. Neither the Firebug console shown me any error nor the alert got printed.
Then I tried to print the alert outside the zip_code function (i.e. on page load) it printed. The alert is not getting printed inside the function. Also I tried various other events like focus, blur, etc. instead of key up then also the alert didn't print. The Firebug console never shown me any error or warning.
The markup in your post includes two form elements, one in what appears to be a navigation menu and another in what appears to be the main content of the page. Both these forms have an input element with the id zip_code.
In HTML id attributes are meant to be unique. For this reason, the expression $('#zip_code') would return only the first of the two elements with that id - the one in the navigation menu. This in turn causes the keyup event to not be bound to the second (and relevant) input field.
The reason it works in your fiddle is that the HTML in the fiddle does not include the navigation menu and therefore the markup includes only a single input element with the zip_code id.