Develop Reference

jspdf parent and child table overlaping probem

I have a object and that object has a list. that means i have a table and that table has multiple child table. Now i want my parent table print a single page and other child table print another page, but it prevent overlaping when table go to the next page.
Here is my code
function generatePDF() {
debugger;
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.setFont("sans serif", "bold");
pdf.text('Disciplinary Actions And Criminal Prosecution & History', 105, 50);
source = $('#table')[0];
var childTables = $(source).find('table');
var tableCount = childTables.length;
specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true
}
};
margins = {
top: 80,
bottom: 10,
left: 78,
width: 522
};
$('#table tr').each(function () {
var row = $(this);
if (row.find('td:contains("Document")').length) {
row.remove();
}
});
pdf.fromHTML(
source,
margins.left,
margins.top, {
'width': margins.width,
'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('DisciplinaryAction&History.pdf');
}, margins
);
}
this is my pdf problem
i do not want this over laping. and do not table split bottom the page, if have not enough space for table print then it go to the next page

Multiple Button to Open Associated Image of Photoswipe

Supposed we have 2 images. Using Photoswipe js below, i will have second button beside 'btn', so that when clicking the other button, it will directly open second image at first, instead of the first image.
So we will do this :
document.getElementById('btn').onclick = openPhotoSwipe(do..something..);
document.getElementById('btn2').onclick = openPhotoSwipe(do..something..);
Please help!
var openPhotoSwipe = function() {
var pswpElement = document.querySelectorAll('.pswp')[0];
// build items array
var items = [
{
src: 'https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg',
w: 964,
h: 1024
},
{
src: 'https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg',
w: 1024,
h: 683
}
];
// define options (if needed)
var options = {
// history & focus options are disabled on CodePen
history: false,
focus: false,
showAnimationDuration: 0,
hideAnimationDuration: 0
};
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};
openPhotoSwipe();
document.getElementById('btn').onclick = openPhotoSwipe;

You need to use PhotoSwipe API
Here is a working fiddle
var pswpElement = document.querySelectorAll('.pswp')[0];
var items = [{
src: 'https://placekitten.com/600/400',
w: 600,
h: 400
},
{
src: 'https://placekitten.com/1200/900',
w: 1200,
h: 900
}
];
var options = {
index: 0
};
//var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
//gallery.init();
var x = document.querySelectorAll(".opengallery");
for (let i = 0; i < x.length; i++) {
x[i].addEventListener("click", function() {
opengallery(x[i].dataset.image);
});
}
function opengallery(j) {
options.index = parseInt(j);
gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
}

CasperJS viewport & viewportSize not resizing browser

Is anyone having any issues lately with the CasperJS or PhantomJS viewport or viewportSize?
I've tried using
page.viewportSize = {width: 1280, height: 1024};
casper.start()
.viewport(800, 600);
casper.options.viewportSize = {width: 1290, height: 1024};
No matter where I put them in the code the browser size still stays the default 300, 400.
/*jshint strict:false*/
/*global CasperError, console, phantom, require*/
var links = [];
var casper = require("casper").create();
var w = window.innerWidth;
var h = window.innerHeight;
function getLinks() {
var links = document.querySelectorAll("h3.r a");
return Array.prototype.map.call(links, function(e) {
try {
// google handles redirects hrefs to some script of theirs
return (/url\?q=(.*)&sa=U/).exec(e.getAttribute("href"))[1];
} catch (err) {
return e.getAttribute("href");
}
});
}
casper.options.viewportSize = {width: 1600, height: 950};
casper.start("http://google.fr/", function() {
// search for 'casperjs' from google form
this.viewport(900, 800);
this.fill('form[action="/search"]', { q: "casperjs" }, true);
});
casper.then(function() {
// aggregate results for the 'casperjs' search
links = this.evaluate(getLinks);
// now search for 'phantomjs' by fillin the form again
this.fill('form[action="/search"]', { q: "phantomjs" }, true);
});
casper.then(function() {
// aggregate results for the 'phantomjs' search
links = links.concat(this.evaluate(getLinks));
});
console.log("Height==> " + h);
console.log("Width==> " + w);
casper.run(function() {
// echo results in some pretty fashion
this.echo(links.length + " links found:");
this.echo(" - " + links.join("\n - "));
this.exit();
});

Maximum call stack size exceeded in custom Image filter

