ExacTI
/
floating-labels
mirror of https://github.com/exacti/floating-labels.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Floating Labels for Bootstrap
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
20 Commits
1 Branch
0 Tags
123 KiB
Tag: Branch: Tree: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
floating-labels/demo.html

271 lines
9.5 KiB
Raw Permalink Normal View History Unescape

New in-border class effect
4 years ago
<html>
<head>
Add contributing guidelines, header copyright
4 years ago
<!-- /**
* Copyright (c) 2020. ExacTI Technology Solutions
* MIT License.
* https://exacti.com.br
* floating-labels - https://github.com/exacti/floating-labels
*/ -->
New in-border class effect
4 years ago
<title>Hello, world!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
Transitions aren't more dependent on placeholder visibility, Intl-tel-input more efective and option to put flags div in right position
4 years ago
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
New in-border class effect
4 years ago
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="floating-labels.css" media="screen">
Transitions aren't more dependent on placeholder visibility, Intl-tel-input more efective and option to put flags div in right position
4 years ago
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.0/build/css/intlTelInput.min.css" media="screen">
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.0/js/intlTelInput.min.js"></script>
New in-border class effect
4 years ago
<style>
</style>
</head>
<body>
<div class="container">
<h1 class="mb-5">Bootstrap floating labels demo</h1>
<div class="row">
<div class="col-md">
<h3 class="mt-5 mb-3">Normal</h3>
<div class="mb-3">
<input type="text" id="tt2" class="form-control shadow-none" placeholder="Floating Label" />
</div>
<div class="mb-3">
<input type="text" id="tt3" class="form-control form-control-lg shadow-none" placeholder="Floating Label lg" />
</div>
Transitions aren't more dependent on placeholder visibility, Intl-tel-input more efective and option to put flags div in right position
4 years ago
<div class="mb-3">
<textarea id="tt" class="form-control shadow-none" placeholder="Floating Label area" rows="4"></textarea>
</div>
New in-border class effect
4 years ago
<div class="mb-3">
<select class="custom-select" id="">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="col-md">
<h3 class="mt-5 mb-3">Float</h3>
<div class="form-label-group">
<input type="text" id="tt5" class="form-control shadow-none" placeholder="Floating Label" />
<label for="tt5">Floating Label</label>
</div>
<div class="form-label-group">
<input type="text" id="tt6" class="form-control form-control-lg shadow-none" placeholder="Floating Label lg" />
<label for="tt6" class="form-control-lg">Floating Label lg</label>
</div>
Transitions aren't more dependent on placeholder visibility, Intl-tel-input more efective and option to put flags div in right position
4 years ago
<div class="form-label-group">
<textarea id="tt4" class="form-control shadow-none" placeholder="Floating Label area" rows="4"></textarea>
<label for="tt4">Floating Label area</label>
</div>
New in-border class effect
4 years ago
<div class="form-label-group">
<select class="custom-select shadow-none" id="ttsel1">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="ttsel1" >Floating Label</label>
</div>
</div>
<div class="col-md">
<h3 class="mt-5 mb-3">Float In-Border</h3>
<div class="form-label-group in-border">
<input type="text" id="tt8" class="form-control shadow-none" placeholder="Floating Label" />
<label for="tt8">Floating Label</label>
</div>
<div class="form-label-group in-border">
<input type="text" id="tt9" class="form-control form-control-lg shadow-none" placeholder="Floating Label lg" />
<label for="tt9" class="form-control-lg">Floating Label lg</label>
</div>
Transitions aren't more dependent on placeholder visibility, Intl-tel-input more efective and option to put flags div in right position
4 years ago
<div class="form-label-group in-border">
<textarea id="tt7" class="form-control shadow-none" placeholder="Floating Label area" rows="4"></textarea>
<label for="tt7">Floating Label area</label>
</div>
New in-border class effect
4 years ago
<div class="form-label-group in-border">
<select class="custom-select" id="ttsel2">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="ttsel2" >Floating Label</label>
</div>
</div>
Added outline float label
4 years ago
<div class="col-md">
<h3 class="mt-5 mb-3">Float Outline</h3>
<div class="form-label-group outline">
<input type="text" id="tt8" class="form-control shadow-none" placeholder="Floating Label" />
<span><label for="tt8">Floating Label</label></span>
</div>
<div class="form-label-group outline">
<input type="text" id="tt9" class="form-control form-control-lg shadow-none" placeholder="Floating Label lg" />
<span><label for="tt9" class="form-control-lg">Floating Label lg</label></span>
</div>
<div class="form-label-group outline">
<textarea id="tt7" class="form-control shadow-none" placeholder="Floating Label area" rows="4"></textarea>
<span><label for="tt7">Floating Label area</label></span>
</div>
<div class="form-label-group outline">
<select class="custom-select" id="ttsel2">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<span><label for="ttsel2" >Floating Label</label></span>
</div>
</div>
New in-border class effect
4 years ago
</div>
Transitions aren't more dependent on placeholder visibility, Intl-tel-input more efective and option to put flags div in right position
4 years ago
<h3 class="mt-5">Intl-tel-input</h3>
<div class="row">
<div class="col-sm">
<h4 class=" mb-3">Float</h4>
<div class="form-label-group">
<input name="tel[main]" type="tel" class="form-control" data-parsley-phone-validate id="tel" placeholder="Telefone" />
<label for="tel">Telefone</label>
</div>
</div>
<div class="col-sm">
<h4 class=" mb-3">Right Float</h4>
<div class="form-label-group iti-right">
<input name="tel[main]" type="tel" class="form-control" data-parsley-phone-validate id="tel" placeholder="Telefone" />
<label for="tel">Telefone</label>
</div>
</div>
<div class="col-sm">
<h4 class="mb-3">Float In-Border</h4>
<div class="form-label-group in-border">
<input name="tel[main]" type="tel" class="form-control" data-parsley-phone-validate id="tel" placeholder="Telefone" />
<label for="tel">Telefone</label>
</div>
</div>
<div class="col-sm">
<h4 class="mb-3">Right Float In-Border</h4>
<div class="form-label-group in-border iti-right">
<input name="tel[main]" type="tel" class="form-control" data-parsley-phone-validate id="tel" placeholder="Telefone" />
<label for="tel">Telefone</label>
</div>
</div>
Added outline float label
4 years ago
Transitions aren't more dependent on placeholder visibility, Intl-tel-input more efective and option to put flags div in right position
4 years ago
</div>
New in-border class effect
4 years ago
Added outline float label
4 years ago
<div class="row">
<div class="col-md">
<div class="card text-white bg-warning mx-auto mb-3" style="max-width: 18rem;">
<div class="card-header"><h4 class="m-0"> Float Outline</h4></div>
New in-border class effect
4 years ago
Added outline float label
4 years ago
<div class="card-body">
<div class="form-label-group outline border-danger ">
<input name="tel[main]" type="tel" class="form-control border-white text-white" data-parsley-phone-validate id="tel4" placeholder="Telefone" />
<span class="labe"><label for="tel4" class="text-white">Telefone</label></span>
</div>
</div>
</div>
</div>
<div class="col-md">
<div class="card text-white bg-dark mx-auto mb-3" style="max-width: 18rem;">
<div class="card-header"><h4 class="m-0">Right Float Outline</h4></div>
<div class="card-body">
<div class="form-label-group outline iti-right border-warning">
<input name="tel[main]" type="tel" class="form-control text-white" data-parsley-phone-validate id="tel4" placeholder="Telefone" />
<span class="labe"><label for="tel4" class="text-white">Telefone</label></span>
</div>
</div>
</div>
</div>
</div>
New in-border class effect
4 years ago
</div>
Transitions aren't more dependent on placeholder visibility, Intl-tel-input more efective and option to put flags div in right position
4 years ago
<script>
const telInput = document.querySelectorAll('input[type="tel"]');
telInput.forEach(function(element, index, array){
var iti = [];
iti[index] = window.intlTelInput(element, {
initialCountry: "auto",
geoIpLookup: function(callback) {
$.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
var countryCode = (resp && resp.country) ? resp.country : "BR";
/* $("#pais").val(resp.country);
$("#estado").val(resp.region);
$("#cidade").val(resp.city);
//alert(resp.country); */
callback(countryCode);
});
},
utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.0/build/js/utils.min.js",
autoPlaceholder: "aggressive",
preferredCountries: ["br", "us", "ca", "uy"],
hiddenInput: "full",
customContainer: "d-flex intl-tel-input",
formatOnDisplay: true
});
element.addEventListener('keyup', function(){
formatIntlTelInput(iti[index]);
});
element.addEventListener('change', function(){
formatIntlTelInput(iti[index]);
});
});
function formatIntlTelInput(e) {
//console.log(e);
if (typeof intlTelInputUtils !== 'undefined') { // utils are lazy loaded, so must check
var currentText = e.getNumber(intlTelInputUtils.numberFormat.E164);
if (typeof currentText === 'string') { // sometimes the currentText is an object :)
e.setNumber(currentText); // will autoformat because of formatOnDisplay=true
}
}
}
$('.intl-tel-input, .iti').find('input.form-control').each(function(index, element) {
Added outline float label
4 years ago
let label = $(element).parent().find('~ label, ~ .labe');
Transitions aren't more dependent on placeholder visibility, Intl-tel-input more efective and option to put flags div in right position
4 years ago
$(element).after(label);
//console.log(label);
});
</script>
New in-border class effect
4 years ago
</body>
</html>