Skip to content

Instantly share code, notes, and snippets.

@WarrenPJ

WarrenPJ/collapseAndDoubleValidate.html

Last active November 19, 2015 00:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save WarrenPJ/dd4346a6edc0a5b580a8 to your computer and use it in GitHub Desktop.
Save WarrenPJ/dd4346a6edc0a5b580a8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
collapseAndDoubleValidate.html
<!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">
<title>GETTING STARTED WITH BRACKETS</title>
<meta name="description" content="Pascal Warren KCE Web Tests">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- JS -->
<script>
$(document).ready(function() {
// panelScroll(); line list-items to Left of screen when panel-header clicked
function panelScroll() {
var scrollArea = $('.navbar-sm');
var toScroll = $('.panel a');
toScroll.each(function() {
var clicked = $(this);
clicked.on('click', function () {
var leftOffset = clicked.offset().left-10 - scrollArea.offset().left-10 + scrollArea.scrollLeft(); // .left-10 for padding
scrollArea.animate({ scrollLeft: leftOffset }, 800);
});
});
}
panelScroll();
// emailOrPhone(); One input that detects whether email or phone number was entered
function emailOrPhone() {
var email = document.getElementById('emailphone');
var inVal = email.value;
var mailFormat = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var phoneRegex = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/;
if (mailFormat.test(inVal)) {
$('#emph-btn').attr('data-target','#myModal1');
}
else if (phoneRegex.test(inVal)) {
$('#emph-btn').attr('data-target','#myModal2');
}
else {
$('#emph-btn').attr('data-target','#myModal3');
}
return $(".jcontent").html(inVal); // var in model box
}
$("#emph-btn").click(function(){
emailOrPhone();
});
}); // (jQuery)
</script>
<!--link rel="stylesheet" href="main.css"-->
<style>
html, body{
height:95vh;
}
html {
background-color: #e6e9e9;
background-image: -webkit-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
background-image: linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
-webkit-font-smoothing: antialiased;
}
body {
margin: 0 auto;
padding: 2em 2em 4em;
max-width: 800px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #545454;
background-color: #ffffff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
}
.panel-group .panel+.panel {
margin-top: 0px;
}
.panel-group .panel{
border-radius: 0px;
padding:0px;
}
.panel a{
display:block;
padding-left:15px;
}
.panel{
width:170px;
}
.panel-default{
border:1px;
}
.panel-group .panel-heading+.panel-collapse>.list-group, .panel-group .panel-heading+.panel-collapse>.panel-body {
border-top: none;
}
.panel>.list-group:last-child .list-group-item:last-child, .panel>.panel-collapse>.list-group:last-child .list-group-item:last-child {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
padding-bottom:20px;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.list-group-item{
background-color:#333;
border: none;
}
.list-group-item a {
color:#fff;
}
.navbar-sm{
overflow-x:scroll;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
margin: 30px -30px;
}
.navbar-nav-sm{
position:relative;
width:63.75em;/*=====CHANGE TO FIT SIZE OF ALL LINKS========*/
margin:0;
background-color: #333;
border-color: #fff;
}
.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.modal {
margin-top: 10em;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<h3>KCE MENU TEST</h3>
<nav class="navbar navbar-default hidden-sm hidden-xs">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</nav>
<!--\\\\\\\\\\\\\\\\\ MOBILE NAV ///////////////////-->
<nav class="navbar navbar-default navbar-sm hidden-md hidden-lg">
<ul class="nav navbar-nav navbar-nav-sm">
<div class="panel-group" id="accordion">
<div class="panel panel-default col-xs-2">
<div class="panel-heading">
<a class="dropdown-toggle" data-toggle="collapse" role="button" data-parent="#accordion" href="#collapse1">Collapsible</a>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item"><a href="#">Action</a></li>
<li class="list-group-item"><a href="#">Another action</a></li>
<li class="list-group-item"><a href="#">Something else here</a></li>
<li class="list-group-item"><a href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="panel panel-default col-xs-2">
<div class="panel-heading">
<a class="dropdown-toggle" data-toggle="collapse" role="button" data-parent="#accordion" href="#collapse2">Collapsible</a>
</div>
<div id="collapse2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item"><a href="#">Action</a></li>
<li class="list-group-item"><a href="#">Another action</a></li>
<li class="list-group-item"><a href="#">Something else here</a></li>
<li class="list-group-item"><a href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="panel panel-default col-xs-2">
<div class="panel-heading">
<a class="dropdown-toggle" data-toggle="collapse" role="button" data-parent="#accordion" href="#collapse3">Collapsible</a>
</div>
<div id="collapse3" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item"><a href="#">Action</a></li>
<li class="list-group-item"><a href="#">Another action</a></li>
<li class="list-group-item"><a href="#">Something else here</a></li>
<li class="list-group-item"><a href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="panel panel-default col-xs-2">
<div class="panel-heading">
<a class="dropdown-toggle" data-toggle="collapse" role="button" data-parent="#accordion" href="#collapse4">Collapsible</a>
</div>
<div id="collapse4" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item"><a href="#">Action</a></li>
<li class="list-group-item"><a href="#">Another action</a></li>
<li class="list-group-item"><a href="#">Something else here</a></li>
<li class="list-group-item"><a href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="panel panel-default col-xs-2">
<div class="panel-heading">
<a class="dropdown-toggle" data-toggle="collapse" role="button" data-parent="#accordion" href="#collapse5">Collapsible</a>
</div>
<div id="collapse5" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item"><a href="#">Action</a></li>
<li class="list-group-item"><a href="#">Another action</a></li>
<li class="list-group-item"><a href="#">Something else here</a></li>
<li class="list-group-item"><a href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="panel panel-default col-xs-2">
<div class="panel-heading">
<a class="dropdown-toggle" data-toggle="collapse" role="button" data-parent="#accordion" href="#collapse6">Collapsible</a>
</div>
<div id="collapse6" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item"><a href="#">Action</a></li>
<li class="list-group-item"><a href="#">Another action</a></li>
<li class="list-group-item"><a href="#">Something else here</a></li>
<li class="list-group-item"><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div><!--panel group-->
</ul>
</nav>
<!-- input for emailOrPhone(); -->
<div class="col-lg-6">
<h4>
<span class="glyphicon glyphicon-earphone pull-right" aria-hidden="true"></span>
<span class="glyphicon glyphicon-envelope pull-right" aria-hidden="true">&nbsp;</span>Sign up for <b><em>Email</em></b> OR <b><em>Text</em></b> alerts</h4>
<div class="input-group">
<input type="text" class="form-control" id="emailphone" placeholder="me@example.com - OR - (XXX) XXX-XXXX">
<span class="input-group-btn">
<button class="btn btn-default" id="emph-btn" type="button" data-toggle="modal" data-target="">Sign Up</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<!-- Modal1 -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Email Notifications</h4>
</div>
<div class="modal-body">
<p>Please confirm you wish to receive email notifications at: <b><span class="jcontent"></span></b></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a type="button" class="btn btn-primary" href="https://public.govdelivery.com/accounts/WaKing/subscriber/topics?qsp=WaKing_15">Confirm</a>
</div>
</div>
</div>
</div><!--END-->
<!-- Modal2 -->
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Text Notifications</h4>
</div>
<div class="modal-body">
<p>Please confirm you wish to receive text notifications at: <b><span class="jcontent"></span></b></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a type="button" class="btn btn-primary" href="https://public.govdelivery.com/accounts/WaKing/subscriber/topics?qsp=WaKing_15">Confirm</a>
</div>
</div>
</div>
</div><!--END-->
<!-- Modal3 -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Sorry...</h4>
</div>
<div class="modal-body">
<p>You must enter a valid Phone Number or Email Address</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div><!--END modals-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment