when the mouse is entering on the link or hover over the link, the link will get in a bold state and when the mouse is leaving the link it goes back to its normal state, but this is not happening as the toggleClass is not working
Here is the html code
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.bold{
font-weight: bold;
}
.normal{
font-weight: normal;
}
</style>
</head>
<body>
Link
<script src="jquery-3.2.1.js"></script>
<script src="Bind.js"></script>
</body>
</html>
Here is the JS code
$(document).ready(function() {
$('a').bind('mouseenter mouseleave',function(){
$(this).toggleClass('bold');
});
});
$("a").hover(
function() {
$( this ).addClass("bold").removeClass("normal");
}, function() {
$( this ).addClass("normal").removeClass("bold");
}
);
If it is just bold on hover you want to achieve JS is quite overkill just use plain old CSS
a:hover {
font-weight: bold;
}
Looks like works fine:
$(document).ready(function() {
$('a').bind('mouseenter mouseleave',function() {
$(this).toggleClass('bold');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.bold{
font-weight: bold;
}
.normal{
font-weight: normal;
}
</style>
</head>
<body>
Link
<script src="jquery-3.2.1.js"></script>
<script src="Bind.js"></script>
</body>
</html>
But #Maantje is right, if you just want to apply bold on hover, you better just use CSS.
Related
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>
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>
I have this html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="tablezone.css">
<script src="table.js"></script>
</head>
<body>
<div id="divTable"; class="zone"></div>
</body>
</html>
here is javascript code :
var img = document.createElement("img");
img.src="/Tables/table.png";
var src = document.getElementById("divTable");
src.appendChild(img);
here is the css code:
body{
background: url('/Tables/Riviera.jpeg');
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.zone{
background: rgba(200, 200, 200, 0.7);
width: 1000px;
height: 600px;
margin-left: 200px;
}
when I run the code on a web browser the div is displayed with no image inside it.
The script runs before divTable has been added to the DOM, so the line document.getElementById("divTable") returns null. Moving the script tag to the end of the body ensures that the divTable element is in the DOM before getElementById runs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="tablezone.css">
</head>
<body>
<div id="divTable" class="zone"></div>
<script src="table.js"></script>
</body>
</html>
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 am experiencing a little trouble to add a font into a panel for my firefox extension.
Here is a simplified code :
main.js
var panel = panels.Panel({
contentURL: self.data.url("panel.html"),
});
panel.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="font.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
lorem ...
<button>Deactivate</button>
</div>
</body>
</html>
font.css
#font-face {
font-family: 'MyFont';
src: url('MyFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
style.css
.wrapper {
font-family: 'MyFont', sans-serif;
}
Here is the result :
For a comparison, here is the result for chrome :
The font files used are the same.
Do you have any idea what can cause this and how to fix it?
Thanks,