I want to know .mydiv how far from the top of the body and for this purpose I used the code getBoundingClientRect() but it doesn't work, this is my 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="style.css">
</head>
<body>
<h1>Elemet.GetBoundingClientRect();</h1>
<div class="myDiv">blah balh balh</div>
<script type="text/javascript">
var div = document.querySelector(".myDiv");
var rect = div.getBoundingClientRect();
console.log(rect);
</script>
</body>
</html>`
This is the result :
`DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0, …}
bottom: 0
height: 0
left: 0
right: 0
top: 0
width: 0
x: 0
y: 0
__proto__: DOMRect`
The result only gives me zero numbers
how Can I solve this problem please help ???!
It is working. Try to remove the css and test again.
<h1>Elemet.GetBoundingClientRect();</h1>
<div class="myDiv">blah balh balh</div>
<script type="text/javascript">
var div = document.querySelector(".myDiv");
var rect = div.getBoundingClientRect();
console.log(rect);
</script>
Related
This is the task that I am stuck with:
Exercise 4
Here are some examples of colors as they are used in CSS:
Red: hsl (0, 100%, 50%)
Green: hsl (100, 100%, 50%)
Blue: hsl (250, 100%, 50%)
Note that only the first number changes between these tones.
You should use this to create round elements with random background colors. In addition, use what you have learned about positioning to place the elements in random positions when you click on the circle.
This is my code so far for the task:
<!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">
<title>Document</title>
</head>
<body>
<style>
<!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">
<title>Document</title>
</head>
<body>
<style>
body{
height:100%;
}
div {
border-radius: 50%;
width: 100px;
height: 100px;
}
</style>
<script>
let bodyEl=document.querySelector("body");
let divEl=document.createElement("div");
divEl.style.backgroundColor=hsl(Math.random()*6);
bodyEl.appendChild(divEl);
</script>
</body>
</html>
1) backgroundColor needs a string value. You are passing value of type number
divEl.style.backgroundColor=hsl(Math.random()*6);
If you have opened the console, then you would have gotten the error as:
Uncaught ReferenceError: hsl is not defined
So you can use:
const hslValue = `hsl(
${getRandomValue(365)},
${getRandomValue(100)}%,
${getRandomValue(100)}%
)`
divEl.style.backgroundColor = hslValue;
let bodyEl = document.querySelector("body");
let divEl = document.createElement("div");
const getRandomValue = upto => Math.floor(Math.random() * (upto + 1));
const hslValue = `hsl(
${getRandomValue(365)},
${getRandomValue(100)}%,
${getRandomValue(100)}%
)`
divEl.style.backgroundColor = hslValue;
bodyEl.appendChild(divEl);
div {
border-radius: 50%;
width: 100px;
height: 100px;
}
Click to see the circle in action, enjoy :)
<!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">
<title>Document</title>
</head>
<body>
<style>
body {
height: 100%;
}
div {
border-radius: 50%;
position: absolute;
width: 100px;
height: 100px;
}
</style>
<script>
let bodyEl = document.querySelector("body");
let divEl = document.createElement("div");
divEl.style.backgroundColor = `hsl(${(Math.random() * 100)}, 100%, 50%)`;
bodyEl.appendChild(divEl);
divEl.addEventListener('click', function() {
this.style.backgroundColor = `hsl(${(Math.random() * 100)}, 100%, 50%)`;
this.style.top = `${parseInt(Math.random() * 100)}px`
this.style.left = `${parseInt(Math.random() * 100)}px`
})
console.log(`hsl(${(Math.random() * 100)}, 100%, 50%)`);
</script>
</body>
</html>
i am trying to make 1 counter with the value 0.05 when page scroll it should increase like this
0.10, 0.15, 0.20** and so on and when i scroll top again it should be decrease in same way like this
0.15, 0.10, 0.05** and when the screen touch top it should be 0
how to achieve this with jquery
var counter = 0
$(window).scroll(function(){
var a = $(this).scrollTop();
var counterIncrement = counter += 0.05;
$("h1").text(counterIncrement.toFixed(2));
})
h1{
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
}
div{
height: 1500px;
}
<!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">
<title>Document</title>
</head>
<body>
<h1>0</h1>
<div></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
You need to decrease the value when the scroll is up and increase the value when the scroll is down.
To identify a variable that holds the value of the last scroll point, you must use the scroll down if the new value is larger and the scroll up if the new value is smaller.
var counter = 0;
var lastPointScroll = 0;
$(window).scroll(function(){
var a = $(this).scrollTop();
if(a == 0)
var counterIncrement = counter = 0;
else if(a > lastPointScroll)
var counterIncrement = counter += 0.05;
else
var counterIncrement = counter -= 0.05;
lastPointScroll = a;
$("h1").text(counterIncrement.toFixed(2));
})
h1{
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
}
div{
height: 1500px;
}
<!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">
<title>Document</title>
</head>
<body>
<h1>0</h1>
<div></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
This question already has answers here:
Difference between var and this in Javascript functions?
(2 answers)
Closed 2 years ago.
I would like to create a new element with CSS properties every time I call the squareGenerator() function, but it doesn't do that.
function squareGenerator() {
var newSquare = document.createElement("div");
this.newSquare.css({"background-color": "yellow", "height": "200px", "width": "200px"});
$('.father').append(newSquare);
}
squareGenerator()
body{
padding: 0;
margin: 0;
}
.father{
width: 100%;
height: 1000px;
background-color: lightblue;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>NovaNote</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="father">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="function.js" charset="utf-8"></script>
</body>
</html>
Your using jQuery so do this:
var newSquare = $("<div/>");
newSquare.css({"background-color": "yellow", "height": "200px", "width": "200px"});
In order to apply the .css() function, which is a jQuery function, you need to be operating on a jQuery object. Note in my example: $(newSquare).css().
function squareGenerator() {
var newSquare = document.createElement("div");
$(newSquare).css({"background-color": "yellow", "height": "200px", "width": "200px"});
$('.father').append(newSquare);
}
squareGenerator()
body{
padding: 0;
margin: 0;
}
.father{
width: 100%;
height: 1000px;
background-color: lightblue;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>NovaNote</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="father">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="function.js" charset="utf-8"></script>
</body>
</html>
I am having trouble with scroll using if statements.
How can I fix it and any helpful tips will be much appreciated.
if (window.scrollY == '100px') {
document.body.style.backgroundColor = "red";
}
div {
position: absolute;
top: 200%;
font-size: 5vw;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div> hi </div>
</body>
</html>
You need to listen on scroll event first.
window.scrollY value is integer.
window.addEventListener("scroll", function() {
if (window.scrollY >= 100) {
document.body.style.backgroundColor = "red";
}
});
div {
position: absolute;
top: 200%;
font-size: 5vw;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div> hi </div>
</body>
</html>
The condition needs to be >= 100, and you need to listen to the scroll event of the window.
Here is a working snippet:
window.addEventListener("scroll", function() {
if (window.scrollY >= 100) {
document.body.style.backgroundColor = "red";
}
});
.container {
position: absolute;
top: 200%;
font-size: 2rem;
}
<div class="container">hi</div>
You can do it as follows -
window.addEventListener("scroll", function() {
if (window.scrollY >= 100) {
document.body.style.backgroundColor = "red";
}else{
document.body.style.backgroundColor = "white";
}
});
*{
transition-duration: 1s;
}
div {
position: absolute;
top: 200%;
font-size: 5vw;
}
<div> hi </div>
In your code, you had written the condition to be window.scrollY == 100px, so it was not working. But once you modify the condition, the code will work as expected.
Also, the else statement or transition effect are not needed, just added them for nice effect.
I draw a text along a path with Keith Wood's jQuery SVG plugin. How can I get a length of the path with JS?
From the SVG specification, use path.getTotalLength().
Here's a minimal example of how to use this with the jquery-svg library:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery SVG Basics</title>
<style type="text/css">
#import "jquery.svg.css";
#mydiv { width: 400px; height: 300px; border: 1px solid #484; }
</style>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="jquery.svg.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#mydiv").svg({
onLoad : function(svg){
var path = svg.createPath();
var pathNode = svg.path(path.move(100, 200).curveC([[200,
100, 300, 0, 400, 100], [500, 200, 600, 300, 700,
200], [800, 100, 900, 100, 900, 100]]));
console.log(pathNode.getTotalLength());
}
});
});
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>