We Keep Coding

Border not aligned properly in PDF [Snippet attached]

I am making a very simple react application with ver minimal of content.
index.js:
<div className="App">
<div id="printable-div">
<h1>Generate PDF</h1>
<p>Create a screenshot from the page, and put it in a PDF file.</p>
<p style={{ color: "red" }}>
*Open this page in new window and press the button.
</p>
</div>
<br />
<button id="print" onClick={printPDF}>
PRINT
</button>
</div>
Where here the div with id printable-div will gets printed.
I also applied a css for this like,
#printable-div {
border: 2px solid #000;
padding: 20px;
}
But while click on the button, the download of pdf happens whereas on opening the pdf file, the border is not aligned properly.
Also here, the order needs to be to the page but whereas it applied only to the div.
Libraries used:
-> jsPdf
-> html2canvas
And the code executed on click on the print button as follows,
const printPDF = () => {
const domElement = document.getElementById("printable-div");
html2canvas(domElement).then((canvas) => {
const imgData = canvas.toDataURL("image/png");
const pdf = new jsPdf();
pdf.addImage(imgData, "JPEG", 0, 0);
pdf.save(`${new Date().toISOString()}.pdf`);
});
};
Complete working example:
Can anyone humbly help me to achieve the result of making the border properly aligned to the entire page?
It is okay if the libraries used needs to be changed to other alternative..
Requirement:
The entire page needs to have border visible with all sides equal spacing and the content needs to be inside of the border..

I checked your codesandbox and it seems you'd already applied #Ihsan's solution, but to build on that solution I found that jsPDF has a fromHMTL function, so you can skip rendering to a canvas first.
const printPDF = () => {
const domElement = document.getElementById("printable-div");
const doc = new jsPdf();
doc.fromHTML(domElement, 10, 5); // position within rectangle
doc.rect(5, 5, 200, 0.3);
doc.rect(5, 5, 0.3, 285);
doc.rect(5, 290, 200, 0.3);
// doc.rect(5, 30, 200, 0.3); // this is the "middle" horizontal bar
doc.rect(205, 5, 0.3, 285);
doc.save(`${new Date().toISOString()}.pdf`);
};
I commented out the middle horizontal bar as this bar's vertical position just needs to be tweaked for where you want/need it.
Edit
Instead of a bunch of rectangles you can draw a single rectangle and stroke it to create the outer border, and use a line to fill in the horizontal "bar". IMO this reads a little more cleanly.
const printPDF = () => {
const domElement = document.getElementById("printable-div");
const doc = new jsPdf();
// Create border
doc.rect(5, 5, 200, 285, "S").line(5, 45, 205, 45, "S");
// Inject HTML
doc.fromHTML(domElement, 10, 5);
// Save out to PDF
doc.save(`${new Date().toISOString()}.pdf`);
};
In fairness I think Ihsan should get the bulk of the credit as this is basically their answer, I just got the content in there by a different means, and positioned the copied HTML.

following to my comment, this is the example you can use to setup you pdf layout. you can try it on online editor
var doc = new jsPDF();
doc.setFillColor("#000000")
doc.rect(5, 5, 200, 0.3)
doc.rect(5, 5, 0.3, 285)
doc.rect(5, 290, 200, 0.3)
doc.rect(5, 30, 200, 0.3)
doc.rect(205, 5, 0.3, 285)

TweenMax at function out - how to implement conditional?

I'm using JS libraries: GSAP along with ScrollMagic.io by Jan Paepke.
Scrollmagic.io allows me to trigger some CSS changes on scrolling once certain trigger element is reached, the JS script looks like this:
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: "#trigger1"
})
.setTween(new TimelineMax().add([
TweenMax.to("header", 0.5, {backgroundColor: "rgba(40,80,01, 0.95)", height:"6%", width:"100%", top:"0", borderRadius:"0px"}),
TweenMax.to(".headernav", 0.5, {color:"white", fontSize:"1.5em", marginTop:"10px"}),
TweenMax.to(".circle", 0.5, {height:"35px", marginTop:"10px"}),
TweenMax.to("#logo", 0.5, {width:"70px", marginTop:"-10px", marginRight:"500px"})
]))
.addTo(controller);
In general - it would change position, background-color and font color of my menu once it is scrolled over white area of website so that it will still be noticable and easy to read.
The problem is my a:hover within menu stopped working.
I've found a workaround by using this:
$("#verticalnav p").hover(over, out);
function over(){
TweenMax.to(this, 0.5, {color:"rgb(181, 171, 171)", scale:"1.1"})
}
function out(){
TweenMax.to(this, 0.5, {color:"rgb(105, 105, 105)", scale:"1"})
}
This makes it work fine, but there's still one thing to be worked out - while background of menu is "white", color:"dimgray" of font is well noticable/readable, but it will also remain "dimgray" on the green background after scrolling.
Here's screenshot explanation to show it more clearly:
Default menu state with no hovers:
On:hover using js - changes color using script shown above:
Here some properties of menu have changed along with font color to be more readable on green background:
And here's how it looks like when the mouse is OUT of the link, leaving it "dimgray" because the script makes it:
My question is - how may I implement a conditional into this script:
$("#verticalnav p").hover(over, out);
function over(){
TweenMax.to(this, 0.5, {color:"rgb(181, 171, 171)", scale:"1.1"})
}
function out(){
TweenMax.to(this, 0.5, {color:"rgb(105, 105, 105)", scale:"1"})
}
so that it would read the current color value and run TweenMax.to with specific color according to this value?
I'm fairly green with JS so any kind of advice would be highly appreciated.
Regards,
Damian.

Actually it seems that the longer I don't get answer, the more creative i become.
Already worker it out, pretty much basic JS/jQuery was needed, posting it so maybe somebody could have some use of it later on.
Here's working code of function hover:
$("#verticalnav p").hover(over, out);
function over(){
TweenMax.to(this, 0.5, {color:"rgb(181, 171, 171)", scale:"1.1"})
};
function out(){
var kolor = $("header").css("background-color");
if (kolor == "rgba(255, 255, 255, 0.901961)") {
TweenMax.to(this, 0.5, {color:"rgb(105, 105, 105)", scale:"1"})
}
else {
TweenMax.to(this, 0.5, {color:"white", scale:"1"})
}
};

How to change background colors, marker CSS, and add hover text on marker?

I am trying to create a timeline view using visjs of a upgrade scenario (Pre Upgrade, Pre Release &Post Upgrade) something similar to the image below. Need some pointers to create different region colors as depicted in the image, CSS to change the main marker to an image source and also on hover of the slider (region or markers) it should show some description.
CSS
.vis-item.vis-background.preupgrade {
background-color: rgba(0, 153, 255, 0.2);
}
.vis-item.vis-background.prerelease {
background-color: rgba(102, 204, 255, 0.2);
}
.vis-item.vis-background.postupgrade {
background-color: rgba(204, 204, 255, 0.2);
}
Controller
$scope.visData = new vis.DataSet([
{start: '2015-07-26', end: '2015-08-25', type: 'background', title: 'Pre Upgrade', className: 'preupgrade'},
{start: '2015-08-26', end: '2015-09-30', type: 'background', title: 'Pre Release', className: 'prerelease'},
{start: '2015-10-01', end: '2015-10-31', type: 'background', title: 'Post Upgrade', className: 'postupgrade'}
]);
$scope.visOption = {
editable: false,
autoResize: true,
moveable: true,
margin: {
item: 10,
axis: 20
}
};
Visjs timeline HTML
<vis-timeline data="visData" options="visOption" events="visEvent"></vis-timeline>
I am also providing a plunker link for this problem.
Update Also why my plunker does not show region color changes?
Updated plunker link with some CSS changes, but how to add tooltip on top of background areas and how to add custom markers as shown in image with tooltips?
Update
Now I have achieved most of the things by using both AngularJS and jQuery simultaneously, but need help to convert everything to AngularJS. Still adding a custom time is pending and click event.
Updated Plunker link

Looking at the documentation you can see docs for where they spell out the classes to what you need to update for styling.
http://visjs.org/docs/timeline/#Editing_Items
Also they have events for onmoving and such so you should be able to drag and animate built in but I couldn't find a clear example of it in their docs.

Label above a body in Phaser

I have an array with bodies. For each one of them I want to put a label with some info. I've managed to do it, but when I turn them the label turns too.
// Main body
players[id] = game.add.sprite(game.world.randomX, 200, sprite, sprite_ini);
game.physics.p2.enable(players[id]);
players[id].animations.add('walk', [1,2,3,4], 10, true);
players[id].animations.add('stand', [0], 0, true);
players[id].animations.add('jump', [5], 0, true);
// Add weapon
bazuca = game.add.sprite(0, 0, 'bazuca');
players[id].addChild(bazuca);
// Labels
players[id].body.label_nome = game.add.text(
-35,
-55,
"Info",
{ font: "bold 14px Arial", fill: color});
players[id].addChild(players[id].body.label_nome);
And they are turned with
players[id].scale.x = -1;
The animation turns and works perfectly, the weapon also turns and stays in place, but the label also turns. How can I avoid that? The label should move with the body, but not turn.

I see two solutions:
Kamen Minkov's one, i.e. keeping the labels out of the groups and update their position on each frame (there doesn't seem to be an "onMove" signal or something).
Since you're using P2, you could actually physics-enable the labels, set "body.fixedRotation = true" on them, and create a constraint between each label and each sprite to make thhe labels follow the sprites.
The second solution seems more elegant and maintainable but performance-wise the first one is probably better.

If you set the label to be the same x value as the item it is labeling, and the y value of the label to be less than that of the object. Here is example code:
//in create():
label.anchor.setTo(.5, .5); /*sets positioning to center.
You need to make sure that arcade physics are applied to label*/
//in update():
label.x = object.x;
label.y = object.y - 60;
//change the 60 to whatever looks good to you when running.
To apply arcade physics:
//in create():
game.physics.startSystem(Phaser.Physics.ARCADE); // do this once
game.physics.enable(label/*change this to what you want the physics to apply to*/, Phaser.Physics.ARCADE);
Hope this helps.

majorTicksColor by interval into dojox gauges using dojo toolkit

I'm trying to use dojo toolkit and exactly this gauge.
In fact, I want a feature to majorTicksColor and minorTicksColor, I want the color depends for the interval, eg : from 0 to 30 green, from 30 to 70 yellow and from 70 red to 100, or maybe it is degraded.
Like this image.
Is that possible ?
Thank you.
Regards,

Something like this fiddle?
The principal here is to use an aspect to enhance the drawRange method of the dojox/gauges/GlossyCircularGauge widget.
//
// Use the new "drawGreenYellowRedCurves" as an *after* aspect to the existing "drawRange" function.
//
require(['dojox/gauges/GlossyCircularGauge', 'dojo/aspect', 'drawGreenYellowRedCurves', 'dojo/domReady!'],
function (GlossyCircularGauge, aspect, drawGreenYellowRedCurves) {
var gauge = new GlossyCircularGauge({
background: [255, 255, 255, 0],
title: 'Value',
id: "glossyGauge",
width: 300,
height: 300
}, dojo.byId("CircularGauge"));
aspect.after(gauge, "drawRange", drawGreenYellowRedCurves, true);
gauge.startup();
});