HTML:
<div>
<canvas id="text_box" class="textbox" >
</canvas>
</div>
CSS:
.textbox{
position:absolute;
background: black;
left:100px;
width:750px;
height:100%;
margin: 0;
padding: 0;
border:0;
opacity:0.9;
display:none;
}
JavaScript
function drawCanvas() {
var canvas = document.getElementById("text_box");
var context = canvas.getContext('2d');
context.lineWidth=1;
context.fillRect(0,0,150,150);
context.fillStyle="white";
context.lineStyle="#ffff00";
context.font="12px sans-serif";
context.fillText("testestestsetestsetsetsetset.", 20, 20);
context.rect(0,0,400,400);
alert("test");
}
When I open this html, the text "test test test test test test test test test" just exceeds the width of the canvas, so the rest of it does not appear. i want the canvas(rectangle) to have a scroll bar if the text's length is long so i can scroll down to see the whole text.
I just started so I am not that familiar with the layout(css) part. can somebody give me some advice?
You can use a small div containing a larger canvas to have that div act as a "viewport" with scrollbars into the larger canvas.
HTML:
<div id=viewport>
<canvas id="canvas" width=750 height=300></canvas>
</div>
CSS:
#canvas{border:1px solid red;}
#viewport{
overflow:scroll;
width:200px; height:200px;
border:2px solid blue;
}
Here's example code and a Demo:
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.strokeStyle="#ffff00";
context.font="24px verdana";
context.fillText("This is some long text that will require scrolling to read.", 20, 50);
body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}
#viewport{
overflow:scroll;
width:200px; height:100px;
border:2px solid blue;
}
<div id=viewport>
<canvas id="canvas" width=750 height=150></canvas>
</div>
BTW, you have some syntax errors in the context styling commands you've used. Here's a nice cheatsheet of all the valid canvas methods and properties: https://simon.html5.org/dump/html5-canvas-cheat-sheet.html
Related
i'm new in Javascript and i got a task which i can't even solve..
I have to get a HTML 5 Drag and Drop, which can add Elements as much as i want, and if i want to edit one of the new elements or change the Position it has to be easy.
This is what it look like now:
http://picul.de/view/HRO
at the moment this don't work as i need..
who can help me?
var dragok = false;
var pos;
function allowDrop(e)
{
e.preventDefault();
}
function get_pos(e)
{
pos = [e.pageX , e.pageY];
}
function drag(e)
{
e.dataTransfer.setData("Text",e.target.id);
}
function drop(e)
{
e.preventDefault();
var canvas = document.getElementById("graphCanvas");
var ctx = canvas.getContext("2d");
var offset = e.dataTransfer.getData("text/plain").split(',');
var data=e.dataTransfer.getData("Text");
var img = canvas = document.getElementById(data);
var dx = pos[0] - img.offsetLeft;
var dy = pos[1] - img.offsetTop;
ctx.drawImage(document.getElementById(data), e.pageX - dx-170, e.pageY - dy-100);
}
function getCoordinates(e)
{
var canvas = document.getElementById("graphCanvas");
var ctx = canvas.getContext("2d");
x=ctx.clientX;
y=ctx.clientY;
document.getElementById("footerCoord").innerHTML="Coordinates: (" + x + "," + y + ")";
}
body {
background:#eee;
}
#DnDBox {
margin:0 auto;
margin-top:7vh;
width:80vw;
height:80vh;
padding:1vmax;
background:#f5f5f5;
/* Erstmal nur zur Übersicht */
border:1px solid #111;
}
#DnDBox #canvasBox {
border:1px solid #111;
}
#DnDBox .leftBox {
float:right;
width:25%;
height: 90%;
}
#DnDBox .leftBox select{
width:100%;
padding:5px;
margin-bottom:5px;
}
#DnDBox .leftBox .dragBox{
float:right;
width:100%;
height: 90%;
/* Erstmal nur zur Übersicht */
border:1px solid #111;
}
#DnDBox .leftBox .dragBox ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#DnDBox .leftBox .dragBox ul > li{
float:left;
padding:20px;
text-align:center;
background:#eee;
}
#DnDBox .leftBox .dragBox ul > li:hover{
padding:20px;
text-align:center;
background:#ddd;
}
#DnDBox .leftBox img{
cursor:move;
}
#DnDBox .leftBox img:active{
cursor:move;
}
#DnDBox footer {
float:left;
margin-top:5px;
padding:5px;
width:100%;
border:1px solid #111;
}
<div id="DnDBox">
<canvas id="graphCanvas" onmousemove="getCoordinates(event)" ondrop="drop(event)" ondragover="allowDrop(event)" height=400 width=700 style="border:1px solid #000000;"></canvas>
<div class="leftBox">
<select name="plh1">
<option>Test</option>
<option>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
<select name="plh2"></select>
<div class="dragBox">
<ul>
<li><img id="img1" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-128.png" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/></li>
<li><img id="img2" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-128.png" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/></li>
<li><img id="img3" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-128.png" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/></li>
</ul>
</div>
</div>
<footer id="footerCoord">asd</footer>
</div>
greets,
daniel
You can't drag an image painted onto a canvas around without additional support - the painted image is just a set of pixels that are part of the canvas's image data.
You may be interested in a canvas library called Fabric.js (tag and homepage). I'm not "recommending" it as such - I haven't used it - but you can certainly drag canvas objects created by the library on the homepage.
A simpler solution might be to use JavaScript/HTML without the canvas. Replace the canvas with, say, a relative DIV element (so it can act as a container for absolutely positioned elements). Then dropping an image on the DIV creates a new Image object (say a clone of the image dragged) and absolutely positions it within the container according to where it was dropped. The new copy of the image can have it's own drag handlers to move it around the container and program options could be added to delete a (cloned) dropped image as necessary.
You could also calculate the position of the mouse relative to the image element when starting a drag operation. This would allow dropping it under the mouse in the same relative position to the mouse cursor as at the start of the drag operation. This question on retrieving the X Y position of an element may be of help. (At the moment the dropped image does not appear under the cursor.)
You need to keep track of the elements. The canvas is just a bitmap image with no understanding of what a circle or square is.
Ideas:
(1) Create a separate canvas with a transparent background for each shape that you make and overlay them. When clicking on or touching a point of the canvas repeatedly, cycle through the potential target elements below that event, highlighting them in some way. When the correct element is selected, define an event (a gesture) that will allow the user to select that target for editing. Stop the selection function and initiate the editing function.
(2) Forget the canvas thing, and do it all with SVG
I just want to understand why the #div element is not appearing anyway at the simple following code:
<!DOCTYPE html>
<html>
<body>
<div id="div"></div>
<style>
#div{
color:black;
width:50px;
height:50px;
}
</style>
<script>
function algo(){
alert("ALGO");
}
document.querySelector("#div").onclick = algo;
</script>
</body>
</html>
Here's the fiddle:
http://jsfiddle.net/26pkt2y6/
color would mean the foreground color. Since there's no text to show, it appears that the div isn't displaying. Set the background to see the div.
function algo() {
alert("ALGO");
}
document.querySelector("#div").onclick = algo;
#div {
color: black;
width: 50px;
height: 50px;
background: #000;
}
<div id="div"></div>
Because it's empty, try to add some content between the div tags, or if you want to have a block like a button you have to change the CSS to:
<style>
#div{
background-color:black;
width:50px;
height:50px;
}
</style>
div{
color:black; change this to background-color:black;
width:50px;
height:50px;
}
Use background-color for the color
Your div is empty, set a text or styling with css, you should used background-color instead of color:
function algo(){
alert("ALGO");
}
document.querySelector("#div").onclick = algo;
#div{
background-color:black;
width:50px;
height:50px;
}
<div id="div"></div>
I am having an issue trying to get these 3 divs to line up on the same horizontal pane.
I will also like to know if it is possible to have the color of my circle change based on a value of a variable. I would greatly appreciate an example function.
<html>
<body>
<style type="text/css">
.circle
{
width:115px;
height:115px;
border-radius:250px;
font-size:20px;
color:#fff;
line-height:115px;
text-align:center;
background:#000
}
</style>
<div id="container" style=" border: 2px coral solid; width:100%; height:120px;">
<div class="circle">Hello</div>
<div id="leadInfo" style="width:37%; height:115px; float:left; background-color:yellow;"> </div>
<div id="leadInfo2" style="width:37.5%; height:115px; float:right; background-color:blue;"> </div>
</div>
</body>
</html>
First you wrote
float: leftt;
Instead of
float: left;
Also, try adjusting one of the yellow circles to be less then 37.5%, it somehow goes over 100% in total and jumps down. So 37% will be enough.
<div id="container" style=" border: 3px coral solid; width:100%; height:auto;">
<div id="colorwheel" style="width:25%; float:left; border: 3px coral solid;">
<canvas id="circlecanvas" width="100" height="100"></canvas>
<script>
var canvas = document.getElementById("circlecanvas");
var context = canvas.getContext("2d");
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fillStyle="red";
context.fill()
</script>
</div>
<div id="leadInfo" style="width:37.2%; height:108px; float:right; background-color:yellow;border:1px solid red;"> </div>
<div id="leadInfo" style="width:37.2%; height:108px; float:right; background-color:yellow;border:1px solid red;"> </div>
<div style="clear:both"></div>
</div>
And about changing the color of a circle on canvas...
No, you can't change anything you've drawn on the canvas (including your circle).
That's because canvas doesn't "remember" where it drew your circle. Your circle becomes an un-remembered group of pixels on the canvas.
Therefore, if you want to change anything on the canvas, you must erase the canvas and redraw your circle using the fillStyle in your variable.
// create a variable to hold your desired fill color
var myFillColor="gold";
// clear the canvas
context.clearRect(0,0,canvas.width,canvas.height);
// set the context.fillStyle to your variable
context.fillStyle=myFillColor;
// redraw your circle
context.beginPath();
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fill();
Important note: context.arc is a path command and every group of path commands must be preceeded by context.beginPath. beginPath tells the browser you are finished drawing the previous path and are now drawing a new path. Failing to start new paths with beginPath will cause your next context.fill (or context.stroke) command to redraw all previous path commands.
I have a bunch of content that floats left in a container, and I'd like for the container to hug the content, but for some reason it's much wider then the content and I have no idea why. I have it set up in a fiddle here http://jsfiddle.net/vG8NY/6/ the red and blue bordered containers should hug the right edge of the circle.
The code is very simple and is as follows:
HTML:
<div class="hot_spot-container">
<div class="content-spot">
<img class="hotspot-cir" src="http://www.klossal.com/sixred/discovery/images/hotspot-left.png" />
<div class="hotspot-content"></div>
<img class="hotspot-cir" src="http://www.klossal.com/sixred/discovery/images/hotspot-right.png" />
<br class="clear-fix" />
</div>
</div>
CSS:
.hot_spot-container {border:1px solid blue;
position:absolute;
}
.content-spot {
border:1px solid red;
display:inline-block;
}
.hotspot-cir {
float:left;
height:100%;
width:auto;
}
.hotspot-content {
float:left;
background:#ec6e47;
}
.clear-fix {
clear:both;
}
JS
$(".content-spot").css({
height:$(window).height() * ".2"
});
try this:
$(".content-spot").css({
height:$(window).height() * ".2",
width:$(window).height() * ".2"
});
when you change height of content-spot it's width still fixed and need to get resize too.
DEMO
you can use this code too:
$(".hotspot-cir").css({
height:$(window).height() * ".2"
});
DEMO
You must define the width for the element to which you have set the position: absolute; so you should use something like this:
.hot_spot-container {border:1px solid blue;
position:absolute;
/* any width you want or if you don't know the width then define auto.*/
width: 45px;
}
if you make
.hot_spot-container {display:inline-block}
instead of it having position:absolute it does what you want it to. if you want position absolute you need to give it a width
Try this
I removed your javascript and made this changes
.content-spot {
border:1px solid red;
display:inline-block;
width: auto;
}
.hot_spot-container {
border:1px solid blue;
position:absolute;
display: inline-block;
}
I have the following html
<div class="banner_area_internal">
<div class="banner_wrapper_internal" id="overlay_field">
<img src="images/internal_banner_holder.png" />
<img class="internal_banner" src="images/about-banner.jpg" />
<div id="overlay">
<img class="internal_banner_overlay" src="images/about-banner_hover.jpg" />
</div>
</div>
</div>
css
.banner_area_internal {
margin-top:10px;
width:100%;
height:250px;}
.banner_wrapper_internal {
height:250px;
width:1000px;
margin:0 auto}
.banner_wrapper_internal p {
font-size:30px;
color:#ffffff;
font-weight:bold;
margin:0px 300px;
display:block}
.internal_banner {
position:relative;
top:-235px;
left:15px;
z-index:-2;
}
.internal_banner_overlay {
position:absolute;
top:-25px;
left:15px;
z-index:-2;
}
#overlay{
position:absolute;
overflow:hidden;
width:340px;
height:200px;
z-index:-1;
border:2px #aeaeae solid;
}
#overlay_field
{
position: relative;
width:1000px;
height:250px;
overflow:hidden;
}
and the following script as mentioned by #rkw
$(document).ready(function() {
$("#overlay_field").hover(function(){
$("#overlay").show(); //Show tooltip
}, function() {
$("#overlay").hide(); //Hide tooltip
})
$('#overlay_field').mousemove(function(e){
$("#overlay").css({left:e.pageX-360, top:e.pageY-280});
});
});
The Effect I'm trying to achieve here is:
An image appears in as a banner "internal_banner"
When the mouse hovers over this image(or rather "overlay_field") a small div appears which follows the mouse. Now the contents of the div is another image "internal_banner_overlay"
I want this image to be positioned exactly as "internal_banner", i.e stay in the same place so it appears like the mouse let's you see another underlying image. The problem is the image doesn't stay at one place, it positions within the div and moves with the mouse rather than the document even though it's position is set to absolute.
In simple words, when the mouse moves over the banner area, it should appear like the cursor changed to a small box that let's you see through the banner at another image.
Just add the temp banner in the upper div and change its opacity on mouseover and mouseout events.
<div class="banner_area_internal">
<div class="banner_wrapper_internal" id="overlay_field">
<img src="abcd.png" />
<img class="internal_banner permBanner" src="permBanner.png" />
<img alt="" src="tempBanner.jpg" id="temp" style="height: 250px; width: 1000px; opacity: 0; position: absolute">
</div>
</div>
JS:
$(document).ready(function() {
$("#overlay_field").hover(function(){
$("#overlay").show(); //Show tooltip
}, function() {
$("#overlay").hide(); //Hide tooltip
})
$('#overlay_field').mousemove(function(e){
var width = 250;
var height = 250;
var left = parseInt(e.pageX)-parseInt(pageXOffset);
var top = parseInt(e.pageY)-parseInt(pageYOffset);
var a = document.getElementById("temp");
a.style.opacity = 1;
a.style.left = "0px";
a.style.top = "0px";
a.style.clip = "rect("+top+","+(left+100)+","+(top+100)+","+left+")";
});
});
Style
.banner_area_internal {
margin-top:10px;
width:100%;
height:250px;}
.banner_wrapper_internal {
height:250px;
width:1000px;
margin:0 auto}
.banner_wrapper_internal p {
font-size:30px;
color:#ffffff;
font-weight:bold;
margin:0px 300px;
display:block;
}
.internal_banner {
position:relative;
top:-235px;
left:15px;
z-index:-2;
}
.internal_banner_overlay {
position:absolute;
top:-25px;
left:15px;
z-index:-2;
}
#overlay{
position:absolute;
overflow:hidden;
width:250px;
height:250px;
border:2px #0000bb solid;
}
#overlay_field
{
position: absolute;
width:1000px;
height:250px;
overflow:hidden;
}
#temp{position:absolute;}
Alternate:
Or alternatively you can add and remove the temporary banner on the mouseover and mouseout events.