displaying a javascript-generated div in IE7 - javascript

The following code shows what I expect in Firefox and Chrome:
a small white square in a big green rectangle.
I don't see the small square in IE7.
How can I make it appear?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
<!--
function start()
{
var g_Div = document.getElementById("bigdiv");
var littleDiv = document.createElement('div');
littleDiv.setAttribute('style',
'position:absolute;'+
'left:300px;'+
'top:300px;'+
'width:5px;'+
'height:5px;'+
'clip:rect(0pt,5px,5px,0pt);'+
'background-color: rgb(255, 255, 255);');
g_Div.appendChild(littleDiv);
}
//-->
</script>
</head>
<body>
<div
id="bigdiv"
style="border: 1px solid ; margin: auto; height: 600px; width: 800px; background-color: green;"
>
</div>
<script type="text/javascript">
<!--
start();
//-->
</script>
</body>
</html>

This should do what you want, and should work across the major browsers:
function start()
{
var g_Div = document.getElementById("bigdiv");
var littleDiv = document.createElement('div');
littleDiv.style.background = 'rgb(255, 255, 255)';
littleDiv.style.width = '5px';
littleDiv.style.height = '5px';
littleDiv.style.left = '300px';
littleDiv.style.top = '300px';
littleDiv.style.position = 'absolute';
g_Div.appendChild(littleDiv);
}

Use this approach to changing the style on the element:-
littleDiv.style.cssText = 'position:absolute;'+
'left:300px;'+
'top:300px;'+
'width:5px;'+
'height:5px;'+
'clip:rect(0pt,5px,5px,0pt);'+
'background-color: rgb(255, 255, 255)';

setAttribute is pretty useless in IE, especially for the style attribute.
You may have to use a class or element.style."propertyName"
quirksmode compatibility chart

Related

How do I get pixels from Canvas created by js-dosbox

