The code is like this:
<!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>
<style>
html {
border: 1px solid black;
padding: 0;
}
body {
width: 100px;
height: 100px;
border: 10px solid red;
padding: 10px;
margin: 10px;
}
div {
width: 100px;
height: 100px;
border: 10px solid black;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>
Why the offsetLeft value of the div element is offsetLeft is 41?
It should be div.leftMargin + body.leftPadding = 20px.
Is this a chrome bug or did I misunderstand offsetLeft?
It does seem as though Chrome and Firefox have interpreted things differently.
From MDN:
The HTMLElement.offsetParent read-only property returns a reference to the element which is the closest (nearest in the containment hierarchy) positioned ancestor element. If there is no positioned ancestor element, the nearest ancestor td, th, table will be returned, or the body if there are no ancestor table elements either.
However, it seems that Chrome is not using body as the closest ancestor in this case but is going back to the html element. If you give the body element a position: relative then Chrome gives a leftOffset of 30.
Here's a snippet to play with - try different box-sizing and different positioning, or not, of body.
<!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>
<style>
* {
box-sizing: border-box;
}
html {
border: 1px solid black;
padding: 0;
}
body {
width: 100px;
height: 100px;
border: 10px solid red;
padding: 10px;
margin: 10px;
}
#div {
width: 100px;
height: 100px;
border: 10px solid black;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body style="position: relative;">
<div id="div"></div>
<script>
alert(document.querySelector('#div').offsetLeft);
</script>
</body>
</html>
So, I realise this is more an extended comment/observations than a full answer but too long for a comment. Someone else can hopefully fully explain and/or find a reference to a potential Chrome bug/different interpretation.
Related
I am trying to find a javascript code for a word searcher in a text (through a form and a search button). Ι have found one which can search many words at the same time, but they need to be in a row. If the words are mixed it doesn't work. What kind of updates should we make?
Please advise
My regards
my code
`
<!DOCTYPE html>
<html lang="en">
<title>Word finder</title>
<head>
<meta charset="UTF-8" />
<title>Text Finder</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght#500&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
outline: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
height: 100vh;
width: 100vw;
overflow: hidden;
}
.content {
width: 80%;
margin: 50px auto;
}
h1 {
text-align: center;
}
.form {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
width: 100%;
max-width: 320px;
height: 50vh;
}
input#keyword {
font-size: 18px;
padding: 10px 20px;
outline: 0;
border: 1px solid #0f62fe;
width: auto;
}
span.highlight {
color: black; background-color:yellow;
text-shadow: 0 1px 1px red;
}
</style>
</head>
<body>
<div class="content">
<p>English texts for beginners to practice reading and comprehension online and for free. Practicing your comprehension
of written English will both improve your vocabulary and understanding of grammar and word order. The texts below are designed
to help you develop while giving you an instant evaluation of your progress.</p>
</div>
<h1>Find the word in paragraph</h1>
<div class="form">
<input type="text" id="keyword" class="form_control" placeholder="Search...">
</div>
<script>
function textFind(keyword) {
if(keyword) {
var content = $("p").text();
var searchText = new RegExp(keyword, "ig");
var matches = content.match(searchText);
if(matches) {
$("p").html(content.replace(searchText, function(match){
return "<span class='highlight'>"+match+"</span>";
}));
}else {
$('.highlight').removeClass('highlight');
}
}else{
$('.highlight').removeClass('highlight');
}
}
$(document).ready(function(){
$('#keyword').on('keyup', function(){
textFind($(this).val());
})
});
</script>
</body>
</html>
`
To search many words mixed
As I don't exactly know what methods you would like to use. I can't fully answer.
But take a look at this js method: https://www.w3schools.com/jsref/jsref_includes.asp
I am a beginner at coding and am self taught. However, I am finding things I am unsure of how to do but are probably really easy to achive but I need some help please.
I have been looking at this website: https://megans.co.uk/
My first question is:- for all the buttons how to they achieve the custom border with the 2 x circles in the corner?
My second question:- For the hero image slider, what would be the code to link the buttons to the image slider?
Sorry if this is very basic.
Thanks
S
For the circle at border of buttons use before and after selector.
<!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>
<style>
div {
padding: 50px;
background: #ccc;
}
.border {
position: relative;
border: 1px solid #ffffff;
background-color: transparent;
padding: 20px;
color: #000;
}
.border::after,
.border::before {
transition: all 500ms;
content: "";
display: block;
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #ffffff;
}
.border::after {
bottom: -3px;
right: -3px;
}
.border::before {
top: -3px;
left: -3px;
}
</style>
<body>
<div>
Book now
</div>
</body>
</html>
and for slider button i think they are using jQuery with trigger like
$('.left-button').click(function() {
MySliderClass.trigger("prev.owl.carousel");
})
$('.right-button').click(function() {
MySliderClass.trigger("next.owl.carousel");
})
I have a test HTML file in which I toggle the class 'hide' with JavaScript but the content does not hide, I can't understand why, what can be done in order to get the content to toggle between hide/show.
function init() {
let button = document.querySelector('#menubutton');
button.onclick = buttonClicked;
}
function buttonClicked(event) {
let content = document.querySelector('.content');
content.classList.toggle('hide');
}
window.addEventListener('load', init);
.hide {
display: none;
}
.menu {
position: relative;
}
.content {
display: flex;
flex-flow: column wrap;
border: 1px solid gray;
padding: 0.25rem;
position: absolute;
}
.color {
background-color: pink;
border: 1px solid gray;
width: 4rem;
height: 4rem;
}
<!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>
<div class="menu">
<div class="title">
<button id="menubutton">Toggle</button>
</div>
<div class="content">
Uno
Dos
Tres
Cuatro
Cinco
</div>
</div>
<div class="color"></div>
</body>
</html>
When you add the hide class, the element has two classes, and they both specify different display properties. The property from .content is taking precedence.
Make your selector more specific so it will take precedence, use .content.hide.
function init() {
let button = document.querySelector('#menubutton');
button.onclick = buttonClicked;
}
function buttonClicked(event) {
let content = document.querySelector('.content');
content.classList.toggle('hide');
}
window.addEventListener('load', init);
.content.hide {
display: none;
}
.menu {
position: relative;
}
.content {
display: flex;
flex-flow: column wrap;
border: 1px solid gray;
padding: 0.25rem;
position: absolute;
}
.color {
background-color: pink;
border: 1px solid gray;
width: 4rem;
height: 4rem;
}
<!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>
<div class="menu">
<div class="title">
<button id="menubutton">Toggle</button>
</div>
<div class="content">
Uno
Dos
Tres
Cuatro
Cinco
</div>
</div>
<div class="color"></div>
</body>
</html>
Another possibility is to use !important in the .hide CSS to make it override other styles.
function init() {
let button = document.querySelector('#menubutton');
button.onclick = buttonClicked;
}
function buttonClicked(event) {
let content = document.querySelector('.content');
content.classList.toggle('hide');
}
window.addEventListener('load', init);
.hide {
display: none !important;
}
.menu {
position: relative;
}
.content {
display: flex;
flex-flow: column wrap;
border: 1px solid gray;
padding: 0.25rem;
position: absolute;
}
.color {
background-color: pink;
border: 1px solid gray;
width: 4rem;
height: 4rem;
}
<!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>
<div class="menu">
<div class="title">
<button id="menubutton">Toggle</button>
</div>
<div class="content">
Uno
Dos
Tres
Cuatro
Cinco
</div>
</div>
<div class="color"></div>
</body>
</html>
When you do toggle, the classes are being toggled this way:
"content"
and
"content hide"
Now, both content and hide set display property. When there's such conflict, the rule that is defined later (either within <style> or in a further stylesheet) takes precedence.
You could see #Barmar's answer which shows !important and .content.hide to force higher precedence.
Or you could just define .hide after .content which gives it higher precedence.
function init() {
let button = document.querySelector('#menubutton');
button.onclick = buttonClicked;
}
function buttonClicked(event) {
let content = document.querySelector('.content');
content.classList.toggle('hide');
}
window.addEventListener('load', init);
.menu {
position: relative;
}
.content {
display: flex;
flex-flow: column wrap;
border: 1px solid gray;
padding: 0.25rem;
position: absolute;
}
.hide {
display: none;
}
.color {
background-color: pink;
border: 1px solid gray;
width: 4rem;
height: 4rem;
}
<!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>
<div class="menu">
<div class="title">
<button id="menubutton">Toggle</button>
</div>
<div class="content">
Uno
Dos
Tres
Cuatro
Cinco
</div>
</div>
<div class="color"></div>
</body>
</html>
I have created a hover effect like whenever you hover on the box you will see a circle (actually it is a div with position: absolute whose clip-path position is controlled by Javascript offset) and when this circle reaches the second paragraph element it jumps to the top.
So I wanna know why it's happening and how to make the circle move consistently throughout the box without giving a jerk or moving to the top.
Here is my code
let container = document.querySelector(".container")
let secondDiv = document.querySelector(".test")
secondDiv.addEventListener("mousemove",function(e){
secondDiv.style.setProperty("--x",e.offsetX + "px")
secondDiv.style.setProperty("--y",e.offsetY + "px")
//console.log(e.offsetX)
})
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.container{
width:70%;
margin: 0 auto;
border:2px solid red;
height:150px;
position:relative;
background: #9F86C0;
color:white;
margin-top: 10%;
}
.container p{
font-size:2.3em;
}
.container .content{
position: absolute;
top:0;
left:0;
width: 100%;
height:150px;
padding:1em;
}
.container .content:nth-child(2){
background: #E0B1CB;
color:white;
clip-path:circle(50px at var(--x) var(--y))
}
<!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>
<div class="container">
<div class="content check">
<p>Hello People hover me</p>
<p>What's going on?</p>
</div>
<div class="content test">
<p>Hello People hover me</p>
<p>What's going on?</p>
</div>
</div>
</body>
</html>
Since there are two paragraphs in place, the mouse movement triggers to choose the paragraph over the parent. You can choose to turn off the trigger using pointer-events: none on the paragraph elements.
let container = document.querySelector(".container")
let secondDiv = document.querySelector(".test")
container.addEventListener("mousemove", function(e) {
secondDiv.style.setProperty("--x", e.offsetX + "px")
secondDiv.style.setProperty("--y", e.offsetY + "px")
//console.log(e.offsetX)
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.container {
width: 70%;
margin: 0 auto;
border: 2px solid red;
height: 150px;
position: relative;
background: #9F86C0;
color: white;
margin-top: 10%;
}
.container p {
font-size: 2.3em;
pointer-events: none; /* Added */
}
.container .content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
padding: 1em;
}
.container .content:nth-child(2) {
background: #E0B1CB;
color: white;
clip-path: circle(50px at var(--x) var(--y))
}
<!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>
<div class="container">
<div class="content check">
<p>Hello People hover me</p>
<p>What's going on?</p>
</div>
<div class="content test">
<p>Hello People hover me</p>
<p>What's going on?</p>
</div>
</div>
</body>
</html>
This question already has answers here:
Scroll to the top of the page using JavaScript?
(49 answers)
Closed 2 years ago.
So I have the following in my HTML page:
and i intentionally made it so that the "overflow" happens which results in the scrollbar at the right.
So i made a button called "Click to scroll up". So what i wanted was that everytime we click that button, the document would immediately scroll all the way up. Which means if I were to navigate all the way down, and click the button, it would bring me all the way up.
I looked up and there's a method "scrollTop" but it doesn't seemed to work. Would appreciate some help on this.
document.getElementById("scrollup").addEventListener("click", scrollUpmost);
function scrollUpmost() {
$(document).scrollTop();
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.container {
border: 1px solid orange;
}
.big_div {
border: 1px solid black;
height: 1200px;
}
#scrollup {
margin-top: 900px;
}
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<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>
<div class="container">
<div class = "big_div">
<button id = "scrollup">Click to scroll up</button>
</div>
</div>
<script src = "test.js"></script>
</body>
</html>
$("#scrollup").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.container {
border: 1px solid orange;
}
.big_div {
border: 1px solid black;
height: 1200px;
}
#scrollup {
margin-top: 900px;
}
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<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>
<div class="container">
<div class = "big_div">
<button id = "scrollup">Click to scroll up</button>
</div>
</div>
<script src = "test.js"></script>
</body>
</html>
Please try this code