Window.showDirectoryPicker() not working in Google Chrome 107 - javascript

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!

Related

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.

how to get jstree instance from iframe source?

I have prepare 2 tree view in separate iframe using jstree. The right tree view should control the left tree view. When user click one one the list in right tree view, the respective item folder will open and selected on left tree view. I can make it happen using div in single page. I control the left tree view using instance of left tree view in right jstree div var instance = $('#left').jstree(true);.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/themes/default/style.min.css" />
<meta charset="UTF-8">
<title>jstree basic demos</title>
<style>
html { margin:0; padding:0; font-size:62.5%; }
body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; }
h1 { font-size:1.8em; }
.demo { overflow:auto; border:1px solid silver; min-height:100px; }
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 1px solid black;
}
.flex-child:first-child {
margin-right: 20px;
}
</style>
</head>
<body>
<h1>Tree Menu</h1>
<!-- <button id="evts_button">select node with id 1</button> <em>either click the button or a node in the tree</em>-->
<div class="flex-container">
<div class="flex-child magenta">
<div id="left" class="demo">
</div>
</div>
<div class="flex-child green">
<div id="List">
</div>
</div>
</div>
<script>
$('#left')
.jstree({
'core' : {
'multiple' : false,
'data' : [
{
"text":"A","id":"A","children":[
{"text":"Australia","id":"Aus"},
{"text":"America","id":"Ame"}
]
},
{
"text":"B","id":"B","children":[
{"text":"Beirut","id":"Bei"},
{"text":"Brunei","id":"Bru"}
]
}
]
}
});
$('#List')
.on("changed.jstree", function(e,data){
if(data.selected.length)
{
$("#left").jstree("close_all");
//console.log(data.selected);
selected_node=data.selected[0];//list-j2_1
console.log(selected_node);
var tm_id = selected_node.replace("j2_", "");//tree
var instance = $('#left').jstree(true);
instance.deselect_all();
instance.select_node(tm_id);
$("#left").jstree("open_all", tm_id);
}
})
.jstree({
'core':{
'multiple':false,
'data':[{"text":"Australia", "id":"Aus"},
{"text":"America", "id":"Ame"},
{"text":"Beirut","id":"Bei"},
{"text":"Brunei", "id":"Bru"}]
}
})
</script>
</body>
</html>
When using iframe, I could not get the instance of left tree view. I want to get left tree view instance in index-10_2.html(right iframe source) to select and open respective node. I had use left=$("#1").contents(); to get the iframe content, var instance=left.find('#left'); to get instance, and instance.select_node(tm_id); to select node. But, error instance.select_node is not a function shown.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree-4a77e59/dist/themes/default/style.min.css" />
</head>
<body>
<iframe src="index-10_1.html" id="1"></iframe>
<iframe src="index-10_2.html" id="2"></iframe>
</body>
</html>
index-10_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree-4a77e59/dist/themes/default/style.min.css" />
</head>
<body>
<div class="content demo" id="left"></div>
<script>
$('#left')
.jstree({
'core' : {
'multiple' : false,
'data' : [
{
"text":"A","id":"A","children":[
{"text":"Australia","id":"Aus"},
{"text":"America","id":"Ame"}
]
},
{
"text":"B","id":"B","children":[
{"text":"Beirut","id":"Bei"},
{"text":"Brunei","id":"Bru"}
]
}
]
}
});
</script>
</body>
</html>
index-10_2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree-4a77e59/dist/themes/default/style.min.css" />
</head>
<body>
<div class="content" id="right"></div>
<script>
$('#right')
.on("changed.jstree", function(e,data){
if(data.selected.length)
{
$("#left").jstree("close_all");
console.log(data.selected);
selected_node=data.selected[0];//list-j2_1
console.log(selected_node);
var tm_id = selected_node.replace("j2_", "");//tree
left=$("#1").contents().find('#left');
instance=left.jstree(true);
instance.select_node(tm_id);
$("#left").jstree("open_all", tm_id);
}
})
.jstree({
'core':{
'multiple':false,
'data':[{"text":"Australia", "id":"Aus"},
{"text":"America", "id":"Ame"},
{"text":"Beirut","id":"Bei"},
{"text":"Brunei", "id":"Bru"}]
}
})
</script>
</body>
</html>
I had used document.getElementById('1').contentWindow.jQuery('#left').jstree(true); to get instance from iframe with id='1'. In order to listen to right iframe(with id='2') if any menu has been clicked, I used document.getElementById('2').contentWindow.jQuery('#right').on("changed.jstree",function(e,data){}). I get the instance of left iframe within this function. By using this instance, I has deselect previous selection, select current selection, and open children of selected menu.
index-12.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates and open the template
in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree-4a77e59/dist/themes/default/style.min.css" />
</head>
<body>
<iframe src="index-12_1.html" id="1"></iframe>
<iframe src="index-12_2.html" id="2"></iframe>
<script>
sec_frm =document.getElementById('2');//second frame
sec_frm.addEventListener("load",function(){//wait for second frame to load
fst_frm_jstinst=document.getElementById('1').contentWindow.jQuery('#left').jstree(true);//first frame jstree instance
document.getElementById('2').contentWindow.jQuery('#right').on("changed.jstree",function(e,data){
if(data.selected.length){
//close all menu in first frame
document.getElementById('1').contentWindow.jQuery('#left').jstree("close_all");
//get selected menu id from second frame
selected_node=data.selected[0];
//deselect any selected menu on first frame
fst_frm_jstinst.deselect_all();
//select node(country)
fst_frm_jstinst.select_node(selected_node);
document.getElementById('1').contentWindow.jQuery('#left').jstree("open_all",selected_node);
//console.log(selected_node);
}
})
})
</script>
</body>
</html>
index-12_1
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree 4a77e59/dist/themes/default/style.min.css"/>
</head>
<body>
<div class="content demo" id="left"></div>
<script>
$('#left')
.jstree({
'core' : {
'multiple' : false,
'data' : [
{
"text":"A","id":"A","children":[
{"text":"Australia","id":"Aus"},
{"text":"America","id":"Ame"}
]
},
{
"text":"B","id":"B","children":[
{"text":"Beirut","id":"Bei"},
{"text":"Brunei","id":"Bru"}
]
}
]
}
});
</script>
</body>
</html>
index-12_2.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree-4a77e59/dist/themes/default/style.min.css" />
</head>
<body>
<div class="content" id="right"></div>
<script>
$('#right')
.jstree({
'core':{
'multiple':false,
'data':[{"text":"Australia", "id":"Aus"},
{"text":"America", "id":"Ame"},
{"text":"Beirut","id":"Bei"},
{"text":"Brunei", "id":"Bru"}]
}
})
</script>
</body>
</html>

