Android Firefox JavaScript screen dimensions false? - javascript

I've got following HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
var w = window.screen.width;
var h = window.screen.height;
var s = "Width: " + w + "px<br/>Height: " + h + "px";
document.body.innerHTML = s;
</script>
</body>
</html>
Using Pixel 2 with Chrome gives me result:
Width: 412px
Height: 732px
And with Firefox, I got result:
Width: 414px
Height: 688px
Why the result are not the same? It looks to me that Firefox has not correct dimensions.

Related

How to append multiple x3d in html/javascript

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

How to find the exact position of the mouse on the webpage

I have been trying to develop a drawing application. When I try to plot a point for freehand drawing, the point appears a good 100 or so pixels away from the actual position of the mouse pointer. Is there any way I can get the exact position of the mouse? You can see and run the code below.
const canvasEle = document.getElementById('drawContainer');
const context = canvasEle.getContext('2d');
function setMousePosition (e) {
var x = e.clientX;
var y = e.clientY;
console.log("x coord " + x + " y coord " + y);
changePixelColor(x, y)
}
function changePixelColor (x, y) {
context.fillRect(x,y,1,1);
}
canvasEle.addEventListener("mousemove", setMousePosition)
canvas {
border: 1px solid black;
width: 500px;
height: 500px;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draw</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="drawContainer"></canvas>
</body>
<script src="app.js"></script>
</html>
Try like this:
const canvasEle = document.getElementById('drawContainer');
const context = canvasEle.getContext('2d');
const cr = canvasEle.getBoundingClientRect();
function setMousePosition (e) {
var x = e.clientX - cr.x;
var y = e.clientY - cr.y;
console.log("x coord " + x + " y coord " + y);
changePixelColor(x, y)
}
function changePixelColor (x, y) {
context.fillRect(x,y,1,1);
}
canvasEle.width = 500;
canvasEle.height = 500;
canvasEle.addEventListener("mousemove", setMousePosition)
canvas {
border: 1px solid black;
width: 500px;
height: 500px;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draw</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="drawContainer"></canvas>
</body>
<script src="app.js"></script>
</html>
Two additions to resolve this:
offsetting the x and y values in setMousePosition, so that they become relative to the canvas position, rather than to the page.
setting the width and height of the canvas element in either JavaScript or the HTML attributes.
Try removing height and width from CSS and use the canvas' width and height attributes instead. Another tip to center the mouse on the painted rectangle is to subtract half the size of the rectangle, e.g. context.fillRect(x-0.5,y-0.5,1,1). In your case it's hard to actually see that the dot isn't centered so try with context.fillRect(x-25,y-25,50,50) and you will see a difference compared to context.fillRect(x-25,y,50,50)
const canvasEle = document.getElementById('drawContainer');
const context = canvasEle.getContext('2d');
function setMousePosition (e) {
var x = e.clientX;
var y = e.clientY;
//console.log("x coord " + x + " y coord " + y);
changePixelColor(x, y)
}
function changePixelColor (x, y) {
context.fillRect(x-0.5,y-0.5,1,1);
//context.fillRect(x,y,50,50); compare these to see the difference
//context.fillRect(x-25,y-25,50,50);
}
canvasEle.addEventListener("mousemove", setMousePosition)
canvas {
border: 1px solid black;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draw</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas width="500" height="500" id="drawContainer"></canvas>
</body>
<script src="app.js"></script>
</html>

Why isn't my Parallax scrolling JavaScript code working?

I started designing my own site and followed a YouTube video tutorial on how to code Motion Parallax scrolling on Dreamweaver using JavaScript and CSS so I followed the video and did everything it told me to but my code is still not working?
https://www.youtube.com/watch?v=cF3oyFXjRWk
I feel like my JavaScript code is not linked or something because some of the syntax or variables that are highlighted in a specific color on the video are not highlighted for me. What could my problem be?
I put the JavaScript within the head tag as well... this is the .js code
<script type="text/javascript">
var ypos, image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('background');
image.style.top = ypos * .4 + 'px';
}
window.addEventListener('scroll', parallex);
</script>
This is all my code with the css as well....
<!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">
<title>Bootstrap 101 Template</title>
<link href="../Tezel's Website/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#image{
position: relative;
z-index: -1
}
#content{
height: 750px;
width: 100%;
margin-top: -10px;
background-color:#4dbbac;
position: relative;
z-index: 1;
}
</style>
<script type="text/javascript">
var ypos, image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('background');
image.style.top = ypos * .4 + 'px';
}
window.addEventListener('scroll', parallex);
</script>
</head>
<body>
<img id = "background" src = "sky1.jpg" width = "100%" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../Tezel's Website/js/bootstrap.min.js"></script>
<div class = "main">
<div id = "container">
<div class = "header">
<div id = "content">
</div>
</div>
</div>
</div>
</body>
</html>
This is not looking quite charming:
<script src="../Tezel's Website/js/bootstrap.min.js"></script>
Check if all resources are loaded. Right click and check element or inspect element in your browser. Make sure all resources are found and loaded.

Turn fonts size proportional to iframe size

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/

Why is Raphael.JS creating paper with dimensions 1000x1000?

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.

Categories

Resources