I have a page and I'm using chrome console to add an SVG element which covers the whole body.
I typed the following commands in the console,
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.style.position = "absolute";
svg.style.left = svg.style.right = svg.style.top = svg.style.bottom = "0px";
svg.style.opacity = 0.5;
svg.style['z-index'] = 100;
svg.style.width = "100%";
svg.style.height = "100%";
document.body.appendChild(svg);
But the SVG element only covers the part of page that is displayed, i.e., if the page is long enough so that we have to scroll down, the whole page is not covered.
Any suggestions?
If you want to fix the element at the viewport, use position:fixed; instead.
Otherwise, do not use 100%, but:
svg.style.height = Math.max(document.body.scrollHeight,
document.documentElement.scrollHeight) + 'px';
Related
I have a project, which I will need to print a multi page exam.
I want to have border on each page, but at the bottom and at the top, when page breaks, the border will break too!
SCREENSHOT OF AN EXAMPLE
I am using #media print to style the print page
Code Structure of the page is:
header
main-content{
--- div for each question
}
each question has a border bottom, and the main-content has a full border
So any Idea on who can I achieve this goal?
Note: I am aware of the break-after or break-before properties, and they're no use in this case
Not sure why you would want that space below a page on a print. When you print a page, it is going to look really bad if you have a grey border at the bottom of each printed page. It would make sense to put the border on screen and when you print remove the borders.
I Would say you can just make the bottom border thicker.
#media print{
.main-content{
border-bottom 5px solid grey;
}
}
Either that, or make the background color grey like on the picture and add margin below the main-content div to space the pages from each other.
Keep in mind that Background color and border color does not always show up on print. It depends on the browser and the printer settings.
Found a Solution:
I used javascript to add questions into custom pages.
then I printed those pages.
$(document).ready(function () {
var pageIndex = 1;
var $questions = $(".question");
var $header = $("#mainHeader");
var $printPage = $("#toPrint");
var page = "<div class='page'>";
var pageHeight = 0;
const firstPageHeight = 1350; //Pixels
const otherPagesHeight = 1800; //Pixels
function resetPage() {
page+= "</div>";
$printPage.append(page);
page = "<div class='page'>";
pageIndex++;//Go to the next Page
pageHeight = 0; //Reset the page
}
function addQuestion(that) {
page += "<div class='question'>" + $(that).html() + "</div>";
}
$printPage.append("<div id='printHeader'>" + $header.html() + "</div>" ); //Adding the header
$.each($questions, function () {
//First page with header
var currentPageHeight = pageIndex == 1 ? firstPageHeight : otherPagesHeight;
if ($(this).height() + pageHeight < currentPageHeight){
addQuestion(this);
pageHeight += $(this).height();
}else{
//This page does not have the space for this question, so we move to the next page
//But first we need to close the previous page
resetPage();
pageHeight += $(this).height();
addQuestion(this);
}
//The page is full, we finish it
if (pageHeight >= currentPageHeight)
resetPage();
});
$(".q-space").show();
});
Hope this helps someone...
I have a responsive app for desktop and mobile.
In the app i have a div which randomly shows texts of all kinds of lengths.
I want to do the following:
If the line breaks because the length of the text is too wide for the width of that div, i want the font-size to reduce itself (I am using em's in my app).
Is it something i need to build directive for it? is it something that was built and used wildly?
Writing a robust solution for this problem is going to be non-trivial. As far as I know, there's no way to tell whether a line of text breaks. However, we do know the criteria for line breaking is the width of the text being wider than the element, accounting for padding.
The Canvas API has a method called measureText which can be used to measure a string, using a given context with a font and size set. If you spoof the settings of the element with a canvas, then you can measure the text with the canvas and adjust the size until it fits without overflowing.
I've written up a rough implementation of the way I would tackle this.
function TextScaler(element) {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
var scaler = {};
scaler.copyProps = function() {
var style = element.style.fontStyle,
family = element.style.fontFamily,
size = element.style.fontSize,
weight = element.style.fontWeight,
variant = element.style.fontVariant;
context.font = [style, variant, weight, size, family].join(' ');
};
scaler.measure = function(text) {
text = text || element.innerText;
return context.measureText(text);
};
scaler.overflows = function() {
var style = window.getComputedStyle(element),
paddingLeft = style['padding-left'],
paddingRight = style['padding-right'],
width = style.width - paddingLeft - paddingRight;
return scaler.measure() > width;
};
scaler.decrease = function() {
// decrease font size by however much
};
scaler.auto = function(retries) {
retries = retries || 10;
if(retries <= 0) {
scaler.apply();
console.log('used all retries');
}
if(scaler.overflows()) {
scaler.decrease();
scaler.auto(retries - 1);
} else {
console.log('text fits');
scaler.apply();
}
};
scaler.apply = function() {
// copy the properties from the context
// back to the element
};
return scaler;
}
After you've sorted out some of the blank details there, you'd be able to use the function something like this:
var element = document.getElementById('');
var scaler = TextScaler(element);
scaler.auto();
If it doesn't manage to decrease it within 10 retries, it will stop there. You could also do this manually.
while(scaler.overflows()) {
scaler.decrease();
}
scaler.apply();
You'd probably want some fairly fine tuned logic for handling the decrease function. It might be easiest to convert the ems to pixels, then work purely with integers.
This API could quite trivially be wrapped up as a directive, if you want to use this with Angular. I'd probably tackle this with two attribute directives.
<div text-scale retries="10">Hello world</div>
Of course, if it's not important that all the text is there onscreen, then you can just use the text-overflow: ellipsis CSS property.
I have a KPI dashboard with a lot of small charts. One type of chart is in fact a HTML table. It is displayed in a DIV.
<div style="width:400px; height:250px;overflow:hidden">
<table>
<tr><th>Col1</th><th>Col2</th></tr>
<tr><td>Row1</td><td>Row2</td></tr>
</table>
<div>
Currently, I hide the overflow. I would like to make the table 'fit' the div.
How can I make this table to fit/scale down to the DIV if it would become too big to diplay? Ideally, the text would also shrink.
This CSS will make your table have the same height/width as the container you are using. Borders/background are only added for visualising what happens.
Shrinking the text will however be far more challenging. There is probably no way without using javascript to achieve that. And even if you did, content might end up being unreadable because of a too small font-size.
I managed to come up with some javascript/jquery code to change the font-size until the table fits the div or the font-size reaches 5px (= unreadable). Of coarse you will need to edit some of it yourself (because it would apply on all tables if you don't change the selectors to id's)
[JSFiddle]
table{
width: 100%;
background-color: red;
}
th, td{
width: 50%;
border: blue solid 1px;
}
Jquery / Javascript
$(document).ready(function () {
var HeightDiv = $("div").height();
var HeightTable = $("table").height();
if (HeightTable > HeightDiv) {
var FontSizeTable = parseInt($("table").css("font-size"), 10);
while (HeightTable > HeightDiv && FontSizeTable > 5) {
FontSizeTable--;
$("table").css("font-size", FontSizeTable);
HeightTable = $("table").height();
}
}
});
Here is what I use currently, it is embedded in a project (see for example the classes), but feel free to use it as inspiration.
scaleTable = function (markupId) {
//This hacky stuff is used because the table is invisible in IE.
function realWidth(obj){
var clone = obj.clone();
clone.css("visibility","hidden");
$('body').append(clone);
var width = clone.outerWidth();
clone.remove();
return width;
}
function realHeight(obj){
var clone = obj.clone();
clone.css("visibility","hidden");
$('body').append(clone);
var height = clone.outerHeight();
clone.remove();
return height;
}
var table = $("#"+markupId+" table:first-of-type");
var tablecontainer = $("#"+markupId).parents( ".scalabletablecontainer" );
var scalex = tablecontainer.innerWidth() / realWidth(table);
var scaley = tablecontainer.innerHeight() / realHeight(table);
var scale = Math.min(scalex, scaley);
if (scale<1.0) {
var fontsize = 12.0 * scale;
var padding = 5.0 * scale;
$("#"+markupId+" table tbody").css("font-size", fontsize + "px");
$("#"+markupId+" table tbody TD").css("padding",padding + "px");
$("#"+markupId+" table TH").css("padding",padding + "px");
}
};
Get table and div dimensions as shown in the previous comments. Then apply css
transfrom:scale(factorX, factorY)
to the table.
I'm using DocumentApp.Attribute with mixed results. Here is an example:
var underline = {};
underline[DocumentApp.Attribute.UNDERLINE] = true;
underline[DocumentApp.Attribute.WIDTH] = 100;
underline[DocumentApp.Attribute.MARGIN_LEFT] = 10;
doc.appendParagraph("Paragraph text").setAttributes(underline);
The paragraph is created, and underlined, but the other two attributes don't get applied.
I think that you will find that a paragraph cannot have either Margin or width attributes ... they apply to the page or document as a whole. You might get the effect that you wish by using the Indent set of attributes.
This begs the next question "how do you set page attributes?"
MARGIN-LEFT appears as an attribute of the Body section so getActiveSection().setAttributes(style)
I am not sure what width refers to but you can do a getAttributes for each element type to track it down PAGE-WIDTH is an attribute of Body Section again. Play around with this code ...
function myFunction() {
var doc = DocumentApp.openById("1lqjkdfdsafgdsafsdaQI3kjtY");
var docele = doc.getActiveSection();
Logger.log(docele.getAttributes());
var para = doc.getParagraphs()[0];
var atts = para.getAttributes();
Logger.log(atts)
// Define a custom paragraph style.
var style = {};
style[DocumentApp.Attribute.WIDTH] = 100;
style[DocumentApp.Attribute.MARGIN_LEFT] = 200;
docele.setAttributes(style);
}
For me this gave body section attributes of {UNDERLINE=null, MARGIN_BOTTOM=72.0, PAGE_HEIGHT=792.0, BOLD=null, BACKGROUND_COLOR=null, FONT_SIZE=null, FONT_FAMILY=null, STRIKETHROUGH=null, MARGIN_LEFT=10.0, PAGE_WIDTH=612.0, LINK_URL=null, ITALIC=null, MARGIN_RIGHT=72.0, MARGIN_TOP=72.0, FOREGROUND_COLOR=null}
and paragraph attributes of {UNDERLINE=null, INDENT_END=8.25, LEFT_TO_RIGHT=true, BOLD=null, BACKGROUND_COLOR=null, FONT_SIZE=12, FONT_FAMILY=Comic Sans MS, SPACING_BEFORE=null, SPACING_AFTER=null, STRIKETHROUGH=null, INDENT_START=0.0, LINE_SPACING=null, LINK_URL=null, ITALIC=null, INDENT_FIRST_LINE=0.0, HORIZONTAL_ALIGNMENT=null, HEADING=null, FOREGROUND_COLOR=null}
This gives a clue to the alternative form for setting of attributes
docele.setAttributes({"FOREGROUND_COLOR":"#ff0000"})
What is the default height of a scroll bar(Horizontal)?
I couldn't find the document online.
UPDATED: Can we write a javascript function to get it? Please don't down vote it. It is hard to get it.
Thank you.
Found this here: How can I get the browser's scrollbar sizes?
function getScrollBarWidth () {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
};
alert( getScrollBarWidth () );
That's going to depend on the clients screen resolution and browser. If you explain why your asking then I might be able to give a better answer.
Whatever the user's computer is set to. There is no hard-and-fast rule on this. For example, on my Ubuntu machine, the default scroll bar size is 0 - instead of a conventional scrollbar, it has a scroll line with arrows that appear when the mouse moves near it, and it takes no space on the document. However, on my Windows installation, the scrollbar size is 14 pixels, but I could set it from anything between about 8 and over 500...
Interesting question. My thought is: when a property you are interested in is not readily available, test.
One DOM property I can think of that would be affected by the scrollbar height is the clientHeight of the body (or whatever box has the scrollbar) if you set it to 100%. This is maybe a dumb approach, and not sure how useful it really is, but check it out:
get clientHeight before
expand width of an internal element, wide enough to cause a scrollbar
get clientHeight after
subtract
I made a fiddle of this. Like I said, not sure how useful this approach could be in real life, but maybe it's a start on something.
http://jsfiddle.net/brico/t6zMN/