We Keep Coding

how to Styling for printing in JavaScript

to print the contract, I want to do some parts of the table in the middle of the line and look like what you see in the picture
I did them correctly in View, but in JavaScript I want them to look like View in print.
If I put text-align: center in the style, the whole form will be centered, which I do not want. Please help
<div class="row justify-content-around">
<b id="d2"> امضاء و اثر انگشت کارگر</b>
<b id="d1">امضاء و مهر کارفرما</b>
</div>
<script>
function printDiv() {
var divToPrint = document.querySelectorAll('.print-table');
var htmlToPrint = '' +
'<style type="text/css">' +
'table th, table td {' +
'font-family:vazir;' +
'border:1px solid #000;' +
'padding:0.5em;' +
'}' +
'</style>';
divToPrint.forEach((item) => {
htmlToPrint += item.outerHTML;
})
newWin = window.open("");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
</script>

Try my style below:
<div style="width:500px;overflow: hidden;" class="row justify-content-around">
<b style="width: 50%;display: inline-block;float: left;text-align: center;" id="d2">aaaaaaa</b>
<b style="width: 50%;display: inline-block;float: left;text-align: center;"id="d1">bbbbbbb</b>
</div>
We need to make to be display as inline block, so that we can set the width attribute for it, here's 50%, but after setting it as inline-block, will become a block element that it will display each in one line, so here we need to add float attribute so that they will display in one line, then add overflow hidden in the parent div. Pls note here, the div need to identify a width and I set 500px for test here.
Solution 2 is, not a good solution, just append &nbsp behind like : $('#d2').append(" ");

How to "go back" after document.write?

I am a beginner in JavaScript. Currently I am learning about buttons, alerts and writing documents. For a fun little side project, I want to press a button and then it writes to a document. That works great, but I have other buttons to press but I do not know how to "go back" to the other page and push those other buttons. How can I maybe make a button to "go back" or user a timer? Which would be easier? Once I am on that other page, I don't want to stay there.
Example:
function myTest1() {
document.write("JavaScript")
}
<input type="button" onClick="myTest1()" value="What language is this?">

By keeping the buttons in a container and the displayed "page" in another:
function myTest1() {
// document.getElementBy('content') id to get the content element
// set innerHTML to change the content
document.getElementById('content').innerHTML = "JavaScript";
}
function goBack() {
// document.getElementBy('content') id to get the content element
// set innerHTML to change the content
document.getElementById('content').innerHTML = "Click a button to change this content";
}
<div id="button-container">
<input id="which-language-btn" type="button" onclick="myTest1()" value="What language is this?">
<input id="bo-back-btn" type="button" onclick="goBack()" value="Go back" />
</div>
<div id="content" style="border: 1px solid;">
Click a button to change this content
</div>
Or by changing both buttons and content:
function myTest1() {
// document.getElementBy('content') id to get the container element
// set innerHTML to change the content
document.getElementById('button-container').innerHTML = "JavaScript<input type=\"button\" onclick=\"goBack()\" value=\"Go back\" />";
}
function goBack() {
// document.getElementBy('button-container') id to get the container element
// set innerHTML to change the content
document.getElementById('button-container').innerHTML = "Click a button to change this content<input id=\"which-language-btn\" type=\"button\" onclick=\"myTest1()\" value=\"What language is this?\">";
}
<div id="button-container">
Click a button to change this content<input id="which-language-btn" type="button" onclick="myTest1()" value="What language is this?">
</div>
The idea is using innerHTML instead of document.write too avoid replacing all your document (including your script)

document.write clears the document when it's called:
Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document.
You could just keep appending the output to the body, but it's much better in the long run to adjust the content of a separate div, used for output, rather than just keep adjusting the body.
function myTest1() {
document.getElementById('output').textContent += "JavaScript\n"
}
#output {
width: 100%;
min-height: 20px;
background-color: rgb(20, 20, 30);
color: white;
margin-top: 20px;
font-family: "Lucida Console";
padding: 5px;
}
<input type="button" onClick="myTest1()" value="What language is this?">
<div id="output">
</div>

How can I configure dynamically appended Ace Editors without causing extra HTML to be generated as a result?

