I have print.min.js referenced in my angularjs project. I have it printing successfully (very simple!) for most of my needs. I have run into a case where the browser print dialog does not appear when a user presses my 'Print' button. The issue seems to be related to file size. I don't know the size threshold yet, but it seems after a few pages in length, the process hangs in print.min.js somewhere. Smaller files (2 - 3 pages or so) print without issue. Any thoughts?
Thanks!
Joe
By default, Print.js will process the computed styles for each html element. When printing large and / or complex html, this process may take a while. Specially on slower machines.
To prevent this, the library has a parameter scanStyles that can be set to false.
However, for this to work properly, you may want to style your html with css classes instead of inline style. Since the library isn't scanning the computed styles, it needs to receive the css you want to use when printing.
For example, when printing an element of id myElement on a page with two attached stylesheets, myStylesheet.css and vendor.css:
printJS(
{
printable: 'myElement',
type: 'html',
scanStyles: false,
css: ['myStyleSheet', 'vendor.css']
}
)
This supports css print media query as well.
You can also pass custom inline style if necessary:
printJS(
{
printable: 'myElement',
type: 'html',
scanStyles: false,
css: ['myStyleSheet', 'vendor.css'],
style: 'h1 { color: blue; }, someClass { font-size: 1rem; }'
}
)
http://printjs.crabbly.com/#configuration
Related
When a TextField cannot display all the text of its contents, I would like an ellipsis (… HORIZONTAL ELLIPSIS) to appear as the last character displayed to indicate to the user that some of the field contents is not visible. Actually, any kind of indicator would be acceptable, ellipsis or otherwise.
➛ Is there such a feature in Vaadin 8 (Framework) or 10 (Flow)?
➛ Is there some workaround or modification I can make to do this? Some CSS trick?
I'm not using v10 but I assume a similar approach as the one below based on v8 should get you the same effect. One thing to note is that, like a ton of other stuff, it depends on the browser you're using, and for IE & Edge (link1 pointing to link2) you need to make the input read-only to have it work, hence the focus/blur listeners in my sample. If you'd like, you can further style the input to make it look like a regular one if disabled, but that's not the main point here.
Code
import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;
public class MyEllipsisTextFieldComponent extends VerticalLayout {
public MyEllipsisTextFieldComponent() {
TextField ellipsisTextField = new TextField("Ellipsis", "This is a text field with a custom style that uses ellipsis to display very long and uninteresting texts like this one");
ellipsisTextField.addStyleName("ellipsis");
ellipsisTextField.addFocusListener(event -> ellipsisTextField.setReadOnly(false));
ellipsisTextField.addBlurListener(event -> ellipsisTextField.setReadOnly(true));
ellipsisTextField.setReadOnly(true);
addComponent(ellipsisTextField);
addComponent(new TextField("No ellipsis", "This is a regular text field with a very long and uninteresting text that does not use ellipsis"));
}
}
Theme
.v-textfield-ellipsis {
text-overflow: ellipsis;
overflow: hidden;
}
Result
Suppose in writing or verifying a test, the command code is:
pToggleMyCoolToggle: function () {
var selectors = this.elements;
return this
.getEl(selectors.myCoolCheckbox.selector)
.moveToEl(selectors.myCoolCheckbox.selector)
.clickEl(selectors.myCoolCheckbox.selector);
}
How can this element on the browser be shown with an outline using CSS:
outline: 3px dotted orange
by adding some code to the above command, using the methods inside of Magellan / Nightwatch?
Just use .execute
client.execute(function(){
document.getElementById('idYouWantToTarget').style.border="3px dotted orange";
})
I just found that the name selectors.myCoolCheckbox.selector is written by some amateur. It really should be paymentPage.useCreditCardRadio.selector. So the final selector states what the CSS selector is.
The line selectors = this.elements is very misleading too. selectors is not the "elements". It might be paymentPage = this.elements and paymentPage has many properties, including a useCreditCardRadio. Or it could be paymentPageElements = this.elements which means paymentPageElements is an object that contains all elements. So this example shows how bad naming affects programming, for all the people who will need to touch or edit the code in the future.
As a result, you should be able to use
var el = document.querySelector(paymentPage.useCreditCardRadio.selector);
and once you have the element, you can add the outline to it.
When setting the scrollTop and scrollLeft parameters in Safari 6 simultaneously, only one of both gets executed, scrolling the page only over one axis. This happens both using native JavaScript, jQuery and the jquery.scrollTo plugin.
Example using jQuery's .animate():
$('body').animate({
'scrollLeft': 100,
'scrollTop': 100
}, {
'duration': 500,
'easing': 'swing'
});
I've set up a demo page here: http://nabble.nl/demo/safari6scrollto/
All examples work fine in all major browsers as expected, in Safari 6 only example no. 4, 6 and 7 work.
Somehow, when loading the demo page in an IFRAME (see bottom of demo page), everything works just fine.
Is this a bug in Safari? If so, how to work around this issue? If not, what is causing it and how can this be resolved?
Other related reports:
https://github.com/flesler/jquery.scrollTo/issues/9
http://forum.jquery.com/topic/scrolltop-scrollleft-not-working-in-safari-6
http://bugs.jquery.com/ticket/12588
I needed to get the jquery.scrollTo plugin working on OSX Mountain Lion, and since I couldn't find the specifics on what is causing this behaviour, I put together a rather ugly workaround. It uses window.scrollTo(x, y) in the step function of jQuery's .animate(), which gives no problems in Safari 6:
var left;
$(window).animate({
'pageXOffset': 100,
'pageYOffset': 100
}, {
duration: 500,
easing: 'swing',
step: function(now, fx) {
if (fx.prop == 'pageXOffset') {
left = now;
} else if (fx.prop == 'pageYOffset') {
window.scrollTo(left, now);
}
}
});
Please note that the step function is called for every animated property, for every element the animation is applied on (in our case just 1: window). Hence the intermediate variable to store the current X position in the animation.
It uses the pageXOffset and pageYOffset properties of the window object, so I don't know how suitable this workaround is for animating the scrollLeft and scrollTop properties of non-window objects.
Anyway, it works for scrolling the entire document, which was all I wanted, and does so very smooth in Safari 6, too!
Jquery wont load. I'm a noob, but have persisted, trawled this site & tried many things, permission settings, reloading java on my system & various syntax tweaks, but no joy. About to give up. Here's how it stands...
Using jquery on my hard drive, current version jquery-1.7.1 (also tried v1.7.1.min).
I have tried to use the following plugins - scrollTo-1.4.2-min, jqDock.min & jqDock, jtruncate (current) & jtruncate.pack. None work. I'm using IE8 and Chrome to check on local.
Debugging says...
(jquery-1.7.1.js) invalid character Line 1 (NB: line 1 is just the
beginning of the credit info greyed out text /*! )
(jquery.jtruncate.js) jQuery is undefined Line 1 (NB: line 1 is
(function(jQuery){ ) (my page name) Object doesnt support this
property or method Code 0 Line 17 Char 5 (NB: line 17 is $('').jTruncate({ )
My head code, (after meta's, UTF8 and title)...
$(document).ready(function(){
$('<div id="statement" />').jTruncate({
length: 200,
minTrail: 0,
moreText: "[more]",
lessText: "[less]",
ellipsisText: "(truncated)",
moreAni: "fast",
lessAni: 2000
});
});
Then theres some java generated by Dreamweaver, (Rollover image/swap image guff), then page specific CSS (see below) i also have site wide external css sheet.
#statement {
position:absolute;
left:285px;
right: 190px;
top:130px;
width: 607px;
height: 321px;
}
Then html body.
Can anyone help? Cress
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
$(document).ready(function(){
$('body').append('<div id="statement" />');
$('#statement').css({
length: 200,
minTrail: 0,
moreText: "[more]",
lessText: "[less]",
ellipsisText: "(truncated)",
moreAni: "fast",
lessAni: 2000
});
});
I have a webpage which displays multiple textual entries which have no restriction on their length. They get automatically cut if they are too long to avoid going to a new line. This is the PHP function to cut them:
function cutSentence($sentence, $maxlen = 16) {
$result = trim(substr($sentence, 0, $maxlen));
$resultarr = array(
'result' => $result,
'islong' => (strlen($sentence) > $maxlen) ? true : false
);
return $resultarr;
}
As you can see in the image below, the result is fine, but there are a few exceptions. A string containing multiple Ms (I have to account for those) will go to a newline.
Right now all strings get cut after just 16 characters, which is already very low and makes them hard to read.
I'd like to know if a way exists to make sure sentences which deserve more spaces get it and those which contain wide characters end up being cut at a lower number of characters (please do not suggest using the CSS property text-overflow: ellipsis because it's not widely supported and it won't allow me to make the "..." click-able to link to the complete entry, and I need this at all costs).
Thanks in advance.
You could use a fixed width font so all characters are equal in width. Or optionally get how many pixels wide every character is and add them together and remove the additional character wont the pixel length is over a certain amount.
If the style of your application isn't too important, you could simply use a font in the monospace family such as Courier.
Do it in Javascript rather than in PHP. Use the DOM property offsetWidth to get the width of the containing element. If it exceeds some maximum width, then truncate accordingly.
Code copied from How can I mimic text-overflow: ellipsis in Firefox? :
function addOverflowEllipsis( containerElement, maxWidth )
{
var contents = containerElement.innerHTML;
var pixelWidth = containerElement.offsetWidth;
if(pixelWidth > maxWidth)
{
contents = contents + "…"; // ellipsis character, not "..." but "…"
}
while(pixelWidth > maxWidth)
{
contents = contents.substring(0,(contents.length - 2)) + "…";
containerElement.innerHTML = contents;
pixelWidth = containerElement.offsetWidth;
}
}
Since you are asking for a web page then you can use CSS text-overflow to do that.
It seems to be supported enough, and for firefox there seems to be css workarounds or jquery workarounds...
Something like this:
span.ellipsis {
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
width:100%;
display:block;
}
If you fill more text than it fits it will add the three dots at the end.
Just cut the text if it is really too long so you don't waste html space.
More info here:
https://developer.mozilla.org/En/CSS/Text-overflow
Adding a 'see more' link at the end is easy enough, as appending another span with fixed width, containing the link to see more. text will be truncated with ellipsis before that.