fix html view instruction column

public/js/main_0.0.3.js

@@ -374,25 +374,22 @@ $(document).ready(function() {
             }
         });
     }
-
+   if($('.scroll-locker').html() != undefined){
-    if($('.scroll-locker').html() != undefined){
         function lockTop(initOff){
-            $(window).scroll(function() {
                 if ($(window).width() >= 992) {
                     if ((($('.scroll-locker').offset().top - $(window).scrollTop()) + $('.scroll-locker').height()) >= ($('.fcc-footer').offset().top - $(window).scrollTop())) {
-                        $('.scroll-locker').css('position', 'fixed').css('top', initOff).css('width', $($('.scroll-locker').parent()).width()).css('max-height', '75%').css('overflow-y', 'auto').css('overflow-x', 'hidden');
+                        $('.scroll-locker').css('position', 'fixed').css('top', initOff).css('width', $($('.scroll-locker').parent()).width()).css('max-height', '85%').css('overflow-y', 'auto').css('overflow-x', 'hidden');
                         $('.well').css('margin-right', '6px');
                     }
                     else {
-                        $('.scroll-locker').css('position', 'fixed').css('bottom', $('.fcc-footer') - (($('.scroll-locker').offset().top - $(window).scrollTop()) + $('.scroll-locker').height()) - ($('.fcc-footer').offset().top - $(window).scrollTop())).css('width', $($('.scroll-locker').parent()).width()).css('max-height', '75%').css('overflow-y', 'auto').css('overflow-x', 'hidden');
+                        $('.scroll-locker').css('position', 'fixed').css('bottom', $('.fcc-footer') - (($('.scroll-locker').offset().top - $(window).scrollTop()) + $('.scroll-locker').height()) - ($('.fcc-footer').offset().top - $(window).scrollTop())).css('width', $($('.scroll-locker').parent()).width()).css('max-height', '85%').css('overflow-y', 'auto').css('overflow-x', 'hidden');
                         $('.well').css('margin-right', '6px');
                     }
                 }
                 else {
-                    $('.scroll-locker').css('position', 'inherit').css('top', 'inherit').css('width', '100%').css('max-height', '').css('overflow-y', 'auto').css('overflow-x', 'hidden');
+                    $('.scroll-locker').css('position', 'inherit').css('top', 'inherit').css('width', '100%').css('max-height', '85%').css('overflow-y', 'auto').css('overflow-x', 'hidden');
                     $('.well').css('margin-right', '');
                 }
-            });
         }
         var $scrollLocker = $('.scroll-locker');
         if ($scrollLocker.offset()) {
@@ -401,8 +398,14 @@ $(document).ready(function() {
           $(window).on('resize', function(){
               lockTop(initOff);
           });
+          $(window).scroll(function() {
+            lockTop(initOff);
+          });
+          $(document).ready(function(){
+            lockTop(initOff);
+          });
         }
-    }
+   }
 
   $('#comment-button').on('click', commentSubmitButtonHandler);
 });

seed/challenges/html5-and-css.json

@@ -2400,103 +2400,8 @@
       "descriptionEs": [],
       "namePt": "",
       "descriptionPt": [],
-      "nameDe": "Waypoint: Gib dem Div Element einen farbigen Hintergrund",
+      "nameDe": "",
-      "descriptionDe": [
+      "descriptionDe": []
-        "Erstelle eine Klasse namens \"gray-background\" mit der Hintergrund-Farbe grau. Füge diese Klasse deinem <code>div</code> Element hinzu.",
-        "Du kannst die Hintergrund-Farbe eines Elements mit der Eigenschaft \"background-color\" bestimmen.",
-        "Willst du den Hintergrund eines Elements zum Beispiel grün – \"green\" – einfärben, kannst du <code>.green-background { background-color: green; }</code> innerhalb deines <code>style</code> Elements verwenden."
-      ]
-    },
-    {
-      "id": "bad87fee1348bd9aede07836",
-      "name": "Waypoint: Give a Background Color to a Div Element",
-      "dashedName": "waypoint-give-a-background-color-to-a-div-element",
-      "difficulty": 1.39,
-      "description": [
-        "You can set an element's background color with the \"background-color\" attribute.",
-        "For example, if you wanted an element's background color to be \"green\", you'd use <code>.green-background { background-color: green; }</code> within your <code>style</code> element.",
-        "Create a class called \"gray-background\" with the background color of gray. Assign this class to your <code>div</code> element."
-      ],
-      "tests": [
-        "assert($('div').hasClass('gray-background'), 'Give your <code>div</code> element the class \"gray-background\".')",
-        "assert($('.gray-background').css('background-color') === 'rgb(128, 128, 128)', 'Your <code>div</code> element should have a gray background.')"
-      ],
-      "challengeSeed": [
-        "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  h2 {",
-        "    font-family: Lobster, Monospace;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "    font-family: Monospace;",
-        "  }",
-        "",
-        "  .thick-green-border {",
-        "    border-color: green;",
-        "    border-width: 10px;",
-        "    border-style: solid;",
-        "    border-radius: 50%;",
-        "  }",
-        "",
-        "  .smaller-image {",
-        "    width: 100px;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class='red-text'>CatPhotoApp</h2>",
-        "",
-        "<p>Click here for <a href='#'>cat photos</a>.</p>",
-        "",
-        "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
-        "",
-        "<div>",
-        "  <p>Things cats love:</p>",
-        "  <ul>",
-        "    <li>cat nip</li>",
-        "    <li>laser pointers</li>",
-        "    <li>lasagna</li>",
-        "  </ul>",
-        "  <p>Top 3 things cats hate:</p>",
-        "  <ol>",
-        "    <li>flea treatment</li>",
-        "    <li>thunder</li>",
-        "    <li>other cats</li>",
-        "  </ol>",
-        "</div>",
-        "",
-        "<form action=\"/submit-cat-photo\">",
-        "  <label><input type='radio' name='indoor-outdoor' checked> Indoor</label>",
-        "  <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
-        "  <label><input type='checkbox' name='personality' checked> Loving</label>",
-        "  <label><input type='checkbox' name='personality'> Lazy</label>",
-        "  <label><input type='checkbox' name='personality'> Energetic</label>",
-        "  <input type='text' placeholder='cat photo URL' required>",
-        "  <button type='submit'>Submit</button>",
-        "</form>"
-      ],
-      "challengeType": 0,
-      "nameCn": "",
-      "descriptionCn": [],
-      "nameFr": "",
-      "descriptionFr": [],
-      "nameRu": "",
-      "descriptionRu": [],
-      "nameEs": "",
-      "descriptionEs": [],
-      "namePt": "",
-      "descriptionPt": [],
-      "nameDe": "Waypoint: Gib dem Div Element einen farbigen Hintergrund",
-      "descriptionDe": [
-        "Erstelle eine Klasse namens \"gray-background\" mit der Hintergrund-Farbe grau. Füge diese Klasse deinem <code>div</code> Element hinzu.",
-        "Du kannst die Hintergrund-Farbe eines Elements mit der Eigenschaft \"background-color\" bestimmen.",
-        "Willst du den Hintergrund eines Elements zum Beispiel grün – \"green\" – einfärben, kannst du <code>.green-background { background-color: green; }</code> innerhalb deines <code>style</code> Elements verwenden."
-      ]
     },
     {
       "id": "bad87eee1348bd9aede07836",