Skip to content

Instantly share code, notes, and snippets.

@thechainercygnus

thechainercygnus/function.js

Last active August 29, 2015 14:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thechainercygnus/7b8a8b84336a5c16a760 to your computer and use it in GitHub Desktop.
Save thechainercygnus/7b8a8b84336a5c16a760 to your computer and use it in GitHub Desktop.
Download ZIP
Makes no sense
Raw
function.js
var main = function(){
$('.icon-menu').click(function() {
$('.menu').animate({
left: '0px'
}, 200);
$('body').animate({
left: '285px'
}, 200);
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-285px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
});
};
$(document).ready(main);
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/main.css" type="text/css">
<title>This is for fun</title>
</head>
<body>
<div class="menu">
<!-- Menu icon -->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!-- Menu -->
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Main body -->
<div class="jumbotron">
<div class="icon-menu">
<i class="fa fa-bars"></i>
Menu
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/function.js"></script>
</body>
</html>
Raw
main.css
/* Initial body */
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
/* Initial menu */
.menu {
background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
left: -285px; /* start off behind the scenes */
height: 100%;
position: fixed;
width: 285px;
}
/* Basic styling */
.jumbotron {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
color: #fff;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}
.icon-menu i {
margin-right: 5px;
}
@thechainercygnus
Copy link
Author

I am trying to understand why this code is behaving the way it does. When I load the page in Chrome or Firefox the background image used for .jumbotron shows up as only a thin strip, and it does this regardless of the image I use. I thought that the size: 100% is supposed to make it take up the whole window.

This code is from Codecademy's "Build an Interactive Site" lesson, and the image works perfectly there. The only changes I made were the locations of the css and js files, which I properly accounted for when referencing them in my index file.

Any insight I can get would make my day.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment