We Keep Coding

How can i hide different divs, or element chidrens with html2pdf library?

i'm using just javascript in scout framework, to get pdf from dinamic html site, my index.js:
function buttonHtml2Pdf() {
button = '<input type= "button" value="Stampa html2Pdf" id="html2pdf" class="menu-item menu-button unfocusable menubar-item left-of-button";" />';
$(button).insertBefore($("div[data-classid='DettaglioArticoliButton_org.eclipse.scout.apps.crm.client.crm.ContoClienteForm_InnerFormField_org.eclipse.scout.apps.crm.client.crm.MainClienteForm']"));
$("#html2pdf").click("click", function() {
var $elementoDaConvertire = $("div[data-classid='DettaglioOrdineBox_org.eclipse.scout.apps.crm.client.crm.ContoClienteForm_InnerFormField_org.eclipse.scout.apps.crm.client.crm.MainClienteForm']").html();
var elemClass = $("div[data-classid='org.eclipse.scout.apps.crm.client.crm.ContoClienteForm$MainBox$DettaglioArticoliBox$DettArticoliField$Table_DettArticoliField_org.eclipse.scout.apps.crm.client.crm.ContoClienteForm_InnerFormField_org.eclipse.scout.apps.crm.client.crm.MainClienteForm']").html();
var opt = {
margin: 1,
filename: 'Dettaglio_Ordini.pdf',
image: {
type: 'jpeg',
quality: 0.98
},
html2canvas: {
scale: 2,
letterRendering: true,
imageTimeout: 0,
width: 850,
height: 1200,
scrollX: 0,
scrollY: 20
},
jsPDF: {
unit: 'in',
format: 'a4',
orientation: 'portrait',
putOnlyUsedFonts: true,
floatPrecision: 'smart'
}
};
var worker = html2pdf();
worker = html2pdf().set(opt).from($elementoDaConvertire).toContainer().then(() => {
const doc = $('.html2pdf__container');
doc.find('.menubar').remove();
doc.find('.unfocusable').remove();
//doc.find($("div[data-classid='DeliveryNameOrderField_org.eclipse.scout.apps.crm.client.crm.ContoClienteForm_InnerFormField_org.eclipse.scout.apps.crm.client.crm.MainClienteForm']").html()).remove();
doc.find('.field has-inner-alignment halign-left valign-top white-space-nowrap').hide();
})
.toPdf().get('pdf')
.then(function(pdf) {
pdf.addPage();
}).set(opt).from(elemClass).toContainer().toCanvas().then(() => {
var doc2 = $('.html2pdf__container');
doc2.find('table-header-item-text').remove();
}).toPdf().save().catch(function(error) {});
});
}
As you see i must to take de "data-classid" generated from scout framework, i can't modify the id and also taht doesn't listen my $(".class") call with jquery. what can i do to hide some elements?
doc.find().hide()/remove() just work for 2 class: menubar and unfocusable, if i add other class, that is not taken.
If this library is not the solution what else can i do?

How to add slideWidth into a breakpoint in Glide.js

I have to set the slide width to a specific size if the viewport is between a range.
breakpoints: {
767: {
perView: 1,
peek: 193,
slideWidth: 277
},
1023: {
perView: 1,
peek: 212,
}
}
The documentation states that you can use slideWidth in the settings, so I'm assuming is in the breakpoints, but there's no example on how to do that and I haven't found an example of it.
The whole interface is responsive, so even if slideWidth is working behind the scenes, the width of the slide changes no matter what.
I also tried with pure CSS but Glide takes charge of course and overwrites when a resize event occurs. Also tried with pure JS and measuring the viewport myself, but again Glide.js takes charge and the interface is being offset, so the slide moves a bit and doesn't match the screen.

Here is a codepen on how to use the breakpoints https://codepen.io/tfoh/pen/zjqzZo
new Glide('#glide1', {
type: 'carousel',
perView: 3,
breakpoints: {
800: {
perView: 1
}
}
}).mount();

