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>
Related
I would like to add an image to my website like in this example -> Cropped image
How do I crop the image? If i am using a .png image, i'm still seeing the black/white background. Is there a way to have only the man without the background using HTML & CSS?
Here is an easy way to crop any image before uploading. https://codepen.io/githyoung/pen/LYEjwdO
// Start upload preview image
$(".gambar").attr("src", "https://user.gadjian.com/static/images/personnel_boy.png");
var $uploadCrop,
tempFilename,
rawImg,
imageId;
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.upload-demo').addClass('ready');
$('#cropImagePop').modal('show');
rawImg = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
else {
swal("Sorry - you're browser doesn't support the FileReader API");
}
}
$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 150,
height: 200,
},
enforceBoundary: false,
enableExif: true
});
$('#cropImagePop').on('shown.bs.modal', function(){
// alert('Shown pop');
$uploadCrop.croppie('bind', {
url: rawImg
}).then(function(){
console.log('jQuery bind complete');
});
});
$('.item-img').on('change', function () { imageId = $(this).data('id'); tempFilename = $(this).val();
$('#cancelCropBtn').data('id', imageId); readFile(this); });
$('#cropImageBtn').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'base64',
format: 'jpeg',
size: {width: 150, height: 200}
}).then(function (resp) {
$('#item-img-output').attr('src', resp);
$('#cropImagePop').modal('hide');
});
});
// End upload preview image
label.cabinet{
display: block;
cursor: pointer;
}
label.cabinet input.file{
position: relative;
height: 100%;
width: auto;
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
margin-top:-30px;
}
#upload-demo{
width: 250px;
height: 250px;
padding-bottom:25px;
}
<div class="container">
<div class="row">
<div class="col-xs-12">
<label class="cabinet center-block">
<figure>
<img src="" class="gambar img-responsive img-thumbnail" id="item-img-output" />
<figcaption><i class="fa fa-camera"></i></figcaption>
</figure>
<input type="file" class="item-img file center-block" name="file_photo"/>
</label>
</div>
</div>
</div>
<div class="modal fade" id="cropImagePop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">
<?=multiLanguage( "Edit Foto" , "Edit Photo" )?></h4>
</div>
<div class="modal-body">
<div id="upload-demo" class="center-block"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="cropImageBtn" class="btn btn-primary">Crop</button>
</div>
</div>
</div>
</div>
If I understood correctly, you want to use a picture without any background.
for this, you should use a transparent png like this:
body{
background:lightblue
}
<img src="https://sb.kaleidousercontent.com/67418/800x533/9e7eebd2c6/animals-0b6addc448f4ace0792ba4023cf06ede8efa67b15e748796ef7765ddeb45a6fb-removebg.png" width="500"/>
And if you want to add your voluntary color to the picture background like your sample:
img{
background: linear-gradient(45deg, #cb2d2d, #172aec);
}
body{
background:lightblue;
}
<img src="https://sb.kaleidousercontent.com/67418/800x533/9e7eebd2c6/animals-0b6addc448f4ace0792ba4023cf06ede8efa67b15e748796ef7765ddeb45a6fb-removebg.png" width="500"/>
But if your picture isn't transparent, I think you must make it transparent on photoshop at first.
To my knowledge, there isn't a way of doing this through CSS or HTML. There is no inbuilt function to do this. So the only way to achieve this is by removing the background of the image by a third-party service like remove.bg or apps like photoshop etc.. (preferred to use Adobe Photoshop and use the pen tool, Magic wand tool or Quick selection tools for removing the external background of the image.) and then downloading it as a png and then uploading to your website.
Here I will mention some usefull softwares and websites for removing backgrounds, which are top rated and which maintains the quality of your image.
Adobe Photoshop
Canva
PhotoScissors
Wondershare PixCut
HitPaw Online Background Remover
Remove.bg
Once you get the png image, you can directly put it into your website. If you still see some white background altering over the image, use background-color: transparent.
I'm working on a list of items for my website.
I have a list of 5 items with a 'id'. When you click the button, an overlay must be shown with 2 buttons 'change to background to red' and than 'cancel'.
If you click the cancel, the specific 'div class="item"' with the specific id his background must become red.
But, the problem is I don't know how using jquery/javascript to know which button of the div what pressed (button of item id 1 or 2 or 3..)
And also when you click outside the buttons, the overlay must be removed.
Here's the code
$(document).ready(() => {
$('.options-btn').click(function ()
{
var id = $(this).parent().attr('id'); /* find <div class="item"> */
$('body').append('<div class="overlay"></div>');
var append = `
<div class="item-options-active">
<button class="feed-option-btn-number background-btn" tabindex="0">Background set to RED</button>
<button class="feed-option-btn-number cancel-btn" tabindex="0">Cancel</button>
</div>
`;
$(append).appendTo('.overlay');
});
$(document).click(function (e)
{
if (document.getElementsByClassName("overlay").length == 1)
{
if(document.getElementsByClassName("item-options-active").length == 1)
{
// this condition is not working when you click the specific button
if($(".background-btn").data('clicked'))
{
// how to get <div> of the button which was press to change the background??
$('.item').css('background', 'red');
}
}
}
});
})
body {
background: grey;
}
.item {
background: green;
border: 5px solid purple;
margin: 20px;
}
.item button {
margin-left: 10px;
}
.overlay {
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.85);
z-index: 10000;
}
<body>
<div class="show-items">
<div class="item" id="1">
<button type="button" class="options-btn">check options</button>
</div>
<div class="item" id="2">
<button type="button" class="options-btn">check options</button>
</div>
<div class="item" id="3">
<button type="button" class="options-btn">check options</button>
</div>
<div class="item" id="4">
<button type="button" class="options-btn">check options</button>
</div>
<div class="item" id="5">
<button type="button" class="options-btn">check options</button>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
If you rewrite the .option-btn click event to something like this and delete the document click event it should work:
$('.options-btn').click(function ()
{
var id = $(this).parent().attr('id'); /* find <div class="item"> */
var button = $(this);
$('body').append('<div class="overlay"></div>');
var append = `
<div class="item-options-active">
<button class="feed-option-btn-number background-btn" tabindex="0">Background set to RED</button>
<button class="feed-option-btn-number cancel-btn" tabindex="0">Cancel</button>
</div>
`;
$(append).appendTo('.overlay');
$('.overlay').on('click', function(){
$(this).remove();
}).find('.cancel-btn').on('click', function(){
$(this).closest('.overlay').remove();
});
$('.overlay').find('.background-btn').on('click', function(){
button.closest('.item').css('background', 'red');
$(this).closest('.overlay').remove();
});
});
Working fiddle: https://jsfiddle.net/qntupzj6/
Hi I want to create several buttons that change the css how i can do this
and click it again to undo it
var btn = document.getElementById("btn");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
<button id="btn">bold</button>
<button id="btn2">italic</button>
<button id="btn3">underline</button>
<div class="item-1"></div>
If you want to do it in a proper way then you need to use jquery toggleClass() method like below
$(document).ready(function(){
$("#btn").click(function(){
$(".item-1").toggleClass("red");
});
$("#btn2").click(function(){
$(".item-1").toggleClass("blue");
});
$("#btn3").click(function(){
$(".item-1").toggleClass("green");
});
});
.red
{
color:red;
}
.blue
{
color:blue;
}
.green
{
color:green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn">red</button>
<button id="btn2">blue</button>
<button id="btn3">Green</button>
<br>
<div class="item-1">color</div>
You can use classes for toggle(do-undo) properties.
Css:
.boldText{
font-weight:Bold;
}
var btn = document.getElementById("btn");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var txt = $('.item-1');
btn.onclick = function(){
txt.toggleClass('boldText')
}
.boldText{
font-weight:Bold;
}
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<button id="btn">bold</button>
<button id="btn2">italic</button>
<button id="btn3">underline</button>
<div class="item-1">test Text</div>
You can also add italic and underline options.
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.
I am trying to make a menu where I show the icon and when i hover over the icon the text will appear. I've got that so far, but I want to change the background color of the text.
<div id='menu'>
<div id='menuitems'>
<div class="item" onclick="loadPage('/')">
<span class="menuIcon"><img src='/img/layout/icons/home.png'/></span>
</div>
<div class="item" onclick="loadPage('/pages/settings/')">
<span class="menuIcon"><img src='/img/layout/icons/settings.png' /></span>
</div>
<div class="item" onclick="loadPage('/pages/php/')">
<span class='TextMenuItem'>< / ></span>
</div>
</div>
<div id="menuText">
<div class="itemtext" onclick="loadPage('/pages/home/')">Home</div>
<div class="itemtext" onclick="loadPage('/pages/settings/')">Settings</div>
<div class="itemtext" onclick="loadPage('/pages/php/')">Projects</div>
</div>
</div>
So if I move over a div with the class item I want to change the color of the div and the div with the class itemtext. Is it possible, in css, to see how many times a class has been used before the one that I hover and based on that number being able to color the background of the itemtext div with the same number or do I have to use javascript?
JSFiddle with progress: http://jsfiddle.net/WszKV/
I think
.item:hover .itemtext:hover{
color: <new color>;
background-color: <new color>;//if that is what you were looking for
}
should work.
Ended up using javascript to solve my problem.
$('.item').hover(
function() {
var index = $(this).index();
changeMenuBg(index, true);
}, function() {
var index = $(this).index();
changeMenuBg(index, false);
}
)
$('.itemtext').hover(
function() {
var index = $(this).index();
changeMenuBg(index, true);
}, function() {
var index = $(this).index();
changeMenuBg(index, false);
}
)
function changeMenuBg(index, hover){
if(hover){
$($('.item').get(index)).css('background-color','#FF2400');
$($('.itemtext').get(index)).css('background-color','#FF2400');
}
else{
$($('.item').get(index)).css('background-color','');
$($('.itemtext').get(index)).css('background-color','');
}
}