JQuery to Update Parent Class In External File
0
So I am having a bit of trouble when trying to move from having all my code in one file, to having it stored in three separate files (CSS, HTML, and JS). When they were all in one file, the jquery code that I was using was working (not perfectly, but thats a different issue) but it was working enough for what I needed it. So in an effort to organize things I began to move code into the different files, as opposed to one sloppy HTML file.
Everything works fine, except for the jQuery code which is in the Javscript file. I was using the hover() function so that when the link with class "ne" was hovered over, it would update the parent's (a screen overlay) background to now be a certain image.
But now that it is in an external file, I am not sure how I can achieve the same functionality.
Here is the snippet for the code I am currently workign with:
var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-1.11.0.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
/*$(".ne").hover(function(){
$(this).parent().parent().addClass("newengland");
});
$(".ne").mouseleave(function(){
$(this).parent().parent().addClass("overlay");
$(this).parent().parent().removeClass("newengland");
});*/@import url('https://fonts.googleapis.com/css?family=Oswald:300,400');
body {
font-family: 'Oswald', sans-serif;
background-color: white;
}
.colorado{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 0px;
background-size: cover;
}
.newengland{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 2160px;
background-size: cover;
}
.europe{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 4320px;
background-size: cover;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
font-family: Oswald;
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}<!DOCTYPE html>
<html lang = "en">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="scripts.js"></script>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#" class="co" onhover = "update()" >co</a>
<a href="#" class="ne">ne</a>
<a href="#" class="eu">eu</a>
<a href="#" class="ab">ab</a>
</div>
</div>
<h2>Temp</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
</body>
</html>And what I aim to have happen is when you hover over the different elements of the overlay, it should add a class to the div, which will change its background. And again, this was working in the spaghetti code file, but now it is not. Hope you can help, thank you for reading!
javascript jquery html css
asked Jan 19 at 23:47
Zachary FerrettiZachary Ferretti
1
add a comment |
0
So I am having a bit of trouble when trying to move from having all my code in one file, to having it stored in three separate files (CSS, HTML, and JS). When they were all in one file, the jquery code that I was using was working (not perfectly, but thats a different issue) but it was working enough for what I needed it. So in an effort to organize things I began to move code into the different files, as opposed to one sloppy HTML file.
Everything works fine, except for the jQuery code which is in the Javscript file. I was using the hover() function so that when the link with class "ne" was hovered over, it would update the parent's (a screen overlay) background to now be a certain image.
But now that it is in an external file, I am not sure how I can achieve the same functionality.
Here is the snippet for the code I am currently workign with:
var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-1.11.0.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
/*$(".ne").hover(function(){
$(this).parent().parent().addClass("newengland");
});
$(".ne").mouseleave(function(){
$(this).parent().parent().addClass("overlay");
$(this).parent().parent().removeClass("newengland");
});*/@import url('https://fonts.googleapis.com/css?family=Oswald:300,400');
body {
font-family: 'Oswald', sans-serif;
background-color: white;
}
.colorado{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 0px;
background-size: cover;
}
.newengland{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 2160px;
background-size: cover;
}
.europe{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 4320px;
background-size: cover;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
font-family: Oswald;
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}<!DOCTYPE html>
<html lang = "en">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="scripts.js"></script>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#" class="co" onhover = "update()" >co</a>
<a href="#" class="ne">ne</a>
<a href="#" class="eu">eu</a>
<a href="#" class="ab">ab</a>
</div>
</div>
<h2>Temp</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
</body>
</html>And what I aim to have happen is when you hover over the different elements of the overlay, it should add a class to the div, which will change its background. And again, this was working in the spaghetti code file, but now it is not. Hope you can help, thank you for reading!
javascript jquery html css
asked Jan 19 at 23:47
Zachary FerrettiZachary Ferretti
1
Why are you trying to dynamically add a script tag with jQuery through javascript?
– Laurens
Jan 19 at 23:48
add a comment |
0
0
0
So I am having a bit of trouble when trying to move from having all my code in one file, to having it stored in three separate files (CSS, HTML, and JS). When they were all in one file, the jquery code that I was using was working (not perfectly, but thats a different issue) but it was working enough for what I needed it. So in an effort to organize things I began to move code into the different files, as opposed to one sloppy HTML file.
Everything works fine, except for the jQuery code which is in the Javscript file. I was using the hover() function so that when the link with class "ne" was hovered over, it would update the parent's (a screen overlay) background to now be a certain image.
But now that it is in an external file, I am not sure how I can achieve the same functionality.
Here is the snippet for the code I am currently workign with:
var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-1.11.0.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
/*$(".ne").hover(function(){
$(this).parent().parent().addClass("newengland");
});
$(".ne").mouseleave(function(){
$(this).parent().parent().addClass("overlay");
$(this).parent().parent().removeClass("newengland");
});*/@import url('https://fonts.googleapis.com/css?family=Oswald:300,400');
body {
font-family: 'Oswald', sans-serif;
background-color: white;
}
.colorado{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 0px;
background-size: cover;
}
.newengland{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 2160px;
background-size: cover;
}
.europe{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 4320px;
background-size: cover;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
font-family: Oswald;
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}<!DOCTYPE html>
<html lang = "en">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="scripts.js"></script>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#" class="co" onhover = "update()" >co</a>
<a href="#" class="ne">ne</a>
<a href="#" class="eu">eu</a>
<a href="#" class="ab">ab</a>
</div>
</div>
<h2>Temp</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
</body>
</html>And what I aim to have happen is when you hover over the different elements of the overlay, it should add a class to the div, which will change its background. And again, this was working in the spaghetti code file, but now it is not. Hope you can help, thank you for reading!
javascript jquery html css
asked Jan 19 at 23:47
Zachary FerrettiZachary Ferretti
1
So I am having a bit of trouble when trying to move from having all my code in one file, to having it stored in three separate files (CSS, HTML, and JS). When they were all in one file, the jquery code that I was using was working (not perfectly, but thats a different issue) but it was working enough for what I needed it. So in an effort to organize things I began to move code into the different files, as opposed to one sloppy HTML file.
Everything works fine, except for the jQuery code which is in the Javscript file. I was using the hover() function so that when the link with class "ne" was hovered over, it would update the parent's (a screen overlay) background to now be a certain image.
But now that it is in an external file, I am not sure how I can achieve the same functionality.
Here is the snippet for the code I am currently workign with:
var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-1.11.0.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
/*$(".ne").hover(function(){
$(this).parent().parent().addClass("newengland");
});
$(".ne").mouseleave(function(){
$(this).parent().parent().addClass("overlay");
$(this).parent().parent().removeClass("newengland");
});*/@import url('https://fonts.googleapis.com/css?family=Oswald:300,400');
body {
font-family: 'Oswald', sans-serif;
background-color: white;
}
.colorado{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 0px;
background-size: cover;
}
.newengland{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 2160px;
background-size: cover;
}
.europe{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 4320px;
background-size: cover;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
font-family: Oswald;
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}<!DOCTYPE html>
<html lang = "en">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="scripts.js"></script>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#" class="co" onhover = "update()" >co</a>
<a href="#" class="ne">ne</a>
<a href="#" class="eu">eu</a>
<a href="#" class="ab">ab</a>
</div>
</div>
<h2>Temp</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
</body>
</html>And what I aim to have happen is when you hover over the different elements of the overlay, it should add a class to the div, which will change its background. And again, this was working in the spaghetti code file, but now it is not. Hope you can help, thank you for reading!
var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-1.11.0.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
/*$(".ne").hover(function(){
$(this).parent().parent().addClass("newengland");
});
$(".ne").mouseleave(function(){
$(this).parent().parent().addClass("overlay");
$(this).parent().parent().removeClass("newengland");
});*/@import url('https://fonts.googleapis.com/css?family=Oswald:300,400');
body {
font-family: 'Oswald', sans-serif;
background-color: white;
}
.colorado{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 0px;
background-size: cover;
}
.newengland{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 2160px;
background-size: cover;
}
.europe{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 4320px;
background-size: cover;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
font-family: Oswald;
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}<!DOCTYPE html>
<html lang = "en">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="scripts.js"></script>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#" class="co" onhover = "update()" >co</a>
<a href="#" class="ne">ne</a>
<a href="#" class="eu">eu</a>
<a href="#" class="ab">ab</a>
</div>
</div>
<h2>Temp</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
</body>
</html>var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-1.11.0.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
/*$(".ne").hover(function(){
$(this).parent().parent().addClass("newengland");
});
$(".ne").mouseleave(function(){
$(this).parent().parent().addClass("overlay");
$(this).parent().parent().removeClass("newengland");
});*/@import url('https://fonts.googleapis.com/css?family=Oswald:300,400');
body {
font-family: 'Oswald', sans-serif;
background-color: white;
}
.colorado{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 0px;
background-size: cover;
}
.newengland{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 2160px;
background-size: cover;
}
.europe{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 4320px;
background-size: cover;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
font-family: Oswald;
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}<!DOCTYPE html>
<html lang = "en">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="scripts.js"></script>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#" class="co" onhover = "update()" >co</a>
<a href="#" class="ne">ne</a>
<a href="#" class="eu">eu</a>
<a href="#" class="ab">ab</a>
</div>
</div>
<h2>Temp</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
</body>
</html>javascript jquery html css
javascript jquery html css
asked Jan 19 at 23:47
Zachary FerrettiZachary Ferretti
1
asked Jan 19 at 23:47
Zachary FerrettiZachary Ferretti
1
asked Jan 19 at 23:47
Zachary FerrettiZachary Ferretti
1
asked Jan 19 at 23:47
Zachary FerrettiZachary Ferretti
1
asked Jan 19 at 23:47
Zachary FerrettiZachary Ferretti
1
1
Why are you trying to dynamically add a script tag with jQuery through javascript?
– Laurens
Jan 19 at 23:48
add a comment |
Why are you trying to dynamically add a script tag with jQuery through javascript?
– Laurens
Jan 19 at 23:48
Why are you trying to dynamically add a script tag with jQuery through javascript?
– Laurens
Jan 19 at 23:48
Why are you trying to dynamically add a script tag with jQuery through javascript?
– Laurens
Jan 19 at 23:48
add a comment |
1 Answer
1
active
oldest
votes
0
No need to dynamically import jQuery, just import it with a script tag in the html before your javascript file.
Also, make sure you are using document.ready to make sure your DOM is rendered before executing jQuery:
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
$(document).ready(function(){
$(".ne").hover(function(){
$(this).parent().parent().addClass("newengland");
});
$(".ne").mouseleave(function(){
$(this).parent().parent().addClass("overlay");
$(this).parent().parent().removeClass("newengland");
});
});@import url('https://fonts.googleapis.com/css?family=Oswald:300,400');
body {
font-family: 'Oswald', sans-serif;
background-color: white;
}
.colorado{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 0px;
background-size: cover;
}
.newengland{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 2160px;
background-size: cover;
}
.europe{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 4320px;
background-size: cover;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
font-family: Oswald;
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}<!DOCTYPE html>
<html lang = "en">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js"></script>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#" class="co" onhover = "update()" >co</a>
<a href="#" class="ne">ne</a>
<a href="#" class="eu">eu</a>
<a href="#" class="ab">ab</a>
</div>
</div>
<h2>Temp</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
</body>
</html>answered Jan 19 at 23:53
LaurensLaurens
1,699617
Thank you so much :) that completely worked!
– Zachary Ferretti
Jan 20 at 0:07
The reason I had been dynamically importing it was because just while I was trying to learn what to do I found something that said you needed to have that there but I must have been misreading it. Thanks!
– Zachary Ferretti
Jan 20 at 0:17
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54272342%2fjquery-to-update-parent-class-in-external-file%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
No need to dynamically import jQuery, just import it with a script tag in the html before your javascript file.
Also, make sure you are using document.ready to make sure your DOM is rendered before executing jQuery:
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
$(document).ready(function(){
$(".ne").hover(function(){
$(this).parent().parent().addClass("newengland");
});
$(".ne").mouseleave(function(){
$(this).parent().parent().addClass("overlay");
$(this).parent().parent().removeClass("newengland");
});
});@import url('https://fonts.googleapis.com/css?family=Oswald:300,400');
body {
font-family: 'Oswald', sans-serif;
background-color: white;
}
.colorado{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 0px;
background-size: cover;
}
.newengland{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 2160px;
background-size: cover;
}
.europe{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 4320px;
background-size: cover;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
font-family: Oswald;
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}<!DOCTYPE html>
<html lang = "en">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js"></script>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#" class="co" onhover = "update()" >co</a>
<a href="#" class="ne">ne</a>
<a href="#" class="eu">eu</a>
<a href="#" class="ab">ab</a>
</div>
</div>
<h2>Temp</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
</body>
</html>answered Jan 19 at 23:53
LaurensLaurens
1,699617
Thank you so much :) that completely worked!
– Zachary Ferretti
Jan 20 at 0:07
The reason I had been dynamically importing it was because just while I was trying to learn what to do I found something that said you needed to have that there but I must have been misreading it. Thanks!
– Zachary Ferretti
Jan 20 at 0:17
add a comment |
0
No need to dynamically import jQuery, just import it with a script tag in the html before your javascript file.
Also, make sure you are using document.ready to make sure your DOM is rendered before executing jQuery:
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
$(document).ready(function(){
$(".ne").hover(function(){
$(this).parent().parent().addClass("newengland");
});
$(".ne").mouseleave(function(){
$(this).parent().parent().addClass("overlay");
$(this).parent().parent().removeClass("newengland");
});
});@import url('https://fonts.googleapis.com/css?family=Oswald:300,400');
body {
font-family: 'Oswald', sans-serif;
background-color: white;
}
.colorado{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 0px;
background-size: cover;
}
.newengland{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 2160px;
background-size: cover;
}
.europe{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 4320px;
background-size: cover;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
font-family: Oswald;
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}<!DOCTYPE html>
<html lang = "en">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js"></script>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#" class="co" onhover = "update()" >co</a>
<a href="#" class="ne">ne</a>
<a href="#" class="eu">eu</a>
<a href="#" class="ab">ab</a>
</div>
</div>
<h2>Temp</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
</body>
</html>answered Jan 19 at 23:53
LaurensLaurens
1,699617
Thank you so much :) that completely worked!
– Zachary Ferretti
Jan 20 at 0:07
The reason I had been dynamically importing it was because just while I was trying to learn what to do I found something that said you needed to have that there but I must have been misreading it. Thanks!
– Zachary Ferretti
Jan 20 at 0:17
add a comment |
0
0
0
No need to dynamically import jQuery, just import it with a script tag in the html before your javascript file.
Also, make sure you are using document.ready to make sure your DOM is rendered before executing jQuery:
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
$(document).ready(function(){
$(".ne").hover(function(){
$(this).parent().parent().addClass("newengland");
});
$(".ne").mouseleave(function(){
$(this).parent().parent().addClass("overlay");
$(this).parent().parent().removeClass("newengland");
});
});@import url('https://fonts.googleapis.com/css?family=Oswald:300,400');
body {
font-family: 'Oswald', sans-serif;
background-color: white;
}
.colorado{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 0px;
background-size: cover;
}
.newengland{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 2160px;
background-size: cover;
}
.europe{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 4320px;
background-size: cover;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
font-family: Oswald;
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}<!DOCTYPE html>
<html lang = "en">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js"></script>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#" class="co" onhover = "update()" >co</a>
<a href="#" class="ne">ne</a>
<a href="#" class="eu">eu</a>
<a href="#" class="ab">ab</a>
</div>
</div>
<h2>Temp</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
</body>
</html>answered Jan 19 at 23:53
LaurensLaurens
1,699617
No need to dynamically import jQuery, just import it with a script tag in the html before your javascript file.
Also, make sure you are using document.ready to make sure your DOM is rendered before executing jQuery:
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
$(document).ready(function(){
$(".ne").hover(function(){
$(this).parent().parent().addClass("newengland");
});
$(".ne").mouseleave(function(){
$(this).parent().parent().addClass("overlay");
$(this).parent().parent().removeClass("newengland");
});
});@import url('https://fonts.googleapis.com/css?family=Oswald:300,400');
body {
font-family: 'Oswald', sans-serif;
background-color: white;
}
.colorado{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 0px;
background-size: cover;
}
.newengland{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 2160px;
background-size: cover;
}
.europe{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 4320px;
background-size: cover;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
font-family: Oswald;
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}<!DOCTYPE html>
<html lang = "en">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js"></script>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#" class="co" onhover = "update()" >co</a>
<a href="#" class="ne">ne</a>
<a href="#" class="eu">eu</a>
<a href="#" class="ab">ab</a>
</div>
</div>
<h2>Temp</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
</body>
</html>function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
$(document).ready(function(){
$(".ne").hover(function(){
$(this).parent().parent().addClass("newengland");
});
$(".ne").mouseleave(function(){
$(this).parent().parent().addClass("overlay");
$(this).parent().parent().removeClass("newengland");
});
});@import url('https://fonts.googleapis.com/css?family=Oswald:300,400');
body {
font-family: 'Oswald', sans-serif;
background-color: white;
}
.colorado{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 0px;
background-size: cover;
}
.newengland{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 2160px;
background-size: cover;
}
.europe{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 4320px;
background-size: cover;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
font-family: Oswald;
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}<!DOCTYPE html>
<html lang = "en">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js"></script>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#" class="co" onhover = "update()" >co</a>
<a href="#" class="ne">ne</a>
<a href="#" class="eu">eu</a>
<a href="#" class="ab">ab</a>
</div>
</div>
<h2>Temp</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
</body>
</html>function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
$(document).ready(function(){
$(".ne").hover(function(){
$(this).parent().parent().addClass("newengland");
});
$(".ne").mouseleave(function(){
$(this).parent().parent().addClass("overlay");
$(this).parent().parent().removeClass("newengland");
});
});@import url('https://fonts.googleapis.com/css?family=Oswald:300,400');
body {
font-family: 'Oswald', sans-serif;
background-color: white;
}
.colorado{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 0px;
background-size: cover;
}
.newengland{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 2160px;
background-size: cover;
}
.europe{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 4320px;
background-size: cover;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
font-family: Oswald;
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}<!DOCTYPE html>
<html lang = "en">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js"></script>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#" class="co" onhover = "update()" >co</a>
<a href="#" class="ne">ne</a>
<a href="#" class="eu">eu</a>
<a href="#" class="ab">ab</a>
</div>
</div>
<h2>Temp</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
</body>
</html>answered Jan 19 at 23:53
LaurensLaurens
1,699617
answered Jan 19 at 23:53
LaurensLaurens
1,699617
answered Jan 19 at 23:53
LaurensLaurens
1,699617
answered Jan 19 at 23:53
LaurensLaurens
1,699617
1,699617
Thank you so much :) that completely worked!
– Zachary Ferretti
Jan 20 at 0:07
The reason I had been dynamically importing it was because just while I was trying to learn what to do I found something that said you needed to have that there but I must have been misreading it. Thanks!
– Zachary Ferretti
Jan 20 at 0:17
add a comment |
Thank you so much :) that completely worked!
– Zachary Ferretti
Jan 20 at 0:07
The reason I had been dynamically importing it was because just while I was trying to learn what to do I found something that said you needed to have that there but I must have been misreading it. Thanks!
– Zachary Ferretti
Jan 20 at 0:17
Thank you so much :) that completely worked!
– Zachary Ferretti
Jan 20 at 0:07
Thank you so much :) that completely worked!
– Zachary Ferretti
Jan 20 at 0:07
The reason I had been dynamically importing it was because just while I was trying to learn what to do I found something that said you needed to have that there but I must have been misreading it. Thanks!
– Zachary Ferretti
Jan 20 at 0:17
The reason I had been dynamically importing it was because just while I was trying to learn what to do I found something that said you needed to have that there but I must have been misreading it. Thanks!
– Zachary Ferretti
Jan 20 at 0:17
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54272342%2fjquery-to-update-parent-class-in-external-file%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Why are you trying to dynamically add a script tag with jQuery through javascript?
– Laurens
Jan 19 at 23:48