When I open the html file in a browser the javascript doesn't work, I can't figure out why? The exact same code works in the codecademy prompts, but not when I launch it from files on my desktop.
HTML
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet'>
</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>About</li>
<li>Blog</li>
<li>Help</li>
<li>Contact</li>
</ul>
</div>
<!-- Main body -->
<div class="jumbotron">
<div class="icon-menu">
<i class="fa fa-bars"></i>
Menu
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
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;
}
Javascript
var main = function() {
/* Push the body and the nav over by 285px over */
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('body').animate({
left: "285px"
}, 200);
});
/* Then push them back */
$('.icon-close').click(function() {
$('.menu').animate({
left: "-285px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
});
};
$(document).ready(main);
While PHPglue is correct, and that you should place the closing </div> tag, that's not causing your JS to not execute. This console error, however:
ReferenceError: $ is not defined app.js:26
Indicates that jQuery is not loading properly which means that this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Is somehow not working, and I think I know why...
Using // will load the requested URL relative to the current page's scheme. Since you're viewing this from a browser locally, that scheme is file://. Consequently, you're not loading jQuery because it's requesting file://ajax.googleapis....
So yes, my comment is party wrong. On a web server, where the scheme is either http:// or https://, then using //ajax.googleapis... will be fine. On localhost, it's not.
You're missing a closing </div> tag:
<div class="jumbotron">
<div class="icon-menu">
<i class="fa fa-bars"></i>
Menu
</div>
add
</div>
If you right click on your web page with Firefox and click View Page Source. You should see most HTML tag issues in red, if they are part of the source code. Of course, this won't work if your code was created with JavaScript.
try $document.ready(main());
I don't know jQuery, so not sure if it needs to initiate the function with ()
Related
I am working an a project for setting up a basic responsive web page for myself. I have everything the way that I want it for my set up but I am having problems with my function to open and close the hamburger menu on screens with a max-width of less than 480px. If I take the method toggleMenu() off of my div with a menu class and I uncomment out the javascript code that is currently commented out and comment out the code that is currently active, everything works perfect on every click. However if I leave the code as is and run it in the browser the menu only toggles open on every other click, so the first time I click it nothing happens, the second time I click it, the menu opens up, the third time I click it nothing happens and finally when I click the fourth time the menu closes back up again. The other issue that I am having is currently I have to include an external script file or put a script inside of my html file rather than relying on my build.js file to import the code. My question is what am I missing to get my menu to open and close correctly while still calling a function from my menu class and how would I write this as a module that I can bundle and run from my build.js file. Any help is greatly appreciated and thank you in advance.
My HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bring in google fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<!-- Bring in bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Bring in JSPopper -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="src/js/index.js" defer></script>
<!-- Bring in my style sheet -->
<link rel="stylesheet" href="src/assets/css/basic-style.css">
<title>Basic Page Setup</title>
</head>
<body>
<nav class="navbar">
<div class="logo-container">
<a href="#">
<img src="src/assets/images/seethrough_1.png" alt="seethrough_1" class="logo-image">
<span class="logo-text">LOGOHERE</span>
</a>
</div>
<ul class="nav-list" id="navi-list">
<li class="list-item">
About Us
</li>
<li class="list-item">
Contact
</li>
<li class="list-item">
Support
</li>
</ul>
<div class="menu" id="toggle-menu" onclick="toggleMenu()">
<div class="menu-line"></div>
<div class="menu-line"></div>
<div class="menu-line"></div>
</div>
</nav>
<div class="main-content">
<p class="my-story">
Not many have a story like mine. At 2 years old I was diagnosed with leukemia
and went into chemotherapy. This brings a great many problems, not least among
them a compromised immune system. I caught a cold that turned into pneumonia
and I died. It didn’t stick. In that time I saw things that would influence my life
profoundly. I can’t explain what happened but when I woke up, the pneumonia was
gone along with the leukemia. I have also overcome Pancreatic Cancer, Crohn's Disease,
and Diabetes just to name a few of the hurdles I found myself lifted over. I give all glory
to God, but I tell you these things not to garner sympathy or convince you that my God is
real. I tell you this because I believe all these things made me a purposeful person. I got a
certification in Computer programming on purpose. I write clean code on purpose. I believe
you are reading this on purpose. Let me show you what I can do for you on purpose.
</p>
</div>
<div class="footer-container">
<div class="logo-copyright">
<span class="copyright">©</span>
<img src="src/assets/images/seethrough_1.png" alt="seethrough_1" class="footer-logo">
<span class="footer-text">WebTek</span>
</div>
<div class="webmaster-contact">
<span class="footer-info">This page created and designed by</span>
Thomas E. Kremer
</div>
</div>
<!-- <script src="dist/build.js" defer></script>
-->
<!-- <script src="src/js/index.js" defer></script> -->
</body>
</html>
My CSS File:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Style the logo image and text */
/* .company-logo {
text-decoration: none;
}
.logo-image {
width: 75px;
height: 75px;
}
.logo-text {
font-family: Montserrat Alternates;
font-weight: 600;
font-style: none;
font-size: 35px;
color: rgba(0, 0, 0, 1);
line-height: 32px;
letter-spacing: 0.03em;
} */
.logo-image {
width: 55px;
height: auto;
}
.logo-text {
font-family: Montserrat Alternates;
font-weight: 600;
font-style: none;
font-size: 36px;
line-height: 32px;
letter-spacing: 0.03em;
}
.navbar a{
text-decoration: none;
color: rgba(0, 0, 0, 1);
}
.navbar a:hover {
color: blue;
}
.navbar {
align-items: center;
background-color: #FFFFFF;
color: rgba(0, 0, 0, 1);
display: flex;
font-family: Poppins;
font-size: 25px;
justify-content: space-around;
}
.nav-list {
list-style-type: none;
}
.nav-list .list-item {
display: inline-block;
padding: 20px 10px;
}
/* Hide menu on larger screens */
.menu {
display: none;
}
.menu-line {
background-color: green;
width: 25px;
height: 3px;
margin-bottom: 4px;
}
/* Style the footer and footer elements */
.footer-logo {
margin-top: 0px;
margin-bottom: 10px;
width: 55px;
height: 55px;
}
.copyright {
font-family: Montserrat Alternates;
font-weight: 600;
font-size: 25px;
}
.footer-text {
margin-top: 25px;
font-family: Montserrat Alternates;
font-weight: 600;
font-style: normal;
font-size: 21px;
}
.webmaster {
text-decoration: none;
}
.footer-info {
font-family: Poppins;
font-weight: 200;
font-size: 18px;
font-style: normal;
line-height: 32px;
letter-spacing: 0.03em;
}
.webmaster-contact {
margin-top: 13px;
}
.footer-container {
display: flex;
justify-content: space-evenly;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #FFFFFF;
text-align: center;
}
.my-story {
margin-top: 25px;
padding: 0 25px 0 25px;
font-family: Poppins;
font-weight: 200;
font-style: normal;
font-size: 16px;
}
/* Media query for smaller devices, hamburger menu */
#media all and (max-width: 480px) {
.navbar {
flex-direction: column;
position: relative;
}
.logo-container {
width: 100%;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 5px;
}
/* Show menu */
.menu {
display: block;
position: absolute;
right: 10px;
top: 10px;
}
.nav-list {
list-style-type: none;
width: 100%;
text-align: center;
padding: 20px;
display: none;
/* padding-left: 0; */
}
.nav-list .list-item {
display: block;
border-top: 1px solid black;
padding: 10px;
}
.footer-container {
display: flex;
flex-direction: column;
justify-content:inherit;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #FFFFFF;
text-align: center;
}
.copyright {
font-family: Montserrat Alternates;
font-weight: 600;
font-size: 20px;
}
.footer-logo {
margin-top: 0px;
margin-bottom: 10px;
width: 45px;
height: 45px;
}
.footer-text {
margin-top: 25px;
font-family: Montserrat Alternates;
font-weight: 600;
font-style: normal;
font-size: 25px;
}
.logo-copyright {
display: inline-block;
margin: 0;
padding: 0;
}
.webmaster-contact {
display: inline-block;
margin: 0;
padding: 0;
}
.active {
display: block;
}
.inactive {
display: none;
}
}
My JavaScript File:
/* Toggle hamburger menu */
/* const toggleButton = document.getElementById('toggle-menu');
const naviList = document.getElementById('navi-list');
toggleButton.addEventListener('click', () => {
naviList.classList.toggle('active');
}); */
function toggleMenu() {
const toggleButton = document.getElementById('toggle-menu');
const naviList = document.getElementById('navi-list');
toggleButton.addEventListener('click', () => {
naviList.classList.toggle('active');
});
}
So recap, I am trying to have the hamburger menu open and close with each click and run the script from my bundled build.js file rather than from within my html file or from another external javascript file, either as a module or as an onclick function. Thank you all again for the help in advance.
Your function toggleMenu() is setting an event listener on the first click, then the second click is triggering that listener!
Your first method works (commented out).
Use standalone JS - with no 'onclick' event:
// JS EVENT LISTENER METHOD (my preferred method)
const toggleButton = document.getElementById('toggle-menu');
const naviList = document.getElementById('navi-list');
toggleButton.addEventListener('click', () => {
naviList.classList.toggle('active');
});
// HTML EVENT METHOD
// When you call the named function from HTML `onclick="toggleMenu()"`
// the event listener is not required. You can just toggle
// the .active class as usual.
// <div class="menu" id="toggle-menu" onclick="toggleMenu()">
function toggleMenu() {
const naviList = document.getElementById('navi-list');
naviList.classList.toggle('active');
}
Using both methods together will cancel each other out! It's really toggling .active twice - too fast to see!
tested with codepen
addEventListener VS onclick comparison
so I am doing a challenge for FreeCodeCamp and my Nav Bar is being wonky. If you notice, it doesn't go across the entire screen so there is some white space. The only way I seem to be able to alter the dimensions of the navbar is if I get rid of overflow:hidden, but then the navbar acts really weird.
https://codepen.io/mso122591/pen/boowZv
Thanks!
HTML:
ul {
list-style-type: none;
margin-lef: 100;
padding: 0;
overflow: hidden;
}
li {
display: inline;
float: right;
}
li a {
display: block;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 100px;
font: bold 30px/50px Georgia, serif;
background-color: #66ccff;
}
li a:hover {
background-color: #b3e6ff;
}
.left-middle-text {
margin-left: 150px;
}
.portfolio-text {
margin-left: -200px;
margin-top: -1200px;
text-align: center;
background-color: white;
color: white;
z-index: 5;
}
.background-blue {
background-color: #66ccff;
}
.background-silver {
background-color: silver;
}
.portfolio-placeholder {
background-color: silver;
padding: 20px;
margin: 20px;
width: 300px;
height: 300px;
}
.social-two {
width: 50px;
height: 50px;
display: block;
z-index: 5;
}
.social {
padding-top: 20px;
margin-left: 1400px;
width: 20px;
height: 20px;
display: block;
z-index: 5;
}
.white {
color: white;
}
.ptext {}
h1 {
font-size: 60px;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
margin-top: 100px;
margin-left: 300px;
padding: 60px;
font-family: "Comic Sans MS";
font-size: 40px;
}
.black-box {
background-color: black;
width: 100%;
height: 200px;
margin-top: -150px;
z-index: -1;
}
.col-xs-6 {
text-align: center;
}
dbody {
padding: 20px;
font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div.wrapper {
float: left;
/* important */
position: relative;
/* important(so we can absolutely position the description div */
}
div.description {
position: absolute;
/* absolute position (so we can position it where we want)*/
top: 0px;
/* position will be on bottom */
margin-left: 100px;
width: 80%;
height: 90%;
/* styling bellow */
background-color: white;
color: white;
opacity: 0.2;
/* transparency */
filter: alpha(opacity=40);
/* IE transparency */
}
.image-static {
position: fixed;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="background-blue">
<ul>
<li>
<img class="social-two" alt="Facebook page. " src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAclBMVEU6WJf////29/oeRo4sTpKwudAyU5S6wtV3iLJ7i7MtT5M2VZYoTJEYQ43t7/SIl7tIY57N0+JRaqHl6fDa3unDydu0vNK+xdhid6lsf6yosstYb6PS1+Rne6rn6vGDkriapcORnr8SQIzd4epDX5uhrMfw5inQAAAETklEQVR4nO3dW3eiMBSG4dCEjCVBDioe2tp2tP//Lw7YOkPX6BhkSPbO+t4rb3TxLAwIQRBJv31TbErBuXJTNPtvJtF7nZZSaRN6GUdmtJJlelGYKstdd85Ylf4lnNc29HL912w9/y6sZCzr75yRVV+4zkMv0ATl6z/CKkZgS6zOwrkMvSwTJedfwjq2MXjO1J/CNK6taD+bnoQq9HJMmOqEEa/C00oUSRnrKOwyZSIWsW5IP5ML0cQ8DNuB2IhCh16ISdOF2MQ8DNuBuBG8D3hvF7sPIYQQQgghhH5ntM4yZbvkqdNLq1TG/ujd6MzKPKu3xduuWVXPy8NhsVgcDsvlc7VaN+luxpnY4vLy8WN1eEiut+Z6JtRoK7e753/QvvrBU6jl8c1Bx1VobPZ+cOOxFGr5tHLmMRQauVkO8bET2tJx9DEVGrkb6uMlVL+vDolUKIs7fJyEeXMXkI8wH7SLYCi8G8hFKO/8irIRqvs2MnyEp6t6ohbK/W0Ia6H9GAHkIDTlGCAHoRz8Y5uZUG9HARkI8zGbGQ5C/ToOSF84dhWSF+rZSCB5oRx4VoadcNTvNRZCe/8xBROhHA0kLtSPsQttFb1wPJD27NrgL+l+tSu2T0fdTQRbfaxfZsXHK+UZUrseoJun20zaLNPmfM22MUZntGe5pfs57upFKtKWi7kf+u6fJD9eW/buCPyRM/0zgXU8C/zG9i89jsPwnS1QaCdgwxjodIJmz/j/ydmbi/CJ6Uamy2l/X/H9jrZCl2tmXljuB7+S/7pa7asHxqPQ7cBiRfnA4VZOp2g+stCLOSKn84ikD41u5fSrlPW/WzOXWcMjZ6FyOZHIeUPjdmTBeX8vrMPE6ANvocOMBe+75sjFbSHv21m4XGKyZL2lcTnCf+YtdPjhXUFIOhch60MLJ+Ga9Y1znITRr0Pac4O3chHyvr0ThBASSl/up4MwlVfe3Cv8WQDzeLmtyx5/duXNvcKfysluQ0YVfp85tTD8PhNCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhBDCWIThZ9fM4+xiTjOk28vv7UVghjT+We5ruVypkPK4UuFKEEJIPwghpB+EENIPQgjpByGE9IMQQvpBCCH9IISQfhBCSD8IIaQfhBDSD0II6QchhPSDEEL6QQgh/SCEkH4QQkg/CCGkH4QQ0g9CCOkHIYT0gxBC+kEI4aDK//Q5g/IoLEWQP+37E5qNKEI8ZdCfUBciyCMI/AlVI4I8/MufUC5EUgYYiN6EpkxEkga4A4o3oU1bYRJgIHoTqqQTBliJvoTtKuyESe19JHoSnh473An9Py3Sk/D0EMJOmFS+n4DtR5hXyVmYrD0TvQjzzyfUfwqTSnodix6ERlZJX5jMa59b1OmFtj4/CFT0PtF6W48TC43tdhN/CdvPPErl5wZhEwqNVvKY9j5HfPvURVNsfBwSTycsN0Xz/WHDvwC3A1K2lfV16AAAAABJRU5ErkJggg==">
</li>
<li>
<img class="social-two" alt="Linkedin page. " src="data:image/png;base64,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">
</li>
<li><a onclick="scrollWin()">Portfolio</a></li>
</ul>
</div>
</div>
<div class="background-silver">
<h2 style="text-align:center;"> Michael Oelbaum </h2>
<h3 style="text-align:center"> Front-End Developer and UX/UI designer with experience in Japanese translation/interpretation
</div>
<!--Itachi background code
-->
<div class='wrapper'>
<!-- image -->
<div id="theFixed" style="position:fixed;top:200px">
<img src="https://images3.alphacoders.com/144/thumb-1920-144565.jpg" alt="Itachi Background. ">
<h1 class="white portfolio-text"> Portfolio </h1>
<div class='description'>
</div>
</div>
<!-- description div -->
<!-- description content -->
</div>
<h1 id=P ortfolio class="white portfolio-text"> Portfolio </h1>
<div class="row">
<div class="col-xs-6">
<div class="portfolio-placeholder box">Coming Soon!</div>
<div class="portfolio-placeholder box">Coming Soon!</div>
<div class="portfolio-placeholder box">Coming Soon!</div>
</div>
<div class="col-xs-6">
<div class="portfolio-placeholder box">Coming Soon!</div>
<div class="portfolio-placeholder box">Coming Soon!</div>
<div class="portfolio-placeholder box">Coming Soon!</div>
</div>
</div>
<!-- end description content -->
</div>
<!-- end description div -->
There is a wrapper div element called .container-fluid which has padding set to 15px (the whitespace you see) on either side. Either use a different class for this element, or add padding: 0px !important to your css.
I was able to add the following code to the top of the css:
.container-fluid {
padding: 0;
}
As long as this code is below any call to Bootstrap on a live site, you shouldn't need !important.
Added both the navbar and navbar-fixed-top classes to the nav tag according to the Bootstrap 3.3.7 documentation, given it's the version you're using, and added a margin-top: 80px to the background-silver class you're using for your "subnav" element, so it won't get behind your navbar when you scroll to the top.
Also, remember to import the rest of the bootstrap dependecies to your project, aka the bootstrap theme and it's JS functions.
Portfolio Page Link
I am not very good at css, but i believe that the . referse to a class ie, .button I would suggest using inspect element(ctrl-shift-i) to change the div you want to 100%, such as in my example :
My rats html
So I'm trying to make a website for a company of mine, and the idea is that my main page is going to have a giant image with a button in the center (horizontally and vertically) that says "More!" but the button will not center nor will the text inside of the button, Below I'll put my HTML code as well as my CSS code too.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Biostone Interactive | Main</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header-image">
<div id="header-button">
More!
</div>
</div>
<div id="nav">
</div>
<div id="container">
</div>
</body>
</html>
And here is my CSS:
* {
padding: 0;
margin: 0;
font-family: Lucida Sans Unicode, Tahoma, Arial;
}
#header-image {
width: 100%;
height: 600px;
background-color: black;
}
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
}
#header-button-text {
text-align: right;
text-decoration: none;
color: white;
}
(Note this code isn't complete because I deleted some of it to try and fix it)
Please help me and tell me what I did wrong! Thanks :D
To center text within a container, use text-align:center;
To center a container, use margin-left:auto;margin-right:auto;
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
text-align: center;
margin-left: auto;margin-right:auto;
}
#header-button-text {
text-decoration: none;
color: white;
}
change the header button css to:
#header-button {
position:absolute;
top:50%;
left:50%;
margin-top: -25px;
margin-left: -50px;
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
}
The margin values need to be half of the dimension attributes, so if you change width and height you have to update the margins.
I want to have something like a dropdown menu. I now have a hover in css but I know I have to use javascript to make it clickable. Can anyone help me making it clickable?
This is my current html code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="jumbotron">
<p>What will you be making for dinner tonight?</p>
<li class="inspiration">
Give me some inspiration!
<div class="recipe">
With those temperatures it is not a bad idea to have a BBQ! Here is a recipe for hummus to have as a side dish!
<ul>
<iframe width="392" height="220" src="https://www.youtube.com/embed/SfcSo-j-doc?rel=0&showinfo=0" frameborder="20px" allowfullscreen></iframe>
<ul>
</div>
</li>
</div>
</body>
</html>
and my css:
.inspiration {
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
cursor: pointer;
color: #012556;
font-size: 20px;
}
.inspiration:hover {
background: #555;
color: #012556;
font-size: 20px;
}
.inspiration:hover .recipe {
display: block;
opacity: 1;
visibility: visible;
}
.inspiration .recipe {
display: block;
padding: 0;
color: #fff;
position: center;
width: 1000px;
padding-top: 20px;
padding-bottom: 20px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
.jumbotron {
background-image:url(http://www.superiorequipmentsupplies.com/wp-content/themes/superior_v1.73/library/images/hero-residential.jpg);
height: 640px;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
.jumbotron h1 {
color: #fff;
font-size: 42px;
font-family: 'Shift', sans-serif;
font-weight: bold;
text-align: center;
}
.jumbotron p {
font-size: 20px;
color: #fff;
text-align: center;
}
I still don't get what to put in my javascript file
Add onclick in your li element
<li class="inspiration" onclick="functionname()">
Using event listeners, and the getComputedStyle() to get the styles and getPropertyValue() to get the visibility property. then using the if else as a toggle for opening and closing the menu dropdown. the css should be visibility: hidden for recipe class
<script>
var inspiration = document.getElementsByClassName("inspiration");
var expandMenu = function() {
var recipe = document.getElementsByClassName("recipe");
var CSSprop = window.getComputedStyle(recipe,null).getPropertyValue("visibility");
if(CSSprop == "visible"){
recipe[0].style.visibility = "hidden";
}else {
recipe[0].style.visibility = "visible";
}
}
inspiration[0].addEventListener("click", expandMenu);
</script>
Using Jquery syntax you can do this.
Add the following code to <head> tag and from css remove hover.
<script>
$(document).ready(function(){
$(".inspiration").click(function(){
$("#recepe").toggle();
});
});
</script>
When I click the menu the bar is supposed to show but it doesn't.
I think it has to do with the click event. I kept the original code that worked on the codeacademy website but I would love to tweak some of that code. The code came from code academy and I wanted to try it on my own computer. Is there anything I did wrong?
var main = function() {
/* Push the body and the nav over by 285px over */
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('body').animate({
left: "285px"
}, 200);
});
/* Then push them back */
$('.icon-close').click(function() {
$('.menu').animate({
left: "-285px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
});
};
$(document).ready(main);
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;
}
<html>
<head>
<link href='stylesheet.css' rel='stylesheet'>
</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>About</li>
<li>Blog</li>
<li>Help</li>
<li>Contact</li>
</ul>
</div>
<!-- Main body -->
<div class="jumbotron">
<div class="icon-menu">
Menu
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
The code snippet you shared does work. Your problem is likely due to how you're including the jquery library. The leading // tells the computer to load jquery using the same protocol as the current page. On your computer that protocol will be file:/// which means the browser will try to load jquery from file:///ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js which doesn't exist on your computer. Change it to https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js and it will probably work.