I have worked through the dosbox Div to find the canvas, but once I have found the node holding the canvas how can I reference it?
Getting the context of dbGranChild[0] just results in an error..
Im trying to build an array of the pixels that make up the dosbox window, so thought using the canvas get image and looping through as frames change would be one way. If there is a better way altogether than my above attempt happy to take that as an answer.
Code: http://plnkr.co/edit/MC1n9HfwWcqXlAk95XCO?p=preview
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js-dos api</title>
<style type="text/css">
.dosbox-container { width: 640px; height: 400px; }
.dosbox-container > .dosbox-overlay { background: url(https://js-dos.com/cdn/digger.png); }
.dosbox-start { font-size: 35px !important; }
</style>
</head>
<body>
<div id="dosbox"></div>
<br/>
<button onclick="dosbox.requestFullScreen();">Make fullscreen</button>
<script type="text/javascript" src="https://js-dos.com/cdn/js-dos-api.js"></script>
<script type="text/javascript">
var dosbox = new Dosbox({
id: "dosbox",
onload: function (dosbox) {
dosbox.run("https://js-dos.com/cdn/digger.zip", "./DIGGER.COM");
},
onrun: function (dosbox, app) {
console.log("App '" + app + "' is runned");
}
});
var dosboxId = document.getElementById('dosbox');
dbChild = dosboxId.childNodes;
dbGranChild = dbChild[0].childNodes;
console.log(dbGranChild[0])
</script>
</body>
</html>
See the w3Schools tutorial.
First, you need to use a <canvas> tag instead of a <div>.
That is, replace this:
<div id="dosbox"></div>
with something like this:
<canvas id="dosbox" width="200" height="100" style="border:1px solid #000000;">
</canvas>`
Second, replace this code:
var dosboxId = document.getElementById('dosbox');
dbChild = dosboxId.childNodes;
dbGranChild = dbChild[0].childNodes;
console.log(dbGranChild[0])
With something like this:
var c = document.getElementById("dosbox");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

JavaScript function not called at onclick button in Visual Studio 2015 Community Edition

I am learning JavaScript and CSS and made a test project in Visual Studio 2015 Community Edition. The problem that I have is, the function changeTitleCSSStyle isn't called when using Visual Studio 2015 Community Edition. At online editor https://js.do/ and in Google Chrome browser the function call works properly. My code:
index.htm
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/default.css">
<title>JavaScript and HTML</title>
<meta charset="utf-8" />
<script>
function changeTitleCSSStyle() {
alert("Aanroep");
var title = document.querySelector("#mainTitle");
title.style.color = 'black';
title.style.backgroundColor = "yellow";
title.style.border = "5px dashed red";
}
</script>
</head>
<body>
<h1 id="mainTitle">My home page</h1>
<p>This is an example of interactivity between JavaScript and the HTML content of a document.</p>
<button onclick="javascript: changeTitleCSSStyle();">Change style</button>
</body>
</html>
default.css
h1 {
color: red;
background-color: lightGreen;
border: 12px solid violet;
padding: 5px;
border-radius: 15px;
text-align: center;
}
p, h1 {
font-family: cursive;
}
p, img, button {
margin-left: 50px;
}
Not sure why it doesn't work when using VS. Maybe inline click events are not supported for some reason.
Perhaps it works if you try setting the event in your script itself like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript and HTML</title>
<meta charset="utf-8" />
<script>
function changeTitleCSSStyle() {
alert("Aanroep");
var title = document.querySelector("#mainTitle");
title.style.color = 'black';
title.style.backgroundColor = "yellow";
title.style.border = "5px dashed red";
}
document.addEventListener("DOMContentLoaded", function(event) {
var button = document.getElementById('change_style_button')
button.addEventListener('click', function(){
changeTitleCSSStyle()
});
});
</script>
</head>
<body>
<h1 id="mainTitle">My home page</h1>
<p>This is an example of interactivity between JavaScript and the HTML content of a document.</p>
<button id="change_style_button">Change style</button>
</body>
</html>
You can try
<button onclick="changeTitleCSSStyle();">Change style</button>

Understanding 'parentNode' of undefined error

I'm practicing basic JS skills by setting up little exercises for myself. In this one, I have a list of <a>s inside a div. The aim of the exercise is to wrap each <a> in a div. I'm using replaceChild in this instance.
Oddly (to me at least) the script works for the first three links, but after that throws an error:
Uncaught TypeError: Cannot read property 'parentNode' of undefined
I can't tell why the script partly works. Can anyone see what I'm doing wrong here? Here's the code I'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div div {padding: 10px; background: #e7e7e7; margin: 5px;}
</style>
</head>
<body>
<div>
link
link
link
link
link
link
</div>
<script>
var links = document.getElementsByTagName("a");
for (var i=0, ii=links.length; i<ii; i++)
{
var container = document.createElement("div");
links[i].parentNode.replaceChild(container, links[i]);
container.appendChild(links[i]);
}
</script>
</body>
</html>
and here's an online version: http://codepen.io/anon/pen/Lpuky
I've tried the few debugging techniques that I know of and read about this error message, but haven't worked out what's wrong here. Seems funny to me that it works for 3 of the 6 links.
The collection links is NodeList and is live.
Since you are replacing them, they are disappearing from the collection and our index into them is no longer pointing to anything.
You're modifying the nodelist as you iterate over it. Use the Array slice method to make a copy of the list:
var linksCopy = Array.prototype.slice.call(links);
for (var i=0; i<linksCopy.length; i++)
{
var container = document.createElement("div");
linksCopy[i].parentNode.replaceChild(container, linksCopy[i]);
container.appendChild(linksCopy[i]);
}
Regarding your own follow-up answer: if your objective was simply to find the easiest way to wrap the <a>s in <div>s, rather than to practice with createElement, replaceChild or appendChild or any of the other methods, this would be it:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
div div {
padding: 10px;
background: #e7e7e7;
margin: 5px;
}
</style>
</head>
<body>
<div>
link
link
link
link
link
link
</div>
<script>
var links = document.querySelectorAll("a");
for (var i=0; i<links.length; i++) {
links[i].outerHTML = '<div>'+links[i].outerHTML+'</div>';
}
</script>
</body>
</html>
.
Live demo here: http://jsbin.com/jasoho/1/edit?html,output. Another advantage of the outerHTML method is that it doesn't change the nodeList. So you can also use getElementsByTagName in stead of querySelectorAll.
As a follow up to this, I often hear that querySelectorAll() is different in that it returns a static Nodelist rather than an array, so I thought that might come in handy here, and indeed it does:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div div {padding: 10px; background: #e7e7e7; margin: 5px;}
</style>
</head>
<body>
<div>
link
link
link
link
link
link
</div>
<script>
var links = document.querySelectorAll("a");
for (var i=0, ii=links.length; i<ii; i++)
{
var container = document.createElement("div");
links[i].parentNode.replaceChild(container, links[i]);
container.appendChild(links[i]);
}
</script>
</body>
</html>
Also, an alternative to Array.prototype.slice.call(links) is [].slice.call(links):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div div {padding: 10px; background: #e7e7e7; margin: 5px;}
</style>
</head>
<body>
<div>
link
link
link
link
link
link
</div>
<script>
var links = document.getElementsByTagName("a");
var linksCopy = [].slice.call(links);
for (var i=0; i<linksCopy.length; i++)
{
var container = document.createElement("div");
linksCopy[i].parentNode.replaceChild(container, linksCopy[i]);
container.appendChild(linksCopy[i]);
}
</script>
</body>
</html>
And another option again is to use [].forEach.call():
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div div {padding: 10px; background: #e7e7e7; margin: 5px;}
</style>
</head>
<body>
<div>
link
link
link
link
link
link
</div>
<script>
[].forEach.call(document.querySelectorAll('a'), function(el) {
var container = document.createElement("div");
el.parentNode.replaceChild(container, el);
container.appendChild(el);
});
</script>
</body>
</html>
Yet another option, using Array.from():
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div div {padding: 10px; background: #e7e7e7; margin: 5px;}
</style>
</head>
<body>
<div>
link
link
link
link
link
link
</div>
<script>
var links = document.getElementsByTagName("a");
var linksCopy = Array.from(links);
for (var i=0; i<linksCopy.length; i++)
{
var container = document.createElement("div");
linksCopy[i].parentNode.replaceChild(container, linksCopy[i]);
container.appendChild(linksCopy[i]);
}
</script>
</body>
</html>

clientHeight not working in JavaScript?

I'm learning JavaScript and created a countdown timer HTML page in which javascript code seems to be returning a wrong clientHeight of the body. I want to show my countdown HTML <div> in middle (vertically) of the body even when browser is re-sized. Please tell me where I am wrong.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CountDown Timer</title>
<script type="text/javascript" >
function countdown(){
if(isNaN(document.getElementById("time").value))
{
document.getElementById("time").value = "Enter Valid Number";
return;
}
else
{
var i = document.getElementById("time").value;
var j=setInterval(function (){document.getElementById("new").innerHTML = i; i--;
if(i == -2){
document.getElementById("new").innerHTML = "Welcome";
clearInterval(j);}},1000);
}
}
function heightadjust(){
document.getElementById("main1").style.top = ((document.body.clientHeight/2)+54).toString() + "px";
}
</script>
</head>
<body onresize="heightadjust();" onload="heightadjust();">
<div style="margin:0 auto;" id="main1">
<center>
<div id="new" style="display:inline-block; padding:3px; font-size:60px; text-align:center; border:3px solid #000000; background-color:#CC3300; color:#FFFFFF; border-radius:6px;">Enter Time Below</div>
<br />
<input type="text" id="time" onfocus="this.value = ''; this.style.color = '#000000';" value="Enter Time here" style="color:#999999;" />
<button onclick="countdown();" >Start</button>
</center>
</div>
</body>
</html>
Please, give me some tips how to keep <div> vertically centred even if browsers are re-sized.
You don't need JS for that.
#in_the_middle {
position:fixed;
left:50%;
top:100%;
width:200px;
margin-left:-100px; /* MUST be equal to width * -0.5 */
height:50px;
margin-top:-25px; /* SHOULD equal height * -0.5, but can vary for different fx */
line-height:50px; /* Remove if there may be more than one line inside */
}

Javascript doesn't change document?

Take a look at this example code, which doesn't work:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
<!--
function moveMe() {
document.getElementById('moveme').top = 200;
document.getElementById('moveme').style.backgroundcolor = 'green';
document.getElementById('writeme').innerHtml = 'abc';
alert('called!');
}
// -->
</script>
<style type="text/css">
.moveable {
position: absolute;
top: 30px;
left: 200px;
width: 100px;
height: 100px;
background-color: yellow;
}
#writeme {
background-color: red;
color: white;
}
</style>
</head>
<body>
<div id="moveme" class="moveable" onClick="moveMe()">
<p id="writeme">Hello!</p>
</div>
</body>
</html>
When I click on the text the alert is displayed, but nothing is changed in the document. The paragraph text is not overwritten, the div is not moved... tested it in FF and IE, also checked the DOM via Firebug: strange thing is that the new values are written to the nodes, but they are displayed in bold, and the old values are still there. WTF?
I guess I'm missing something fundamental here.
Non-zero lengths require units, "200" is missing its unit
JavaScript is case sensitive: backgroundColor and innerHTML
Since you appear to be using XHTML, your script is commented out
document.getElementById('moveme').top = 200;
needs to be
document.getElementById('moveme').style.top = "200px";
I think; and
document.getElementById('writeme').innerHtml = 'abc';
needs to become
document.getElementById('writeme').innerHTML = 'abc';
and it's backgroundColor with a capital C as #David spotted first.
Try this:
<script type="text/javascript">
function moveMe() {
document.getElementById('moveme').style.top = '200px';
document.getElementById('moveme').style.backgroundColor = 'green';
document.getElementById('writeme').innerHTML = 'abc';
alert('called!');
}
window.onload = moveMe;
</script>
Additionally to what the others said: Drop the <?xml version='1.0' encoding='UTF-8' ?>
, because that puts IE in Quirksmode.

Categories

Resources