canvas1 and canvas2 not inheriting the parent width and height from css like I was expecting. I can fix this by assigning canvas1 and canvas2 width and height explicitly with javascript, but I was hoping for a less hackish way to solve this, i.e. pure css.
`
<!DOCTYPE HTML>
<html>
<head>
<style>
#parent {
width: 1000px;
height: 600px;
}
#div1 {
position: absolute;
z-index:0;
}
#div2 {
position: absolute;
z-index:1;
}
</style>
</head>
<body>
<div id="parent">
<div id="div1">
<canvas id="canvas1">
</canvas>
</div>
<div id="div2">
<canvas id="canvas2">
</canvas>
</div>
</div>
<script>
var parent = document.getElementById("parent");
var parentWidth = parent.offsetWidth;
var parentHeight = parent.offsetHeight;
alert("parentWidth = " + parentWidth);
alert("parentHeight = " + parentHeight);
var div1 = document.getElementById("div1");
var div1Width = div1.offsetWidth;
var div1Height = div1.offsetHeight;
alert("div1Width = " + div1Width);
alert("div1Height = " + div1Height);
var canvas1 = document.getElementById("canvas1");
var canvas1Width = canvas1.offsetWidth;
var canvas1Height = canvas1.offsetHeight;
alert("canvas1Width = " + canvas1Width);
alert("canvas1Height = " + canvas1Height);
var div2 = document.getElementById("div2");
var div2Width = div2.offsetWidth;
var div2Height = div2.offsetHeight;
alert("div2Width = " + div2Width);
alert("div2Height = " + div2Height);
var canvas2 = document.getElementById("canvas2");
var canvas2Width = canvas2.offsetWidth;
var canvas2Height = canvas2.offsetHeight;
alert("canvas2Width = " + canvas2Width);
alert("canvas2Height = " + canvas2Height);
</script>
</body>
</html> `
Related
I need your help
I have this html code :
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>
<h2>Read More Read Less Button</h2>
<p><img src=""/><span id="image"><img src=""/></span><span id="more">Lorem Ipsum </span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<script>
function myFunction() {
var dots = document.getElementById("image");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
</script>
</body>
</html>
This finally would be working. I have used a file from my github repo to make the example working. But you can always that path.
// You can replace your whole JS with this code
fetch("https://raw.githubusercontent.com/ArunBohra33/json-data/main/clickable-pic") //file json objects
.then(function (response) {
return response.json();
})
.then(function (data) {
appendData(data);
})
.catch(function (err) {
console.log("error: " + err);
});
function appendData(data) {
var mainContainer = document.getElementById("myData");
for (var i = 0; i < data.results.length; i++) {
var img = document.createElement("img");
// New code
// Add a id to the image
img.setAttribute("id", "popup-image" + (i + 1));
img.src = data.results[i].picture.large;
img.classList.add("popup-img");
img.setAttribute("data-data", JSON.stringify(data.results[i]));
mainContainer.appendChild(img);
// Old code
var div = document.createElement("div");
div.innerHTML = "first: " + data.results[i].name.first + " First Name :" + data.results[i].name.last;
mainContainer.appendChild(div);
// if (i == data.results.length - 1) clickOnImg();
}
for (let i = 0; i < data.results.length; i++) {
document.querySelector(`#popup-image${i + 1}`).addEventListener("click", function () {
var firstName = data.results[i].name.first;
var lastName = data.results[i].name.last;
showData(firstName, lastName, i + 1);
});
}
}
// This function shows the modal with data in it
function showData(firstName, lastName, index) {
var popupBox = document.createElement("div");
popupBox.style.display = "flex";
popupBox.setAttribute("id", "popupBoxOverlay_{i}");
popupBox.classList.add("popupBox");
popupBox.innerHTML = `<div class="modal">
<span class="cross-btn-${index - 1}">×</span>
<div class="fname">
<label>FirstName: </label>
<span class="firstName${index - 1}">${firstName}</span>
</div>
<div class="lname">
<label>LastName: </label>
<span id="lastName${index - 1}">${lastName}</span>
</div>
</div>`;
document.body.prepend(popupBox);
var crossBtn = document.querySelector(".cross-btn-" + (index - 1));
crossBtn.addEventListener("click", function () {
popupBox.remove();
});
}
/* // CSS CODE */
img {
width: 200px;
}
.popupBox {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, .5);
height: 100vh;
width: 100vw;
/* z-index: 100000; */
display: flex;
justify-content: center;
align-items: center;
}
.modal {
display: flex;
flex-direction: column;
min-width: 60%;
background: #fff;
border-radius: 8px;
position: relative;
padding: 2rem;
}
[class^=cross-btn] {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
<div class="album py-5 bg-light">
<div class="container">
<br>
<h1>Persons</h1><br>
<div class="row">
<div class="card-group">
<div id="myData"></div>
</div>
</div>
</div>
</div>
I created following simple website. I have Starfield and galaxy pictures. Starfield is animated by JS code. Stars are moving. But when I place Galaxy over starfield with CSS code stars stop moving.
Below I placed JS code and HTML code without placing galaxy over starfield. How can I place one over another with stars moving?
Regards
Piotr
<head>
<meta charset ="utf-8">
<title> Galaktyka</title>
<script src ="Code17.js"></script>
<style>
#galaxy{
display: block;
margin-left: 0;
margin-top: 0;
}
#star{
position: relative;
}
</style>
</head>
<body>
<script>
window.onscroll = function () {
window.scrollTo(0,0);
}
</script>
<style type="text/css">
body {
overflow: hidden;
}
</style>
<img id="galaxy" src="Galaktyka.jpg" style="width: 70%">
<img id="star" src="starfield.jpg">
</body>
And below JS
window.onload = function(){
let image = document.getElementById("star");
imageLeft = -175;
setInterval(move, 100, image);
}
var motion = true;
function move() {
if(motion) {
let image = document.getElementById("star");
imageLeft = imageLeft + 1;
image.style.left = imageLeft + "px";
if (imageLeft == 0) {
motion = false;
} else {
let image = document.getElementById("star");
imageLeft = imageLeft - 1;
image.style.left = imageLeft + "px";
}
if (imageLeft == -175){
motion = true;
}
}
}
I'm trying to replicate something similar to the following map, where the polygonal area is transparent and the surrounding area is semi-transparent:
Can anyone help with this?
Here's the original:
https://energyeasy.ue.com.au/outages/powerOutages
Using some CSS and a large 512 x 512px png I have managed to emulate what I wanted to achieve.
I'm sure there would be more accurate methods but this has worked for me.
http://www.syn-rg.com.au/Development/United-Energy/mg_map/MG_Area_map_02.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0; }
#map_canvas {
background-color: #EAEAEA;
border: 1px solid #CCCCCC;
height: 400px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
width: 532px;
}
#map_canvas div div div div div img{ border:1000px solid black;margin:-1000px -1000px;}
/*#map_canvas div div div div div div div{ background: none repeat scroll 0px 0px rgba(0, 0, 0, 0.5);}*/
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA7UaoyrY4KyoW1iEU0KFo0ZOxH5w30oZ8&sensor=true"></script>
<script type="text/javascript">
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
function initialize() {
var myLatLng = new google.maps.LatLng(-37.815676, 145.449005);
var myOptions = {
zoom: 9,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var swBound = new google.maps.LatLng(-38.269876, 144.842405); // Latitude, Longitude = 182.749 or 107.183 or 108.4443 or 107.77615
var neBound = new google.maps.LatLng(-37.161476, 146.249005); // -0.5542, +0.7033 = 256px
//var swBound = new google.maps.LatLng(-37.783, 144.966);
//var neBound = new google.maps.LatLng(-37.225, 145.66930);
//var swBound = new google.maps.LatLng(62.281819, -150.287132);
//var neBound = new google.maps.LatLng(62.400471, -150.005608);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
// Photograph courtesy of the U.S. Geological Survey
var srcImage = 'images/mg_map_full.png';
overlay = new USGSOverlay(bounds, srcImage, map);
}
function USGSOverlay(bounds, image, map) {
// Now initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// We define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay
this.setMap(map);
}
USGSOverlay.prototype.onAdd = function () {
// Note: an overlay's receipt of onAdd() indicates that
// the map's panes are now available for attaching
// the overlay to the map via the DOM.
// Create the DIV and set some basic attributes.
var div = document.createElement('div');
div.style.borderStyle = "none";
div.style.borderWidth = "0";
div.style.borderColor = "red";
div.style.position = "absolute";
div.style.opacity = "0.3";
// Create an IMG element and attach it to the DIV.
var img = document.createElement("img");
img.src = this.image_;
img.style.width = "100%";
img.style.height = "100%";
img.style.position = 'absolute';
div.appendChild(img);
// Set the overlay's div_ property to this DIV
this.div_ = div;
// We add an overlay to a map via one of the map's panes.
// We'll add this overlay to the overlayImage pane.
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
USGSOverlay.prototype.draw = function () {
// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's DIV to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
}
USGSOverlay.prototype.onRemove = function () {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>
</body>
</html>
How do I markup a page with an HTML5 canvas such that the canvas
Takes up 80% of the width
Has a corresponding pixel height and width which effectively define the ratio (and are proportionally maintained when the canvas is stretched to 80%)
Is centered both vertically and horizontally
You can assume that the canvas is the only thing on the page, but feel free to encapsulate it in divs if necessary.
This will center the canvas horizontally:
#canvas-container {
width: 100%;
text-align:center;
}
canvas {
display: inline;
}
HTML:
<div id="canvas-container">
<canvas>Your browser doesn't support canvas</canvas>
</div>
Looking at the current answers I feel that one easy and clean fix is missing. Just in case someone passes by and looks for the right solution.
I am quite successful with some simple CSS and javascript.
Center canvas to middle of the screen or parent element. No wrapping.
HTML:
<canvas id="canvas" width="400" height="300">No canvas support</canvas>
CSS:
#canvas {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin:auto;
}
Javascript:
window.onload = window.onresize = function() {
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth * 0.8;
canvas.height = window.innerHeight * 0.8;
}
Works like a charm - tested: firefox, chrome
fiddle: http://jsfiddle.net/djwave28/j6cffppa/3/
easiest way
put the canvas into paragraph tags like this:
<p align="center">
<canvas id="myCanvas" style="background:#220000" width="700" height="500" align="right"></canvas>
</p>
Tested only on Firefox:
<script>
window.onload = window.onresize = function() {
var C = 0.8; // canvas width to viewport width ratio
var W_TO_H = 2/1; // canvas width to canvas height ratio
var el = document.getElementById("a");
// For IE compatibility http://www.google.com/search?q=get+viewport+size+js
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
var canvasWidth = viewportWidth * C;
var canvasHeight = canvasWidth / W_TO_H;
el.style.position = "fixed";
el.setAttribute("width", canvasWidth);
el.setAttribute("height", canvasHeight);
el.style.top = (viewportHeight - canvasHeight) / 2;
el.style.left = (viewportWidth - canvasWidth) / 2;
window.ctx = el.getContext("2d");
ctx.clearRect(0,0,canvasWidth,canvasHeight);
ctx.fillStyle = 'yellow';
ctx.moveTo(0, canvasHeight/2);
ctx.lineTo(canvasWidth/2, 0);
ctx.lineTo(canvasWidth, canvasHeight/2);
ctx.lineTo(canvasWidth/2, canvasHeight);
ctx.lineTo(0, canvasHeight/2);
ctx.fill()
}
</script>
<body>
<canvas id="a" style="background: black">
</canvas>
</body>
in order to center the canvas within the window +"px" should be added to el.style.top and el.style.left.
el.style.top = (viewportHeight - canvasHeight) / 2 +"px";
el.style.left = (viewportWidth - canvasWidth) / 2 +"px";
Resizing canvas using css is not a good idea. It should be done using Javascript. See the below function which does it
function setCanvas(){
var canvasNode = document.getElementById('xCanvas');
var pw = canvasNode.parentNode.clientWidth;
var ph = canvasNode.parentNode.clientHeight;
canvasNode.height = pw * 0.8 * (canvasNode.height/canvasNode.width);
canvasNode.width = pw * 0.8;
canvasNode.style.top = (ph-canvasNode.height)/2 + "px";
canvasNode.style.left = (pw-canvasNode.width)/2 + "px";
}
demo here : http://jsfiddle.net/9Rmwt/11/show/
.
Simple:
<body>
<div>
<div style="width: 800px; height:500px; margin: 50px auto;">
<canvas width="800" height="500" style="background:#CCC">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</div>
</body>
Given that canvas is nothing without JavaScript, use JavaScript too for sizing and positionning (you know: onresize, position:absolute, etc.)
As to the CSS suggestion:
#myCanvas {
width: 100%;
height: 100%;
}
By the standard, CSS does not size the canvas coordinate system, it scales the content. In Chrome, the CSS mentioned will scale the canvas up or down to fit the browser's layout. In the typical case where the coordinate system is smaller than the browser's dimensions in pixels, this effectively lowers the resolution of your drawing. It most likely results in non-proportional drawing as well.
Same codes from Nickolay above, but tested on IE9 and chrome (and removed the extra rendering):
window.onload = window.onresize = function() {
var canvas = document.getElementById('canvas');
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
var canvasWidth = viewportWidth * 0.8;
var canvasHeight = canvasWidth / 2;
canvas.style.position = "absolute";
canvas.setAttribute("width", canvasWidth);
canvas.setAttribute("height", canvasHeight);
canvas.style.top = (viewportHeight - canvasHeight) / 2 + "px";
canvas.style.left = (viewportWidth - canvasWidth) / 2 + "px";
}
HTML:
<body>
<canvas id="canvas" style="background: #ffffff">
Canvas is not supported.
</canvas>
</body>
The top and left offset only works when I add px.
Make a line in the center and make it transparent.
This line will be the fulcrum to center the content in the canvas
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.strokeStyle = 'transparent';
context.moveTo(width/2, 0);
context.lineTo(width/2, height);
context.stroke();
context.textAlign = 'center';
with width height being the size of the html canvas
Wrapping it with div should work. I tested it in Firefox, Chrome on Fedora 13 (demo).
#content {
width: 95%;
height: 95%;
margin: auto;
}
#myCanvas {
width: 100%;
height: 100%;
border: 1px solid black;
}
And the canvas should be enclosed in tag
<div id="content">
<canvas id="myCanvas">Your browser doesn't support canvas tag</canvas>
</div>
Let me know if it works. Cheers.
I am having a Html hyperlink. I need to link this hyperlink to another page.When I place the mouse over the link. It should show the image.
how to do this
That depends on where you need to display the image. If you are looking for something along the lines of an icon next to or behind the link, you could accomplish this through CSS using a background image on the hover state of the link:
a:link
{
background-image:none;
}
a:hover
{
background-image:url('images/icon.png');
background-repeat:no-repeat;
background-position:right;
padding-right:10px /*adjust based on icon size*/
}
I did this off the top of my head, so you may need to make some minor adjustments.
If you wanted to show an image somewhere else on the page, you could accomplish that using javascript to hide/show the image on the link's mouseover event.
If this doesn't solve your problem, maybe you could supply some additional information to help guide everybody to the right answer.
You can do this easily with jquery:
$("li").hover(
function () {
$(this).append($("<img src="myimage.jpg"/>"));
},
function () {
$(this).find("img:last").remove();
}
);
Some more comprehensive examples which are actually tested:
http://docs.jquery.com/Events/hover
you can do this using javascript..
This will create a square that follows your mouse on div or element hover.
Create a .js file with those contents here:
var WindowVisible = null;
function WindowShow() {
this.bind = function(obj,url,height,width) {
obj.url = url;
obj.mheight = height;
obj.mwidth = width;
obj.onmouseover = function(e) {
if (WindowVisible == null) {
if (!e) e = window.event;
var tmp = document.createElement("div");
tmp.style.position = 'absolute';
tmp.style.top = parseInt(e.clientY + 15) + 'px';
tmp.style.left = parseInt(e.clientX + 15) + 'px';
var iframe = document.createElement('iframe');
iframe.src = this.url;
iframe.style.border = '0px';
iframe.style.height = parseInt(this.mheight)+'px';
iframe.style.width = parseInt(this.mwidth)+'px';
iframe.style.position = 'absolute';
iframe.style.top = '0px';
iframe.style.left = '0px';
tmp.appendChild(iframe);
tmp.style.display = 'none';
WindowVisible = tmp;
document.body.appendChild(tmp);
tmp.style.height = parseInt(this.mheight) + 'px';
tmp.style.width = parseInt(this.mwidth) + 'px';
tmp.style.display = 'block';
}
}
obj.onmouseout = function() {
if (WindowVisible != null) {
document.body.removeChild(WindowVisible);
WindowVisible = null;
}
}
obj.onmousemove = function(e) {
if (!e) e = window.event;
WindowVisible.style.top = parseInt(e.clientY + 15) + 'px';
WindowVisible.style.left = parseInt(e.clientX + 15) + 'px';
}
}
}
Then in your html do the following:
Include the .js file <script type="text/javascript" src="myfile.js"></script>
Put in your web page:
<script type="text/javascript">
var asd = new WindowShow();
asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480);
</script>
Here is a full implementation in a HTML:
<html>
<head>
<title>test page</title>
<style>
div.block { width: 300px; height: 300px; background-color: red; }
iframe { border: 0px; padding: 0px; margin: 0px; }
</style>
<script type="text/javascript" src="window_show.js"></script>
</head>
<body>
<div id="go1" style="background-color: red; width: 200px; height: 200px;"></div>
<script type="text/javascript">
var asd = new WindowShow();
asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480);
</script>
</body>
bye bye!