I am looking for a way to fill an Image with an image pattern in a FabricJs canvas, since there is not a built-in image filter to do this. Although my code is still in an early version, basically it should work(unfortunately it doesn't);
All the eavy work is done by applyTo method, where I load an image, then fill an hidden canvas with a pattern. I noticed that there is a function (source) which fall in an infinite recursion:
var pattern = new fabric.Pattern({
source: function () {
fhc.setDimensions({
width: smile.getWidth() + 5,
height: smile.getHeight() + 5,
});
return fhc.getElement();
},
repeat: 'repeat'
});
I have prepared a demo on JSFiddle
Could anyone help me to understand how to solve this issue?
(function (global) {
'use strict';
var fabric = global.fabric || (global.fabric = {}),
extend = fabric.util.object.extend;
fabric.Image.filters.ImagePatternEffect = fabric.util.createClass(fabric.Image.filters.BaseFilter, {
type: 'ImagePatternEffect',
initialize: function (options) {
options = options || {};
this.img = options.img;
},
applyTo: function (canvasEl) {
var w = canvasEl.width;
var h = canvasEl.height;
var hc = document.createElement('canvas');
fabric.Image.fromURL('http://i.imgur.com/0Ks0mlY.png', function (smile) {
debugger;
hc.setAttribute('width', w);
hc.setAttribute('height', h);
var fhc = new fabric.StaticCanvas(hc);
fhc.add(smile);
var pattern = new fabric.Pattern({
source: function () {
fhc.setDimensions({
width: smile.getWidth() + 5,
height: smile.getHeight() + 5,
});
return fhc.getElement();
},
repeat: 'repeat'
});
var rect = new fabric.Rect({
fill: pattern,
width: w,
height: h
});
fhc.add(rect);
fhc.renderAll();
var ifhcContext = fhc.getContext('2d');
var fhcImageData = ifhcContext.getImageData(0, 0, fhc.width, fhc.height);
var fhcData = fhcImageData.data;
var context = canvasEl.getContext('2d'),
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
data = imageData.data;
for (var i = 0, n = data.length; i < n; i += 4) {
data[i] += fhcData[i];
data[i + 1] += fhcData[i + 1];
data[i + 2] += fhcData[i + 2];
}
context.putImageData(imageData, 0, 0);
});
},
toObject: function () {
return extend(this.callSuper('toObject'), {
});
}
});
fabric.Image.filters.ImagePatternEffect.fromObject = function (object) {
return new fabric.Image.filters.ImagePatternEffect(object);
};
})(typeof exports !== 'undefined' ? exports : this);
var canvas = new fabric.Canvas('c');
fabric.Image.fromURL('http://i.imgur.com/qaQ8jir.png', function (img) {
var orImg = img;
img.filters.push(new fabric.Image.filters.ImagePatternEffect({
img: orImg,
}));
img.applyFilters(canvas.renderAll.bind(canvas));
canvas.add(img.set({
width: 300,
height: 300,
}));
}, {
crossOrigin: ''
});

i also use pattern image on my web application , in order to add it on objects, and it works.
All you need is this function function loadPattern(url, seatObj) where i pass the object which i want to add the pattern each time and the image(pattern) link.
here is the snippet :
function loadPattern(url, seatObj) {
//i use the loadImage function to load the image and pass it to the fabric.Pattern constructor
fabric.util.loadImage(url, function (img) {
//i change the fill property of the object to the
//image that i want to load on it as a pattern
seatObj.fill = new fabric.Pattern({
source: img,
repeat: 'no-repeat'
});
//refresh canvas and watch your image pattern on the object
canvas.renderAll();
});
}
hope this helps,
good luck

cs.js - displaying only one line at the same time (in multi-line chart)?

I'm new in JavaScript, D3.js and C3.js. I have multi-line chart like this. I wonder is there any possibility in C3 to display only one line in the chart (f.e. data1). And how to switch chart to display second data and turn off any other at the same time?
I'll be grateful for any hint!

http://jsfiddle.net/ot19Lyt8/2/
var chart = c3.generate({
data: {
columns: [
['data1', 130, 300, 200, 300, 250, 450]
]
}
});
setTimeout(function () {
chart.unload({
ids: 'data1',
done: function () {
chart.load({
columns: [
['data2', 100, 250, 150, 200, 100, 350]
]
})
}
});
}, 2000);

JSFiddle
If you just want to hide lines rather than remove them altogether, you can do something like this using the API:
function showOnly(chart, id) {
// get the already shown lines so we can hide them
// (excluding our target id)
var shown = chart.data.shown().map(function(e) { return e.id; });
var idx = shown.indexOf(id);
if (idx >= 0) {
shown.splice(idx, 1);
}
chart.hide(shown);
// if our target id wasn't already visible, show it
if (idx < 0) {
chart.show(id);
}
}