I have a problem with my Pixel Art Maker.
Here is my HTML code:
<body>
<h1> PIXEL ART MAKER </h1>
<form class='gridForm' >
Grid Height:
<input type="number" id="gridHeight">
Grid Width:
<input type="number" id="gridWidth">
<input type="submit">
</form>
<div class='colorPicker'>Pick a color
<input type='color' name='colorCanvas'> </div>
<p class='designCanvas'>Design Canvas</p>
<table id='pixels'>
</table>
<script src="app.js" type="text/javascript" charset="utf-8"></script>
</body>
And JS:
function makeGrid() {
$(".gridForm").submit(function(e) {
e.preventDefault();
x=$('#gridHeight').val(); // value of height
y=$('#gridWidth').val(); // value of width
for(i=0; x>i;x--){
$('#pixels').append('<tr><td></td></tr>');
}
for(j=1; y>j ;y--){
$('tr').append('<td></td>');
}
});
}
makeGrid();
Everything work as I want except 1 thing. When I choose height and width and click submit it creates the correct table form but when I choose other values and again click submit it just add new new table cells to old one. And I need new one to overwrite the old ones each time.
To clear the table, please put this in the top of the function
$('#pixels').html("");
You have used $('#pixels').append() to dynamically insert html. So it will keep on appending to what you have before. If you want to override the previous html you have its better to clear before you start anything.
function makeGrid() {
$(".gridForm").submit(function(e) {
e.preventDefault();
x=$('#gridHeight').val(); // value of height
y=$('#gridWidth').val(); // value of width
$('#pixels').html("");
$('tr').html("");
for(i=0; x>i;x--){
$('#pixels').append('<tr><td></td></tr>');
}
for(j=1; y>j ;y--){
$('tr').append('<td></td>');
}
});
}
makeGrid();
Related
Suppose, I have a delegated input field with the class name 'bulk_number' inside a parent class name 'all_bulk_inputs', and a button that will add a random number to that input field whenever I click it. Now I want to trigger a change event listener whenever the number change.
For Example:
<!-- input field under all_bulk_inputs -->
<div class="all_bulk_inputs">
<input class="bulk_number" name="rand_number" /> <!-- dynamically added under the 'all_bulk_inputs' parent -->
</div>
<button id="add_rand">Add Random Number</button>
<script>
$('#add_rand').on('click', function(){
$('.bulk_number').val(10) //suppose, 10 is my random number
//what I want is forcefully trigger on change like bellow, if possible
$('.all_bulk_inputs').trigger('change', 'bulk_number', function(){
console.log('bulk number changed)
})
})
</script>
First of all you have an error in line log. There is a few way to do this but this is the simple one i have explained what does code with comments
console.log('bulk number changed)
then you may want to check document of change Change
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="all_bulk_inputs">
<input class="bulk_number" name="rand_number" /> <!-- dynamically added under the 'all_bulk_inputs' parent -->
</div>
<button id="add_rand">Add Random Number</button>
<script>
$(document).ready(function() {
//When random number setted to the input under all_bulk_inputs div below will triggered
$('.all_bulk_inputs .bulk_number').on('change', function() {
console.log(`bulk number changed and the value is ${$(this).val()}`)
})
$('#add_rand').on('click', function() {
// create between 0 and 100 number and set to input
const rnd = Math.floor(Math.random() * 100)
$('.bulk_number').val(rnd).change()
})
});
</script>
</body>
</html>
When user clicks on "Save" button, I am taking a screenshot of browser page and saving that screenshot in server with help of this link.... it's working fine.
Requirement :
Here I want to save only the Content present inside div. So I am displaying some paragraph in Div & taking a screenshot of that div only...
Issue :
But along with content, its displaying white space in the screenshot.
Below is Screenshot saved in server :
Html :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://139.59.24.243/ecom1/site/test/screen/screenshot/js/html2canvas.js"></script>
<script type="text/javascript" src="http://139.59.24.243/ecom1/site/test/screen/screenshot/js/jquery.plugin.html2canvas.js"></script>
<div id="target">
<p class="paragraph">some text
</p>
</div>
<input class="save" type="submit" value="save" onclick="capture();" />
<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
</form>
<style>
.save {
font-size: 20px;
}
.paragraph {
font-size: 25px;
}
</style>
<script>
function capture() {
$('#target').html2canvas({
onrendered: function(canvas) {
//Set hidden field's value to image data (base-64 string)
$('#img_val').val(canvas.toDataURL("image/png"));
//Submit the form manually
document.getElementById("myForm").submit();
}
});
}
</script>
Save.php
<?php
//Show the image
echo '<img src="'.$_POST['img_val'].'" />';
//Get the base-64 string from data
$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);
//Decode the string
$unencodedData=base64_decode($filteredData);
//Save the image
file_put_contents('/images/image.png', $unencodedData);
?>
Edit
When i include the div in table, then that extra whitespace will not display , but is there any other way so that without using table, can i remove that whitespace ?
<table>
<tr>
<td>
<div id="target">
<p>some text</p>
</div>
</td>
</tr>
</table>
You will need to set the size for the target element here. before capturing the image.
you could detect which page you are on, then set the sizes from a predetermined list of possible sizes.
this is due to the capture is converting the #target element to canvas.
but if you have multiple settings/ pages then add a switch with some page casing.
function capture() {
$('#target').html2canvas({
onrendered: function(canvas) {
//Set hidden field's value to image data (base-64 string)
$('#img_val').val(canvas.toDataURL("image/png"));
//Example with pages
let page = 1; //Page 1? (detect which page you are on then set the value here
switch(page){
case 1:
// Set Width and Height here.
$('#target').css('width', '200px');
$('#target').css('height', '200px');
break;
case 2:
// Set Width and Height here.
$('#target').css('width', '450px');
$('#target').css('height', '900px');
break;
case 3:
// Set Width and Height here.
$('#target').css('width', '250px');
$('#target').css('height', '480px');
break;
/* etc etc*/
}
//Submit the form manually
document.getElementById("myForm").submit();
}
});
}
I have two images on my html page and I have one button named MOVE to move them left separately. To move them I have a Jquery function with selected class.
I have two input fields each of them belongs to the particular image. My button has a click counter function so I need to get a count by clicking on the same button to both images separately into those two input fields.
I think when I select image 1, It's also should be selected input 1, and then the counter will count image 1's counts of moves and when I select image 2, It's also should be selected input 2, and then the counter will count image 2's counts of moves.
I don't know how to select multiple elements by clicking on one element. please help
My Jquery function
$(document).ready(function() {
$(".plan1").click(function() { //medium move
// unselect others
$(".plan1").removeClass("selected");
// reselect this one
$(this).addClass("selected");
});
$("#b1").click(function() {
// animate selected
$(".plan1.selected").animate({left:'+=20px'});
$('#f1.selected').val(function(i, val) { return +val+1 });
});
});
HTML
<img src="imagesource" class="plan1" />
<img src="imagesource" class="plan1" />
<input type="text" id="f1" />
<input type="text" id="f2" />
<button id="b1">MOVE</button>
This might get you started.
jsFiddle Demo
$('#f1, #f2').val('0');
$(".plan1").click(function() {
$(".plan1").removeClass("selected");
$(this).addClass("selected");
});
$("#b1").click(function() {
if ( $(".plan1.selected").length == 0 ) {
alert("Pick a pic");
return false;
}
var inpID = $(".plan1.selected").attr('id').slice(-1);
var cnt = $('#f'+inpID).val();
cnt++;
$('#f'+inpID).val(cnt);
$(".plan1.selected, #f"+inpID).animate({'left' : '+=50px' });
$(".plan1.selected").removeClass("selected");
});
* {position:relative;} /* Critical! Allows elements to move */
img, input{display:block;max-width:80px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="pic1" src="http://lorempixel.com/80/80" class="plan1" />
<img id="pic2" src="http://lorempixel.com/80/80/animals" class="plan1" />
<input type="text" id="f1" />
<input type="text" id="f2" />
<button id="b1">MOVE</button>
Notes:
(1) In CSS, you must first make the elements position:relative because the default (position:static) cannot be styled with left or right
(2) In CSS, also must make the inline elements img and input into block elements, because inline elements cannot be animated left/right
it changes for about a second and returns to the previous text.The "Loading..." line has to change into "hi, Please click the next text box to see more instructions!".
I have tried it latest chrome and Edge browsers.
function greetMe() {
var yourName = document.getElementById("textbox").value;
info1 = "hi, Please click the next text box to see more instructions!"
document.getElementById("textToChange").innerHTML = info1
}
#myForm {
float: left;
width: 30%
}
#myformInfo {
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>HEllO ThERE!</h1>
<div id="myForm"><form >
<input id="textbox" placeholder="Your name">
<button onclick="greetMe()">click!</button>
<br><br>
<input id="">
</div></form>
<div id="myFormSteps">
<p id="textToChange">
<script>var info1 = "Loading..."
document.write(info1)
</script>
</p>
</div>
</body>
</html>
It's probably because you haven't set the type attribute for your button. A button's default type is submit. Try adding the attribute type="button" to your <button>.
When you click the button your form is submitting and the page is reloading - that's why it returning to its initial state. To stop this happening pass in event as a parameter to the function and then use that argument in the function with preventDefault():
HTML
<button onclick="greetMe(event);">click!</button>
JS
function greetMe(e) {
e.preventDefault();
// ...
}
As an aside it's better is to remove your inline JS and use an event listener instead.
var button = document.querySelector('button');
button.addEventListener('click', greetMe, false);
I want to place a number of images inside a form and be able to select them by just clicking on them. Once an image is selected I can show a border around it indicating that it has been selected, like checkboxes multiple images can be selected in the same form.
But how to go about this? I am not sure how to have the form register the images as being selected elements, so when the form is submitted to the server side the values on these images will be sent over as well.
I wish I could just set the images as backgrounds of checkboxes but of course that won't work due to browser restrictions. Any ideas on how this could be done?
for your html do have this.
<form id="form1">
<img src="barney.jpg" title="barney" id="barneyCheckImage" />
<input type="checkbox" id="imgCheck" name="imgCheck" value="barney" style="visibility: hidden;" />
<input type="submit" value="Submit" />
</form>
for your scripts
$(document).ready(function() {
$('form#form1').find('img#barneyCheckImage').toggle(
function(){
$(this).css('border', '1px solid green');
$('form#form1').find('input[id=imgCheck]').attr('checked', 'checked');
},
function(){
$(this).css('border', 'none');
$('form#form1').find('input[id=imgCheck]').removeAttr('checked');
}
);
// just to test for the checkbox.
$('form#form1').submit(function(e){
e.preventDefault();
var form = $('form#form1').serialize();
alert(form);
});
});
Edit:
I've edited it for BalusC's concern.
For the input type image you can also do a $('#imgCheck') directly instead of $('form#form1').find('input[id=imgCheck]') but for me, I don't want to have a lot of id's on my form.
check out: http://api.jquery.com/image-selector/
<input type="image" />
$("input:image").css({background:"yellow", border:"3px red solid"});
<!-- Choose some styles for our custom form elements -->
<style>
.imageCheckbox {
display: none;
}
.imageToggle .toggleImage {
/* default/unselected image styles here */
}
.imageToggle .selectedImage {
/* selected image styles here */
}
</style>
<!-- Add a script to handle when the user clicks on an image -->
<script>
function toggleImage(containerElem) {
//toggle the checkbox value
var checkBox = containerElem.getElementsByClassName("imageCheckbox");
checkBox.checked = ! checkBox.checked;
//update the image styles
var image = containerElem.getElementsByClassName("toggleImage");
if (checkBox.checked) {
image.className += " selectedImage";
}
else {
image.className = "toggleImage";
}
}
</script>
<!-- Build the form -->
<form>
<div class="imageToggle" onclick="toggleImage(this);">
<input class="imageCheckbox" type="checkbox" id="checkbox_0" name="checkbox_0" />
<img class="toggleImage" src="/img_0.png" />
</div>
<div class="imageToggle" onclick="toggleImage(this);">
<input class="imageCheckbox" type="checkbox" id="checkbox_1" name="checkbox_1" />
<img class="toggleImage" src="/img_1.png" />
</div>
<!-- etc. -->
</form>