I manage that with css, this example make width of slides the same on any resolution, .glide-wrapper you should add manually like a glider parent div
.glide-wrapper {
max-width: 100vw;
overflow: hidden;
}
.glide {
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.glide__track {
overflow: visible!important;
}
const glide = new Glide('.glide', {
type: 'carousel',
breakpoints: {
1280: {
gap: 16,
focusAt: "center",
perView: 1,
peek: {
before: 16,
after: 16
},
},
}
}).mount({Swipe, Controls, Breakpoints });

Split oversized images when exporting to PDF

I am using pdfmake after html2canvas. I am turning a big chunk of html to image (canvas) and then this into pdf (because of very complicated styling in this html).
In case the canvas is longer than 1 page, I wish to show as much as I can on the 1st page, then on the 2nd to continue from where I stopped and etc. etc.
I was thinking of something like this:
var dd = {
content: [
{
image: 'sampleImage.jpg',
height: 1500,
width: 500,
margin: [0, 0, 0, 0]
},
{
image: 'sampleImage.jpg',
height: 1500,
width: 500,
margin: [0, -820, 0, 0]
}
]
}
Expecting:
1st page: Part of the image (as much as it fits in 1 page)
2nd page: Different part of image (starting from where page 1 finished)
Result:
1st correct, 2nd page identical to 1st!
Surprisingly when I tried:
var dd = {
content: [
{
image: 'sampleImage.jpg',
height: 1500,
width: 500,
margin: [0, -820, 0, 0]
},
{
image: 'sampleImage.jpg',
height: 1500,
width: 500,
margin: [0, 0, 0, 0]
}
]
}
Expecting:
2nd page: Part of the image (as much as it fits in 1 page)
1st page: Different part of image (starting from where page 1 finished)
Result:
Both pages correct but... wrong order!

print hidden div of visibility:collapse to pdf

I am using jspdf to print html elements to pdf. If the div section is not hidden, the pdf prints to view the contents of the html elements. When the section of the html element is hidden or collapse, it prints a blank pdf document. Here is the snippets
function bookPDF() {
// Get the element.
var element = document.getElementById('bookPDF');
var opt = {
margin: 1,
filename: 'book.pdf',
image: { type: 'png', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
html2pdf().set(opt).from(element).save();
}
here is the html elements shown
<a onclick="bookPDF()" class="ui button">
<i class="download icon"></i> Book</a>
<div id="bookPDF"
style="visibility:collapse max-width:60%; margin:0 auto; background: #fff;border-bottom: 1px solid #ffffff;"
class="table-wrapper ui basic segment">
<h1 class="ui dividing header center aligned">
Books collections
</h1>
......//more content but pdf prints does not print
</div
how do I get around this... printing the pdf even when hidden with css element

You can try and temporarily make it visible then hide it after the print as in:
function bookPDF() {
// Get the element.
var element = document.getElementById("bookPDF");
var opt = {
margin: 1,
filename: "book.pdf",
image: { type: "png", quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: "in", format: "letter", orientation: "portrait" }
};
element.style.visibility = "visible"; // <== here
html2pdf().set(opt).from(element).save();
element.style.visibility = "hidden"; // <== and here
}

QTip show my ajax content before downloading all the content

I am using QTip in my project and I have a very frustrating problem.
I have a page which contains around 20 elements. while standing over them, qtip generate an ajax request and get additional details on these elements while showing them in a qtip.
The problem is that it seems the qtip show the tip before downloading all the content of the additional page and causing weird artifacts. This happen the first time for each additional content. second time it shows the tip there is no problem.
Here is how I am calling qtip :
$(".challenge_button").each(function (index, domEle)
{
$(domEle).qtip({
content: {
url: '/main/challenge_get_info/' + $(this).data("challenge-id") +'/'
},
position: {
adjust: { x: -50, y: -10, screen: true },
corner: {
target: 'bottomRight',
tooltip: 'topLeft'
}
},
style: {
name: $(this).data("state"),
width: {
max: 500,
min: 370
},
tip: true
},
show: {
ready: false,
delay: 500,
effect:
{type : 'fade', length : 400 }
}
});
});