I am trying to disable my download button when the field is empty, when the user types the name only it should show. because without entering text also the user is able to download image. I have done the following code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<div class="container">
<div style="margin-top: 5%; " class="row">
<?php
require('db_config.php');
$id=$_GET['editid'];
$sql = "SELECT * FROM image_gallery where id='$id'";
$images = $mysqli->query($sql);
while($image = $images->fetch_assoc()){
?>
<div style="margin-left: 5%;" class="col-md-5"><canvas id="imageCanvas"></canvas></div>
<div style="margin-left: 2%; margin-top: 10%;" class="col-md-5 col-sm-8">
<div class="modal-content">
<div class="modal-header">
<h4 class="something"><span class="sims">Card Name:  </span>
<?php echo $image['title']; ?>
</h4>
<div class="modal-body">
<form method="post" action="" id="form_name">
<div class="row">
<div class="col-md-12">
<input class="lolan" type="text" id="name" placeholder="Full Name" required />
<!-- <label for="name" class="form__label">Full Name</label> -->
</div>
<div id="chumma" class="col-md-12">
<button id="download" type="submit" onclick="download_image()" name="button" value="Download" class="btn btn-primary">Download</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var text_title = "Heading";
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
// img.crossOrigin = "anonymous";
window.addEventListener('load', DrawPlaceholder)
function DrawPlaceholder() {
img.onload = function() {
DrawOverlay(img);
DrawText(text_title);
DynamicText(img)
};
img.src = 'uploads/<?php echo $image['
image '];?>';
}
var canvas = document.getElementsByTagName('canvas')[0];
canvas.width = 500;
canvas.height = 500;
function DrawOverlay(img) {
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'rgba(230, 14, 14, 0)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function DrawText(text) {
ctx.fillStyle = "black";
ctx.textBaseline = 'middle';
ctx.font = "50px 'Montserrat'";
ctx.fillText(text, 150, 250);
}
function DynamicText(img) {
document.getElementById('name').addEventListener('keyup', function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
DrawOverlay(img);
text_title = this.value;
DrawText(text_title);
});
}
function download_image() {
var canvas = document.getElementById("imageCanvas");
image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
var link = document.createElement('a');
link.download = "my-image.png";
link.href = image;
link.click();
}
</script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
validate();
$('#name').change(validate);
});
function validate() {
if ($('#name').val().length > 0 && {
$("#download").prop("disabled", false);
}
else {
$("#download").prop("disabled", true);
}
}
</script>
<?php } ?>
but this is not making the button from disabling when the input is empty. can anyone please tell me what is wrong in my code. thanks in advance
Your code has some syntax errors and you should use keyup event:
$(document).ready(function() {
validate();
$('#name').keyup(validate);
});
function validate() {
if ($('#name').val().length > 0) {
$("#download").prop("disabled", false);
}
else {
$("#download").prop("disabled", true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="name">
<button id="download">Download</button>
I've noticed 2 things in your JavaScript code:
$('#name').change(validate); is triggered only when you exit (blur) the field.
Instead, you can use:
$('#name').keyup(validate);
There's a syntax error at:
if ($('#name').val().length > 0 && {
You should close the parenthesis like:
if ($('#name').val().length > 0 ) {
Hope this helps!
I'm trying to use an input into a search bar (length (in the code)) to draw a line of 'length' length.
I've set up a very rough canvas area, the search/variable input but can't seem to link them together. Currently, I have the variable in the lineTo direction and it does plot, but only remains static even if the variable is updated.
function myFunction() {
var length = document.getElementById("myText").value;
}
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(100,25);
ctx.lineTo(length,25);
ctx.stroke();
<canvas id="myCanvas" width="500" height="50"
style="border:1px solid #d3d3d3;">
</canvas>
<input class="search" type="number" id="myText" value="Size...">
<button class="button" onclick="myFunction()">Size</button>
<p id="demo"></p>
The canvas interaction commands run once. To redraw each time, place the code inside the myFunction:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
function myFunction() {
var length = document.getElementById("myText").value;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(100, 25);
ctx.lineTo(length, 25);
ctx.stroke();
ctx.closePath();
}
myFunction();
<canvas id="myCanvas" width="500" height="50" style="border:1px solid #d3d3d3;">
</canvas>
<input class="search" type="number" id="myText" value="Size...">
<button class="button" onclick="myFunction()">Size</button>
<p id="demo"></p>
I recommend
<canvas id="myCanvas" width="500" height="50"
style="border:1px solid #d3d3d3;">
</canvas>
<input class="search" type="number" id="myText">
<button class="button" onclick="myFunction()">Size</button>
<p id="demo"></p>
I removed "value="Size..."" I don't know if you had more intentions with that
var canvas = document.getElementById("myCanvas");
function myFunction() {
var length = document.getElementById("myText").value || 100;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(length,25);
ctx.lineTo(0,25);
ctx.stroke();
}
myFunction()
I basically created this game that generates balls of random number on the screen based on the number of balls user types in to display, Then on the right side, he has to input the ball numbers in order and click verify, if he gets it right, it says "correct" otherwise it says "Sorry the correct number is " then is shows the actual order of the numbers. The problem is, whenever i click on verify, the result is always correct, even if i didn't input any number or even if the numbers r wrong. What is the mistake i am making? here r my codes: I will put a command next to the verify part of the program so it can be easier for u to locate the problem.
<html>
<head>
</head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
window.onload=draw;
var xArr=[];
var choose;
function draw(){
var canvas= document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var id;
var x;
var y;
var r;
var i;
var balls=[{"id":1,"x":85,"y":90,"r":40},{"id":2,"x":180,"y":90,"r":40},{"id":3,"x":270,"y":90,"r":40},{"id":4,"x":360,"y":90,"r":40},
{"id":5,"x":450,"y":90,"r":40},{"id":6,"x":535,"y":90,"r":40},{"id":7,"x":623,"y":90,"r":40},{"id":8,"x":710,"y":90,"r":40},
{"id":9,"x":85,"y":190,"r":40},{"id":10,"x":180,"y":190,"r":40},{"id":11,"x":270,"y":190,"r":40},{"id":12,"x":360,"y":190,"r":40},
{"id":13,"x":450,"y":190,"r":40},{"id":14,"x":535,"y":190,"r":40},{"id":15,"x":623,"y":190,"r":40},{"id":16,"x":710,"y":190,"r":40},
{"id":17,"x":85,"y":290,"r":40},{"id":18,"x":180,"y":290,"r":40},{"id":19,"x":270,"y":290,"r":40},{"id":20,"x":360,"y":290,"r":40},
{"id":21,"x":450,"y":290,"r":40},{"id":22,"x":535,"y":290,"r":40},{"id":23,"x":623,"y":290,"r":40},{"id":24,"x":710,"y":290,"r":40},
{"id":25,"x":85,"y":390,"r":40},{"id":26,"x":180,"y":390,"r":40},{"id":27,"x":270,"y":390,"r":40},{"id":28,"x":360,"y":390,"r":40},
{"id":29,"x":450,"y":390,"r":40},{"id":30,"x":535,"y":390,"r":40},{"id":31,"x":623,"y":390,"r":40},{"id":32,"x":710,"y":390,"r":40},
{"id":33,"x":85,"y":490,"r":40},{"id":34,"x":180,"y":490,"r":40},{"id":35,"x":270,"y":490,"r":40},{"id":36,"x":360,"y":490,"r":40},
{"id":37,"x":450,"y":490,"r":40},{"id":38,"x":535,"y":490,"r":40},{"id":39,"x":623,"y":490,"r":40},{"id":40,"x":710,"y":490,"r":40},
{"id":41,"x":85,"y":590,"r":40},{"id":42,"x":180,"y":590,"r":40},{"id":43,"x":270,"y":590,"r":40},{"id":44,"x":360,"y":590,"r":40},
{"id":45,"x":450,"y":590,"r":40},{"id":46,"x":535,"y":590,"r":40},{"id":47,"x":623,"y":590,"r":40},{"id":48,"x":710,"y":590,"r":40},
{"id":49,"x":85,"y":690,"r":40},{"id":50,"x":85,"y":690,"r":40}];
var texts=[];
for(i=1;i<=balls.length;i++){
texts[i]=i;
}
var x=[];
var t=[];
var xstep=0;
choose=parseFloat(prompt("enter the number of balls u want to see"));
for (i=0; i<choose; i++) {
var b = getRandomBall();
x.push(b);
ctx.fillStyle = "#800000";
ctx.strokeStyle = "#000000";
ctx.beginPath();
xstep=xstep+120;
var ystep=90;
ctx.arc(xstep, ystep, 50, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
ctx.fillStyle = 'black';
ctx.fillText(b.id, xstep, ystep);
console.log(i);
$(".selected").append('<label>Enter a number: </label><input type="text" name="userNumber'+i+'" id="userNumber'+i+'"><br /><br />');
}
function getRandomBall(){
var r = Math.floor(Math.random() * balls.length);
return balls.splice(r,1)[0];
}
xArr = x;
}
draw()
</script>
<body>
<div id="leftside" width="900" height="1000" style="border: 2px solid #000000">
<canvas id="canvas" width="800" height="800" style="border: 2px solid #000000">
</canvas>
<div id="rightside" width="300" height="800" style="border 2px solid #000000; float: right; margin-right:100px;">
<form action="#" method="get" >
<div class="selected"></div>
<input type="button" id="verifyBtn" value="verify">
<hr>
</form>
the result is:
<div id="result" style="font-size: 14px"></div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){ //here is the issue
for (i=0; i<choose; i++) {
$("#verifyBtn").click(function(){
if(($('#userNumber'+i).val()==xArr[i])){
$("#result").css({color:'green'});
$("#result").text("correct");
}
else{
$("#result").css({color:'red'});
$("#result").text("sorry: try again"+ " correct number was "+xArr);
}
})
}
})
</script>
</html>
I am currently working on a project involving the canvas element and have come across a problem when I resize the canvas. I'm trying to draw an image at the center of the canvas by dividing the width and height by 2, but whenever I resize the canvas, it only changes the HTML, so when I go to redraw the image, it still draws at half the width and height of the old canvas. I'm not sure if this is a DOM issue or what, but would appreciate any help. I have tested in Safari, FF, and Chrome
Edit: Code
<body>
<div id="holder">
<div id="dropdown">
<div id="ddcontents" style="display: none;">
<button onclick="fade()">Options</button>
<button onclick="getSize()">Canvas Size</button>
<button onclick="redraw()" disabled="true">Redraw</button>
</div>
</div>
<canvas id="c" height="480" width="640">Your browser does not support HTML5.</canvas>
<div id="options" style="display: none">
<div id="optcontent" style="display: none">
<center><h1>Options</h1></center>
<div id="sound">
<div>Volume:
<form oninput="volumenumber.value = parseInt(volume.value)">
<input type="range" name="volume" min="0" max="100" value="80" disabled="true">
<input type="hidden" name="hello" value="%">
<output name="volumenumber" for="volume">80</output>
</form>
Resolution:
<select id="resolution">
<option value="480p">480x640</option>
<option value="720p">720x1280</option>
</select>
</div>
</div>
<div id="closeoptions">
<button onclick="apply()">Apply</button>
</div>
</div>
</div>
</div>
<script src="options.js"></script>
</body>
</html>
And for the JS:
var c = document.getElementById('c');
var ctx=c.getContext("2d");
var img=new Image();
var w = this.c.clientWidth; // stores the width for later use
var h = this.c.clientHeight;
this.c.width = w;
this.c.height = h;
var cwidth = c.width;
var cheight = c.height;
img.onload = function(){
ctx.drawImage(img,w/2 - 14,h/2 - 19);
};
img.src="image_preview.png";
function apply()
{
var reso = document.getElementById("resolution");
var resol = reso.options[reso.selectedIndex].value;
//alert(resol)
if (resol == "720p")
{
//alert("You changed to 720p");
h = 720;
w = 1280;
cheight = 720;
cwidth = 1280;
}
else if (resol == "480p")
{
//alert("You changed to 480p");
h = 480;
w = 640;
cheight = 480;
cheight = 640;
}
getSize();
redraw();
}
function redraw()
{
ctx.drawImage(img,w/2 - 14,h/2 - 19);
img.src="image_preview.png";
}
function getSize()
{
alert(h + "x" + w);
}
When using a canvas you have to ensure its internal structure has the same size of the rendering html zone.
You can do that :
this.canvas.width = this.canvas.clientWidth;
this.canvas.height = this.canvas.clientHeight;
Usually I also store those dimensions for my rendering computations :
var w = this.canvas.clientWidth; // stores the width for later use
var h = this.canvas.clientHeight;
this.canvas.width = w;
this.canvas.height = h;
EDIT : to change the element size, do this kind of thing before the precedent code :
$('#mycanvas').width(newWidthInPx);