We Keep Coding

JSPDF Autotable breaks rows

In web app I'm using the JSPDF Autotable to build a PDF.
The problem is that the data will be dynamic (I'm going to use AngularJS 1.x) and so the rows can have differents height.
In some cases, Autotable breaks the last row of the page, continuing to the next one. How can I prevent this behavior, and set up Autotable to take the last row (which default would break) and bring it to the next page?
This is my code: https://jsfiddle.net/9vgxvfkh/1/
I guess I have to change some settings in the style:
styles: {
cellPadding: 1.5,
overflow: 'linebreak',
valign: 'middle',
halign: 'center',
lineColor: [0, 0, 0],
lineWidth: 0.2
},
pageBreak: 'always'
But I tried, and it didn't work.
P.S.: The margin top on the header is because then I will add an image.

Using the latest version this particular example is fixed. But for other cases where you don't want a multi line row to be split you can use rowPageBreak: 'avoid'.

Unfortunately, there is no way to do it using some parameters or styles.
I did a quick debug and found a solution for your problem, you need to modify the source code slightly.
In the source code I found that, for each row a method printFullRow is called, after that there is a check if the row can fit on the page (method canFitOnPage).
If row cannot fit on page, there is a check how many lines of text does it contain (in my case it is 10). Row is being split, because number of lines is bigger than 1.
You need to change this number to something bigger. In order to avoid further bugs you need to ensure how many lines would fit entire page height and put this number instead of 1. If you would choose some enormous amount, in case of really long text that wouldn't even fit entire page, it wouldn't be rendered at all, because common_1.addPage() would be executed endlessly.
To sum up, change line 470 to something like this:
if (row.maxLineCount <= 50) {
Unless 50 lines can't fit on page...
Before:
After:
Please check updated fiddle:
https://jsfiddle.net/9vgxvfkh/2/

Ext JS make paging toolbar smaller

I have a very simple question but I don't seem to find a simple answer. In fact, I haven't found any answer how to make the paging toolbar of a Ext JS grid smaller.
I made a very simple fiddle to investigate how this works, and it looks like at some point ExtJS will dynamically calculate the positions of the elements in the paging toolbar. Specifically the 'left' css attributes are set.
So I would like to know how to tweak the function that calculates these values so I can decrease these values. I could use jQuery/Javascript to do this but that just sounds so wrong so I prefer a clean ExtJS way to do this.
So instead of something like this...
I would like to see this:
For instance, the 'previous page' button in my sample has an inline css style declared (most likely done by the paging toolbar widget) with 41px to left whereas the separator icon has 81px for the same 'left' style. This goes on until the entire width of the toolbar is covered.
So to conclude, what I want is to intercept the calculations and decrease the values of the elements to lower the entire width of the toolbar.
Any suggestions would be welcome.

First set the width of your button.
new Ext.Button({
width: 100, <<== width of the button
text: 'Smaller paging toolbar',
// ...
Then you can move your element to the right with a Toolbar Separator just before your button :
[
{xtype: 'tbseparator', width: 200 },
new Ext.Button({
// ...
Here is your corrected fiddle

Thought I'd post the answer to my own question. There's a config that enables horizontal scrolling when the toolbar gets too small:
Ext.create('Ext.PagingToolbar', {
overflowHandler: 'scroller'
}

jQuery Cycle plugin not working

There is a website in which there's a section which I'm trying to replicate within JSFiddle and play around with it.
One thing that I'm having trouble with is this:
These two small <- -> buttons are used to switch between testimonials. This switching is being done by jQuery Cycle Plugin.
The problem is that I can't get these buttons to work within JSFiddle.
I have imported the same jquery.cycle.all.2.74.pack.js file used on the original website, and have also added jQuery. So I don't know what else is missing.
My JSFiddle Replica: http://jsfiddle.net/ahmadka/FsSxd/
Original Website: http://bit.ly/16447fr (To avoid search engine indexing)
This is where these <- -> buttons are used on the original Website:

A couple of things were needed to get this functioning correctly. First of all, you were never calling cycle():
$('.scrollable4 .items').cycle({
timeout: 0,
next: '.next',
prev: '.prev',
fx: 'scrollRight',
easing: 'easeInOutBack'
})
Secondly, to mimic the effect you're looking for, you need the easing.js plugin (see external resource in jsfiddle linked below).
Finally, within your CSS, you can't float the elements, they need to be absolutely positioned and given a height of 100%.
#divleftcontent2 .scrollable4 .items {
position: absolute;
height: 100%;
}
There are other ways to fix the height issue but that is a different question.
I have updated the fiddle to show what I think is the final version you are looking for: http://jsfiddle.net/FsSxd/8/

How to make custom TinyMCE button in Wordpress change icon on hover

I created TinyMCE plugin for Wordpress editor to insert Youtube videos. Everything works fine except this button has no hover state (like the default buttons have). I explored the code and found a difference - default buttons are spans with background-image sprite, and my custom button is a plain image. There's no option in TinyMCE addButton() function to insert a span, only image:
ed.addButton('p2_youtube_button', {
title : 'Insert Youtube video',
cmd : 'mceYoutube',
image: url + '/shortcode-youtube.png'
});
Is there a way to solve this little problem?
To illustrate how it looks (the red Youtube icon should be gray and turn red on hover):
http://d.pr/aszC

I noticed that the Crayon Syntax Highlighter plugin has managed to do this. It is a bit of code to read through, I found the tinyMCE specific part in /wp-content/plugins/crayon-syntax-highlighter/util/tag-editor/crayon_tinymce.js . I hope this helps.
The style which causes the highlight is here:
.wp_themeSkin span.mce_crayon_tinymce {
background: url(images/crayon_tinymce.png);
}
.wp_themeSkin .mceButtonEnabled:hover span.mce_crayon_tinymce,
.wp_themeSkin .mceButtonActive span.mce_crayon_tinymce {
background-position: -20px 0;
}
The image uses the same size as the other TinyMCE icons:

There are additional parameters you can pass to the addButton method that give you some options for how you skin your button.
If you remove the image property and replace it with icon, you can use a font-ified icon instead. This is a multi-step process, which starts with actually building your icon font. Here's a good tutorial that walks you through the process. The tutorial author recommends IcoMoon as a reliable way to build your icon fonts. There are probably others.
The way that I use is similar to #feonix83's approach, using CSS instead. Following the way WordPress itself does it, you lay your icons out in a sprite sheet, with the "hover" state 20px above the "off" state. If you don't know what I'm talking about, take a look at the defalt WordPress icon sprite sheet: wp-includes/images/wpicons.png
If you remove the image property altogether, TinyMCE just puts a span of class mceIcon inside the button anchor block. It's quite easy then to style that element and use the background-image referencing your sprite sheet. You use background-position to set the offset for the appropriate icon.
There's one additional trick that you can use to help you target only your buttons. You can add a class property to the addButton call and pass any number of classes. You will need to manually specify a specific class that can be used to target that button in particular, but you can also pass in an additional class that can be used to style all your buttons at once, since they won't automatically inherit the styles that WordPress uses.
class: "my-buttons my-specific-button"
Here's the CSS that I use. Note that this approach works best when each button has its own individual sprite sheet, as opposed to the WordPress approach that loads all the icons at once, though that approach has some performance benefits that are not to be ignored:
.mceButtonEnabled:hover span.mceIcon.my-buttons { background-position: 0 0; }
span.mceIcon.my-buttons.my-specific-button { background: url( images/my_button.png ) no-repeat 0 -20px; }

how to apply mootools morph effect to more than one div?

I am having trouble applying the morph effect of mootools to more than one div. i want that all div morphs at the same time, but instead just the first one morphs. Please help!Thank you if you are taking your time to look at this!
i have got the code from that page: http://davidwalsh.name/morphing-elements-mootools-css
but i have two divs instead of one, that are exactly the same ( class, id etc are the same)!
cheers Timm

you need Fx.Elements from mootools-more:
http://mootools.net/docs/more/Fx/Fx.Elements
which is better due to the unified timer etc.
the david walsh example is set for multiple elements also so not sure what you are doing wrong. in any case, its much easier to do:
$$("div.foo").morph({ width: 300, opacity: [0,1], background: "#ffffff"});
which will morph all these properties on all divs with a class of foo.