I have been playing around with text in the canvas, and although it is easy to draw, it is not easy to interact with. I began implementing keyboard press functionality to update text on the canvas, but then gave up when I realized I would have to incorporate cut,copy,past and undo functionality.
Is there anyway to "float" html elements on top of eachother? For example can I float a text field ontop of certain parts of my canvas, disable the border and set the color to the canvas color?
Thank You
You may use the CSS position: absolute property with z-index: 1 to place elements above the canvas.
EDIT: added an example: here the div that contains "1234" floats on top of the div that contains "abcd" (that could be replaced with a canvas element)
<div id="wrapper">
<div style="position: absolute; left: 10px; top: 10px; width:200px; height:100px; background-color: yellow;">
abcd
</div>
<div style="position: absolute; z-index: 1; left: 50px; top: 20px; width:100px; height:20px; background-color: green;">
1234
</div>
</div>
You can use 'somehow' invisible text-control to gain control over the text being input and copy innerHTML on the canvas on keypress. Im doing similar stuff, copying computed font css attributes of the text present in DOM and more. Z-indexes work pretty straight. The setFocus() function can help too.
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've seen questions for putting an image in a text area, but I have a slightly different problem: I'd like to layer a textarea on top of an image. I've tried using the z-index style property but the image - which I fadeIn with jquery - always sits on top of the text area.
Here is another way of doing it which may be more versatile.
Create a block level container with two child elements, one for the image and one for the text area:
<div class="textpanel">
<img src="http://placekitten.com/300/300">
<textarea>some text area text...</textarea>
</div>
Apply the following CSS:
.textpanel {
position: relative;
}
.textpanel img {
display: block;
}
.textpanel textarea {
position: absolute;
top: 50px;
left: 50px;
height: 200px;
width: 200px;
background-color: rgba(255,255,255,0.5);
}
Set position: relative on the parent container and then use position: absolute to place the the textarea over the image.
You can use rgba to control the opacity of textarea or you can fade the image using your method of choice.
You can also try styling the border to the textarea as needed.
Demo fiddle: http://jsfiddle.net/audetwebdesign/ygMZ6/
How This Works
Setting position: relative on .textpanel simply sets a reference for any absolutely positioned child elements.
Setting position: absolute on textarea allows for vertical and horizontal positioning.
A new stacking order is created which is why the textarea appears overlying the image, which
is still in the root level stacking order.
In this case, no need to use z-index to alter the stacking order of any elements.
You could always use CSS:
textarea{
background:url('image.png');
}
or
textarea{
background-image:url('image.png');
}
I dont know why you would want to do that but here is my thought on this..
Set the background image of the text area then use simple javascript or jquery to implement background fading..
Here are some examples on background images for text areas..
http://www.angelfire.com/nm/thehtmlsource/jazzup/text/textareabgimage.html
I know we have <map> and <area> for mapping an image. I want to use polygon mode of this.
But just imagine I have a div element with a background-image and I want to map the background image like <img>.
My shape isn't rectangle or square; it's a polygon. And I don't want to use transparent div trick.
How can I map this?
Use a transparent image (e.g. with opacity:0) with an imagemaps, positioned over your div. This effect is how the ImageMapster plugin works.
I wrote a blog post that explains how these effects work. The long and short of it is, you can use HTML image maps on top of anything you want. All you need to do is to ensure that the img has the highest z-index, and is transparent, and is positioned absolutely on top of the element you want your end-user to actually see. If it's transparent, the end-user will only see what's behind it, giving you total flexibility to use the polygon position tracking capabilities of imagemaps on to of any other kind of elementsuch as a div.
Example:
<div id="container">
<img style="position: absolute; top: 0; left: 0; opacity: 0;
width: 100px; height: 100px;"
src="/placeholder.jpg"
usemap="#my-image-map">
<div style="position: absolute; top: 0; left:0;
background-image: url(/some-100-by-100-pixel-image.jpg)">
</div>
I'm looking to clone the Google Instant "underlay/type ahead" type look, where what the system is predicting is grayed out and infront of what you are typing.
The technical part of it I am completely sorted, as well as representing the text. I simply am unable to work out how to do the CSS positioning and transparent textbox over the top of the gray text.
Anyone know how to simply do this?
I've tried to adapt code from other sources, but been unable to get the text with the gray text underneath a transparent textbox.
I believe you're looking for something like this. Keep in mind they need to be posiitoned together, so it's probably a good idea to wrap this in a div together.
HTML
<div class='top'>
<input type='text' id='gray'/>
</div>
<div>
<input type='text' id='type'/>
</div>
CSS
.top {
background:transparent;
position:relative;
}
input {
font-size: 14px;
width: 200px;
}
#type {
background: transparent;
z-index: 1;
}
#gray {
position: absolute;
z-index: -1;
color: silver;
}
Live Example
http://jsfiddle.net/r4jSR/
Edit
This positioning works by stacking a position:relative div on top of another block level element, then setting the div's contents to absolute, but with no positioning. This causes the div to collapse as it has no contents, and - as long as neither block element has a margin - the 0,0 coordinates for absolute positioning should put it right on top of the block element below. Presto. This is the way Google does it.
i want to have a box in the centre of a page and several boxes scattered around, with different sizes, random positions, and no overlap.
I think this is not possible to do with just html and css, and javascript/html DOM is needed.
Have you seen examples of this? Do you have any tip or piece of code that can be helpful? Dont mind if it doesnt solve the whole problem, a solution for one of the sub-problems (eg no overlap) will be useful too!
Thanks
alt text http://img99.imageshack.us/img99/3563/scattered.jpg
If the size is fixed, perfectly centering a div is not hard. The trick is to apply negative margins:
#centered {
width: 400px; height: 200px;
position: absolute; top: 50%; left: 50%;
margin-left: -200px; margin-top: -100px;
}
Now, to position other divs relative to this centered div, you use position: relative.
Example HTML snippit:
<div id="centered">
<div id="other"></div>
</div>
And in addition to the above, the following CSS:
#other {
width: 200px; height: 100px;
position: relative; top: -150px; left: 180px;
}
Add a border or background color to get a better look at the example:
div {
border: 1px solid black;
}
If this is not a static page, and you want to randomize on every page load, you could either use Javascript or some server side scripting to create and style divs dynamically.
I assume you want to randomize on every page load, so that different users see different things. If so, this isn't possible with only HTML and CSS. CSS is designed to be deterministic and reproducible in a consistent way, which is the opposite of what you're going for here.
However, a clever way around this would be to link in a stylesheet from a dynamic page which itself serves random CSS. For example, have something like the following:
<link rel="stylesheet" type="text/css" href="styles.php"/>
where styles.php is a PHP page that generates the random CSS.
As far as your Question goes: No its not possible to do just using HTML and CSS.
I can't be done with just HTML and CSS, your options are:
create a style sheet each time with a server side language like PHP and serve the content precalculated to the browser
use a basic fixed style sheet and modify the DOM via Javascript
as for the non overlap part, you have to do a bit of math/geometry: generate coordinates for vertexes making sure they don't fall in a previously created box (boring but quite easy) and use position: absolute to place them.