how to get exact content height inside the div using javascript? - javascript

I am trying to get exact content height inside the div .I am able to get exact value when there is no image inside the container . but if there is an image inside it give wrong result why ?
I am using clientHeight and offsetHeight both gives wrong output.
here is my code
https://codesandbox.io/s/cold-browser-dxj51?file=/index.html:907-919
<!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>Static Template</title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
padding: 20px;
width: 200px;
background-color: #eeeeee;
}
.logo img {
width: 100%;
}
.logo {
padding-bottom: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="logo">
<img src="1.png" />
</div>
<div class="abc">
This is a static template, there is no bundler or bundling involved!
</div>
</div>
<script>
console.log(document.querySelector(".container").clientHeight);
console.log(document.querySelector(".container").offsetHeight);
</script>
</body>
</html>
Expected output : 154px+ 20px+20px =(194px)
myoutput : 142px

The problem is that your javascript is not waiting the image's full load before checking its height. You can use the event listener "load" to succesfully fire the script you want, once dependent resources have finished loading:
window.addEventListener("load", event => {
console.log(document.querySelector(".container").clientHeight);
console.log(document.querySelector(".container").offsetHeight);
});
The code above will give you your desired output.

Related

Window.showDirectoryPicker() not working in Google Chrome 107

I've read about Window.showDirectoryPicker() here and it should be supported by Google Chrome 107, so I don't understand why I'm not seeing a window popup to select a directory!
const butDir = document.getElementById('butDirectory');
butDir.addEventListener('click', async () => {
const dirHandle = await window.showDirectoryPicker();
for await (const entry of dirHandle.values()) {
console.log(entry.kind, entry.name);
}
});
body {
background: #6e28d9;
padding: 0 24px;
margin: 0;
height: 100vh;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<h1>Hi friend, try edit me!</h1>
<p>Just some text</p>
<input type="button" id="butDirectory" value="Open Directory">
</body>
<script src="src/script.js"></script>
</html>
Sorry! It's actually working, but it needs to be opened in its own tab entirely, i.e. not in JSFiddle!

Add event listener in webview.evaluateJavascript() function in android

i am trying to run script after page load finish in android web view to add clickevent on button
var btn = document.getElementById("btn2");
document.getElementById("btn2").addEventListener("click", myFunction);
function myFunction() {
AndroidInterface.showToast2();
window.console.log("inside ");
}
This is my html file code
<!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, maximum-scale=1">
<title>Hello</title>
<style>
body, html {
height: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
color: #F89821;
background-color: #ffffff;
padding: 20px;
margin-bottom: 100px;
}
</style>
</head>
<body>
<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
<input type="button" id="btn2" value="Say hello2" />
<br/><br/>
<input type="button" value="Show Version" onClick="showVersion('called within the html')" />
<br/><br/>
<p id="version"></p>
<script type="text/javascript">
window.showAndroidToast =
function (toast) {
AndroidInterface.showToast(toast);
}
<!-- Getting value from Android -->
function showVersion(msg) {
var myVar = AndroidInterface.getAndroidVersion();
document.getElementById("version").innerHTML = msg + " You are running API Version " + myVar;
}
</script>
</body>
</html>
in console log i am getting this error
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at :6:38
Which i believe document.getElementById() not able to find element.

JavaScript addEventListener on multiple element with event delegation

I want to use addEventListener on multiple element with event delegation.
What I want is add click event to .node including dynamic element.
I've tried code below, but target is different when I click .title, .image, or .subtitle.
So is there any way to get .node element ignoring hierarchy?
Thanks in advance :)
document.querySelector(".nodes").addEventListener("click", function (e) {
var target = e.target;
if (target.classList.contains("node")) {
alert("node");
}
});
.node {
width: 100px;
height: 100px;
}
.image {
width: 100px;
height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="nodes">
<div class="node">
<div class="image"></div>
<div class="title">title <span class="subtitle">123</span></div>
</div>
<div class="node">
<div class="image"></div>
<div class="title">title <span class="subtitle">456</span></div>
</div>
</div>
</body>
</html>
If you really want to know whether one of the parent element in your DOM structure is of class node, then you can make use of closest(selector). In the following, we are changing the style of the node if it exists :-
document.querySelector(".nodes").addEventListener("click", function (e) {
var target = e.target;
const node = target.closest(".node");
if (node) {
node.style.background = 'green';
}
});
.node {
width: 100px;
height:100px;
}
.image {
width: 100px;
height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="nodes">
<div class="node">
<div class="image"></div>
<div class="title">title <span class="subtitle">123</span></div>
</div>
<div class="node">
<div class="image"></div>
<div class="title">title <span class="subtitle">456</span></div>
</div>
</div>
</body>
</html>

Images not showing on mobile device but showing on desktop, using PhoneGap

I am doing a project for college but having trouble with images displaying on the mobile device.
Desktop screenshot
So the image in the background displays on the desktop as shown above. and below is the mobile application with no background loading.
mobile screenshot
This is my code. My image location is correct seeing as the desktop loads it and i got the style code from another stack overflow answer but it hasn't helped.
<!DOCTYPE html>
<html>
<style>
#bg {
background: url(images/logo.jpg) repeat scroll 50% 0px / cover transparent;
background-image: url(images/logo.jpg);
width: 400px;
height: 400px;
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,
user-scalable=yes, width=device-width">
<title>ITCOA</title>
</head>
<div id="bg">
<body>
<h1 style="text-align:center;margin-top:80px"> Welcome to IT Carlow Orientation App </h1>
<div id="navcontainer" style="margin-left:150px;margin-top:100px;">
<button type="button" id="findPathButton"onclick="parent.location='findPlace.html'">Find a place!</button><br><br>
<button type="button" id="showMapsButton" onclick="parent.location='showMaps.html'">Show Maps!</button>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
Thanks for any help.
Updated code
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">
<title>ITCOA</title>
<script src="cordova.js" defer></script>
<style>
#bg {
background: url('images/logo.jpg') center center / cover no-repeat;
width: 400px;
height: 400px;
}
button {
margin: 15px 0 15px 0;
display: block;
}
</style>
</head>
<body>
<div id="bg">
<h1 style="text-align:center;margin-top:80px"> Welcome to IT Carlow
Orientation App </h1>
<div id="navcontainer" style="margin-left:150px;margin-top:100px;">
<button type="button" id="findPathButton"
onclick="parent.location='findPlace.html'">Find a place!</button>
<button type="button" id="showMapsButton"
onclick="parent.location='showMaps.html'">Show Maps!</button>
</div>
</div>
First of all <style> tag should be in your <head>. <div id="bg"> is above html body element. Why #bg id has 2 background statements? background: url(images/logo.jpg) repeat scroll 50% 0px / cover transparent; and
background-image: url(images/logo.jpg); ? Please at least read W3s. Other thing is that your code is overall terrible. I advice to stop using inline styling elements and also stop using inline javaScript. You can add <script src="cordova.js" defer></script> to your <head> with defer flag. Consider adding css file to your project and add all of your styles there. Also since you already have js file you can put your click behavior there by addEventListener() Method.
Update:
jsfiddle
Update2:

JavaScript - document.write not working

I am trying to print an h3 that has an id of question, but it won't work.
function questions() {
var question = document.getElementById("question");
document.write(question);
}
questions();
body {
font-family: Arial;
}
.header {
padding-top: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h1>Edu Game 1</h1>
<h3>What is<h3 id="question">1+1?</h3></h3>
<input type = "text" id="ansBox" />
</div>
<script src="scripts.js"></script>
</body>
</html>
As you can see, the result is fine until it reaches the JavaScript. How can I fix this? I know document.write isn't the best thing to use to print stuff, but I am just testing something.
document.getElementById("question") returns a DOM object (as you saw) and you want to access the HTML within it, so use the innerHTML property to get it with document.getElementById("question").innerHTML. So technically there's nothing wrong with document.write; it's doing its job. You're just not selecting the content of the element.
function questions() {
var question = document.getElementById("question").innerHTML;
document.write(question);
}
questions();
body {
font-family: Arial;
}
.header {
padding-top: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h1>Edu Game 1</h1>
<h3>What is<h3 id="question">1+1?</h3></h3>
<input type = "text" id="ansBox" />
</div>
<script src="scripts.js"></script>
</body>
</html>
question is an object of type HTMLHeadingElement. You are writing the string representation of that object, which is [object HTMLHeadingElement].
You are either interested in the raw HTML used to generate that element (question.outerHTML) or its contents (question.innerHTML).
Try waiting for dom content to load by placing your script in here:
document.addEventListener("DOMContentLoaded", function() {
// code...
});
Set question with innerHTML
var question = document.getElementById("question").innerHTML;
Also, dont nest the tags, use a span instead:
<h3>What is<span id="question">1+1?</span></h3>
You are trying to write an HTMLheading object into the page.
Use the .outerHTML property for this to work.
function questions() {
var question = document.getElementById("question").outerHTML;
document.write(question);
}
questions();
body {
font-family: Arial;
}
.header {
padding-top: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h1>Edu Game 1</h1>
<h3>What is<h3 id="question">1+1?</h3></h3>
<input type = "text" id="ansBox" />
</div>
<script src="scripts.js"></script>
</body>
</html>

Categories