When adding rectangles the canvas height does not scale with it. Changing the canvas height is not an option. I am searching for weeks how to make this possible. My question is when adding multiple rectangles that the canvas height automatically increases with it for example bij 100 pixels so that it shows the complete rectangle and not only a piece of it like now.
Here is how it is now https://jsfiddle.net/5qybcp84/
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IIS7</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/NodeList.js"></script>
<script src="click.js"></script>
<script src="date.js"></script>
<script src='jcanvas.min.js'></script>
<script src="canvasscript.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<b>Nodes</b>
<br>
<div class="scrollbar">
<div class="content">
<canvas id="NodeList" width="200" style="border:2px solid black"></canvas>
</div>
</div>
<div class="Display" id="Display">
<canvas id="NodeDisplay" style="border:2px solid black;" ></canvas>
<script>
var ctx = $('#NodeList').get(0).getContext('2d');
var rects = [[20, 20, 150, 100], [20, 140, 150, 100]];
for(var i=0;i<rects.length;i++) {
ctx.fillRect(rects[i][0],
rects[i][1],
rects[i][2],
rects[i][3]);
}
$('#NodeList').click(function(e) {
var x = e.offsetX,
y = e.offsetY;
for(var i=0;i<rects.length;i++) {
if(x > rects[i][0]
&& x < rects[i][0] + rects[i][2]
&& y > rects[i][1]
&& y < rects[i][1] + rects[i][3]) {
alert('Rectangle ' + i + ' clicked');
}
}
});
</script>
</div>
<div id="canvas-wrap">
<canvas width="600" height="600" style="border:2px solid black;"></canvas>
<div id="overlay"></div>
<div class="een" style="border:2px solid black;" >11111 </div>
<div class="twee" style="border:2px solid black;" >22222 </div>
<div class="drie" style="border:2px solid black;" >33333</div>
<div class="vier" style="border:2px solid black;" >44444 </div>
</div>
</div>
</body>
</html>
html, body {
height: 100%;
overflow: hidden;
}
b {
margin-left: 75px;
}
#container {
margin-left:auto;
margin-right:auto;
text-align:center;
}
a img {
border:none;
}
.scrollbar{
width:220px;
height:1050px;
border:1px solid #000;
overflow:scroll;
overflow-x: hidden;
position: fixed;
}
.content{
width:auto;
height:100%;
}
#Display {
margin-left: 580px;
float: left;
}
#NodeDisplay{
float: left;
height: 300px;
width: 600px;
margin-left: -200px;
}
#canvas-wrap {
position:fixed;
margin-left: 380px;
float: left;
position: fixed;
margin-top: 435px;
}
#canvas-wrap canvas {
position:absolute;
top:0;
left:0;
z-index:0
}
.een{
height: auto;
width: 600px;
}
.twee{
height: auto;
width: 600px;
}
.drie {
height: auto;
width: 600px;
}
.vier{
height: auto;
width: 600px;
}
If you want to resize your canvas without stretching your drawings you'll need a draw() method. This draw method will add all object to your canvas. Therefore you'll have to save your object somewhere. You'll need to do this because resizing the canvas clears it. The draw method need to know your current objects and draws them every time you resize the canvas.
You could add some JQuery code:
Everytime you add a rectangle:
$('#NodeList').height("+=100");
draw();
when you delete a rectangle:
$('#NodeList').height("-=100");
draw();
In your example that would be for for-loop right now. But the whole loop.
Related
I have run into a problem that I can't figure out. For some reason, my SVG images keep getting cut off. I have been digging through the SVG docs.
Here is the code:
var draw = SVG().addTo('#drawing').size(300, 300)
var Circle = draw.symbol();
Circle.circle(50).fill('none').stroke({
color: 'black',
width: 1
})
draw.use(Circle).move(50, 200)
draw.use(Circle).move(100, 200)
<html>
<head>
<title>SVG.js</title>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
</head>
<body>
<div style="margin: 1%; border: 1px solid black; height: 500px;">
<div id="drawing" style="margin: 1%; border: 1px solid red;height: 95%"></div>
</div>
</body>
</html>
So it looks like the line is being drawn either using outside or centered so the edge is being cut off. What I did was transform the circle to move it by 1px on the x and y axis. I looked through the docs and didn't see a way to change the line style which would also probably fix this, but I couldn't see anything.
<html>
<head>
<title>SVG.js</title>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
</head>
<body>
<div>
<div id="drawing"></div>
</div>
</body>
<script>
var draw = SVG().addTo('#drawing').size(52, 52)
var Circle = draw.symbol();
Circle.circle(50).fill('none').stroke({ color: 'black', width: 1 }).transform({
translateX: 1,
translateY: 1
})
draw.use(Circle).move(0, 0)
</script>
</html>
Your example
<html>
<head>
<title>SVG.js</title>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
</head>
<body>
<div style="margin: 1%; border: 1px solid black; height: 500px;">
<div id="drawing" style="margin: 1%; border: 1px solid red;height: 95%"></div>
</div>
</body>
<script>
var draw = SVG().addTo('#drawing').size(300, 300)
var Circle = draw.symbol();
Circle.circle(50)
.fill('none')
.stroke({ color: 'black', width: 1 })
.transform({translateX: 1, translateY: 1})
draw.use(Circle).move(50, 200)
draw.use(Circle).move(102, 200)
</script>
</html>
Alternative without transform per your comments
var draw = SVG().addTo('#drawing').size(300, 300)
var Circle = draw.symbol();
Circle.circle(50)
.fill('none')
.stroke({ color: 'black', width: 1 })
draw.use(Circle).move(50, 200)
draw.use(Circle).move(102, 200)
#drawing symbol {
overflow: visible;
}
<html>
<head>
<title>SVG.js</title>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
</head>
<body>
<div style="margin: 1%; border: 1px solid black; height: 500px;">
<div id="drawing" style="margin: 1%; border: 1px solid red;height: 95%"></div>
</div>
</body>
</html>
I am trying to create a drag and drop question where the user drops an arrow on a specific part of a photo. The photo will have 4 black rectangles on it labeled A, B, C, D and the arrows will be 1, 2, 3, 4. My goal is to layer the rectangle "drop zones" on top of the photo (of a pulley system). Then the arrows will be dropped in the proper drop zone and after each arrow is dropped it will return a string denoting the location of the arrows ie: 2A, 3B, 4C etc..
what I have right now the photo is stuck inside of the dropzone rectangle and therefore no arrow can be dropped on top of the photo. I was hoping someone could help. Here is what I have
``$<!DOCTYPE html>
<html>
<head>
<title>js drag and drop</title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
.dragzone
{
height: 400px;
width: 40%;
border: 2px solid black;
float: left;
margin-top: 150px;
margin-left: 7%;
}
.dropzone
{
height: 400px;
width: 40%;
border: 2px solid black;
float: left;
margin-top: 150px;
margin-left: 7%;
}
</style>
</head>
<body>
<div class="dragzone">
<img src="orange_T.png" id="dragelement" height="80px" ondragstart="dragStart (event)">
<img src="red_T.png" id="dragelement" height="80px" ondragstart="dragStart (event)">
</div>
<div class="dropzone" ondragover="allowDrop(event)" ondrop="drop(event)" >
<div class="picture" >
<img src="C:\Users\Claire Peters\Desktop\Research\pulleys haptic screenshots\1.1.png" alt="HTML5 Icon" style="width:400px;height:400px;">
</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
`
and
var id;
function allowDrop(ev)
{
ev.preventDefault();
}
function dragStart(ev)
{
id=ev.target.id;
//alert(id);
}
function drop(ev)
{
ev.target.append(document.getElementById(id));
event("dropped!")
}
Hi I have a main div that hosts 2 other divs. The lower one is to change height depending on the resize of the main div size.
Here is the code as far as I got it:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
#upper{
background:#F00;
border: black solid 2px;
overflow-y:scroll;
height: 50px;
}
#lower{
background:#AAF;
border: red solid 2px;
overflow-y:scroll;
}
#maindiv{
height: 100%;
border: green solid 2px
}
html,body{margin: 0px;}
</style>
</head>
<body id="bodyId" >
<div id="maindiv">
<div id="upper">test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
v
test<br/>
test<br/></div>
<div id="lower" onresize="resize('lower')">test2</div>
</div>
<script type="text/javascript">
function resize(arg)
{
var frame= document.getElementById(arg);
var heights= document.getElementById(arg).parentNode.offsetHeight ;
alert(frame);
frame.style.height = heights -50 + "px";
}
</script>
</body>
</html>
FOr some reason it doesn't work. I want to get the lower divs id (lower) to the function and get the parent divs id (maindiv) and its height. With that I want to set the height of the lower div.
Any ideas?
Thanks for your help.
TheVagabond
A good way to handle changes in screen sizes is using media queries in your css.
W3 schools is a good place to start.
A quick example, take the parent div and 2 child:
<div id="parentContainer">
<div id="d1"> </div>
<div id="d2"></div>
</div>
We can style the above using:
#parentContainer {
border:1px solid red;
height:100%;
width:300px;
}
#d1 {
width:300px;
height:300px;
background-color:green;
}
#d2 {
width:300px;
height:300px;
background-color:orange;
}
Now, with media queries, we can make some changes to the styling dending on screen sizing:
#media screen and (max-width:400px) {
#parentContainer {
height:100%;
}
#d1, #d2 {
height:50%;
}
}
In this example, we are saying WHEN the screen size is 400px change the height of the parent to 100% and make the child divs both 50% each.
By doing this, each time the screen size decreases, so do the divs, dynamically.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
#upper{
background:#F00;
border: black solid 2px;
overflow-y:scroll;
height: 50px;
}
#lower{
background:#AAF;
border: red solid 2px;
overflow-y:scroll;
}
#maindiv{
height: 100%;
border: green solid 2px
}
html,body{margin: 0px;}
</style>
</head>
<body id="bodyId" onresize="resize('lower')">
<div id="maindiv">
<div id="upper">test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
v
test<br/>
test<br/></div>
<div id="lower">test2</div>
</div>
<script type="text/javascript">
function resize(arg)
{
var frame= document.getElementById(arg);
var heights= frame.parentNode.offsetHeight;
frame.style.height = heights -70 + "px";
}
</script>
</body>
</html>
#Raj was right with the body, I just had some wrong adressing inside the script part.
#F. Bar I will look into the media query, however I don't have a starting height for the lower div SO I have to play with that. Thanks however point out about the media query at all, haven't heared of that yet.
You need to get parentElement instead of parentNode.
Here is a snippet with a button for test resize.
You can call a function everytime on event when the upper div height changes.
function resize(arg)
{
var frame= document.getElementById(arg);
var heights= document.getElementById(arg).parentElement.clientHeight;
frame.style.height = heights -50 + "px";
}
#upper{
background:#cca;
border: black solid 2px;
overflow-y:scroll;
height: 50px;
box-sizing: border-box;
}
#lower{
background:#9c9;
border: red solid 2px;
overflow-y:scroll;
box-sizing: border-box;
}
#maindiv{
display: block;
height: 100%;
border: green solid 2px;
box-sizing: border-box;
}
html, body
{
height: 100%;
width: 100%;
margin: 0px;
}
<div id="maindiv">
<div id="upper">test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
v
test<br/>
test<br/></div>
<div id="lower">test2</div>
<button onclick="resize('lower')">resize</button>
</div>
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
What's The Best Way of Centering a Div Vertically with CSS
This might be a CSS question or it might be a JavaScript question or it might be an HTML question.
How do I center a vertically?
I have managed to horizontally align a Div object. Here is how I did it. I got the width and the height of the object I wanted to center (XAML CODE)
<Grid Background="White" Height="300" Width="738" VerticalAlignment="Center" HorizontalAlignment="Center">
Then, in the html file that hosts the silverlight control I did this:
<div id="silverlightControlHost" style="width:738px; height: 300px; margin-top:auto; margin-bottom:auto; margin-left: auto; text-align:center; margin-right: auto;">
That puts the control centered horizontally at the top of the web page.
Now, how do I center it vertically?
I tried to apply this code
And it did not work
Here is my whole html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>SilverlightApplicationThree</title>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
margin-left: auto;
margin-right: auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// vertical align function
$.fn.vAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = Math.ceil((ph-ah) / 2); //var mh = (ph - ah) / 2;
$(this).css('margin-top', mh);
});
};
$('.silverlightControlHost object').vAlign();
});
</script>
</head>
<body><center>
<form id="form1" runat="server">
<div id="silverlightControlHost" style="width:738px; height: 300px; margin-top:auto; margin-bottom:auto; margin-left: auto; text-align:center; margin-right: auto;">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%" >
<param name="source" value="Bin/Debug/SilverlightApplicationThree.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>
</form>
</center>
</body>
</html>
This fixed the problem. Knowing the height and width of the control, I used this
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
top:50%;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
margin-left: -369px;
left:50%;
margin-right: auto;
margin-top:-150px;
position:fixed;
top:50%;
}
</style>
<div id="silverlightControlHost" style="width:738px; height: 300px; margin-bottom :auto; text-align:center; margin-right: auto;">
How about something like the following?
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<style type="text/css">
html, body {
position: relative;
margin: 0;
height: 100%;
padding: 0;
background: black;
}
.wrap {
/* Place top of wrap at center of page */
position: absolute;
top: 50%; right: 0; left: 0;
background: white;
}
.inner {
/* Negative margin to bring back up page (half of height) */
margin: -150px auto;
width: 738px;
height: 300px;
background: yellow;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
</div>
</div>
</body>
</html>
I want to create a sort of light/thick box that only acts on a single DIV within a page.
When mine fires off the first div(phantom_back) acts as I want it but the second, phantom_top sets its self after phantom_back regardless of its z-index and positioning.
What am I doing wrong?
Here is what I have so far:
<html>
<head>
<script type="text/javascript">
<!--//
function phantom_back(image)
{
document.getElementById('phantom_back').style.zIndex = 100;
document.getElementById('phantom_back').style.height = '100%';
document.getElementById('phantom_back').style.width = '100%';
phantom_top();
}
function phantom_top(image)
{
document.getElementById('phantom_top').style.zIndex = 102;
document.getElementById('phantom_top').style.height = 600;
document.getElementById('phantom_top').style.width = 600;
document.getElementById('phantom_top').style.top = 0;
document.getElementById('phantom_top').style.left = 0;
}
//-->
</script>
</head>
<body>
Change
<div style="height: 700px; width: 700px; border: 2px black solid; margin:0 auto; background-color: red;" id="overlord">
<div style="height: 10px; width: 10px; position: relative; z-index: -1; background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;" id="phantom_back"></div>
<div style="height: 10px; width: 10px; position: relative; z-index: -3; margin: 0 auto; background-color: green;" id="phantom_top">asdf</div>
</div>
</body>
</html>
I was wandering why none of the tutorials I've been able to find offer something like this.
So, I got it. I set an absolute positioning on phantom_back and instead of trying to restack them I just set the visibility. When I tried to set the z-index it would fall apart on me.
<html>
<head>
<script type="text/javascript">
<!--//
function phantom_back(image)
{
document.getElementById('phantom_back').style.height = 700;
document.getElementById('phantom_back').style.width = 700;
document.getElementById('phantom_back').style.zIndex = 50;
phantom_top();
}
function phantom_top()
{
document.getElementById('phantom_top').style.height = 600;
document.getElementById('phantom_top').style.width = 600;
document.getElementById('phantom_top').style.visibility = "visible";
}
//-->
</script>
</head>
<body>
Change
<div style="height: 700px; width: 700px; border: 2px black solid; margin:0 auto; background-color: red;" id="overlord">
<div style="height: 10px; width: 10px; position: absolute; z-index: -1; background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;" id="phantom_back"></div>
<div style="margin: 0 auto; text-align: center; height: 10px; width: 10px; position: relative; z-index: 102; top: 10px; background-color: white; visibility: hidden;" id="phantom_top"><br /><br /><img src="load.gif"></div>
</div>
</body>
</html>
phantom_top is set to position:relative not absolute therefore it's currently not overlapping phantom_back.
Don't forget to concatenate a px string for height and width. You don't need the px for z-index
document.getElementById('phantom_back').style.height = 700 + "px";
Like that.