Permalink
Browse files

Floated savings, rounded edges

  • Loading branch information...
Valadian committed Jan 19, 2016
1 parent 9bd9386 commit 4cd14103703d4dc9b8b3a139b2e3582c8ed30d30
Showing with 65 additions and 11 deletions.
  1. +41 −1 Content/site.css
  2. +14 −2 Scripts/site.js
  3. +10 −8 index.html
View
@@ -11,6 +11,14 @@
body {
padding-top: 107px;
}
+ .floating {
+ position: fixed;
+ top: 107px;
+ }
+
+ .savings-spaceholder{
+ height: 70px;
+ }
}
@media (max-width: 992px){
.title img{
@@ -20,6 +28,14 @@
body {
padding-top: 80px;
}
+ .floating {
+ position: fixed;
+ top: 80px;
+ }
+ .savings-spaceholder{
+ height: 70px;
+ bac
+ }
}
@media (max-width: 768px){
.title img{
@@ -31,6 +47,14 @@
body {
padding-top: 55px;
}
+ .floating {
+ position: fixed;
+ top: 55px;
+ }
+
+ .savings-spaceholder{
+ height: 150px;
+ }
}
.slider-selection {
@@ -99,7 +123,23 @@ div.rounded {
.savings{
padding-bottom: 20px;
}
+.savings-placeholder, .savings-container{
+ z-index:9999;
+}
.savings>div{
- font-size: 250%;
+ font-size: 150%;
text-align: center;
}
+
+.savings-top{
+ border-radius: 20px 20px 0px 0px;
+ -moz-border-radius: 20px 20px 0px 0px;
+ -webkit-border-radius: 20px 20px 0px 0px;
+ border: 0px solid #000000;
+}
+.savings-bottom{
+ border-radius: 0px 0px 20px 20px;
+ -moz-border-radius: 0px 0px 20px 20px;
+ -webkit-border-radius: 0px 0px 20px 20px;
+ border: 0px solid #000000;
+}
View
@@ -31,6 +31,18 @@ $(function(){
digits: true,
min: 0
});
+
+ $(window).scroll(function(){
+ if($(window).scrollTop() > $('.savings-spaceholder').offset().top - $('.navbar').height() - 5){
+ $('.savings-container').addClass("floating");
+ $('.savings-container').css(
+ { 'width':$('.savings-spaceholder').width()+30})
+ } else {
+ $('.savings-container').removeClass("floating");
+ $('.savings-container').css(
+ { 'width':''})
+ }
+ })
$('#deductiblePercentage').slider({
formatter: function(value) {
@@ -279,9 +291,9 @@ $(function(){
},self);
self.employerSavingsText = ko.pureComputed(function(){
if(self.employerSavings()>0){
- return "Your Employer Saves: "
+ return "Employer Saves: "
}
- return "Your Employer Loses: "
+ return "Employer Loses: "
},self);
self.employeeSavingsClass = ko.pureComputed(function(){
View
@@ -74,14 +74,16 @@
</div>
</div>
<br>
- <div class="row">
- <div class="col-md-6 savings">
- <div data-bind="text: employeeSavingsText(), css: { 'bg-success': employeeSavings()>=0, 'bg-danger': employeeSavings()<0 }"></div>
- <div data-bind="text: employeeSavingsFormatted(), css: { 'bg-success': employeeSavings()>=0, 'bg-danger': employeeSavings()<0 }"></div>
- </div>
- <div class="col-md-6 savings">
- <div data-bind="text: employerSavingsText(), css: { 'bg-success': employerSavings()>=0, 'bg-danger': employerSavings()<0 }"></div>
- <div data-bind="text: employerSavingsFormatted(), css: { 'bg-success': employerSavings()>=0, 'bg-danger': employerSavings()<0 }"></div>
+ <div class="row savings-spaceholder">
+ <div class="row savings-container">
+ <div class="col-sm-6 savings ">
+ <div class="savings-top" data-bind="text: employeeSavingsText(), css: { 'bg-success': employeeSavings()>=0, 'bg-danger': employeeSavings()<0 }"></div>
+ <div class="savings-bottom" data-bind="text: employeeSavingsFormatted(), css: { 'bg-success': employeeSavings()>=0, 'bg-danger': employeeSavings()<0 }"></div>
+ </div>
+ <div class="col-sm-6 savings">
+ <div class="savings-top" data-bind="text: employerSavingsText(), css: { 'bg-success': employerSavings()>=0, 'bg-danger': employerSavings()<0 }"></div>
+ <div class="savings-bottom" data-bind="text: employerSavingsFormatted(), css: { 'bg-success': employerSavings()>=0, 'bg-danger': employerSavings()<0 }"></div>
+ </div>
</div>
</div>
<div class="row">

0 comments on commit 4cd1410

Please sign in to comment.