Currently, I can dynamically create a new Ace Editor and append it to a container div as so:
editorsOnScreen++;
$("#container").append(`<div class="questionContainer w-100"
id="questionContainer_` + editorsOnScreen + `" >
<div class="editor" id="editor_` +
editorsOnScreen + `">//Code Here</div>
</div>`);
I can then configure those Ace Editors individually by referencing their ID using the incrementing variable:
var editor = ace.edit("editor_" + editorsOnScreen);
//Perfrom configuration here.
If a user leaves the page, I want to be able to save all of the editors on the screen to reshow them next time, so I use localStorage to save the innerHTML of the container div where they are stored:
localStorage.setItem("divHtml", $("#container").html();
I do this with the intention of then replacing the HTML of the container div with the HTML I previously stored the next time the page is loaded.
This is where the problem comes in. I would expect the HTML saved at the key divHTML to be the following:
<div class="questionContainer w-100" id="questionContainer_` + editorsOnScreen + `" >
<div class="editor" id="editor_` + editorsOnScreen + `">//Code Here</div>
</div>
But, instead, it looks exactly like this (I'm using the three dots because it goes on for lines, and those X's really do come out when I use console.log):
<div class="questionContainer w-100" id="questionContainer_` + editorsOnScreen + `" >
<div class="editor ace_editor ace-vibrant-ink ace_dark" id="editor_2">
<textarea class="ace_text-input" wrap="off" autocorrect="off"
autocapitalize="off" spellcheck="false" style="opacity: 0;">
</textarea><div class="ace_gutter" aria-hidden="true"><div
class="ace_layer ace_gutter-layer ace_folding-enabled"></div><div c
class="ace_gutter-active-line"></div></div><div class="ace_scroller"
style="left: 0px; right: 0px; bottom: 0px;"><div
class="ace_content"><div class="ace_layer ace_print-margin-layer">
<div class="ace_print-margin" style="left: 4px; visibility: hidden;
...
overflow:
visible;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div></div></div></div>
I do however find that I get the exactly the results I expect when I don't include any JavaScript or jQuery to configure the editors.
Why would that happen? How can I go about saving the HTML of the container div of which all of the editors are children so that I can easily just replace its HTML with the saved data on the next load of the page?
Thank you.

Second append doesn't work on jquery

I have a form and need to append a field as many times as required. If the button CLICK TO ADD ANOTHER FIELD is clicked the div should be appended. After the first append (onload), the div responses correctly but from the second one on, I am not getting the similar response from the div. Here is my JSFiddle
If I click on the TEST BUTTON , I get alert for the first div but on adding another div (by clicking the CLICK TO ADD ANOTHER FIELD button) , the button (TEST) doesn't work anymore for the second div onwards.
I tried clone() to help this but unable solve this one. May be I am not using it correctly.
To replicate the issue please follow the steps::
Click on the CLICK TO ADD ANOTHER FIELD button to add div
Click on the TEST button on the second div onwards
Please take a look and suggest. Thanks in advance.

You have to use delegation like $(document).on('click','.test',function(){
var count = 1;
$.fn.addclients = function(add){
var mydiv = '';
mydiv = '<div class="dataadd"><fieldset><legend>Test: '+add+'</legend><b>Test Name :</b> <input type="text" id="ct'+add+'" name="cname" value="" style="width:250px" />'+
' <button class="test" id="test" style="float:left;">TEST</button>'+
'<br>'+
'</fieldset></div>';
//$(".dataadd").clone().appendTo('#registerForm');
$('#registerForm').append(mydiv);
}
$.fn.addclients(count);
$(document).on('click','#btn',function(){
++count;
$.fn.addclients(count);
return false;
});
$(document).on('click','.test',function(){
alert("test");
return false;
});
.zend_form{
font-weight:bold;
font-size:10px;
width:358px;
float: left;
}
.dataadd{
font-weight:bold;
font-size:10px;
width:358px;
//border: 1px solid;
margin-top: 15px;
margin-bottom: 15px;
//padding: 5px;
//float:left;
}
.selectbox{
margin-top: 15px;
width:155px;
height:100px;
}
.buttonc{
background-color: #fff;
width:145px;
height:45px;
}
.selection_area{
font-weight:bold;
font-size:10px;
}
input {
width: 200px;
}
dt {
width:50%; /* adjust the width; make sure the total of both is 100% */
}
dd {
width:80%; /* adjust the width; make sure the total of both is 100% */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="registerForm" enctype="application/x-www-form-urlencoded" method="post" action=""><dl class="zend_form">
<dt id="firstname-label"><label for="firstname" class="required">First Name:</label></dt>
<dd id="firstname-element">
<input type="text" name="firstname" id="firstname" value="" style="width:200px; float:left;" /></dd>
<dt id="middlename-label"><label for="middlename" class="optional">Last Name</label></dt>
<dd id="middlename-element">
<input type="text" name="middlename" id="middlename" value="" style="width:200px" /></dd>
</form>
<div style='display:table;background-color:#ccc;width:99%;padding:5px;'>
<button class='buttonc' name='btn_sub' id='btn' style='float:left;'>CLICK TO ADD ANOTHER FIELD</button>
</div>

You write:
$('#btn').click(function(){ ... });
but this will only bind the event handler to elements currently on the page when running this code. So elements added later will not be covered by this code.
But first tip: do not use a HTML ID (#btn) if you want to repeat it. So instead use a class (.btn), to capture all elements.
And then the best way is to write something like:
$(document).on('click', '.btn', function() { ... } )
This will capture any click event on the document (you could use a container div instead --just easier to show now), and only run the callback if it matches the given selector (.btn).

all elements created after body load must use delegation to work
$("body").on("click",".test",function(){
alert("test");
return false;
});
This way, the event is attached to the body, witch always exists, but only triggers when the matched elements appear, no matter when they're created (before or after js is loaded)

Make a *only a portion* of a text box not editable

I want a user to be able to customize their personal url page on my site, where the value of a text box will be "example.com/username" but I want the "example.com/" to be in the text box but not editable
Tumblr does this but I can't figure out how: http://www.tumblr.com/register

This is the code in question from the Tumblr page.
<input type="text" class="text_field" style="padding:0px; border-width:0px; text-align:right; width:325px; background:transparent;"
id="tumblelog_name" name="tumblelog[name]"
onfocus="$('tumblelog_name_background').style.backgroundColor = '#f9f8e4'; $('tumblelog_name_background').style.color = ''" onblur="$('tumblelog_name_background').style.backgroundColor = ''; if($('tumblelog_name').value == '')
{ $('tumblelog_name_background').style.color = '#c1cfdd' }"/>.tumblr.com
As you can see the additional .tumblr.com is not part of the input text box at all. It's a div that is styled to look like the text input box next to it. Therefore giving it the illusion of an unwritable input text field.

There is actually a JavaScript way of doing this without a messy CSS hack. See the script on this page: http://aspdotnet-suresh.blogspot.com/2010/11/introduction-here-i-will-explain-how-to.html

you can solve everything with css, is an input to the side of a div that contains the part that does not change with the same look.
html in your example:
<div style="position:absolute; right: 8px; top: 4px; white-space: nowrap;">
<input type="text"
class="text_field" style="padding:0px; border-width:0px; text-align:right; width:325px; background:transparent;"
id="tumblelog_name"
name="tumblelog[name]"
onfocus="$('tumblelog_name_background').style.backgroundColor = '#f9f8e4'; $('tumblelog_name_background').style.color = ''"
onblur="$('tumblelog_name_background').style.backgroundColor = ''; if($('tumblelog_name').value == '') { $('tumblelog_name_background').style.color = '#c1cfdd' }">.tumblr.com
</div>

You do it by checking the value of your textbox onkeyup. In your event handler you can make sure the textbox says whatever you want after the user hits a key. If they delete your text, you just put it back in there after. You would also want to make sure your handler gets called onblur as well.

there is no way to do this. if you view the source of tumblr.com you can see that the ".tumblr.com" is outside the input tag. its just simple styling. Right border of the input box = nothing. And add sibling node to continue the styling.
<input type="text" class="text_field" style="padding:0px; border-width:0px; text-align:right; width:325px; background:transparent;"
id="tumblelog_name" name="tumblelog[name]"
onfocus="$('tumblelog_name_background').style.backgroundColor = '#f9f8e4'; $('tumblelog_name_background').style.color = ''" onblur="$('tumblelog_name_background').style.backgroundColor = ''; if($('tumblelog_name').value == '')
`enter code here`{ $('tumblelog_name_background').style.color = '#c1cfdd' }"
/>.tumblr.com