gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix html view instruction column

Browse Source
This commit is contained in:
Quincy Larson
2015-07-31 14:36:00 -07:00
parent fd06b81088
commit 2ccd6e3ee3
2 changed files with 13 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
public/js/main_0.0.3.js
View File

@ -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);
});

99
seed/challenges/html5-and-css.json
View File

@ -2400,103 +2400,8 @@
"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": "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."
]
"nameDe": "",
"descriptionDe": []
},
{
"id": "bad87eee1348bd9aede07836",