I have linked my HTML to jquery but when I run it in Microsoft edge, it outputs
"Help.js:1 Uncaught ReferenceError: $ is not defined
at Help.js:1
(anonymous) # Help.js:
Code:
$(document).ready(function(){
$(".navBar").hover(function(){
$(this).css("border","2px solid black")
})
})
navBar{
display: flex;
position: sticky;
top:0;
padding: 20px;
border: none;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title{
color: black;
font-family: monospace;
}
<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">
<link rel="stylesheet" href="style.css">
<title>A Random Website</title>
</head>
<body>
<script src="style.js"></script>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<div class="navBar">
<div>
<h1 id="Title">SomeRandomWebsite</h1>
</div>
</div>
</body>
</html>
It is because you're using $ before jQuery has loaded.
// Instead of:
//...
<script src="style.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
//...
// Use this:
// ...
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="style.js"></script>
// ...
And move those script tags to the line before the closing </body> tag. i.e:
// ...
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="style.js"></script>
</body>
</html>
Add scripts in your head tag and first load jquery and then your custom style.js file.
Also, add the defer attribute to your script.
Defer attribute when present, specifies that the script is executed when the page has finished parsing. You can read more about defer
$(document).ready(function() {
$(".navBar").hover(function() {
$(this).css("border", "2px solid black")
})
})
.navBar {
display: flex;
position: sticky;
top: 0;
padding: 20px;
border: none;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title {
color: black;
font-family: monospace;
}
<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" />
<title>A Random Website</title>
<script src="https://code.jquery.com/jquery-latest.js" defer></script>
<script src="style.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navBar">
<div>
<h1 id="Title">SomeRandomWebsite</h1>
</div>
</div>
</body>
</html>
Related
I am trying to animate my school webpage with a revealing animation, but things aren't working out how it should be, like me trying to invoke in the anime.js library, I downloaded the file into my workspace, but it still isn't working out how it should be, here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test animation</title>
<link rel="stylesheet" href="style.css">
<script src="index.js"></script>
<script src="libs/anime.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="text-animation">
Welcome to our School Enterprising Group website!
</div>
</body>
</html>
CSS Code:
body {
margin: 0px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: green;
}
.text-animation {
color: lightblue;
font-size: 50px;
font-family: "Passion One", sans-serif;
letter-spacing: 1px;
}
.text-animation, .letter {
display: inline-block;
}
And finally the JavaScript Code
var element = document.getElementsByClassName("text-animation")[0];
//Replace each char with <span class="letter">{char} </span>
element.innerHTML = element.textContent.replace(/\S/g, '<span class="letter">$&</span>');
anime.timeline({loop: true})
.add({
targets: ".text-animation .letter",
scale: [3,1],
opacity: [0,1],
translateZ: 0,
duration: 1000,
easing: "easeOutExpo",
delay: (elem, index) => index*70,
})
.add({
targets: ".text-animation",
opacity: 0,
duration: 1000,
easing: "easeOutExpo"
})
Tried everything I could do but still not working, PLEASE HELP!!!
Add the scripts inside the body tag like this and see if it works.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="text-animation">
Welcome to our School Enterprising Group website!
</div>
<script src="index.js"></script>
<script src="libs/anime.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
Just delete your current HTML file and copy-paste the given code below. It will work.
<!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">
<link rel="stylesheet" href="style.css">
<title>Test-Animation</title>
</head>
<body>
<div class="text-animation">
Welcome to our School Enterprising Group wesite!
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="index.js"></script>
</html>
Can someone please look at this code and explain why this div is not resizable. I have stripped the code down to bare bones, looking for the error. There must be something obvious that I'm unaware of.
Desired Functionality:
The <div> needs to be resizable. It needs to be something a user can drag with a mouse to increase the width and height of the object.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
</head>
<body>
<style>
.Work{
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object{
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
</style>
<div class="Work">
<div class="object"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>>
<script>
$(document).ready(function(){
$(function(){
$(".object").resizable();
});
});
</script>
</body>
</html>
In order to make this work, you need to include jquery-ui.css as well. Also, there is no need to include two different versions of jQuery at the same time, so I will just include v3.5.1.
So your final code should be something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<style>
.Work {
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object {
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
</style>
<div class="Work">
<div class="object"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$(function() {
$(".object").resizable();
});
});
</script>
</body>
</html>
Consider the following code.
$(function() {
$(".object").resizable();
});
.Work {
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object {
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
background-color: #ccc;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="Work">
<div class="object"> </div>
</div>
You had a number of syntax errors and were missing the jQuery UI CSS. Once corrected, the code works as expected.
So I am trying to show some content that's inside of a div but for some reason when I use the chrome debug tools to inspect the code, it's just grayed out.
I can't see anything that's inside the class modal why is that?
#mainDiv {
margin: 10px;
}
.modal-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-content: center;
}
.modal{
background-color: white;
width: 30%;
height: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>EasyModal</title>
<link rel="stylesheet" href="./style/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="mainDiv">
<h1>Easy Modal</h1>
<Button id="modal-btn" type="button" class="btn btn-primary">Buy Now</Button>
</div>
<div class="modal-bg">
<div class="modal">
<h2>Hello World</h2>
<label for="email">Email: </label>
<input type="text">
<button>Subscribe</button>
</div>
</div>
</body>
</html>
This is due to modal class. If you inspect, you'll observe that there is a display: none; property in modal class, which i guess is default bootstrap .modal class.
To solve this, use a different name for .modal class.
So basically like i'm trying to make text appear using buttons but I did everything, I tried changing the id a few times like myFunction() or myButton() but none work. I believe the id has nothing to do with this and repl.it is stupid. If it does work please help me please ok
I've tried using different ids as said before, I tried putting ;s and no ;s and I even tried asking supercommunity but no one answered.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>sunny's website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
.button {
color:white;
background-color:green;
padding:10px 10px;
cursor: pointer;
}
.button:hover {
background-color: black;
}
.button:active {
cursor: help;
}
</style>
</head>
<body>
<script src="script.js"></script>
<h1>welcome<h1>
<button onclick="dingwun()" class="button">click me!</button>
<h2>click the thing to reveal!:</h2>
<p id="vari"></p>
<script>
function dingwun() {
var x = document:getElementById("vari");
x.innerHTML = "coolio";
}
</script>
</body>
</html>
You have a typo:
document:getElementById("vari");
Should be:
document.getElementById("vari");
NOTES:
Don't use .innerHTML when the string doesn't contain any HTML as .innerHTML has performance and security implications. Instead, use .textContent.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>sunny's website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
.button {
color:white;
background-color:green;
padding:10px 10px;
cursor: pointer;
}
.button:hover {
background-color: black;
}
.button:active {
cursor: help;
}
</style>
</head>
<body>
<script src="script.js"></script>
<h1>welcome<h1>
<button onclick="dingwun()" class="button">click me!</button>
<h2>click the thing to reveal!:</h2>
<p id="vari"></p>
<script>
function dingwun() {
var x = document.getElementById("vari");
x.textContent = "coolio";
}
</script>
</body>
</html>
There was a typo in command document:getElementById("vari"), it should be a fullstop at the place of semicolon. document.getElementById("vari")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>sunny's website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
.button {
color:white;
background-color:green;
padding:10px 10px;
cursor: pointer;
}
.button:hover {
background-color: black;
}
.button:active {
cursor: help;
}
</style>
</head>
<body>
<script src="script.js"></script>
<h1>welcome<h1>
<button onclick="dingwun()" class="button">click me!</button>
<h2>click the thing to reveal!:</h2>
<p id="vari"></p>
<script>
function dingwun() {
var x = document.getElementById("vari");
x.innerHTML = "coolio";
}
</script>
</body>
</html>
You actually use : in document:getElementById("vari") you have to use . like document.getElementById("vari"). Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>sunny's website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
.button {
color:white;
background-color:green;
padding:10px 10px;
cursor: pointer;
}
.button:hover {
background-color: black;
}
.button:active {
cursor: help;
}
</style>
</head>
<body>
<script src="script.js"></script>
<h1>welcome<h1>
<button onclick="dingwun()" class="button">click me!</button>
<h2>click the thing to reveal!:</h2>
<p id="vari"></p>
<script>
function dingwun() {
var x = document.getElementById("vari");
x.innerHTML = "coolio";
}
</script>
</body>
</html>
I'm looking for option how to comparison id in draggable&dropabble elements. It's my first journey with jquery.
Actually I have (fragments):
$(".letter").draggable();
$(".simpleSlot").droppable({
drop: function( event, ui ) {
var idDrag = ui.draggable.attr("id");
var idDrop = $this.attr("id");
$("#TEST").text("idDrag:" + idDrag + "; idDrop:" + idDrop);
if(idDrag == idDrop){ alert("Done!"); }
}
});
Droppable element:
var letter = $("<div class=\"letter\" id=\""+divId+"\"></div>").text(splitedWord[i]);
$("#divId").css({
left: positionX, top: positionY
});
$("#mixedWord").append(letter);
Draggable element is generated the same way.
And my css for droppable:
.letter{
border: 2px solid;
border-radius: 25px;
width: 50px;
height: 50px;
font-size: 30px;
text-align: center;
position: absolute;
}
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="js/flipclock/libs/prefixfree.min.js"></script>
<script src="js/flipclock/flipclock.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
</head>
<body>
<div id="area">
<div id="time">Time:</div>
<div id="mixedWord"><!--here goes random word as simple letters in simple divs--> </div>
<div id="slots"></div>
<div id="height"></div>
<div id="width"></div>
</div>
</body>
MY PROBLEMS:
Draggable works. But when I drop something on droppable element - I can't move it more. It cannot be that.
It doesn't change #TEST - so it means drop doesn't work. Why?
And I don't have alert.