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   behind like : $('#d2').append(" ");
Related
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.
I having hard time to insert a single space at the end of my </span> in a document.execCommand().
document.execCommand("insertHTML", false, "<span class='own-class2'>"+"Test"+"</span>");
The reason behind this is I want the cursor to be outside the <span> after having made the insertion.
Here is a simple jsFiddle to show you what I mean:
jsFiddle
In that example, if you click the image and then write something, the text will be green. That means the text is still inside the span.
So What I want is to insert a normal space after </span>.
What I have already tried:
a space like this '</span> ' -> I get no space in Chrome.
a space like this '</span> ' -> I get </span> in Chrome
So my question is how to add a single space in order to get a result equivalent to this '</span> ' or '</span> ' and not '</span> ' ?
WHAT I GET ON THE INSPECTOR : https://ibb.co/cqCW2x
if I do :
document.execCommand("insertHTML", false, "<span class='own-class2'>"+"Test"+"</span> ");
Maybe you could use the zero width no break space character (invisible character) : \uFEFF.
The advantage of this solution is it does not create an (maybe?) unwanted visible space after the span
function Test() {
document.execCommand("insertHTML", false, "<span class='own-class2'>"+"Test"+"</span>\uFEFF");
}
#textBox {
width: 540px;
height: 200px;
border: 1px #000000 solid;
padding: 0;
overflow: scroll;
}
.own-class2 {color:green;}
<div id="toolBar">
<button height="20px" onclick="Test()" >insert a span</button>
</div>
<div id="textBox" class="textbox" contenteditable="true"></div>
This question already has answers here:
How to get computed background color style inherited from parent element
(3 answers)
Closed 5 years ago.
As I understand the getComputedStyles() method, it should return an object that allows one to access the actual CSS property values of an HTML element node.
I created this simple example with a paragraph containing a span:
let span = document.getElementsByTagName("span")[0];
let style = window.getComputedStyle(span);
span.innerText = "span background-color is " + style.getPropertyValue("background-color");
<p style="background-color: orange">
<span style="color: green">Empty</span>
</p>
The background color of the paragraph is orange, so the span should also have that property value, or am I mistaken? Could it be that inherited values are ignored in getComputedStyles? And if so, how can I get the actually visible background color for the span? Thank you.
It is giving you the correct result.
span background-color is rgba(0, 0, 0, 0)
Note that the a in rgba is 0. There is no opacity at all, the element is completely transparent.
It isn't orange, you can just see through it to the orange element behind it.
EDIT: Updated my answer to use pure JS to find the background color you are looking for:
let span = document.getElementsByTagName("span")[0];
let parent = document.getElementsByTagName("span")[0].parentElement;
let style = window.getComputedStyle(parent);
span.innerText = "span background-color is " + style.getPropertyValue("background-color");
<p style="background-color: orange">
<span style="color: green">Empty</span>
</p>
Another potential option would be updating your style of the span to inherit the background color of the parent, in which case your initial attempt would work:
let span = document.getElementsByTagName("span")[0];
let style = window.getComputedStyle(span);
span.innerText = "span background-color is " + style.getPropertyValue("background-color");
<p style="background-color: orange">
<span style="color: green; background-color: inherit">Empty</span>
</p>
And here is the old version using Jquery:
var color = $('#getThis').closest("p").css("background-color");
$('#getThis').html('Background color is ' + color);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="background-color: orange">
<span id="getThis" style="color: green">Empty</span>
</p>
I have wrote this simple snippet to be sure that getComputedStyle returns only the applied style for the element, and not what is actually rendered.
let style1 = window.getComputedStyle(document.getElementById('s1'));
let style2 = window.getComputedStyle(document.getElementById('s2'));
document.getElementById('i1').value = style1.getPropertyValue("background-color");
document.getElementById('i2').value = style2.getPropertyValue("background-color");
<div style='background-color: cyan'>
<span id='s1'>Span without backgound</span>
</div>
<div style='background-color: cyan'>
<span id='s2' style='background-color: yellow'>Span with backgound</span>
</div>
<input id='i1' type='text' />
<input id='i2' type='text' />
But, reading the defination of getComputedStyle from W3Schools, looks confusing, for me:
The computed style is the style actually used in displaying the
element, after "stylings" from multiple sources have been applied.
Reading this, sounds like all "stylings" applied should be returned, and this is not what happens, just my opinion.
let span = document.getElementsByTagName("span")[0];
getBackgroundColor(span);
function getBackgroundColor(ele){
let style = window.getComputedStyle(ele);
if(ele){
if(ele.style.backgroundColor)
span.innerText = "span background-color is " + style.getPropertyValue("background-color");
else
getBackgroundColor(ele.parentNode);
}else
span.innerText = "span background is transparent";
return;
}
<p style="background-color: orange">
<span style="color: green">Empty</span>
</p>
This is done using recursion...may be this is what you want. It will keep checking its parent background-color until it finds one otherwise it will return transparent.
if you use this
span.innerText = "span background-color is " + style.getPropertyValue("color");
then you will get the font color rgb(0, 128, 0) as you use in span. your syntax giving you correct answer.
I have some application that adds elements to contentEditable div.
Something like this:
<div id="div" contentEditable="true"></div>
<button id='appendBtn'>append</button>
<style>
.bracket {
color: blue;
}
.template-content {
color: green;
}
#div {
border: solid 1px gray;
margin-bottom: 10px;
}
</style>
<script>
function appendContent() {
var content = "<span class='template-block'>" +
"<span class='bracket'>{</span>" +
"<span class='template-content'>param</span>" +
"<span class='bracket'>}</span>" +
"</span>";
$("#div").append(content);
}
document.getElementById ("appendBtn").addEventListener ("click", appendContent, false);
</script>
I wrote a working example in jsfiddle.
The problem is that when I click append and continue typing after added element all next text comes green. It happens because all next text pasts into last span tag (of class bracket with green color)...
<span class="bracket">}some text</span>
The solution is adding a after last closing span tag. Like this:
var content = "<span class='template-block'>" +
"<span class='bracket'>{</span>" +
"<span class='template-content'>param</span>" +
"<span class='bracket'>}</span>" +
"</span> ";
But it brings a lot of unwanted staff I have to do with the text after. How can I solve this?
Thats a default behaviour of content editable setting the pointer behind the last character inside. In Your case the pointer is set
<span class='bracket'>}--> pointer <--</span>
You could try a workaround with entity (zero width space)
if you dont want the
I'm building a website designer and have gotten stuck at a little annoying problem. I made a small example of what I'm trying to accomplish here - http://codepen.io/mikethedj4/pen/KqyaH
The code below grabs the html in my canvas, puts it in a textarea when query is added, and I can see that html when I click on the already added media query.
$(".list-of-media-queries").append("<div class='list-of-media-queries-container'><a href='javascript:void(0)' class='del-media-query'><span class='fa fa-times'></span></a> <button>"+ $(".cwidth").val() +"px</button>"+ "<pre style='text-align:left; padding-top:5px; overflow:auto;'>"+ "#media all and (max-width:"+ $(".cwidth").val() +"px) { \n\n" + $(".dadammediaquery").val() +" }</pre>" +"</div><textarea class='"+ $(".cwidth").val() +"'>"+ $(".canves").html() +"</textarea>");
When a global style is added into div.list-of-css-selectors I append the following tags Textarea, DIV, Anchor, Button, and Pre.
Here's an example of what is appended
<textarea class="custom-css-sheet hide" style="cursor:text!important; width:100%; resize:vertical; border:0; border-radius:0; min-height:200px;" placeholder="Your Custom CSS is added here"></textarea><div class="list-of-css-selectors-container"><span class="fa fa-times"></span> <button>body</button><pre style="text-align:left; padding-top:5px; overflow:auto;">body {
background-color: rgb(0, 224, 97);}</pre>
</div>
Now this is what I'm trying to backup aka the global/custom styles. I have all that stored in a div.list-of-css-selectors so I updated my code (2nd seen below) to where I wanted that backed up to. Now the code inside of div.list-of-css-selectors is suppose to go into the newly added textbox that has the class of the media queries location upon add. However the code is not encased in the textarea. Here's what I get instead.
<textarea class="custom-css-sheet hide" style="cursor:text!important; width:100%; resize:vertical; border:0; border-radius:0; min-height:200px;" placeholder="Your Custom CSS is added here">
I'm not sure why it's reacting this way. If anybody can help it'd be greatly appreciated.
$(".list-of-media-queries").append("<div class='list-of-media-queries-container'><a href='javascript:void(0)' class='del-media-query'><span class='fa fa-times'></span></a> <button>"+ $(".cwidth").val() +"px</button>"+ "<pre style='text-align:left; padding-top:5px; overflow:auto;'>"+ "#media all and (max-width:"+ $(".cwidth").val() +"px) { \n\n" + $(".dadammediaquery").val() +" }</pre>" +"</div><textarea class='"+ $(".cwidth").val() +"'>"+ $(".list-of-css-selectors").html() +"</textarea>");
use val() to set textarea's value
var string = "your html content";
var textarea=$('<textarea>').val( string).appendTo( containerSelector);