I have this piece of code:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.addEventListener('load', () => {
document.getElementById("c").width = document.documentElement.clientWidth;
document.getElementById("c").height = document.documentElement.clientHeight;
})
</script>
</head>
<body style="margin: 0;">
<canvas id="c" style="background-color: red;"></canvas>
</body>
</html>
Why it generates canvas bigger than browser viewport, and makes scrollbar? And beside that it makes some white space below canvas. Why and how to solve it?
Thanks!
By default canvas display are set to display: inline;
You just have to set your canvas display to display: block;
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.addEventListener('load', () => {
document.getElementById("c").width = document.documentElement.clientWidth;
document.getElementById("c").height = document.documentElement.clientHeight;
})
</script>
</head>
<body style="margin: 0;">
<canvas id="c" style="background-color: red; display: block;"></canvas>
</body>
</html>
Related
How can I get width and height from a picture stored in a directory using Javascript?
From a web browser:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Dimensions</title>
</head>
<body>
<img id="myImage" src="image.png">
<script>
var img = document.getElementById("myImage");
img.onload = function (event) {
console.log(`natural: ${img.naturalWidth}, ${img.naturalHeight}`);
console.log(`width,height: ${img.width}, ${img.height}`);
console.log(`offset: ${img.offsetWidth}, ${img.offsetHeight}`);
}
</script>
</body>
</html>
How can I get the width of my parent div?
I need the canvas to bethe maximum width it can be. But the div should still be inside the boundaries set by my CSS-file.
In other words: How do i get the maximum width possible whilst still being inside the divs boundaries?
So:
function setup() {
//somehow get the width of the div and set the canvas to that
const myCanvas = createCanvas(400, 400);
myCanvas.parent('canvasDiv');
}
function draw() {
background(0);
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Default Page Title</title>
<link rel="stylesheet" href="blogPost.css">
<script type="text/javascript" src="../p5.js"></script>
<script type="text/javascript" src="sketch.js"></script>
</head>
<body>
<div id="containerHeader">
<h1>Default Page header</h1>
</div>
<div id="canvasDiv"></div>
<div id="container">
<p>default description</p>
</div>
</body>
</html>
And lastly my CSS:
#canvasDiv {
margin: 0;
padding: 0;
}
To get the width of my parent div, you can add CSS height and width for canvasDiv. And after if you want that container take height and width from parent, you can write height: inherit; and width: inherit;
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>
this is my code, i use two canvas to drawimage to avoid flickering, but i cant get the full image when use this way, anyone can help please?
if i only use one canvas the image display fine, it seems the secondarycanvas that created by Javascript got some issue to display the image, but i can't find what's wrong. any help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Decorate</title>
</head>
<body>
<div class="content-box">
<canvas id="canvas" width="360" height="740" style="border:1px solid #d3d3d3"></canvas>
</div>
<script>
var c=document.getElementById("canvas");
var ctx = c.getContext("2d");
var secondaryCanvas=document.createElement("canvas");
var secondaryCtx=secondaryCanvas.getContext("2d");
secondaryCanvas.weight=c.weight;
secondaryCanvas.height=c.height;
var bgimg=new Image();
bgimg.src=imageEncoder[24].background;
bgimg.onload=function() {
secondaryCtx.drawImage(bgimg, 0, 0);
ctx.drawImage(secondaryCanvas,0,0);
}
</script>
</body>
</html>
I change secondaryCanvas.weight=c.weight; to secondaryCanvas.width=c.width; and your code seems to work now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Decorate</title>
</head>
<body>
<div class="content-box">
<canvas id="canvas" width="360" height="740" style="border:1px solid #d3d3d3"></canvas>
</div>
<script>
var c=document.getElementById("canvas");
var ctx = c.getContext("2d");
var secondaryCanvas=document.createElement("canvas");
var secondaryCtx=secondaryCanvas.getContext("2d");
secondaryCanvas.width=c.width;
secondaryCanvas.height=c.height;
var bgimg=new Image();
bgimg.src= "https://picsum.photos/360/740"
bgimg.onload=function() {
secondaryCtx.drawImage(bgimg, 0, 0);
ctx.drawImage(secondaryCanvas,0,0);
}
</script>
</body>
</html>
I am using ngPaste on a contentEditable div instead of input type text. However, I am unable to fetch the pasted content in the way mention in this link. I am always getting undefined in my handler for ngPaste. Here's the code:
HTML:
<div contentEditable="true" ng-paste="stripHtml($event.clipboardData.getData('text/plain'))">
</div
>
JS:
scope.stripHtml = function(content) {
console.log(content); //this is always undefined
}
What am I doing wrong? How can I fetch the pasted content?
The Below Code (Modified from Sergey's) Worked in Windows platform, Firefox 43.0.4, Chrome 47.0.2526.111 m but NOT in IE 11.0.9.
<!DOCTYPE html>
<html>
<head>
<style>
.editable {
background: white;
height: 55px;
border: 2px solid blue;
width: 55%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('sampleController', function($scope) {
$scope.stripHtml = function(content) {
alert(content);
console.log(content);
};
});
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>AngularJS ng-paste within ContentEditable Div</title>
</head>
<body ng-app="myApp">
<div ng-controller="sampleController">
<div class="editable" contentEditable="true" ng-paste="stripHtml($event.clipboardData.getData('text/plain'))"></div>
</div>
</body>
</html>