Added boxShadowOffset var for tweaking closed position.

plapier · Apr 30, 2011 · 387f929 · 387f929
1 parent 2719409
commit 387f929
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 31 deletions.
diff --git a/dark-chrome/css/flashes.css b/dark-chrome/css/flashes.css
@@ -14,7 +14,7 @@ div#flash_wrapper {
   width: 960px; }
   div#flash_wrapper div#flash {
     font-size: 15px;
-    max-height: 50px;
+    max-height: 55px;
     margin: 0 auto;
     position: absolute;
     top: 0;
@@ -37,25 +37,25 @@ div#flash_wrapper {
       background: -ms-linear-gradient(top, #595959, #3c3c3c);
       background: -o-linear-gradient(top, #595959, #3c3c3c);
       background: linear-gradient(top, #595959, #3c3c3c);
-      height: 50px;
-      margin: -50px 0 0;
+      height: 55px;
+      margin: -55px 0 0;
       overflow: hidden;
-      padding: 13px 15px;
+      padding: 15px 15px;
       -webkit-border-radius: 0 0 8px 8px;
       -moz-border-radius: 0 0 8px 8px;
       border-radius: 0 0 8px 8px; }
       div#flash_wrapper div#flash div.flash_message div#flash-vrule {
         background: #282828;
         border-left: 1px solid #6f6f6f;
-        bottom: 15px;
+        bottom: 17px;
         display: -moz-inline-box;
         -moz-box-orient: vertical;
         display: inline-block;
         vertical-align: baseline;
         zoom: 1;
         *display: inline;
         *vertical-align: auto;
-        height: 50px;
+        height: 55px;
         margin-right: 12px;
         position: relative;
         vertical-align: top;

diff --git a/dark-chrome/css/scss/flashes.scss b/dark-chrome/css/scss/flashes.scss
@@ -14,7 +14,7 @@
 // EDIT HERE
 //************************************************************************//
 
-$flashHeight: 50px;    // Change Flash Message Height (if need to)
+$flashHeight: 55px;    // Change Flash Message Height
 $flashWidth: 960px;    // Change Flash Message Width
 
 $fontSize: 15px;       // Font Size (15px - 16px recommended)

diff --git a/dark-chrome/js/application.js b/dark-chrome/js/application.js
@@ -4,15 +4,29 @@
 
 // Flash messages
 $(function(){
-  var flashHeight = $('.flash_message').css("height");     // Grab height of Flash Message
-  var negHeight = "-" + flashHeight;                       // Negate height
+
+// EDIT HERE
+//----------------------------------------------------------------
+  var delayTime = 3000;       // Show Flash messages for 3 seconds
+  var boxShadowOffset = 2;    // CSS Box-Shadow Offset (pixels)
+//----------------------------------------------------------------
+// STOP EDITING HERE
+
+
+  // Grab height of Flash Message
+  var flashHeight = $('.flash_message').css("height");
+
+  // Calculate closed position of flash message
+  // Negate height, parse to integer, add CSS shadow height
+  var closePos = "-" + (parseInt(flashHeight) + boxShadowOffset) + "px";
+
 
   // On Document load, slide down flashes then slide up after delay of 3 seconds
-  $('.flash_message').animate({ marginTop: 0 }).delay(3000).animate({ marginTop: negHeight });
+  $('.flash_message').animate({ marginTop: 0 }).delay(delayTime).animate({ marginTop: closePos });
 
   // Dissmiss Flash Messages
   $('#flash_close').click(function(){
     $('.flash_message').stop();                            //Stop Animation
-    $('.flash_message').animate({ marginTop: negHeight }); // Slide up
+    $('.flash_message').animate({ marginTop: closePos }); // Slide up
   });
 });
diff --git a/dark-chrome/js/flashes.js b/dark-chrome/js/flashes.js
@@ -5,8 +5,8 @@
 var slideDown = function(pos){
   $('.flash_message').animate({ marginTop: 0 });
 };
-var slideUp = function(btnID){
-  $('.flash_message').animate({ marginTop: -53 }, function(){ changeIcon(btnID) });
+var slideUp = function(closePos, btnID){
+  $('.flash_message').animate({ marginTop: closePos }, function(){ changeIcon(btnID) });
 };
 
 var changeIcon = function(btnID){
@@ -31,16 +31,22 @@ var changeIcon = function(btnID){
 $(function(){
   // Slide down on page load
   slideDown();
+  var flashHeight = $('div#flash').css("max-height");             // Grab height of Flash Message
+  var boxShadowOffset = 2;                                        // Define CSS Box-Shadow Height (pixels)
+
+  // Calculate closed position of flash message
+  // Negate height, parse to integer, add CSS shadow height
+  var closePos = "-" + (parseInt(flashHeight) + boxShadowOffset) + "px";
 
   // On button click, slide up - change icon and text - slide down
   $('li button').click(function(){
     var btnID = $(this).attr("id");
-      slideUp(btnID);
+      slideUp(closePos, btnID); // pass in flash message height & button ID
       slideDown(btnID);
   });
 
   // Slide up when close button is clicked
   $('#flash_close').click(function(){
-    slideUp();
+    slideUp(closePos);
   });
 });
diff --git a/light-chrome/css/flashes.css b/light-chrome/css/flashes.css
@@ -14,7 +14,7 @@ div#flash_wrapper {
   width: 960px; }
   div#flash_wrapper div#flash {
     font-size: 15px;
-    max-height: 50px;
+    max-height: 55px;
     position: absolute;
     top: 0;
     width: 960px;
@@ -36,25 +36,25 @@ div#flash_wrapper {
       background: -ms-linear-gradient(top, #f5f5f5, #959595);
       background: -o-linear-gradient(top, #f5f5f5, #959595);
       background: linear-gradient(top, #f5f5f5, #959595);
-      height: 50px;
-      margin: -50px 0 0;
+      height: 55px;
+      margin: -55px 0 0;
       overflow: hidden;
-      padding: 13px 15px;
+      padding: 15px 15px;
       -webkit-border-radius: 0 0 8px 8px;
       -moz-border-radius: 0 0 8px 8px;
       border-radius: 0 0 8px 8px; }
       div#flash_wrapper div#flash div.flash_message div#flash-vrule {
         background: rgba(255, 255, 255, 0.4);
         border-left: 1px solid #959595;
-        bottom: 15px;
+        bottom: 17px;
         display: -moz-inline-box;
         -moz-box-orient: vertical;
         display: inline-block;
         vertical-align: baseline;
         zoom: 1;
         *display: inline;
         *vertical-align: auto;
-        height: 50px;
+        height: 55px;
         margin-right: 12px;
         position: relative;
         vertical-align: top;

diff --git a/light-chrome/css/scss/flashes.scss b/light-chrome/css/scss/flashes.scss
@@ -14,7 +14,7 @@
 // EDIT HERE
 //************************************************************************//
 
-$flashHeight: 50px;    // Change Flash Message Height
+$flashHeight: 55px;    // Change Flash Message Height
 $flashWidth: 960px;    // Change Flash Message Width
 
 $fontSize: 15px;       // Font Size (15px - 16px recommended)
@@ -68,7 +68,7 @@ div#flash_wrapper {
     div.flash_message {
       border: 1px solid $highlight;
       border-top: 0;
-      @include box-shadow( inset 0 -1px 0 0 $shadow, 0 0 5px 1px #000);
+      @include box-shadow( inset 0 -1px 0 0 $shadow, 0 0 5px 1px #000); // if you adjust the box-shadow height, adjust boxShadowHeight in jQuery as well.
       @include box-sizing(border-box);
       @include linear-gradient($chrome-from, $chrome-to);
       height: $flashHeight;

diff --git a/light-chrome/js/application.js b/light-chrome/js/application.js
@@ -4,15 +4,29 @@
 
 // Flash messages
 $(function(){
-  var flashHeight = $('.flash_message').css("height");     // Grab height of Flash Message
-  var negHeight = "-" + flashHeight;                       // Negate height
+
+// EDIT HERE
+//----------------------------------------------------------------
+  var delayTime = 3000;       // Show Flash messages for 3 seconds
+  var boxShadowOffset = 4;    // CSS Box-Shadow Offset (pixels)
+//----------------------------------------------------------------
+// STOP EDITING HERE
+
+
+  // Grab height of Flash Message
+  var flashHeight = $('.flash_message').css("height");
+
+  // Calculate closed position of flash message
+  // Negate height, parse to integer, add CSS shadow height
+  var closePos = "-" + (parseInt(flashHeight) + boxShadowOffset) + "px";
+
 
   // On Document load, slide down flashes then slide up after delay of 3 seconds
-  $('.flash_message').animate({ marginTop: 0 }).delay(3000).animate({ marginTop: negHeight });
+  $('.flash_message').animate({ marginTop: 0 }).delay(delayTime).animate({ marginTop: closePos });
 
   // Dissmiss Flash Messages
   $('#flash_close').click(function(){
     $('.flash_message').stop();                            //Stop Animation
-    $('.flash_message').animate({ marginTop: negHeight }); // Slide up
+    $('.flash_message').animate({ marginTop: closePos }); // Slide up
   });
 });
diff --git a/light-chrome/js/flashes.js b/light-chrome/js/flashes.js
@@ -5,8 +5,8 @@
 var slideDown = function(pos){
   $('.flash_message').animate({ marginTop: 0 });
 };
-var slideUp = function(btnID){
-  $('.flash_message').animate({ marginTop: -55 }, function(){ changeIcon(btnID) });
+var slideUp = function(closePos, btnID){
+  $('.flash_message').animate({ marginTop: closePos }, function(){ changeIcon(btnID) });
 };
 
 var changeIcon = function(btnID){
@@ -31,16 +31,22 @@ var changeIcon = function(btnID){
 $(function(){
   // Slide down on page load
   slideDown();
+  var flashHeight = $('div#flash').css("max-height");             // Grab height of Flash Message
+  var boxShadowOffset = 4;                                        // Define CSS Box-Shadow Height (pixels)
+
+  // Calculate closed position of flash message
+  // Negate height, parse to integer, add CSS shadow height
+  var closePos = "-" + (parseInt(flashHeight) + boxShadowOffset) + "px";
 
   // On button click, slide up - change icon and text - slide down
   $('li button').click(function(){
     var btnID = $(this).attr("id");
-      slideUp(btnID);
+      slideUp(closePos, btnID); // pass in flash message height & button ID
       slideDown(btnID);
   });
 
   // Slide up when close button is clicked
   $('#flash_close').click(function(){
-    slideUp();
+    slideUp(closePos);
   });
 });