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.
Related
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
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.
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.
I am learning JavaScript and am using the following code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>javascript learning</title>
<script type="text/javascript">
function resizeRock() {
document.getElementById("rockImage").style.height = (document.body.clientHeight - 100) * 0.5;
}
</script>
</head>
<body onload="resizeRock();">
<!--ROCK-->
<div id="image">
<img src="http://outdoordesignbylucas.files.wordpress.com/2011/01/1-10-11-triangular-rock.jpg" id="rockImage" onclick="touchRock();" style="cursor: pointer;" />
</div>
</body>
</html>
This code is not resizing the image, however the following code is working as expected:
<html>
<head>
<title>iRock - The Virtual Pet Rock</title>
<script type="text/javascript">
function resizeRock() {
document.getElementById("rockImage").style.height = (document.body.clientHeight - 100) * 0.5;
}
</script>
</head>
<body onload="resizeRock();">
<div style="margin-top:100px; text-align:center">
<img id="rockImage" src="http://outdoordesignbylucas.files.wordpress.com/2011/01/1-10-11-triangular-rock.jpg" alt="iRock" style="cursor:pointer" onclick="touchRock();" />
</div>
</body>
</html>
I am breaking my head over this. The code is the same, the top (not working) is what I wrote - the bottom is from a book. What am I missing?
You need to give your style a unit.
Change this line:
document.getElementById("rockImage").style.height = (document.body.clientHeight - 100) * 0.5;
To this:
document.getElementById("rockImage").style.height = ((document.body.clientHeight - 100) * 0.5) + 'px';
Thiss will tell the browser that you are setting the height in px, instead of percent, pt, em, etc.
jsFiddle / Full Screen Result
The problem is with the DOCTYPE
<!DOCTYPE html>
This put your document into standard mode. Add this css:
html
{
height: 100%
}
body
{
height: 100%
}
Adding "px" to the end of the statement will solve the problem because in standard mode you need to state the unit explicitly.
Alternatively you can delete <!DOCTYPE html>
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>