How do I append multiple x3d elements in javascript via loop? Seems like x3d can be appended successfully, but the elements below it only show up for the first x3d.
Thank you for the help in advance!
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://x3dom.org/download/dev/x3dom-full.js"></script>
<script src="d3.v5.min.js"></script>
<script src="d3-x3dom-axis.min.js"></script>
<link rel="stylesheet" href="https://x3dom.org/download/dev/x3dom.css" />
</head>
<body>
<script>
var width = 800, height = 400;
var years= ['2017','2018','2019','2020','2021','2022'];
var clusters= [3,4,5,6,7,8,9,10];
for(year of years){
for(cluster of clusters){
id = year+'-'+cluster
var x3d = d3.select("body").append("x3d")
.attr('id',id)
.attr("width", width + 'px')
.attr("height", height +'px' )
}
}
</script>
</body>
DOM screenshot
Related
I am trying to modify the height of a div element in a Javascript function. The height is initially
set to 50px in the style section. Neither of the attempts shown below have any effect. I would appreciate your help on this. Thanks.
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
window.onload = function () {
setHeight();
}
function setHeight() {
var testElement = document.getElementById("test");
testElement.style.offsetHeight = 200;
testElement.offsetHeight = 200;
}
</script>
</head>
<body>
<div id="test" style="height:50px;border-style:solid;border-width:thin;">
<p>Some text</p>
</div>
</body>
</html>
Just set style.height
testElement.style.height = '200px';
<content>
<ScrollContainer width="100%" horizontal="true" vertical="true" focusable="true">
<HBox id="idHBox" width="99.9%"/>
</ScrollContainer>
</content>
this is my code in the XML site , HBox is a Parent element includes a SVG element
but the Problem that it just show the vertical scrollbar but the horizontal not
What is the absolute size of your Image?
Here is a small example.
If you change the Image width, the horizontal scrollbar appears/disappears (e.g. width: "100%")
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"></script>
<script>
var app = new sap.m.App();
var oImage = new sap.m.Image({
width: "3000px",
height: "300px",
src:"https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/alphachannel.svg"
});
var oHbox = new sap.m.HBox({
width: "100%",
items : [oImage]
});
var oScroll1 = new sap.m.ScrollContainer({
width:"100%",
focusable:true,
vertical:true,
horizontal:true,
content : [oHbox]
});
var page = new sap.m.Page({
content : [oScroll1]
});
app.addPage(page);
app.placeAt('content')
</script>
</head>
<body id="content" class="sapUiBody">
</body>
</html>
I'm trying to create an iframe to simulate an iphone screen but i'm having problems to make font size be proportional to iframe size ( height x width ). I've put 320x480 just for tests.
Anyone have an idea how can i do this trick?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<script type="text/javascript">
function makeIframe() {
var content = "<!DOCTYPE html><html lang='en'><head><meta name=" +
+ "'viewport' content='width=320, height=480, initial-scale=0.5,"
+ "maximum-scale=0.5," +
" minimum-scale=0.5, user-scalable=no' /></head><body>" +
"<h1>Test</h1></body></html>";
alert('content >> ' + content);
var iframe = document.createElement("iframe");
// iphone 4
iframe.height = 480;
iframe.width = 320;
document.body.appendChild(iframe);
iframe.contentWindow.document.open('text/htmlreplace');
iframe.contentWindow.document.write(content);
iframe.contentWindow.document.close();
alert('2');
}
</script>
</head>
<body>
<div id="body"></div>
<input type="button" onclick="makeIframe()" value="Make" />
</body>
</html>
Maybe you could try to use em in your body tag:
<body style='font-size: 0.2em'>
then all the font-size inside body tag would be small.
JS Fiddle link: http://jsfiddle.net/nq0hdxae/
I've got 3 files
file 1: index.html
<!DOCTYPE html>
<html>
<head>
<LINK href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="bounce.js"></script>
<title>Bouncing ball</title>
</head>
<body>
<div id='ball'></div>
</body>
</html>
file 2: bounce.js
var ball = document.getElementById("ball");
var nx = 0;
var ny = 0;
setInterval(loop, 1000 / 30);
function loop() {
nx++;
ny++;
ball.style.left = nx;
ball.style.top = ny;
}
file 3: style.css
#ball {
position: absolute;
border-radius: 50px;
width: 50px;
height: 50px;
background: black;
}
i'm load the .css and the .js in the html file.
Now i'm trying to get te div "ball" and i want to do something with it. In this case, i want to let it bounce agains the borders of the browser. But the point is, i'm getting errors.
Uncaught TypeError: Cannot read property 'style' of null
The bonce.js can not get the elment ball. Why not? What am i doing wrong?
You are trying to get the element before it's loaded in the DOM. Do this:
<!DOCTYPE html>
<html>
<head>
<LINK href="style.css" rel="stylesheet" type="text/css">
<title>Bouncing ball</title>
</head>
<body>
<div id='ball'></div>
<script type="text/javascript" src="bounce.js"></script>
</body>
</html>
It's a good practice to include all your JavaScript at the bottom, so it doesn't block the page while downloading. And it will make sure you don't have any errors like this.
That's because your code is executed before the DOM is ready. There is no element with this id at this time.
Put your code inside a onload callback :
window.onload = function(){
var ball = document.getElementById("ball");
var nx = 0;
var ny = 0;
setInterval(loop, 1000 / 30);
function loop() {
nx++;
ny++;
ball.style.left = nx;
ball.style.top = ny;
}
};
Move your script to the end of the page or wrap it in an onload event. You're executing it before the element has loaded.
<!DOCTYPE html>
<html>
<head>
<LINK href="style.css" rel="stylesheet" type="text/css">
<title>Bouncing ball</title>
</head>
<body>
<div id='ball'></div>
<script type="text/javascript" src="bounce.js"></script>
</body>
</html>
I have a demo using raphael.js. The code for it is very simple but when viewed in Internet Explorer (less that version 9) I get a Raphael canvas that is 1000px by 1000px and I can't figure out why. I'm using version 1.5.2 of Raphael. Code below:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Raphael Test</title>
<link rel="stylesheet" type="text/css" href="test.css">
<link href="../shared/img/favicon.png" rel="shortcut icon">
</head>
<body>
<div id="graph"></div>
<script src="../shared/js/raphael/raphael-min.js" type="text/javascript"> </script>
<script src="test.js" type="text/javascript"> </script>
</body>
</html>
CSS
/* Graph */
#graph { padding: 5px; width: 477px; height: 299; }
JS
var holder = document.getElementById('graph')
, width = holder.scrollWidth
, height = Math.round(width * 0.5625) + 25
, p = Raphael(10, 50, width, height)
, c = p.circle(p.width - 50, p.height - 50, 50);
alert(p.width + ' & ' + p.height);
I found a discussion in Raphael's Google group with the same problem but no resolution.
I had the same problem and using
var width = paper.canvas.clientWidth ? paper.canvas.clientWidth : paper.width;
var height = paper.canvas.clientHeight ? paper.canvas.clientHeight : paper.height;
instead of paper.width and paper.height solved it for ie older than version 9 and all the other browsers.