Pardon if this is too much of a newbie question, or just not the right type of question. I am in the beginning phase of learning how to program and one of my first tasks is getting my annotation editor to work.
I use bootstrap to create columns; namely, the column on the right (1/12th of sceen) to contain the different colors, and the other 11/12th column to contain the entire annotation editor(the pictures, etc). This all works well, except for the fact that my right column does not work or show up.
I think I am pretty sure that I closed the column of the first 11 portions, but trying to create another div with 1 column simply doesn't work; thus, I cannot put anything in it and can't put my colors in there.
The HTML syntax looks like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="2048_MMA/style/bootstrap.min.css" type ="text/css">
<link rel="stylesheet" href="css/clouds.css" type="text/css">
<link rel="stylesheet" href="css/background.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/dropdownmenu.css"/>
<style>
body{
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
padding-bottom: 500px;
}
iframe {
height: 670px;
width: 1200px;
margin-left:25%;
}
</style>
</head>
<body onload="init()">
<nav class="nav">
<ul>
<li>
Home
</li>
<li>
Applications
<ul>
<li>Mediaviewer</li>
<li>Annotation editor</li>
<li>2048</li>
</ul>
</li>
<li>
Essays
<ul>
<li>Essay Lea</li>
<li>Essay Jonathan</li>
<li>Essay Jelmer</li>
</ul>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-11">
<script type="text/javascript">
var canvas, ctx, flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
dot_flag = false;
var x = "black",
y = 2;
function init() {
canvas = document.getElementById('can');
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;
canvas.addEventListener("mousemove", function(e) {
findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function(e) {
findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function(e) {
findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function(e) {
findxy('out', e)
}, false);
}
function color(obj) {
switch (obj.id) {
case "green":
x = "green";
break;
case "blue":
x = "blue";
break;
case "red":
x = "red";
break;
case "yellow":
x = "yellow";
break;
case "orange":
x = "orange";
break;
case "black":
x = "black";
break;
case "purple":
x = "purple";
break;
case "grey":
x = "grey";
break;
}
if (x == "white")
y = 14;
else
y = 2;
}
function draw() {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
}
function erase() {
var m = confirm("Verwijder je kunstwerk?");
if (m) {
ctx.clearRect(0, 0, w, h);
document.getElementById("canvasimg").style.display = "none";
}
}
function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
flag = true;
dot_flag = true;
if (dot_flag) {
ctx.beginPath();
ctx.fillStyle = x;
ctx.fillRect(currX, currY, 2, 2);
ctx.closePath();
dot_flag = false;
}
}
if (res == 'up' || res == "out") {
flag = false;
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
draw();
}
}
}
</script>
<iframe src="mediaviewer2.html"></iframe>
<canvas id="can" width="1080%" height="610%" style="position:absolute;top:0.5%;left:29%;border:5px solid;"></canvas>
<img id="canvasimg" style="position:absolute;top:30%;left:54%;">
<input type="button" value="Reset" id="clr" size="23" onclick="erase()" style="position:absolute;top:15%;left:55%;height:40px;width:50px;">
</div> <!--end column--->
<div class="col-md-1">
<div style="position:absolute;top:%;left:50%;">Kies een kleurtje!</div>
<div style="position:absolute;top:15%;left:50%;width:15px;height:15px;background:green;" id="green" onclick="color(this)"></div>
<div style="position:absolute;top:15%;left:51%;width:15px;height:15px;background:blue;" id="blue" onclick="color(this)"></div>
<div style="position:absolute;top:15%;left:52%;width:15px;height:15px;background:red;" id="red" onclick="color(this)"></div>
<div style="position:absolute;top:20%;left:50%;width:15px;height:15px;background:yellow;" id="yellow" onclick="color(this)"></div>
<div style="position:absolute;top:20%;left:51%;width:15px;height:15px;background:orange;" id="orange" onclick="color(this)"></div>
<div style="position:absolute;top:20%;left:52%;width:15px;height:15px;background:black;" id="black" onclick="color(this)"></div>
<div style="position:absolute;top:20%;left:53%;width:15px;height:15px;background:purple;" id="purple" onclick="color(this)"></div>
<div style="position:absolute;top:15%;left:53%;width:15px;height:15px;background:grey;" id="grey" onclick="color(this)"></div>
</div>
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
<div class="cloud x6"></div>
<div class="cloud x7"></div>
<div class="cloud x8"></div>
<div class="cloud x9"></div>
<div class="cloud x10"></div>
<div class="cloud x11"></div>
</div> <!--end clouds-->
</div><!--end row-->
</div><!--end container-->
</body>
This picture depicts what I mean. Can you spot any mistakes in the HTML markup itself?
http://imgur.com/qKBroc9
You have a couple of potential issues that I see.
One is that your iframe has a width of 1200px and a height of 670px. That's not responsive. So, on smaller viewports, you wouldn't be able to see the entire contents and it will break out of the columns. Happily, Bootstrap offers some nice features to make your iframe responsive. To do this, you'd use the Bootstrap Responsive Embed classes. This creates a container with an intrinsic ratio of either 4:3 or 16:9. Basically that means that the iframe scales proportional to one of those two ratios and keeps you from having to specify fixed values. The markup that is applied looks like this:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="…"></iframe>
</div>
This also now allows you to set your width and height on the canvas element to 100% and use top/left/bottom/right properties set to 0 so that it will fill the same space as the iframe regardless of the size of the viewport.
The second issue is that you have set all of the content in your col-md-1 div to be positioned absolutely, and you are using % for the top and left values. This isn't going to work, because a div with no content has a height of 0. Therefore, unless you give the col-md-1 a fixed height value, you'll only be positioning the content against 0 (and 50% of 0 is still 0). Providing a fixed height to the column is of course an option, but again it's not terribly responsive. The better option here would be to use fixed values for your top and left properties. After all, you are positioning elements that have a fixed size, so there's no problem with them overlapping provided that you give each at least 15px of room.
The best option by far though, would be to not use absolute positioning for those elements, and simply let your elements be in the document flow. You can even use a css trick similar to the one used in Bootstrap's responsive embeds to create an element that has proportional height and width, yet scales with the overall design. You can see in the demo that no matter what size the viewport is, the color blocks scale with it.
DEMO
I've also adapted the demo to use the conventional built in Bootstrap features for buttons, navigation and dropdowns. Learning to use what the framework offers will definitely help save you time and effort in development, testing and maintenance.
Related
I added the scroll-behavior property in my CSS but it only works on the google chrome tool that allows me to see my website like if it was on a phone. When I load my website on my actual phone, there is no sliding effect. Any idea?
Here is what the code looks like :
function scrollToSection(event) {
if (supportsSmoothScrolling()) {
return;
}
event.preventDefault();
const scrollToElem = document.getElementById("section");
SmoothVerticalScrolling(scrollToElem, 300, "top");
}
function supportsSmoothScrolling() {
const body = document.body;
const scrollSave = body.style.scrollBehavior;
body.style.scrollBehavior = 'smooth';
const hasSmooth = getComputedStyle(body).scrollBehavior === 'smooth';
body.style.scrollBehavior = scrollSave;
return hasSmooth;
};
function SmoothVerticalScrolling(element, time, position) {
var eTop = element.getBoundingClientRect().top;
var eAmt = eTop / 100;
var curTime = 0;
while (curTime <= time) {
window.setTimeout(SVS_B, curTime, eAmt, position);
curTime += time / 100;
}
}
function SVS_B(eAmt, position) {
if (position == "center" || position == "")
window.scrollBy(0, eAmt / 2);
if (position == "top")
window.scrollBy(0, eAmt);
}
html, body {
scroll-behavior: smooth;
overflow-y: scroll;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid h-100 nopadding">
<div class="row h-100 nopadding">
<div class="col-lg-8 black nopadding text-center d-flex flex-column justify-content-center">
<a onclick="scrollToSection(event)" href="#more" class="more">Here is the button</a>
</div>
<div id="more"
class="col-lg-4 white nopadding text-center d-flex flex-column align-self-center justify-content-center">
Here is the section
</div>
</div>
</div>
I didn't add all the page elements but the arrow represent the anchor tag in the code :
As you have noticed, Safari does not support the scroll-behavior CSS property (see this). You'd need some JavaScript to achieve the same effect across different browsers. You may find an example here.
Update:
This is a working code snippet of this answer (which combines the answers of George Daniel and terrymorse).
function scrollToSection(event) {
if (supportsSmoothScrolling()) {
return;
}
event.preventDefault();
const scrollToElem = document.getElementById("section");
SmoothVerticalScrolling(scrollToElem, 300, "top");
}
function supportsSmoothScrolling() {
const body = document.body;
const scrollSave = body.style.scrollBehavior;
body.style.scrollBehavior = 'smooth';
const hasSmooth = getComputedStyle(body).scrollBehavior === 'smooth';
body.style.scrollBehavior = scrollSave;
return hasSmooth;
};
function SmoothVerticalScrolling(element, time, position) {
var eTop = element.getBoundingClientRect().top;
var eAmt = eTop / 100;
var curTime = 0;
while (curTime <= time) {
window.setTimeout(SVS_B, curTime, eAmt, position);
curTime += time / 100;
}
}
function SVS_B(eAmt, position) {
if (position == "center" || position == "")
window.scrollBy(0, eAmt / 2);
if (position == "top")
window.scrollBy(0, eAmt);
}
body {
scroll-behavior: smooth;
height: 1000px;
}
section {
margin-top: 500px;
}
<a onclick="scrollToSection(event)" href="#section">
Redirect On section
</a>
<section id="section">
Section Content
</section>
I would like to decide by button whether I draw a rectangle or a circle. That works so far. But if I first press the Circle button and then the Rectangle button, it does not delete the circle. The other way, it's the same. But I want only one object to be displayed at a time. The object which the user pressed at last should display.
<html>
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="c" width="500" height="500"></canvas>
<button type="button" onclick="drawArc()">circle</button>
<button type="button" onclick="drawRect()">rectangle</button>
<scipt>
var canvas = new fabric.Canvas("c");
var context = canvas.getContext('2d');
var rect = new fabric.Rect({
//circle values
});
var circle = new fabric.Circle({
//rect values
});
function clear() {
context.clearRect(0, 0, canvas.width, canvas.height);
}
function drawRect() {
clear();
canvas.add(rect);
}
function drawArc() {
clear();
canvas.add(circle);
}
</script>
</body>
</html>
Use visible property to show/hide object from canvas.
DEMO
var canvas = new fabric.Canvas("c");
var rect = new fabric.Rect({
width: 50,
height: 50,
fill: 'green',
visible: false
});
var circle = new fabric.Circle({
radius: 50,
fill: 'blue',
visible: false
});
canvas.add(rect, circle)
function drawRect() {
circle.visible = false;
rect.visible = true;
canvas.requestRenderAll();
}
function drawArc() {
circle.visible = true;
rect.visible = false;
canvas.requestRenderAll();
}
canvas{
border:1px solid;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.js"></script>
<button type="button" onclick="drawArc()">circle</button>
<button type="button" onclick="drawRect()">rectangle</button><br>
<canvas id="c" width="500" height="500"></canvas>
I have a page layout that looks like this....basically a page title, a set of thumbnails down the left arranged in two columns, and a third column which contains the big version of the thumbnail.
My issue is that I have quite a gap between the top of the big image and the top of the page (because the page title is a simple paragraph marker). I can fix this by bringing the title into the top of the first column, but then I end up with this.
What I want is this. I could add a small piece of text in to the right of the title, but my background colour is not uniform and so it will stand out. Plus, it's not a very elegant solution. I could do it with tables and span the title across two cells, but I don't want to use tables.
Any and all great ideas appreciated. Thanks.
EDIT - added code snippets - this is what I currently have, and equates to the first picture I posted.
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
slides[slideIndex-1].classList.add("stickyimage");
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
.bgimg {
background-image:url('Images/Draw/inkcircle_10pc_opacity.jpg')
}
.image7column {
float: left;
width: 14.28%;
padding-right: 5px;
}
.bigcolumn {
display: block;
float: left;
width: 71%;
height: 1400px;
}
.mySlides {
display: none;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="Image_handler.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="smallcss.css">
<title>Images</title>
</head>
<body class="bgimg" onload="showSlides(1)";>
<p> Images </p>
<div class="image7column">
<img src="Images/Draw/im1.jpg" style="width:100%;height:180px" alt="Image1">
<img src="Images/Draw/im2.jpg" style="width:100%;height:180px" alt="Image2">
</div>
<div class="image7column">
<img src="Images/Draw/im3.jpg" style="width:100%;height:180px" alt="Image3">
<img src="Images/Draw/im4.jpg" style="width:100%;height:180px" alt="Image4">
</div>
<!-- Big column stuff in here -->
<div class="bigcolumn">
<div class="mySlides">
<img src="Images/Draw/im1.jpg" style="width:300px;height:300px" alt="big image 1">
</div>
<div class="mySlides">
<img src="Images/Draw/im2.jpg" style="width:300px;height:300px" alt="big image 2">
</div>
<div class="mySlides">
<img src="Images/Draw/im3.jpg" style="width:300px;height:300px" alt="big image 3">
</div>
<div class="mySlides">
<img src="Images/Draw/im4.jpg" style="width:300px;height:300px" alt="big image 4">
</div>
</div> <!-- End of bigcolumn -->
</body>
</html>
If you want some help can you provide your html and CSS. I can take a look, but I will not do all your code.
But If i understand your issue you should do a thing like this :
For your issue you should create 1 main column that contains the 2 other columns and have a thing like this.
<div id ="main-column">
<h1>Title</h1>
<div id="column-container">
<div id="column1">
Column 1
</div>
<div id="column2">
Column 2
</div>
</div>
</div>
With the H1 taking all the width of the main-column, and for the column-container you can use flex, or for the 2 colums use the css property width : 50%, if your main-column width is defined
I want to do something very basic.
I have this div with a canvas and a button. I want to write "Signature 1" inside the canvas, in the center.
How can I achive that?
.signatureCanvas {
border:1px solid #027C8C;
width: 100%;
}
.signatureCanvas {
width: 100%;
max-height:200px;
}
<div class="signature-div text-center">
<canvas id="signatureCanvas" class="signatureCanvas"></canvas>
<div class="text-right">
<button uib-tooltip="Upload Signature" class="btn btn-default" ng-click="vm.uploadSignature();">Speichern <i class="glyphicon glyphicon-cloud-upload"></i></button>
</div>
</div>
You can add a javascript block that will add text to your canvas.
<script>
var canvas = document.getElementById("signatureCanvas");
var ctx=canvas.getContext("2d");
ctx.font="12px Arial";
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.fillText("Signature 1", canvas.width/2, canvas.height/2);
</script>
I have two jquery mobil HTML5 files, each has a navigation bar and a canvas. If I load page one first, the canvas is drawn ok. If I load page 2 first, the canvas is drawn ok. But if I use the navigation bar to switch from one to page two, nothing is drawn. If I refresh page two, it is now drawn but if I navigate back to page one, the canvas fails to be drawn. What am I doing wrong?
The code below is for page1.html Save it and copy it to page2.html and change the color of the circle.
<!DOCTYPE html>
<html>
<head>
<title>Compass</title>
<style type="text/css">
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
}
</style>
<link rel="stylesheet" href="jquery/jquery.mobile-1.3.1.css"></link>
<script language="JavaScript" type="text/javascript" src="jquery/jquery-1.10.1.js"></script>
<script language="JavaSCript" type="text/javascript" src="jquery/jquery.mobile-1.3.1.js"></script>
</style>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById('myDrawing').getContext('2d');
var scale = 1.2;
var size = 300;
var halfSize = size / 2;
var center = size * scale * 1.1;
var ring = size;
// setup
ctx.clearRect(0, 0, 800, 800);
ctx.translate(center, center);
ctx.scale(scale, scale);
ctx.rotate(-Math.PI / 2);
ctx.strokeStyle = "black";
ctx.fillStyle = "white";
ctx.lineWidth = 8;
ctx.lineCap = "round";
// fill in the back color
ctx.fillStyle = '#ffe8c0';
ctx.arc(0, 0, ring, 0, Math.PI * 2, true);
ctx.fill();
}
</script>
</head>
<body style="z-index:1.5;">
<div data-role="page" id="dial" class="unselectable" align="center" >
<!--HEADER DIV-->
<div data-role="header" align="center" data-nobackbtn="true" >
<h1 id="Title" value="">COMPASS </h1>
<div data-role="page" id="Menu" class="unselectable" >
<div
style="top: 1;
left: 1;
position: absolute;
z-index: 1;
visibility: show;">
</div>
</div><!-- /page -->
</div><!-- /header -->
<canvas id="myDrawing" width="800" height="800" >
<p>Your browser doesn't support canvas.</p>
</canvas>
<div class="ui-bar-a unselectable" data-role = "footer" data-id="foo" data-position="fixed">
<div class="" data-inline="true" >
<div data-role="controlgroup" data-type="horizontal" align="center" >
<a href="page1.html" data-role="button" id="dial" >Compass</a>
Wind
</div>
</div>
</div><!-- /footer -->
</div> <!-- /Div1 -->
</body>
</html>