<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Fixed navbar -->
<nav id="header" class="navbar navbar-fixed-top">
<div id="header-container" class="container navbar-container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<a href="/" class="main_logo">
<span class="logo">
<img src="//d1czawyup1trel.cloudfront.net/static/focuslab/images/logo_text_white_comp.svg" alt="Educreations">
</span>
</a>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-6">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="lineModalLabel">Payment Portal Registration</h3>
</div>
<div class="modal-body">
<!-- content goes here -->
<form>
<div class="form-group">
<label for="exampleInputEmail1">First Name</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="First Name">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Last Name</label>
<input class="form-control" id="exampleInputPassword1" placeholder="Last Name">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Member Number</label>
<input class="form-control" id="exampleInputPassword1" placeholder="Member #">
</div>
</form>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Back</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="saveImage" class="btn btn-primary btn-hover-green" data-action="save" role="button">Next</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/*
* Style tweaks
* --------------------------------------------------
*/
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
padding-top: 100px;
}
footer {
padding: 30px 0;
}
.modal-header span {
float: right;
position: relative;
top: -36px;
font-weight: bold;
}
#login-btn {
background-color: #0076C3;
border-color: #0076C3;
}
.logo {
display: block;
float: left;
padding-top: 1em;
width: 12.5em;
height: 3em;
}
.form-control {
width: 90%;
}
.form-group {
margin-bottom: 30px;}
#lineModalLabel {
font-weight: 300;
letter-spacing: 1.1px;
color: #0067BC;
text-align: center;
}
.modal-dialog {
width: 650px;
}
.modal-header {
border-bottom: 0px;
}
#special_well{
background-color: rgba(255, 255, 255, 0.8);
}
.modal-content {
border-radius: 0px;
padding: 10px 30px 0px 30px;
background-color: rgba(255, 255, 255, 0.7);
}
#features-list {
font-size: 12.49px;
}
#brand {
background: url(http://s24.postimg.org/hbwguqxfp/logo_cu_service_center.png) no-repeat 12px 11px;
}
/*
* Custom styles
*/
.navbar-brand {
font-size: 24px;
}
.navbar-container {
padding: 20px 0 20px 0;
}
.navbar.navbar-fixed-top.fixed-theme {
background-color: white;
border-color: #080808;
box-shadow: 0 0 5px rgba(0,0,0,.8);
}
.navbar-brand.fixed-theme {
font-size: 18px;
}
.navbar-container.fixed-theme {
padding: 0;
}
.navbar-brand.fixed-theme,
.navbar-container.fixed-theme,
.navbar.navbar-fixed-top.fixed-theme,
.navbar-brand,
.navbar-container{
transition: 0.8s;
-webkit-transition: 0.8s;
}
body {
background: url(http://s4.postimg.org/v5fyfwch9/Lighthouse_in_Field_Recovered11.png) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#login-overlay {
margin-top:60px;
}
.form-group.last { margin-bottom:0px; }
.login-form { margin-left: 5px; }
$(document).ready(function(){
/**
* This object controls the nav bar. Implement the add and remove
* action over the elements of the nav bar that we want to change.
*
* @type {{flagAdd: boolean, elements: string[], add: Function, remove: Function}}
*/
var myNavBar = {
flagAdd: true,
elements: [],
init: function (elements) {
this.elements = elements;
},
add : function() {
if(this.flagAdd) {
for(var i=0; i < this.elements.length; i++) {
document.getElementById(this.elements[i]).className += " fixed-theme";
}
this.flagAdd = false;
}
},
remove: function() {
for(var i=0; i < this.elements.length; i++) {
document.getElementById(this.elements[i]).className =
document.getElementById(this.elements[i]).className.replace( /(?:^|\s)fixed-theme(?!\S)/g , '' );
}
this.flagAdd = true;
}
};
/**
* Init the object. Pass the object the array of elements
* that we want to change when the scroll goes down
*/
myNavBar.init( [
"header",
"header-container",
"brand"
]);
/**
* Function that manage the direction
* of the scroll
*/
function offSetManager(){
var yOffset = 0;
var currYOffSet = window.pageYOffset;
if(yOffset < currYOffSet) {
myNavBar.add();
}
else if(currYOffSet == yOffset){
myNavBar.remove();
}
}
/**
* bind to the document scroll detection
*/
window.onscroll = function(e) {
offSetManager();
}
/**
* We have to do a first detectation of offset because the page
* could be load with scroll down set.
*/
offSetManager();
});
