how to implement custom form (from a demo's css source files) in bootstrap 3 project
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
1
apologies if my question has been covered in the past. I consider myself a noob and have been learning javascript on and off for about 18 months or so.
I have used this boostrap template to get started with html and css. i had simple single entry form for a "subscribe here" type input form and I came across these form layouts.
I tried to implement the "isao" form affect (near the bottom the demo page) but it looks an absolute mess once in project. When hovering over the form's label the transition affect works as in the demo and also when selecting the text box. However the formatting is a all wrong, its all bunched up, the text box is adjacent to the left and not above the label where it should be. It is also visible, where the demo shows the text box being transparent.
i downloaded the source files, pasted them to my project's src directory and linked the forms css files and javascript in the index of my project. there is also some inline javascript which i also copied to my project's index file.
Admitedly, I've copied and pasted the code from the source expecting to make tweeks, but i'm at a loss.
Can someone help me unravel my sitaution?
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hero in Your Own Home</title>
<!-- CSS -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/demo.css" />
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/set1.css">
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/set2.css">
<link rel="stylesheet" type="text/css" href="assets/css/form-elements.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/media-queries.css">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon_hiyoh.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 subscribe section-description wow fadeIn">
<h2>Be in the <strong>Know</strong></h2>
<div class="divider-1 wow fadeInUp"><span></span></div>
</div>
</div>
<div class="row">
<section class="content bgcolor-8">
<h2>Isao</h2>
<div class="col-sm-4">
<span class="input input--isao">
<input class="input__field input__field--isao" type="text" id="input-38" />
<label class="input__label input__label--isao" for="input-38" data-content="First Name">
<span class="input__label-content input__label-content--isao">First Name</span>
</label>
</span>
</div>
<div class="col-sm-4">
<span class="input input--isao">
<input class="input__field input__field--isao" type="text" id="input-39" />
<label class="input__label input__label--isao" for="input-39" data-content="Middle Name">
<span class="input__label-content input__label-content--isao">Middle Name</span>
</label>
</span>
</div>
<div class="col-sm-4">
<span class="input input--isao">
<input class="input__field input__field--isao" type="text" id="input-40" />
<label class="input__label input__label--isao" for="input-40" data-content="Last Name">
<span class="input__label-content input__label-content--isao">Last Name</span>
</label>
</span>
</div>
</section>
</div>
</div>
<!-- Javascript -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/retina-1.1.0.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/scripts.js"></script>
<!--[if lt IE 10]>
<script src="assets/js/placeholder.js"></script>
<![endif]-->
<script src="assets/TextInputEffects/js/classie.js"></script>
<script>
(function() {
// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
if (!String.prototype.trim) {
(function() {
// Make sure we trim BOM and NBSP
var rtrim = /^[suFEFFxA0]+|[suFEFFxA0]+$/g;
String.prototype.trim = function() {
return this.replace(rtrim, '');
};
})();
}
.slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
// in case the input is already filled..
if( inputEl.value.trim() !== '' ) {
classie.add( inputEl.parentNode, 'input--filled' );
}
// events:
inputEl.addEventListener( 'focus', onInputFocus );
inputEl.addEventListener( 'blur', onInputBlur );
} );
function onInputFocus( ev ) {
classie.add( ev.target.parentNode, 'input--filled' );
}
function onInputBlur( ev ) {
if( ev.target.value.trim() === '' ) {
classie.remove( ev.target.parentNode, 'input--filled' );
}
}
})();
</script>
</body>
javascript html css twitter-bootstrap forms
edited Nov 17 '18 at 6:35
zubair khanzada
7102514
asked Nov 17 '18 at 4:41
HemsHems
62
add a comment |
1
apologies if my question has been covered in the past. I consider myself a noob and have been learning javascript on and off for about 18 months or so.
I have used this boostrap template to get started with html and css. i had simple single entry form for a "subscribe here" type input form and I came across these form layouts.
I tried to implement the "isao" form affect (near the bottom the demo page) but it looks an absolute mess once in project. When hovering over the form's label the transition affect works as in the demo and also when selecting the text box. However the formatting is a all wrong, its all bunched up, the text box is adjacent to the left and not above the label where it should be. It is also visible, where the demo shows the text box being transparent.
i downloaded the source files, pasted them to my project's src directory and linked the forms css files and javascript in the index of my project. there is also some inline javascript which i also copied to my project's index file.
Admitedly, I've copied and pasted the code from the source expecting to make tweeks, but i'm at a loss.
Can someone help me unravel my sitaution?
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hero in Your Own Home</title>
<!-- CSS -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/demo.css" />
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/set1.css">
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/set2.css">
<link rel="stylesheet" type="text/css" href="assets/css/form-elements.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/media-queries.css">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon_hiyoh.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 subscribe section-description wow fadeIn">
<h2>Be in the <strong>Know</strong></h2>
<div class="divider-1 wow fadeInUp"><span></span></div>
</div>
</div>
<div class="row">
<section class="content bgcolor-8">
<h2>Isao</h2>
<div class="col-sm-4">
<span class="input input--isao">
<input class="input__field input__field--isao" type="text" id="input-38" />
<label class="input__label input__label--isao" for="input-38" data-content="First Name">
<span class="input__label-content input__label-content--isao">First Name</span>
</label>
</span>
</div>
<div class="col-sm-4">
<span class="input input--isao">
<input class="input__field input__field--isao" type="text" id="input-39" />
<label class="input__label input__label--isao" for="input-39" data-content="Middle Name">
<span class="input__label-content input__label-content--isao">Middle Name</span>
</label>
</span>
</div>
<div class="col-sm-4">
<span class="input input--isao">
<input class="input__field input__field--isao" type="text" id="input-40" />
<label class="input__label input__label--isao" for="input-40" data-content="Last Name">
<span class="input__label-content input__label-content--isao">Last Name</span>
</label>
</span>
</div>
</section>
</div>
</div>
<!-- Javascript -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/retina-1.1.0.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/scripts.js"></script>
<!--[if lt IE 10]>
<script src="assets/js/placeholder.js"></script>
<![endif]-->
<script src="assets/TextInputEffects/js/classie.js"></script>
<script>
(function() {
// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
if (!String.prototype.trim) {
(function() {
// Make sure we trim BOM and NBSP
var rtrim = /^[suFEFFxA0]+|[suFEFFxA0]+$/g;
String.prototype.trim = function() {
return this.replace(rtrim, '');
};
})();
}
.slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
// in case the input is already filled..
if( inputEl.value.trim() !== '' ) {
classie.add( inputEl.parentNode, 'input--filled' );
}
// events:
inputEl.addEventListener( 'focus', onInputFocus );
inputEl.addEventListener( 'blur', onInputBlur );
} );
function onInputFocus( ev ) {
classie.add( ev.target.parentNode, 'input--filled' );
}
function onInputBlur( ev ) {
if( ev.target.value.trim() === '' ) {
classie.remove( ev.target.parentNode, 'input--filled' );
}
}
})();
</script>
</body>
javascript html css twitter-bootstrap forms
edited Nov 17 '18 at 6:35
zubair khanzada
7102514
asked Nov 17 '18 at 4:41
HemsHems
62
We would need all the files (css,js, and index.html) in order to help you. Go here: next.plnkr.co click on new near top left. Recreate your stuff there. I can tell you that you don't need the JS from the form template.
– Randy Casburn
Nov 17 '18 at 5:08
@RandyCasburn see link to plunker. as its bootstrap project there are many files/folders but i put the most relevant sutff up there. (next.plnkr.co/edit/RvnJ9AUkLkvFwbL5?open=lib%2Fscript.js)
– Hems
Nov 17 '18 at 16:48
I appreciate that you are new here and all, but you are not making the effort that warrants attention to your question. The plunker doesn't work because you didn't even take the time to correct the urls to the css and js resources. I'm out.
– Randy Casburn
Nov 17 '18 at 22:24
add a comment |
1
1
1
apologies if my question has been covered in the past. I consider myself a noob and have been learning javascript on and off for about 18 months or so.
I have used this boostrap template to get started with html and css. i had simple single entry form for a "subscribe here" type input form and I came across these form layouts.
I tried to implement the "isao" form affect (near the bottom the demo page) but it looks an absolute mess once in project. When hovering over the form's label the transition affect works as in the demo and also when selecting the text box. However the formatting is a all wrong, its all bunched up, the text box is adjacent to the left and not above the label where it should be. It is also visible, where the demo shows the text box being transparent.
i downloaded the source files, pasted them to my project's src directory and linked the forms css files and javascript in the index of my project. there is also some inline javascript which i also copied to my project's index file.
Admitedly, I've copied and pasted the code from the source expecting to make tweeks, but i'm at a loss.
Can someone help me unravel my sitaution?
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hero in Your Own Home</title>
<!-- CSS -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/demo.css" />
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/set1.css">
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/set2.css">
<link rel="stylesheet" type="text/css" href="assets/css/form-elements.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/media-queries.css">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon_hiyoh.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 subscribe section-description wow fadeIn">
<h2>Be in the <strong>Know</strong></h2>
<div class="divider-1 wow fadeInUp"><span></span></div>
</div>
</div>
<div class="row">
<section class="content bgcolor-8">
<h2>Isao</h2>
<div class="col-sm-4">
<span class="input input--isao">
<input class="input__field input__field--isao" type="text" id="input-38" />
<label class="input__label input__label--isao" for="input-38" data-content="First Name">
<span class="input__label-content input__label-content--isao">First Name</span>
</label>
</span>
</div>
<div class="col-sm-4">
<span class="input input--isao">
<input class="input__field input__field--isao" type="text" id="input-39" />
<label class="input__label input__label--isao" for="input-39" data-content="Middle Name">
<span class="input__label-content input__label-content--isao">Middle Name</span>
</label>
</span>
</div>
<div class="col-sm-4">
<span class="input input--isao">
<input class="input__field input__field--isao" type="text" id="input-40" />
<label class="input__label input__label--isao" for="input-40" data-content="Last Name">
<span class="input__label-content input__label-content--isao">Last Name</span>
</label>
</span>
</div>
</section>
</div>
</div>
<!-- Javascript -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/retina-1.1.0.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/scripts.js"></script>
<!--[if lt IE 10]>
<script src="assets/js/placeholder.js"></script>
<![endif]-->
<script src="assets/TextInputEffects/js/classie.js"></script>
<script>
(function() {
// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
if (!String.prototype.trim) {
(function() {
// Make sure we trim BOM and NBSP
var rtrim = /^[suFEFFxA0]+|[suFEFFxA0]+$/g;
String.prototype.trim = function() {
return this.replace(rtrim, '');
};
})();
}
.slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
// in case the input is already filled..
if( inputEl.value.trim() !== '' ) {
classie.add( inputEl.parentNode, 'input--filled' );
}
// events:
inputEl.addEventListener( 'focus', onInputFocus );
inputEl.addEventListener( 'blur', onInputBlur );
} );
function onInputFocus( ev ) {
classie.add( ev.target.parentNode, 'input--filled' );
}
function onInputBlur( ev ) {
if( ev.target.value.trim() === '' ) {
classie.remove( ev.target.parentNode, 'input--filled' );
}
}
})();
</script>
</body>
javascript html css twitter-bootstrap forms
edited Nov 17 '18 at 6:35
zubair khanzada
7102514
asked Nov 17 '18 at 4:41
HemsHems
62
apologies if my question has been covered in the past. I consider myself a noob and have been learning javascript on and off for about 18 months or so.
I have used this boostrap template to get started with html and css. i had simple single entry form for a "subscribe here" type input form and I came across these form layouts.
I tried to implement the "isao" form affect (near the bottom the demo page) but it looks an absolute mess once in project. When hovering over the form's label the transition affect works as in the demo and also when selecting the text box. However the formatting is a all wrong, its all bunched up, the text box is adjacent to the left and not above the label where it should be. It is also visible, where the demo shows the text box being transparent.
i downloaded the source files, pasted them to my project's src directory and linked the forms css files and javascript in the index of my project. there is also some inline javascript which i also copied to my project's index file.
Admitedly, I've copied and pasted the code from the source expecting to make tweeks, but i'm at a loss.
Can someone help me unravel my sitaution?
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hero in Your Own Home</title>
<!-- CSS -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/demo.css" />
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/set1.css">
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/set2.css">
<link rel="stylesheet" type="text/css" href="assets/css/form-elements.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/media-queries.css">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon_hiyoh.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 subscribe section-description wow fadeIn">
<h2>Be in the <strong>Know</strong></h2>
<div class="divider-1 wow fadeInUp"><span></span></div>
</div>
</div>
<div class="row">
<section class="content bgcolor-8">
<h2>Isao</h2>
<div class="col-sm-4">
<span class="input input--isao">
<input class="input__field input__field--isao" type="text" id="input-38" />
<label class="input__label input__label--isao" for="input-38" data-content="First Name">
<span class="input__label-content input__label-content--isao">First Name</span>
</label>
</span>
</div>
<div class="col-sm-4">
<span class="input input--isao">
<input class="input__field input__field--isao" type="text" id="input-39" />
<label class="input__label input__label--isao" for="input-39" data-content="Middle Name">
<span class="input__label-content input__label-content--isao">Middle Name</span>
</label>
</span>
</div>
<div class="col-sm-4">
<span class="input input--isao">
<input class="input__field input__field--isao" type="text" id="input-40" />
<label class="input__label input__label--isao" for="input-40" data-content="Last Name">
<span class="input__label-content input__label-content--isao">Last Name</span>
</label>
</span>
</div>
</section>
</div>
</div>
<!-- Javascript -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/retina-1.1.0.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/scripts.js"></script>
<!--[if lt IE 10]>
<script src="assets/js/placeholder.js"></script>
<![endif]-->
<script src="assets/TextInputEffects/js/classie.js"></script>
<script>
(function() {
// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
if (!String.prototype.trim) {
(function() {
// Make sure we trim BOM and NBSP
var rtrim = /^[suFEFFxA0]+|[suFEFFxA0]+$/g;
String.prototype.trim = function() {
return this.replace(rtrim, '');
};
})();
}
.slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
// in case the input is already filled..
if( inputEl.value.trim() !== '' ) {
classie.add( inputEl.parentNode, 'input--filled' );
}
// events:
inputEl.addEventListener( 'focus', onInputFocus );
inputEl.addEventListener( 'blur', onInputBlur );
} );
function onInputFocus( ev ) {
classie.add( ev.target.parentNode, 'input--filled' );
}
function onInputBlur( ev ) {
if( ev.target.value.trim() === '' ) {
classie.remove( ev.target.parentNode, 'input--filled' );
}
}
})();
</script>
</body>
javascript html css twitter-bootstrap forms
javascript html css twitter-bootstrap forms
edited Nov 17 '18 at 6:35
zubair khanzada
7102514
asked Nov 17 '18 at 4:41
HemsHems
62
edited Nov 17 '18 at 6:35
zubair khanzada
7102514
asked Nov 17 '18 at 4:41
HemsHems
62
edited Nov 17 '18 at 6:35
zubair khanzada
7102514
edited Nov 17 '18 at 6:35
zubair khanzada
7102514
edited Nov 17 '18 at 6:35
zubair khanzada
7102514
7102514
asked Nov 17 '18 at 4:41
HemsHems
62
asked Nov 17 '18 at 4:41
HemsHems
62
asked Nov 17 '18 at 4:41
HemsHems
62
62
We would need all the files (css,js, and index.html) in order to help you. Go here: next.plnkr.co click on new near top left. Recreate your stuff there. I can tell you that you don't need the JS from the form template.
– Randy Casburn
Nov 17 '18 at 5:08
@RandyCasburn see link to plunker. as its bootstrap project there are many files/folders but i put the most relevant sutff up there. (next.plnkr.co/edit/RvnJ9AUkLkvFwbL5?open=lib%2Fscript.js)
– Hems
Nov 17 '18 at 16:48
I appreciate that you are new here and all, but you are not making the effort that warrants attention to your question. The plunker doesn't work because you didn't even take the time to correct the urls to the css and js resources. I'm out.
– Randy Casburn
Nov 17 '18 at 22:24
add a comment |
We would need all the files (css,js, and index.html) in order to help you. Go here: next.plnkr.co click on new near top left. Recreate your stuff there. I can tell you that you don't need the JS from the form template.
– Randy Casburn
Nov 17 '18 at 5:08
@RandyCasburn see link to plunker. as its bootstrap project there are many files/folders but i put the most relevant sutff up there. (next.plnkr.co/edit/RvnJ9AUkLkvFwbL5?open=lib%2Fscript.js)
– Hems
Nov 17 '18 at 16:48
I appreciate that you are new here and all, but you are not making the effort that warrants attention to your question. The plunker doesn't work because you didn't even take the time to correct the urls to the css and js resources. I'm out.
– Randy Casburn
Nov 17 '18 at 22:24
We would need all the files (css,js, and index.html) in order to help you. Go here: next.plnkr.co click on new near top left. Recreate your stuff there. I can tell you that you don't need the JS from the form template.
– Randy Casburn
Nov 17 '18 at 5:08
We would need all the files (css,js, and index.html) in order to help you. Go here: next.plnkr.co click on new near top left. Recreate your stuff there. I can tell you that you don't need the JS from the form template.
– Randy Casburn
Nov 17 '18 at 5:08
@RandyCasburn see link to plunker. as its bootstrap project there are many files/folders but i put the most relevant sutff up there. (next.plnkr.co/edit/RvnJ9AUkLkvFwbL5?open=lib%2Fscript.js)
– Hems
Nov 17 '18 at 16:48
@RandyCasburn see link to plunker. as its bootstrap project there are many files/folders but i put the most relevant sutff up there. (next.plnkr.co/edit/RvnJ9AUkLkvFwbL5?open=lib%2Fscript.js)
– Hems
Nov 17 '18 at 16:48
I appreciate that you are new here and all, but you are not making the effort that warrants attention to your question. The plunker doesn't work because you didn't even take the time to correct the urls to the css and js resources. I'm out.
– Randy Casburn
Nov 17 '18 at 22:24
I appreciate that you are new here and all, but you are not making the effort that warrants attention to your question. The plunker doesn't work because you didn't even take the time to correct the urls to the css and js resources. I'm out.
– Randy Casburn
Nov 17 '18 at 22:24
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53348282%2fhow-to-implement-custom-form-from-a-demos-css-source-files-in-bootstrap-3-pro%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53348282%2fhow-to-implement-custom-form-from-a-demos-css-source-files-in-bootstrap-3-pro%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
We would need all the files (css,js, and index.html) in order to help you. Go here: next.plnkr.co click on new near top left. Recreate your stuff there. I can tell you that you don't need the JS from the form template.
– Randy Casburn
Nov 17 '18 at 5:08
@RandyCasburn see link to plunker. as its bootstrap project there are many files/folders but i put the most relevant sutff up there. (next.plnkr.co/edit/RvnJ9AUkLkvFwbL5?open=lib%2Fscript.js)
– Hems
Nov 17 '18 at 16:48
I appreciate that you are new here and all, but you are not making the effort that warrants attention to your question. The plunker doesn't work because you didn't even take the time to correct the urls to the css and js resources. I'm out.
– Randy Casburn
Nov 17 '18 at 22:24