Question posted in 
So, I started my project on Codepen using both the Bootstrap 4 and JQuery quick-adds. I was able to get perfect results, however when I copied the exact same code to my text-editor and ran it from there, the format of the page is off. I tried incorporating the same Bootstrap and Jquery CDN links, but no luck. How do I get my code to run the same way it does on Codepen.io? Which links do I need to include?
This is the desired result:
This is the result that I get in the Firefox/Chrome browsers. Not too big of a difference now, except that most of my Bootstrap 4 styling is absent. Also, I’m having issues with the links in my navigation bar now. When I try to use text-decoration: none; on my <a> elements and button, my JQuery code no longer works.
This is the result that I get in Internet Explorer. Clearly the worst results of them all. I tried moving my links like Moe kanan suggested but I feel like there’s something that I’m still missing.
$(document).ready(function() {
$('a').on('click', function() {
$(this).parents().siblings().children().removeClass('active');
$(this).addClass('active');
});
$('.menu-icon').on('click', function() {
$('.nav-bar').toggleClass('hide-nav');
$('main').toggleClass('expand-main');
});
});* {
/*box-sizing: border-box; */
padding: 0;
margin: 0;
}
body, html {
height: 100%;
overflow: hidden;
}
.main {
background-image: url('http://hdimages.org/wp-content/uploads/2016/10/css-background-image-HD6-1.jpg');
width: 75%;
height: 100%;
float: right;
}
.nav-bar {
background-color: #4a235a;
width: 25%;
height: 100%;
opacity: 0.9;
}
ul {
padding: 10% 30%;
}
ul li {
color: white;
text-transform: uppercase;
list-style-type: none;
padding: 20%;
border-bottom: solid 1px gray;
font-size: 1.2em;
}
ul li:hover {
color: gray;
font-weight: bold;
}
h3 {
padding: 3%;
font-size: 1.3em;
color: lemonchiffon;
font-weight: bold;
}
.active {
color: navy;
font-weight: bold;
}
h1 {
font-family: Raleway;
font-size: 2.6em;
line-height: 1.4em;
padding-left: 20%;
padding-right: 20%;
padding-top: 14%;
padding-bottom: 4%;
color: snow;
}
.button {
color: white;
font-size: 1.3em;
text-align: center;
border: solid 1px white;
padding: 0.5em 0.7em;
}
.button:hover {
color: #2c3e50;
background-color: #c39bd3;
opacity: 0.9;
}
a {
color: white;
}
a:hover {
color: gray;
text-decoration: none;
}
.menu-icon {
width: 2.5%;
margin: 1.2%;
padding: 0.05% 0.02%;
}
img:hover {
border: solid 1px #17202a;
border-radius: 0.5em;
}
.hide-nav {
display: none;
}
.expand-main {
float: none;
width: 100%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Gab's Tech Space</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="Gab's Tech Space Template.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<a href=#><img class="menu-icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Ic_menu_36px.svg/2000px-Ic_menu_36px.svg.png"></a>
<h1 class="text-center">Hello! My name is <span>Gabby</span> and I create beautiful, professional, and responsive websites.</h1>
<center><a class="button text-center" href="#"><span class="learn-more">Learn More</span></a></center>
</div>
<div class="nav-bar">
<h3>Gab's Tech <br><span class="space text-center">Space</span></h3>
<ul class="text-center">
<li><a href=# class="active">Home</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Projects</a></li>
<li><a href=#>Contact</a></li>
</ul>
</div>
<script src="Gab's Tech Space Template.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
2
Answers
1.
Rename your javaScript file and remove the spaces, then edit the script src.
Change Gab’s Tech Space Template.js to gabsTechSpaceTemplate.js
Change this:
To this:
NOTE: make sure your javaScript file is in the root folder (same as the index.html file)
2.
Move the jQuery CDN link first:
You need to import the library first, then use it. In your case, you started using jQuery before you have imported it. Therefore, always have jQuery CDN at the top before the other javaScript code or files.
This should go first:
Second:
And your javaScript file last:
Create these 3 files in a folder then copy/paste the code below into each file.
index.html
style.css
index.js