I tried to create a dynamic P element with the margin-left as 33px.But it is not working. But the same is working fine when the left is not used(margin) and with static html p element. Why is it so? I've tried with the IE11 and Chrome Version 60.0.3112.113.
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<meta charset="utf-8">
</head>
<body>
<div id="screenv" style="border:1px solid black;margin: 5px;padding: 5px;width: 300px;height: 300px;"></div></br>
<input id="tb" type="text" style="border:1px solid black;margin: 5px;padding: 5px;width: 300px;" placeholder="Enter your text"></input>
<button onclick="submit()">Submit</button>
<p style="margin-left:33px;">hello</p>//css works fine
<script type="text/javascript">
var you="",screen="",msg="",c_time="",val="",d,h,m,line;
function submit() {
val=document.getElementById("tb").value;
screen=document.getElementById('screenv');
you=document.createElement("div");
you.innerHTML="You:";
screen.appendChild(you);
c_time=document.createElement("p");
d = new Date();
h = d.getHours();
m = d.getMinutes();
c_time.innerHTML = h+":"+m;
c_time.style.display="inline";
c_time.style.color="grey";
msg=document.createElement("p");
msg.innerHTML=val;
msg.style.margin-left="33px";//not working
line=document.createElement("br");
you.appendChild(c_time);
you.appendChild(line);
you.appendChild(msg);
document.getElementById("tb").value="";
}
</script>
</body>
</html>
msg.style.margin-left="33px"; will be interpreted as subtract operator by the Parser. Thus, all CSS properties with dashes are written in camelCase within Javascript.
Related
I have created a simple addition program using HTML, CSS and Javascript.
HTML code is as follows:
<head>
<title>Input Output</title>
<link rel="stylesheet" type="text/css" href="io.css">
<body>
<h1>Sum App</h1>
<div class="container">
<script type="text/javascript" src="io.js"></script>
First Number <input type="text" id="numOne">
Second Number <input type="text" id="numTwo">
<button type="button" class="btn" onclick="submitBut()">Submit</button>
<p id="result"></p>
<div class="screen" id="screen1"></div>
</div >
The Javascript code is as follows:
function submitBut(){
var numOne= document.getElementById("numOne").value;
var numTwo= document.getElementById("numTwo").value;
var sum=parseInt(numOne)+parseInt(numTwo);
var element= document.createElement("p");
document.getElementById("result").innerHTML = sum;
}
I want to now style the result which as per the code seats in between paragraph tags with id "result".
What are the ways using which this is possible?
I tried using a standard style sheet format as below:
#result {
font-size: 45-px;
background-color= Yellow;
}
However, it is not working at all. Kindly let me know possible fixes.
Regards,
The problem is with the CSS you have written for this code. It's Invalid.
Change it like the following and it will work fine:
#result {
font-size: 45px;
background-color: yellow;
}
I need update iframe's content on input[text] changed(or on some another event).
For example: I'm typing in parent's input "Hello World!!!", and iframe's <h1>Hi</h1> is changing to
<h1>Hello World!!!</h1> symbol by symbol.
Better if solution will be on jQuery, but vanilla js is ok, too))
Thank you very much.
P.S. Sorry for my bad English(
better way is using Window.postMessage => https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
parent Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a Page..</title>
<style>
body { font-size: 16px; font-family: Arial, Helvetica, sans-serif; }
iframe { width: 300px; height: 200px; border: 1px solid #4593c6; }
</style>
</head>
<body>
<p>parent input :
<input id="in-Txt" type="text" placeholder="type something">
<button id="Bt-Send2iFrame">Send2iFrame</button>
</p>
<iframe id="in-Frame" src="xyz_frame.html" ></iframe>
<script>
const inText = document.querySelector('#in-Txt')
, btSend = document.querySelector('#Bt-Send2iFrame')
, inFramW = document.querySelector('#in-Frame').contentWindow
btSend.onclick=_=>{
let info = { inTxt: inText.value }
inFramW.postMessage( JSON.stringify(info), "*")
}
</script>
</body>
</html>
iframe page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p> the iframe </p>
<p id="info-Parent">...</p>
<script>
const infoParent = document.querySelector('#info-Parent')
window.onmessage=e=>
{
let message = JSON.parse ( e.data )
infoParent.textContent = message.inTxt
}
</script>
</body>
</html>
You can pass the value on the parent page as a parameter to the iframe.
Say for example the following
Parent HTML,
<input type="text" id="parenteElem">
<iframe id="frameOnParent">
Parent Script:
<script type="text/javascript">
$("#parentElem").on("change", function(event) {
$('#frameOnParent').attr('src', "test.html?param1=" + $(this).val());
})
</script>
Iframe HTML:
<h1>Hi</h1>
Iframe Script:
<script type="text/javascript">
function getHeader() {
var headerText = window.location.search.substring("param1");
return headerText;
}
var heading = getHeader();
$("h1").html(heading);
</script>
I am using the following codes to draw a line to html canvas. But unfortunately i am not seeing any line in the canvas. I am not finding any error even.
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<br> <br> <br>
<input id="start" type="button" value="Start" onclick="startstop()" />
<input type="button" value="Turn Left" />
<input type="button" value="Turn Right" />
<br> <br>
<canvas id="Canvas" style="width:800px; height: 600px; border: 1px solid black;"> </canvas>
<script>
function startstop(){
var elem = document.getElementById("start");
if (elem.value==="Start")
{
elem.value = "Stop";
var mycanvas=document.getElementById("Canvas");
// alert(mycanvas);
var ctx=mycanvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(10,400);
ctx.lineTo(200,400);
ctx.lineWidth=10;
ctx.strokeStyle="#ff0000";
ctx.stroke();
}
else
elem.value = "Start";
}
</script>
</body>
Here is the jsfiddle of the code http://jsfiddle.net/8ebLLwa9/
Can anyone help me too find the mistake?
Your canvas height/width should be properties on the canvas itself, not a style attribute:
<canvas id='Canvas' width="800px" height="600px" style="border: 1px solid black;"></canvas>
Also, for your jsfiddle, change the loading state from "onLoad" to "No wrap - in head"
Define your canvas using the attributes width and height insetad of the css styles:
<canvas id='Canvas' width='800' height='600' style="border: 1px solid black;"> </canvas>
I am trying to get the content of a div in a JavaScript variable.
I did try some code:
<html>
<head>
<script>
function data(){
alert();
var MyDiv1 = document.getElementById('newdata')
alert(MyDiv1);
}
</script>
</head>
<body>
<div id="newdata" style="background-color: red; width: 100px;height: 50px;">
1 <!-- The content I'm trying to get -->
</div>
Logout
</body>
</html>
But it does not work correctly.
Instead of
var MyDiv1 = document.getElementById('newdata')
alert(MyDiv1)
it should be
var MyDiv1 = document.getElementById('newdata').innerHTML
alert(MyDiv1)
OR
var MyDiv1 = document.getElementById('newdata')
alert(MyDiv1.innerHTML)
With .innerHTML you will get the html of specified element in the DOM.
EDIT:-
SEE DEMO HERE
You must use innerHTML.
<html>
<head>
</head>
<body>
<div id="newdata" style="background-color: red; width: 100px;height: 50px;">
1
</div>
Logout
</body>
<script>
function data() {
var MyDiv1 = document.getElementById('newdata').innerHTML;
alert(MyDiv1);
}
</script>
</html>
Please consider this code:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<div id="dlgDiv" style="width:202px; height:72px; border: solid 1px grey"></div>
<iframe id="iView" style="width: 200px; height:70px; border: dotted 1px red" frameborder="0"></iframe>
<script type="text/javascript">
jQuery(document).ready(function() {
var doc = document.getElementById("iView").contentWindow.document;
doc.designMode = "On"
doc.open()
doc.write("<html><head></head><body class='some-class'>Some test text</body></html>");
doc.close();
jQuery("#iView").appendTo("#dlgDiv")
})
</script>
</body>
</html>
In IE it works fine and preserves test in the frame ("Some test text") as well as it keeps it in design mode.
In FF/Chrome/Opera it wipes out all content of the iframe - if you inspect it's DOM with FireBug you can see that iframe.body lost it's class "some-class" as well as all text and it's not in design mode.
Any ideas how to overcome this problem? The original problem is that all rich text editors fail to work in a jQuery.dialog in those browsers and I tracked the problem down to the above-mentioned fact...
It's a real show stopper for me, any help would he highly appreciated!
Thank you,
Andrey
Takes to refresh the movement (appendTo) and does not locate either the iframe:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<div id="dlgDiv" style="width:202px;height:72px;border:solid 1px grey"></div>
<iframe id="iView" style="width:200px;height:70px;border:dotted 1px red" frameborder="0"></iframe>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#iView").appendTo("#dlgDiv");
setTimeout(function(){
var iBody = $("#dlgDiv").find('#iView').contents().find("body"); // <-----
iBody.append("<div>my bad html</div>"); // old container
iBody.empty(); // empty body in iframe
iBody.append("Some test text"); //add container
iBody.append("<div>or something right</div>"); //add container
iBody.attr("class", "some-class"); //add class to body
}, 100);
})
</script>
</body>
</html>
Edition: for it is understood