Develop Reference

Page break issue in PDF in froala editor

Any one have any knowledge of froala editor. I ma using it to edit webpage and generate it as a PDF. The HTML template contains a dynamic data, and when I generate a PDF the page break happen between the content, which looks quite bad. Does any one knows how to resolve it?

You could create a custom button and modify the html2pdf plugin inside the callback.
FroalaEditor.DefineIcon('customDownload', {
NAME: 'plus',
SVG_KEY: 'add'
});
FroalaEditor.RegisterCommand('customDownload', {
title: 'Custom Download PDF',
focus: true,
undo: true,
refreshAfterCallback: true,
callback: function() {
var element = this.el;
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: {
type: 'jpeg',
quality: 0.98
},
html2canvas: {
scale: 2
},
jsPDF: {
unit: 'in',
format: 'A4',
orientation: 'portrait'
},
pagebreak: {
mode: 'avoid-all',
before: '#page2el'
}
};
html2pdf(element, opt);
}
});
new FroalaEditor('#selector', {
toolbarButtons: ['customDownload']
});

Fullcalendar timeline view last column is always wider

I have created custom views for the timeline view of the fullcalendar scheduler (timelineCustomMonth, timelineCustomWeek, timelineCustomDay).
However, the last column is always wider than the previous ones, no matter at what resolution.
I can tell that it's not a problem with another CSS file, because I excluded all CSS files except the one for fullcalendar, and the issue was the same.
Fullcalendar v3.0.1
Fullcalendar-Scheduler v1.4.0
This is my javascript fullcalendar initialization:
$("#calendar").each(function () {
var calendar = $(this);
calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'timelineCustomMonth,timelineCustomWeek,timelineCustomDay,listMonth'
},
firstDay: 1,
eventLimit: true,
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
resources: {
url: '/machines',
dataType: 'json'
},
resourceAreaWidth: "15%",
events: {
url: '/events',
dataType: 'json'
},
views: {
timelineCustomMonth: {
type: 'timeline',
duration: {month: 1},
slotWidth: 5,
slotDuration: {days: 1},
slotLabelFormat: [
'D',
'dd'
]
},
timelineCustomWeek: {
type: 'timeline',
duration: {days: 7},
slotWidth: 5,
slotDuration: {hours: 4},
slotLabelInterval: {hours: 4},
slotLabelFormat: [
'D',
'H'
]
},
timelineCustomDay: {
type: 'timeline',
duration: {days: 1},
slotWidth: 5,
slotDuration: {minutes: 30},
slotLabelInterval: {hours: 1},
slotLabelFormat: [
'H'
]
}
}
});
});
These are two screenshots of different views where the problems occur:
timelineCustomMonth
timelineCustomDay
Thanks in advance.

In my case, setting slotWidth to a relative value (5%) fixed the problem with the last column stretching out.
$('#schedule').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
now: new Date(),
slotWidth: "5%",
resourceAreaWidth: '200px',
contentHeight: 'auto',
eventOverlap: false,
selectOverlap: false
...
});

If someone is still encountering an issue with that, please, refer to the following full-calendar Github issue link, it contains a complete explanation of what causes the issue and how to fix it by #arshaw (one of the main contributors):
Chrome 91 update causes incorrectly positioned lines in timeline v4.

Datatables export pdf HTML message

I am using jQuery DataTables 1.10 and would like to export PDF with HTML message. Because I need to include some specific info above the reports.
(Like date when report was made, who made the report etc.).
buttons: [
{
extend: 'pdfHtml5',
message: 'Made: 20_05-17<br />Made by whom? User232<br />'+this.messagePDF,
title: title,
header: true
},
]
HTML in message isn't working, it just shows <br /> tag.

You can apply styles like bold, italics... to your text using doc.content.splice inside customize as shown in fiddle.
$(document).ready(function() {
var table = $('#example').DataTable({
dom: 'Bfrtip',
ajax: 'https://api.myjson.com/bins/qgcu',
buttons: [{
extend: 'pdfHtml5',
//message: "Made: 20_05-17\nMade by whom: User232\n" + "Custom message",
title: 'Export',
header: true,
customize: function(doc) {
doc.content.splice(0, 1, {
text: [{
text: 'Made: 20_05-17 \n',
bold: true,
fontSize: 16
}, {
text: ' Made by whom: User232 \n',
bold: true,
fontSize: 11
}, {
text: 'Custom message',
bold: true,
fontSize: 11
}],
margin: [0, 0, 0, 12],
alignment: 'center'
});
}
}]
});
});
https://jsfiddle.net/dbbybL80/

Load specific CSS files from JavaScript in Rails

I'm working on taking a html5up template that I really like and put it in rails. I have it all working except for one thing. In the js they have this
skel.init({
reset: 'full',
breakpoints: {
'global': { range: '*', href: 'css/style.css', containers: 1400, grid: { gutters: 40 }, viewport: { scalable: false } },
'wide': { range: '961-1880', href: 'css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
'normal': { range: '961-1620', href: 'css/style-normal.css', containers: 960, grid: { gutters: 40 } },
'narrow': { range: '961-1320', href: 'css/style-narrow.css', containers: '100%', grid: { gutters: 20 } },
'narrower': { range: '-960', href: 'css/style-narrower.css', containers: '100%', grid: { gutters: 15 } },
'mobile': { range: '-736', href: 'css/style-mobile.css', grid: { collapse: true } }
},
Which loads a certain css file depending on what size screen you have. This works fine when its just being loaded using apache but in rails all css gets throw together into an application.css when its in assets/stylesheets which means i wont be able to do anything like this. Is there any way to keep these css files separate and load them dynamically from js like it is here?

Figured it out. i just put in into public and then just referenced it from ../stylesheets/mycss.css

twitter's profile widget include in a separate javascript file

I'm just trying to put the custom twitter's profile widget on my page, but I like to put the code in a separate javascript's file.
so, I don't know how to do that.
I mean, I put this on head tag
<script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>
the create a div for the widget, an put the rest of the code in another javascript
new TWTR.Widget(json_twitter_options).render().setUser('username').start();
But, how to "put" the result in that widget... I'm totally lost, thanks in advance.

The solution for me was simply to add an "id" property to the options object of an element that you want the widget to render into. This way you can even load the script with require.js or after the page loads and still render the widget into the space you want.
I didn't find any documentation for this property by the way.
ex:
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 135,
height: 700,
theme: {
shell: {
background: '#e5e5e5',
color: '#363F49'
},
tweets: {
background: '#e5e5e5',
color: '#000000',
links: '#06C'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
},
id: 'someDivId'
}).render().setUser('comster').start();

The js file doesn't have to be in the head just above the widget
this code works I have tested it:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 135,
height: 700,
theme: {
shell: {
background: '#e5e5e5',
color: '#363F49'
},
tweets: {
background: '#e5e5e5',
color: '#000000',
links: '#06C'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('USERNAME').start();
</script>

Ok, It seem my question was not understand.
I couldn't do what I want. But the way to simplify my problem, was creating a json object for setting up the widget.
I'm still want to find a way to not use script tag inside body tag
thanks a lot to viewvers!

Just put the entire code into a new javascript file (name it anything you like, like twitter.js), and link it in where you want it to display, like under
<div id="twittercode">[js file link goes here]</div>
This whole chunk should go into a new javascript file.
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 135,
height: 700,
theme: {
shell: {
background: '#e5e5e5',
color: '#363F49'
},
tweets: {
background: '#e5e5e5',
color: '#000000',
links: '#06C'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('USERNAME').start();