I'm working on a ElectronJS and Reactjs project to build an application that prints documents (as web HTML format) using thermal printers.
Thermal printers prints documents on special papers with 50mm or 80 mm of width but it has no limits of height.
I use Reactjs to generate HTML Contents and CSS3 print media style to hide screen contents #root and show only what i want to print #print,
#media only print {
#page {
size: auto; /* auto is the initial value */
margin: 0; /* this affects the margin in the printer settings */
height: auto !important;
width: 70mm !important;
}
html, body {
margin: 0 !important;
padding: 0 !important;
position: fixed;
left: 0;
top: 0;
background: #eee !important;
font-family: 'Tahoma', 'Segoe UI Light', 'Segoe UI', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Verdana, sans-serif !important;
visibility: hidden;
height: auto !important;
width: 70mm !important;
overflow: visible !important;
}
#root {
display: none !important;
visibility: hidden !important;
}
#print {
display: block;
position: fixed;
left: 0;
top: 0;
visibility: initial !important;
padding: 1px !important;
background: white;
border: none;
outline: none;
margin-left: 5mm;
height: auto !important;
width: 70mm !important;
overflow: visible !important;
}
}
The problem is when i try to print long pages, it print only the upper part of it. I figure out that it is related somehow with the screen height. Because it print the exact same part that appear when i show the print scope and it ignore the scrollable part of the document.
webContents.print({ silent: true, printBackground: false, printerName },() => {});
I think my issue is very close to this one.
Any idea will be helpful,
I fixed it.
I just remove position: fixed; from both html, body and #print.
I just got into CSS animations with ngAnimate. Cool stuff! I'm now struggling to figure out how to control the animation of a sibling element affected by some animation.
Plunker: https://plnkr.co/edit/XqpMPklO2SDlZQ1GIJ5Z?p=preview
For example, in the above plunker, the top div animates away nicely, but the bottom div doesn't. Is there a way to also animate the bottom div when the top is animated?
div.top {
width: 100%;
background-color: red;
height: 200px;
position: relative;
transition: 1s linear all;
opacity: 1;
top: 0;
}
div.bottom {
widows: 100%;
background-color: blue;
height: 300px;
}
button {
width: 100%;
padding: 25px;
}
div.top.ng-hide {
opacity: 0;
top: -1000px;
}
The problem has to do with the top div dissapearing suddenly. Make it transition to height: 0 and the bottom div will follow it's motion.
div.top.ng-hide {
/* ... */
height: 0;
}
Plnkr Fork
I suspect this is a case of not really understanding CSS3 animations, but in general, I've found Angular animation very frustrating to learn.
So to start, I have a plunker for this: http://plnkr.co/edit/VSIxhDy1qaVuF0j0pxjT?p=preview
As I'm required to show code to get a plunker link going, here's the CSS in the test situation:
#wrapper {
position: relative;
overflow: hidden;
}
#wrapper, form, #wrapper > div {
height: 400px;
width: 400px;
}
#wrapper > * {
transition: 10s linear all;
}
form {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
form.ng-hide-add-active {
top: -100%;
}
#wrapper > div {
position: absolute;
left: 0;
top: 0;
background: #66F;
}
#wrapper.ng-hide.ng-hide-remove-active {
top: 100%;
}
I have a situation where I want to make a form, and if it successfully submits, I want the form to slide up with the success message sliding up under it. The problem is that while I can get the form to slide away, the under div just appears. In fact, it works better on plunker than on my code, where it starts up shown, goes away via animation, then just reappears when the form is submitted. No idea why that's the case, but in general, Angular animations are frustrating me. I tried looking up examples, and many mention using ng-animate="'name'" to create custom classes, but that doesn't seem to work for me. Likewise, the documentation mentions an ng-hide-remove class, but I never see that getting applied.
Is there any advantage to using CSS3 transitions over creating custom animations with the animate module, and just using jQuery to do it? I understand keyframes may be the biggest advantage? This is just making it really hard to do stuff that seems relatively easy in jQuery working...
The examples using ng-animate="'name'" is for versions earlier than Angular 1.2.
For these kind of animations, vision two states for each involved element.
Visible
Hidden
You have a wrapper. Inside the wrapper you have two elements involved in the animation - a form and a div with a message. Now set up your HTML and CSS with the visible state in mind. When visible, both the form and the div should be visible inside the container.
Here is an example based on yours (changed it some for clarity):
#wrapper {
position: absolute;
height: 200px;
width: 200px;
top: 100px;
left: 100px;
border: 1px solid silver;
}
#form {
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-color: #DDFEFF;
transition: all 1s ease-in-out;
}
#submitted {
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-color: gold;
transition: all 1s ease-in-out;
}
Both the form and the div are as large as the wrapper and aligned to the wrappers top, which means in this state they will overlap. This is not a problem however, since they shouldn't be visible at the same time.
Now define their hidden states.
For example, the form should when hidden be located above the wrapper:
#form.ng-hide {
top: -100%;
}
And the div should when hidden be located below the wrapper:
#submitted.ng-hide {
top: 100%;
}
That should be enough but minor tweaks might be needed depending on what AngularJS version you are using.
Demo: http://plnkr.co/edit/FDJFHSaLXdoCK7oyVi7b?p=preview
I have a problem with a CSS grid I built. The relevant site is this: http://dr-brauchle.de/
The wall of photos underneath the content is constructed with a grid of floated boxes. This works fine as long as all the boxes have fixed width and height values.
To make the site responsive I use percentages on the width of the boxes and "auto" on their height and the same applies to the images that are loaded into these boxes. The media query jumps in at 1199px and converts the static box sizes to fluid box sizes.
This produces problems at certain resolutions where the second large image box jumps from the left margin of the page to the right and thus destroys the order of the grid. Making the browser window bigger makes the box jump in to place again. This is very annoying since the resolution on an iPad 3 for example produces this error as well.
On the boxes (sse code below) I had to use a "line-height: 0" to eliminate gaps of a few pixel between the boxes. This seems to be part of the strange float-problem.
.box-1 {
width: 25% !important;
height: auto;
display: block;
overflow: hidden;
float: left;
background-size: cover !important;
line-height: 0;
}
.box-2 {
width: 50% !important;
height: auto;
display: block;
overflow: hidden;
float: left;
background-size: cover !important;
line-height: 0;
}
Thanks a lot for ANY help!
Arne
So what I found is that you need to force an aspect ratio.
Try modifying the following styles:
.box-1 {
width: 25% !important;
height: 0;
display: block;
overflow: hidden;
float: left;
background-size: cover !important;
line-height: 0;
position: relative;
padding: 13.75% 0 0 0;
}
.box-1 img {
width: 100% !important;
height: auto !important;
position: absolute;
display: block;
max-width: 100%;
max-height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Basically the modification above set up the box-1 to have a fixed aspect ratio then positionsw the img in in absolutely. To calculate the 13.75%, I took one of your images and got 165/300=.55 --> .55*.25=.1375 --> 13.75%
Hope this solves your issue.
Reference
I currently set the title attribute of some HTML if I want to provide more information:
<p>An <span class="more_info" title="also called an underscore">underline</span> character is used here</p>
Then in CSS:
.more_info {
border-bottom: 1px dotted;
}
Works very nice, visual indicator to move the mouse over and then a little popup with more information. But on mobile browsers, I don't get that tooltip. title attributes don't seem to have an effect. What's the proper way to give more information on a piece of text in a mobile browser? Same as above but use Javascript to listen for a click and then display a tooltip-looking dialog? Is there any native mechanism?
You can fake the title tooltip behavior with Javascript. When you click/tab on an element with a title attribute, a child element with the title text will be appended. Click again and it gets removed.
Javascript (done with jQuery):
$("span[title]").click(function () {
var $title = $(this).find(".title");
if (!$title.length) {
$(this).append('<span class="title">' + $(this).attr("title") + '</span>');
} else {
$title.remove();
}
});
CSS:
.more_info {
border-bottom: 1px dotted;
position: relative;
}
.more_info .title {
position: absolute;
top: 20px;
background: silver;
padding: 4px;
left: 0;
white-space: nowrap;
}
Demo: http://jsfiddle.net/xaAN3/
Here is a CSS only solution. (Similar to #Jamie Pate 's answer, but without the JavaScript.)
We can use the pseudo class :hover, but I'm not sure all mobile browsers apply these styles when the element is tapped. I'm using pseudo class :focus because I'm guessing it's safer. However, when using pseudo class :focus we need to add tabindex="0" to elements that don't have a focus state intrinsically.
I'm using 2 #media queries to ensure all mobile devices are targeted. The (pointer: coarse) query will target any device that the primary input method is something "coarse", like a finger. And the (hover: none) query will target any device that the primary pointing system can't hover.
This snippet is all that's needed:
#media (pointer: coarse), (hover: none) {
[title] {
position: relative;
display: inline-flex;
justify-content: center;
}
[title]:focus::after {
content: attr(title);
position: absolute;
top: 90%;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
}
}
/*Semantic Styling*/
body {
display: grid;
place-items: center;
text-align: center;
height: 100vh;
}
a {
height: 40px;
width: 200px;
background: #fa4766;
color: #fff;
text-decoration: none;
padding: 10px;
box-sizing: border-box;
border-radius: 10px;
}
/*Functional Styling*/
#media (pointer: coarse), (hover: none) {
[title] {
position: relative;
display: flex;
justify-content: center;
}
[title]:focus::after {
content: attr(title);
position: absolute;
top: 90%;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
}
}
<a title="this is the Title text" tabindex="0">Tag with Title</a>
Obviously, you'll need to open this on a mobile device to test it.
Here is a Pen with the same code.
Given that a lot of people nowadays (2015) use mobile browsers, and title still hasn't found a form of exposure in mobile browsers, maybe it's time to deprecate reliance upon title for meaningful information.
It should never be used for critical information, but it is now becoming dubious for useful information, because if that information is useful and cannot be shown to half the users, then another way of showing it to almost all users needs to be found.
For static pages, perhaps some visible text near to the relevant control, even as fine print. For server-generated pages, browser sniffing could provide that only for mobile browsers. On the client side, javascript could be used to trap the focus event, via bubbling, to show the extra text next to the currently focussed element. That would minimise the screen space taken up, but would not necessarily be of much use, since, in a lot of instances, bringing focus to a control can only be done in a way that immediately activates its action, bypassing the ability to find out about it before using it!
Over all though, it appears that the difficulties of showing the title attribute on mobile devices, may lead to its demise, mostly due to needing an alternative that is more universal. That is a pity, because mobiles could use a way to show such extra info on-demand, without taking up the limited screen space.
It seems strange that the w3c and mobile browser makers did not do anything about this issue a long time ago. At least they could have displayed the title text on top of the menu that appears when a long press on a control is made.
Personally, I wish it was placed at the top of a right-click/long-touch menu, as it won't timeout, and would be available on all browsers.
The other alternative is to construct footnotes, so an [n] type superscript is put next to the element/text needing more info, linking to explanatory text in a list at the bottom of the page. Each of those can have a similar [n] type link back to the original text/element. That way, it keeps the display uncluttered, but provides easy bidirectional swapping in a simple way. Sometimes, old print media ways, with a little hyperlink help, are best.
The title attribute has been hijacked by some browsers to provide help text for the pattern attribute, in that its text pops up if the pattern doesn't match the text in the input element. Typically, it is to provide examples of the right format.
Slightly more elaborated version of flavaflo's answer:
Uses pre-defined div as pop-up that can hold HTML, rather than reading from a title attribute
Opens/closes on rollover if mouse is used
Opens on click (touch screen) and closes on click on the open pop-up or anywhere else on the document.
HTML:
<span class="more_info">Main Text<div class="popup">Pop-up text can use <b>HTML</b><div></span>
CSS:
.more_info {
border-bottom: 1px dotted #000;
position: relative;
cursor: pointer;
}
.more_info .popup {
position: absolute;
top: 15px; /*must overlap parent element otherwise pop-up doesn't stay open when rolloing over '*/
background: #fff;
border: 1px solid #ccc;
padding: 8px;
left: 0;
max-width: 240px;
min-width: 180px;
z-index: 100;
display: none;
}
JavaScript / jQuery:
$(document).ready(function () {
//init pop-ups
$(".popup").attr("data-close", false);
//click on pop-up opener
//pop-up is expected to be a child of opener
$(".more_info").click(function () {
var $title = $(this).find(".popup");
//open if not marked for closing
if ($title.attr("data-close") === "false") {
$title.show();
}
//reset popup
$title.attr("data-close", false);
});
//mark pop-up for closing if clicked on
//close is initiated by document.mouseup,
//marker will stop opener from re-opening it
$(".popup").click(function () {
$(this).attr("data-close",true);
});
//hide all pop-ups
$(document).mouseup(function () {
$(".popup").hide();
});
//show on rollover if mouse is used
$(".more_info").mouseenter(function () {
var $title = $(this).find(".popup");
$title.show();
});
//hide on roll-out
$(".more_info").mouseleave(function () {
var $title = $(this).find(".popup");
$title.hide();
});
});
Demo here https://jsfiddle.net/bgxC/yvs1awzk/
As #cimmanon mentioned: span[title]:hover:after { content: attr(title) } gives you a rudimentary tooltip on touch screen devices. Unfortunately this has problems where the default ui behavior on touch screen devices is to select the text when any non-link/uicontrol is pressed.
To solve the selection problem you can add span[title] > * { user-select: none} span[title]:hover > * { user-select: auto }
A full solution may use some other techniques:
Add position: absolute background, border, box-shadow etc to make it look like a tooltip.
Add the class touched to body (via js) when the user uses any touch event.
Then you can do body.touched [title]:hover ... without affecting desktop users
document.body.addEventListener('touchstart', function() {
document.body.classList.add('touched');
});
[title] {
border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
border-radius:2px;
position: relative;
}
body.touched [title] > * {
user-select: none;
}
body.touched [title]:hover > * {
user-select: auto
}
body.touched [title]:hover:after {
position: absolute;
top: 100%;
right: -10%;
content: attr(title);
border: 1px solid rgba(0, 0, 0, 0.2);
background-color: white;
box-shadow: 1px 1px 3px;
padding: 0.3em;
z-index: 1;
}
<div>Some text where a portion has a <span title="here's your tooltip">tooltip</span></div>
Depending on how much information you want to give the user, a modal dialogue box might be an elegant solution.
Specifically, you could try the qTip jQuery plugin, which has a modal mode fired on $.click():
The title attribute is not supported in any mobile browsers **in a way that it would show the tooltip the same as to desktop mouse users** *(the attribute itself is ofcourse supported in the markup)*.
It's only basically for desktop users with a mouse, keyboard only users can't use it either, or screenreaders.
You can achieve almost similar with javascript as you said.
I was searching for an easy CSS only solution, and this is really the most easy one I found:
<link rel="stylesheet" href="https://unpkg.com/balloon-css/balloon.min.css">
<span aria-label="Whats up!" data-balloon-pos="up">Hover me!</span>
Working example: https://jsfiddle.net/5pcjbnwg/
If you want to customize the tooltip, you find more info here:
https://kazzkiq.github.io/balloon.css/
To avoid using JavaScript, I used this CSS-only tooltip:
http://www.menucool.com/tooltip/css-tooltip
It works great in Mobile and Desktop, and you can customize the styles.
Thanks to #flavaflo for their answer. This works in most cases but if there is more than one title to lookup in the same paragraph, and one opens over the link to another, the unopened link shows through the first. This can be solved by dynamically changing the z-index of the title that has "popped up":
$("span[title]").click(function () {
var $title = $(this).find(".title");
if (!$title.length) {
$(this).append('<span class="title">' + $(this).attr("title") + '</span>');
$(this).css('z-index', 2);
} else {
$title.remove();
$(this).css('z-index', 0);
}
});
Also, you can make both the hover over display and the click display multiline by adding
(linefeed) to the title='' attribute, and then convert that to <br /> for the html click display:
$(this).append('<span class="title">' + $(this).attr("title").replace(/\\n/g, '<br />') + '</span>');
Extremely late to the party but for future visitors, here is a tweak of #Flavaflo's answer to fade the "tooltip" in and out
JQuery:
$(".more_info").click(function () {
var $title = $(this).find(".title");
if (!$title.length) {
$(this).append('<span class="title">' + $(this).attr("title") + '</span>');
} else {
$($title).fadeOut(250, function() {
$title.remove();
});
}
});
CSS:
.more_info {
border-bottom: 1px dotted;
position: relative;
}
.more_info .title {
position: absolute;
top: 20px;
background: green;
padding: 4px;
left: 0;
color: white;
white-space: nowrap;
border-radius:3px;
animation: fadeIn linear 0.15s;
}
#keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
Fiddle here: http://jsfiddle.net/L3paxb5g/
I know this is an old question, but i have found a CSS solution that works on mobile too, it doesn't use title at all and it's easy to implement, explained here:
https://www.w3schools.com/css/css_tooltip.asp
Explanation:
On mobile, with the touchscreen,the first input acts as css hover, so it works like a toggle tooltip when you press on it.
Code example:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted #666;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 15em;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -8em;
opacity: 0;
transition: opacity 0.3s;
padding: 0.5em;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>