I am trying to create a web based paint software, and want to position a button to change the color of the paint brush (I will eventually change this to a bar). How would I position the button on the right of the canvas.
Html and css:
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Paint</title>
<style>
#canvas{
background-color: cadetblue;
}
.button{
/* code to position button next to canvas */
}
</style>
</head>
<body>
<canvas id = "canvas" width = "800" height = "600"></canvas>
<div class = "button">RED</div>
</body>
</html>
<canvas> is just a normal block element, so you can position it however you will position a block element. You can apply float:left on the canvas & the button (please use a real <button>), you can display:inline-block them, you can add a wrapper around them and display: flex it, or even display: grid it or add position: relative to it and position: absolute to its children. There are lots of ways to achieve this. Here is a good starting point: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction
Related
I have a little issue positioning an element outside the canvas to star an animation from the outside. An example bellow.
.square {
height: 50px;
width: 50px;
background-color: #555;
position: absolute;
right: -10px;
}
<html>
<head>
</head>
<body>
<div class="square"></div>
</body>
</html>
This is a reference image about the expected start position of the element (red dotted box).
Anyone know how to configure the css related to the object to position it outside the canvas without increases their (canvas) size?
Hopefully without deactivate the scroll bar (for example to increase the left side of the canvas) and not over the canvas (to keeping it scrollable and not relative)
I thought this is the simplest question ever, but i couldn't find on the web, hope to be helpful to someone, thanks!
I need help with a simple link site and my canvas wont sit behind my text
I think the problem is specifically with my html
I haven't really done a lot with html5 canvases and this was a botched copy paste job:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title>jetbrains.xyz</title>
<link href="main.css" rel="stylesheet">
<script src="main.js"></script>
</head>
<body>
<canvas id='c'></canvas>
<div class="mhm">
<div class="centered">
<h1>⎳⎳⎳</h1>
</div>
<ul class="bmenu">
<br />
<li>
sera
</li>
<br />
<li>
zonk
</li>
</ul>
</div>
</body>
</html>
https://jsfiddle.net/83c7npck/
To change the stacking order of HTML elements, you need the z-index CSS property. Think of the z-index as an expression of the element's depth, or Z axis, in relation to other elements in the HTML document. The X and Y axis' express the element's left/right and up/down values.
Z-index allows you to specify a 'stacking order', by assigning a number indicating a 'height' position. The higher the number, the 'closer' to the user that element will stack. So say a bunch of HTML elements each had one of these z-index values:
z-index: 1;
z-index: 999;
z-index: -10;
z-index: 50;
The stacking order, from farthest away to closest, will be:
z-index: -10;
z-index: 1;
z-index: 50;
z-index: 999;
A word of caution
Changing the stacking order means placing elements physically over the top of other elements. This means you are obscuring the user's ability to view and interact with them! Think carefully before placing elements behind others, it is best reserved for visual flair only.
Why it's not working
You haven't applied any CSS to your <canvas> elements, so the stacking order will default to that of the element type. Without CSS intervention, HTML elements will never overlap.
For a canvas element, that means block-level. You can read up on how a canvas element will behave by default and how to control it on the Mozilla Developer Network.
If you want to change the stacking order of your elements, you'd need to apply a few changes to your CSS:
canvas {
position: absolute; // this removes the element from the document flow and allows other elements to float over/under it
z-index:0; // alternately, we can simply make this '-1' to sit behind everything...
width: 100px; // just to make it clearly visible when it's working, very handy!
height:100px;
background-color: red;
}
div.mhm {
position:relative; // z-index only works if a position is set to relative or absolute
background-color: rgba(0,0,238,0.5);
z-index:10; // as long as this value is higher than that of the canvas' z-index, it will appear on top
}
I am creating snippets of HTML that later I convert to PNG (I am using IMGKit to do this).
My current HTML markup looks like this:
<html>
<head><title>Test</title></head>
<body>
<div class='snippet'>
...
</div>
</body>
</html>
Right now, even if I set the following CSS:
.snippet {
width:160px;
height:600px;
}
When inspecting the DOM, I noticed that the HTML element it is much wider than its contained DIV. I would like the HTML and Body tag to be exactly the size of that div, so that when I render to PNG the final width and height are 160x600.
What is the correct way of doing this in CSS? Do I need to add width and height attributes to both HTML and Body elements?
You can't change the size of the <html> tag. Its not possible. The html tag dimension is defined as the browser view-port. you can however change everything else by applying the css style: display: inline-block; like so:
body, div {
display: inline-block;
}
I can position a background image using the background property in an input field but I want an action to trigger when it is clicked.
Can I trigger an action on a background image click?
I just want to place a small 'X' image over the right hand side of input which clears the input.
You can absolutely position a link over the <input> and then apply a text-indent to the <input> to make room for the image. For example:
<div id="outer">
<img src="http://placekitten.com/16/16">
<input type="text">
</div>
And:
#outer {
position: relative;
}
#outer a {
position: absolute;
top: 0;
left: 0;
}
#outer input {
text-indent: 16px;
}
Live demo: http://jsfiddle.net/ambiguous/TgaFf/
The outer <div id="outer"> is just there to give me something to apply position: relative to; absolutely positioned elements are positioned with respect to the nearest ancestor whose position is anything other than static. The text-indent on the <input> starts the input cursor 16px from the left side of the <input> and thus leaves space for the image. In the real world you would, of course, adjust the top, left, margins, paddings, ... to make everything line up properly and look pretty.
sorry i misunderstood your question, add a class to the input, and you can do it with a jquery click function or a javascript onClick
Maybe, if you can pass a class to it with Jquery/ js. Otherwise there are some CSS3 options like transitions - to animate, see www.css3please.com Depends what you're wanting to do?
<html>
<head>
<script type="text/javascript">
function callmee()
{
alert("call");
}
</script>
</head>
<body>
<input type="button" style="background-image:url(shahrukh2.jpg);" onclick="callmee()"></div>
</body>
i think, u want this..
regardz
I feel like this is an easy question, but for whatever reason I can't figure it out today.
I need a div that always fills the entire page, no matter how large that page is. Then I need another div which I can re-size with javascript (mydiv.style.width = x; mydiv.style.height = y;).
If the second div is resized to be taller than the existing browser window height, the first div should resize to fit.
i.e. If the first div's background color is red, I should never see any white background color, because the first div always expands to the size of the entire page.
I tried this, it doesn't work because the red background doesn't expand to the size of the entire page:
example of the problem
I think Zack's alternate is the best answer: the body element IS a block-level element that always fills the entire 'page'. You can hook into it with JavaScript and CSS, just as you can with a div. Color your body element red and you'll never see white if your inner div is resized. If you don't want your CSS applied to every page in your site, add a class or ID to the body of the page you want to affect, and write your CSS to select only body elements with a specific class or ID.
Am I missing a requirement that's not addressed by using the body element?
I keep getting blasted by the CSS purists for this, but I recently solved this problem by using a table.
You need an outer div, set to "position:relative" and 100% height, and then you put a table inside, also 100% each way.
More explanation here: http://wondersofcomputing.blogspot.com/2009/07/table-height-browser-window-height.html
You're welcome to spurn the table solution. But then I can't help you.
how about something like this?
if (wholePageDiv.style.height < myDiv.style.height) {
wholePageDiv.style.height = myDiv.style.height + 10
}
An alternative -- if that background div only needs to be a color -- is to just set the body's background-color to whatever you need. Then you don't need to worry about any javascript resizing of the background.
Holy crap ive solved it, a FULLY CENTERED DIV, enjoy.
EDIT: minor cosmetic fix
Index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
body {text-align: center;}
p {width: 300px;}
.greenBorder {border: 1px solid green;}
.wrapperA { display: table; width: 1px; height: 1px; margin: 0 auto;}
.wrapperB { display: table-cell; #position: absolute; #top: 50%; vertical-align: middle;}
.wrapperC { #position: relative; #top: -50%;}
</style>
<script language="JavaScript" type="text/javascript">
function resize(id) {
var block = document.getElementById(id);
var htmlheight = document.body.parentNode.scrollHeight;
if (htmlheight > window.innerHeight) {htmlheight = window.innerHeight;}
block.style.height = htmlheight + "px";}
</script>
</head>
<body onload="resize('wrapper')" onresize="resize('wrapper')">
<div class="wrapperA greenBorder" id="wrapper">
<div class="wrapperB greenBorder">
<div class="wrapperC greenBorder">
<p>CENTERED CONTENT</p>
</div>
</div>
</div>
</body>
</html>