I want to implement pretty print using jquery and html. if any div with .section class is in bottom of A4 page (my A4 body width is 595px and each page height is 842px) i add margin for push this section in next page. here is my code:
$(".section").each(function () {
//add element offset top to detect element page number
//for example if element top is 1400 then it is in page 2 (842*2 > 1400)
$(this).attr('data-top', $(this).offset().top);
});
$(".section").each(function () {
$elementTop = $(this).data('top');
if (parseInt($elementTop) > ($currentPage * $A4PageHeight)) {
if (!$(this).hasClass('rendered')) {
$(this).css('margin-top', ($elementTop - ($currentPage * $A4PageHeight)) + 'px');
$(this).addClass('rendered');
$(this).addClass('page-'+$currentPage);
}
$currentPage += 1;
}
});
enter image description here
I noticed that in CSS print there is a property called page-break-inside that prevent split element in multiple pages. so i use this and everything just works.
#media print {
.section {
display: block;
page-break-inside: avoid;
}
}
No need to JQuery
Related
I want to implement pretty print using jquery and html.
if any div with .section class is in bottom of A4 page (my A4 body width is 595px and each page height is 842px) i add margin for push this section in next page.
here is my code:
$(".section").each(function () {
//add element offset top to detect element page number
//for example if element top is 1400 then it is in page 2 (842*2 > 1400)
$(this).attr('data-top', $(this).offset().top);
});
$(".section").each(function () {
$elementTop = $(this).data('top');
if (parseInt($elementTop) > ($currentPage * $A4PageHeight)) {
if (!$(this).hasClass('rendered')) {
$(this).css('margin-top', ($elementTop - ($currentPage * $A4PageHeight)) + 'px');
$(this).addClass('rendered');
$(this).addClass('page-'+$currentPage);
}
$currentPage += 1;
}
});
please help me to do this.
You may wish to set page break CSS attributes to tell the browser where it should avoid breaking. You could add page-break-inside: avoid to a div that you want the browser to try not break
You can also set the number of lines of paragraph text that should be visible before a break with an orphans definition.
More details:
https://www.w3.org/TR/WD-css2-971104/page.html
So my ag-grid resize itself because my row height is also dynamic. So for height I am using [style.height.px]="beta" and this.beta = document.getElementsByClassName('ag-full-width-container')["0"].offsetHeight + 139 And the pagination is set to 100.
I cannot use autoHeight because I have more than 10k rows. So I want my header to be sticky. I have some content before ag-grid in DOM. As I scroll I want my ag-grid header to stick to the top. I am using top:0;position:sticky;z-index:1000 It's working for every div tag except ag-gird's div tag. So is there a way to have a sticky header in ag-grid?
On onGridViewChanged() function I implemented the following logic. So in this logic the HTML above ag-gird in DOM should be consider for top because ag-grid header top was 0 for me. And then add some value according to your requirement (calibration). Then for the row body add some margin (calibration).
onGridViewChanged() {
let header = $('.ag-header')
let headerPos = $('.btn-row').position().top + 50
$(window).on("scroll", function () {
if ($(window).scrollTop() > headerPos) {
header.css("position", "fixed").css("top", 0).css("z-index", "99");
$('.ag-body-viewport.ag-layout-normal').css("margin-top", "88px");
}
else {
header.css("position", "static");
$('.ag-body-viewport.ag-layout-normal').css("margin-top", "0px");
}
});
}
I would suggest eliminating the scrollbars that are outside of the grid, and make the grid fit within the window. You can use flexbox to do that. You need to make sure the parent elements are using display: flex and have 100% height. And then set the grid to be flex-grow: 1.
On the parent element(s):
height: 100%;
display: flex;
flex-direction: column;
On the grid:
flex-grow: 1;
https://stackblitz.com/edit/angular-ag-grid-full-height?embed=1&file=src/app/app.component.html
I want to load different home page according screen size. Can anyone help about it ?
For Example,
for screen-size < 960 px I want to display default landing page as index1.html
and
for screen-size > 960 px I want to display default landing page as index2.html
Thanks in advance.
I know this was asked and answered a while ago, but I think the solution I'm adding is better than the accepted answer as it involves no reloading and works on resizing. Define two CSS classes, .HideOnMobile and .ShowOnMobile and use them in two top level DIV elements.
Then use media queries to set the display value of those two classes to non or initial, to display or hide each DIV according to the screen width.
#media (max-width: 575.98px) {
.HideOnMobile {
display: none;
}
.ShowOnMobile {
display: initial;
}
}
#media (min-width: 576px) {
.HideOnMobile {
display: initial;
}
.ShowOnMobile {
display: none;
}
}
<div class="ShowOnMobile">
MOBILE content
</div>
<div class="HideOnMobile">
DESKTOP content
</div>
You've tagged this question responsive-design, but you are asking about how to do "adaptive design." Responsive design would be having a single HTML page that adjusts to the medium it is being viewed in, for example by using media queries. I won't get into a debate about which is better, but I add this in case you're interested in responsive design so that you have some ideas to google.
A way to do what you are asking is to have a bit of JavaScript on your page that checks the width of the window and redirects if necessary:
// In index2.html
if (window.innerWidth < 960) {
window.location = "index1.html";
}
// In index1.html
if (window.innerWidth >= 960) {
window.location = "index2.html";
}
I tried the above solution. It worked but the page was reloading continuously. By this approach solved the reload problem and I've added a function that can help reload the page automatically when viewport size change.
// refreshing page automatically when viewport size change
window.onresize = function(event) {
document.location.reload(true);
}
var href = window.location.href.split("/")
var html_location = href[href.length-1]
if (window.innerWidth >= 960 && html_location !== "index.html") {
window.location = "index.html";
}
if (window.innerWidth < 960 && html_location !== "index2.html") {
window.location = "index2.html";
}
I have a table made in html/css that need to be printed on a 40.5cm x 21.5cm page, and I can't force, from css/html, to get printed on that size. I have this:
html, body {
width:40.5cm;
height:21.5cm;
margin:0cm;
padding:0cm;
}
#page
{
width: 40.5cm;
height: 21.5cm;
margin:0;
}
#media print {
html, body {
width: 405mm;
height: 215mm;
}
}
But every time I put print and "print to PDF", the PDF is created in "letter" page size. I tried to actually print it, and it appears on that size too. What I'm missing? I also tried #page size instead of #page width and height.
You can't override the print settings using css, the only solution for you it is create a pdf.
you can use https://parall.ax/products/jspdf and set the size using this:
open the website and change this: var doc = new jsPDF(); for this:
new jsPDF('p', 'mm', [405, 215]);
and you can print your custom
I want to apply CSS style in following code but i couldnt find the way. I want to add style to image as width 50px and height 50px
grid.Column(format:(item) =>
{
if (File.Exists(Server.MapPath("~/Content/BrandImages/" + item.BrandImage)))
{
return Html.Raw(string.Format("<text><img src=\"{0}\" alt=\"Image\"/></text>", #Url.Content("~/Content/BrandImages/" + item.BrandImage)));
}
else
{
return Html.Raw(string.Format("<text><img src=\"{0}\" alt=\"Image\"/></text>", Url.Content("~/Content/BrandImages/noimage.jpg")));
}
}
),
You have multiple solutions
1-You can add inline width and height properties to your img element
return Html.Raw(string.Format("<text><img style=\"width:50px; height:50px;\" src=\"{0}\" alt=\"Image\"/></text>", #Url.Content("~/Content/BrandImages/" + item.BrandImage)));
2- In your global stylesheet you can define new style like below
.myImageClass{
width:50;
height:50px;
}
then you can add this class your image elements
return Html.Raw(string.Format("<text><img class=\"myImageClass\" src=\"{0}\" alt=\"Image\"/></text>", Url.Content("~/Content/BrandImages/noimage.jpg")));