Print or Export Cesium Map Loading Division

It prints with this code but, the code is actually unable to get contents of the div where the map actually loads. I'm using toDataURL() in order to fulfill the need.
My HTML is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<script src="https://cesiumjs.org/releases/1.54/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.54/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script href="script.js" type="text/javascript"></script>
</head>
<body>
<div id="cesiumContainer">
</div>
<button id="printVoucher" onclick="print();">Print</button>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYTAwMTYzZi1kOGFjLTQyMDQtYjI0Ny03MWQ5ZTM1OGE2NjYiLCJpZCI6Nzc4Niwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU1MDQ3NDQ4OX0.LRLrZO7tSId3sR7xYPOxkS1ODfaQuyQygD9mwWQ1TGQ';
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
My CSS is as follows:
body
{
background-color: wheat;
}
canvas
{
border:1px solid red;
width: 100%;
height: 100px;
}
#cesiumContainer
{
width: 100%;
height: 500px;
}
My JavaScript is as follows:
$(function()
{
var viewer = document.getElementById("cesiumContainer");
function print_voucher()
{
var win = window.open();
win.document.write("<br><img src='"+viewer.toDataURL()+"'/>");
win.print();
win.location.reload();
}
$("#printVoucher").click(function(){ print_voucher(); });
});
See the Output what I get with this above code.
Click here to visit the GitHub Project Link.
The problem was because by the time you're taking the screenshot, the WebGL drawing buffer has already been swapped out. This happens for performance reasons, you can read more about it here:
https://stackoverflow.com/a/32641456/1278023
The issue has been fixed by changing some lines of codes as follows:
var viewer = new Cesium.Viewer('cesiumContainer', {
contextOptions: {
webgl: {
preserveDrawingBuffer: true
}
}
});
Here is the full set of HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<script src="https://cesiumjs.org/releases/1.54/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.54/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script href="script.js" type="text/javascript"></script>
</head>
<body>
<div id="cesiumContainer">
</div>
<button id="printVoucher" onclick="print();">Print</button>
<script>
Cesium.Ion.defaultAccessToken = 'XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX';
var viewer = new Cesium.Viewer('cesiumContainer', {
contextOptions: {
webgl: {
preserveDrawingBuffer: true
}
}
});
</script>
</body>
</html>
Find the updated GitHub project Link

how to render array of object in html element using javascript using map function ? Pure Javascript

how to render an array of object in HTML element using javascript using map function (without React).
So, that when insert an object in user detail it should create a card for the user dynamically.
Output
var Usrdata = document.querySelector('.box');
var userDetail = [
{name:"sunil",age:"24",place:"delhi",avatar:"./image/abc.jpg",country:"India"},
{name:"sujan",age:"22",place:"assam,",avatar:"./image/abc.jpg",country:"India"},
{name:"abishek",age:"26",place:"kolkata",avatar:"./image/abc.jpg",country:"India"},
{name:"chiranjeev",age:"20",place:"bangalore",avatar:"./image/abc.jpg",country:"India"},
]
userDetail.map(user=>{
console.log (
user.name,
user.age,
user.place,
user.country,
user.avatar
)
})
*{
margin: 0;
padding: 0;
}
.box{
margin: 10px;
height: 250px;
background-color: #fff;
}
<!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>Testing</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="customCard">
<div class="row">
<div id="test1" class="col-sm-4 box">
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Use the map to create DOM and attach to the test1 element:
var Usrdata = document.querySelector('.box');
var userDetail = [
{name:"sunil",age:"24",place:"delhi",avatar:"./image/abc.jpg",country:"India"},
{name:"sujan",age:"22",place:"assam,",avatar:"./image/abc.jpg",country:"India"},
{name:"abishek",age:"26",place:"kolkata",avatar:"./image/abc.jpg",country:"India"},
{name:"chiranjeev",age:"20",place:"bangalore",avatar:"./image/abc.jpg",country:"India"},
]
document.getElementById('test1').innerHTML = userDetail.map(user =>
`<div>
<div>Name: ${user.name}</div>
<div>Age: ${user.age}</div>
<div>Place: ${user.place}</div>
<div>Country: ${user.country}</div>
<div>Avatar: ${user.avatar}</div>
</div>`
).join('')
*{
margin: 0;
padding: 0;
}
.box{
margin: 10px;
height: 250px;
background-color: #fff;
}
<!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>Testing</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="customCard">
<div class="row">
<div id="test1" class="col-sm-4 box">
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

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