I'm working on a page with inputs on it that will be printed frequently. When printed, the page requires quite a different layout, with different labels and information presented. To make this simpler, I've got separate CSS for Print and Screen, and labels that correspond to the data from the foreground.
Here's a simplified version of what I'm working with:
<style>
#media screen {
#testback {display: none;}
#txtName
{
padding: 10px;
margin: 10px 20px;
border-radius: 8px;
border: 2px solid #888;
}
}
#media print {
#testfore {display: none;}
#lblName {
position: absolute;
top: 5%;
right: 25%;
}
}
</style>
<div id="testfore">
<input id="txtName" type="text" placeholder="Name..." />
</div>
<div id="testback">
<label id="lblName"></label>
</div>
JSFiddle: http://jsfiddle.net/h1vu13p1/1/
I'm hoping to go for a minimalistic approach, where the stuff in the background is only updated when the user decides to print the page, i.e. when the Print Preview or the Print Dialog is brought up. Are there any JQuery triggers that connect to either of those events?
There are about fifteen inputs on the page. If I can't update them when checking the print stuff, and instead have to do it on change/keyup, is there a way to avoid writing a separate function for each input? I was considering using classes, but then I wouldn't know how to get the info to the right labels on the hidden div.
Can you try this?
window.onbeforeprint = function() {
$('#lblName').text($('#txtName').val());
};
http://jsfiddle.net/7LL2hwwk/
if you want to solve this with js here you can take a look this:
$('input[id^="txt"]').on('change',function(){
var name = $(this).attr('id');
$('#lbl'+name.replace('txt', '')).text($(this).val());
});
http://jsfiddle.net/d5b39w8c/
Related
I have a demo angular project which has basic text and table inside as below.There is print button which is calling window.print() to make the page printed with applied styling.
printPage() {
window.print();
}
css:
#media print {
#page {
size: landscape;
margin: 0;
}
}
My demo project link:
https://stackblitz.com/edit/angular-qxlcna?file=src/print/print.component.ts
My aim is being able to print this table landscaped exactly how it seems on the web page without any crops.^
After print button clicked preview on chrome's print dialog looks great as below
Unfortunately after print, result is not as expected.As you can see there are crops from left and right sides of the paper.Although my other attempts to set margin:0 padding:0 stylings didn't work.How can I print exactly as same as what I'm seeing on HTML page?
I tried also this kind of styling
#media print {
* {
margin: 0 !important;
padding: 0 !important;
}
html,
body {
height: 100%;
overflow: visible;
}
}
I've checked your example and it's a problem related with the printer. Some printers have a "non-printable margin" by default so there is no way to print on the edges.
The user could be change manually if there are some options for scaling the document but it would be a bad solution.
My solution would be adding some margins in the CSS for the print media. For example, in this case, I 've added a left and right margin and everything it's printed correctly.
.designed__table {
width: 100%;
td,
th {
padding: 5px;
border: 1px solid;
}
}
#media print {
#page {
size: landscape;
margin: 0px 10px;
}
}
.print-container {
position: absolute;
}
I have a page that has to do quite a bit of work (5-6 seconds) of loading data from all over the place on the initial connection. It is slow because of the api endpoints I am calling, I have no control over it.
Is there a way to get a loading div to show before it starts doing all of its data collection?
The below doesnt do anything. I believe its because the page already starts gathering data before it gets to the jquery. I could be wrong. myjs.js is the file name and it is the first thing loaded on my page.
$('body').on('load', function(){
$body.addClass("loading");
});
and does the same thing
$(document).ready(function() {
$body.addClass("loading");
});
In layman's terms:
User goes to https://somewebsite.com
Jquery loading div shows
other functions run to gather data
jquery loading div is removed.
This is in the laravel framework if that affects anything.
There is actually a pretty simple way to do this. I recently experienced something similar.
I did something like this:
window.addEventListener('load', (event) => {
setTimeout(() => {
$('.jumping-dots-loader').slideUp(650);
}, 1000);
});
.jumping-dots-loader {
width: 100vw !important;
height: 100vh !important;
background-color: white;
z-index: 99999999999999999999999;
display: block;
border: none;
border-radius: 0;
margin: 0;
position: fixed;
padding: 20% 35%;
text-align: center;
}
.jumping-dots-loader span {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: rgba(147, 194, 61, 1);
margin: 35px 0.85rem;
}
/* Add in animation */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="jumping-dots-loader">
<span></span>
<span></span>
<span></span>
</div>
<h1>
Howsit going?
</h1>
If you go through Mozilla's docs about the document.readystatechange event, you will see how the browser handles the loading order and can use this to your advantage. In my example, I add a container div which will cover the user's viewport. Then style some dots (add your own animation to them) which will be displayed while the document is loading. When the load state is reached, the placeholder div will be hidden and the loaded page is displayed.
Okay, so, I'm using JQuery to show/hide a 'Processing' div element on my page. Below is the basic code:
function ShowLoading(){
$(divLoadingPanel).show();
}
function HideLoading(){
$(divLoadingPanel).hide();
}
Inside of my various Javascript functions I call ShowLoading() and HideLoading() as necessary. When viewing the page in FireFox, everything works correctly. When viewing it in Chrome, the loading panel is never seen. HOWEVER, if I debug and break at the line after the panel should be
displayed, it's there. It will display fine when walking the code manually, but not if I don't use a breakpoint and the debugger. That's got me baffled. Here's the code for the div itself:
<div id="divLoadingPanel" class="Loading_Panel" style="display: none">
<br>
<img src="./images/8.gif">
<br><br>
<font class="Loading_Text">Processing...</font>
</div>
And, finally, here's the class info for the panel:
.Loading_Panel {
position:fixed;
top: 50%;
left: 50%;
width:300px;
height:150px;
margin-top: -75px;
margin-left: -150px;
background: #E9F2FA;
border-radius: 10px;
border: 1px solid #1C4E7C;
}
Any help would be appreciated.
Change your code to:
function ShowLoading(){
$("#divLoadingPanel").show();
}
function HideLoading(){
$("#divLoadingPanel").hide();
}
I am designing a summary container for the author page in a book publishing website. Some authors have more summary content while others have less content. I want to enable/ disable show more/less button dynamically when the height of the div container crosses a cutoff height(180px). So, it turns out to control the height of the div container dynamically (180px and original height). I need a piece of code which works perfectly in all browsers.
I have got a code implemented here:
http://jsfiddle.net/rraagghhu/9dgs6432/3/
HTML :
<div class = "container">
<div class="info-wrapper">
<div class="info">
Chetan Bhagat is the author of six blockbuster books.These include five novels—Five Point Someone (2004), One Night # the Call Center (2005), The 3 Mistakes of My Life (2008), 2 States (2009),
Revolution 2020 (2011), the non-fiction title What Young India Wants (2012) and Half Girlfriend (2014). Chetan’s books have remained bestsellers since their release.
Four out his five novels have been already adapted into successful Bollywood films and the others are in process of being adapted as well. The New York Times called him the ‘the biggest selling English language novelist in India’s history’. Time magazine named him amongst the ‘100 most influential people in the world’ and Fast Company, USA, listed him as one of the world’s ‘100 most creative people in business’. Chetan writes columns for leading English and Hindi newspapers, focusing on youth and national development issues. He is also a motivational speaker and screenplay writer. Chetan quit his international investment banking career in 2009 to devote his entire time to writing and make change happen in the country. He lives in Mumbai with his wife, Anusha, an ex-classmate from IIM-A, and his twin boys, Shyam and Ishaan. You can email him at info#chetanbhagat.com or fill in the Guestbook with your feedback. You can also follow him on twitter (#chetan_bhagat) or like his Facebook fanpage (https://www.facebook.com/chetanbhagat.fanpage).
</div>
(more)
(less)
</div>
<div class = "footer"> THIS IS FOOTER </div>
</div>
CSS:
.container{
background-color: yellow;
}
.footer{
background-color: yellow;
}
.info-wrapper {
height: auto;
position: relative;
width: auto;
padding: 0 0 2.5em 0;
background-color: red;
}
.info {
max-height: 180px;
height: auto;
width: auto;
overflow: hidden;
position: relative;
text-align: justify;
}
.info:after, .aftershadow {
bottom: 0;
width: auto;
height: auto;
}
.info-wrapper a {
left: 50%;
position: relative;
font: 700 .67em/1.25em Arial;
text-align: center;
text-decoration: underline;
cursor: pointer;
}
.less { height: auto; display: none; }
.more { display: none; }
Jquery:
if($(".info")[0].scrollHeight > $(".info").height()) {
$("a.more").show();
}
$("a.more").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "visible"});
$("a.less").show();
$("a.more").hide();
return false;
});
$("a.less").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "hidden"});
$("a.more").show();
$("a.less").hide();
return false;
});
As you can see, the footer stays at the absolute position. If the more button is clicked, the (less) should come down, below that should come the footer. Is it possible to enable/disable the show more/less button dynamically when the browser is shrunk/expanded?
Set the max-height to 100% for show more and set the max-height to 180px when show less.
Updated JSFiddle
You don't need the overflow to ever be shown, instead just increase the max-height to 100%.
$("a.more").click(function(e){
e.preventDefault();
$(".info").css({"max-height": "100%"});
$("a.less").show();
$("a.more").hide();
return false;
});
I also added in some padding so you can see the text a bit easier.
Updated fiddle
This is really another question, but using innerHeight instead of height you can detect if the text is overflowing with the padding on window resize:
$(window).resize(function(){
if($(".info")[0].scrollHeight > $(".info").innerHeight()) {
$("a.more").show();
}
});
I also positioned the less/more button absolutely at the bottom of the info box to overlay any text that might extend into the padding:
.info-wrapper a {
left: 0; bottom: 0;
width: 100%;
background: red;
position: absolute;
font: 700 .67em/1.25em Arial;
text-align: center;
text-decoration: underline;
cursor: pointer;
line-height: 20px;
}
Full code is in this fiddle
You are not removing the max-height from the CSS and that is what is causing the issue. You can do two things here:
Either you can set the max-height to 100%
or, you can set the max-height in another css class and add and remove that class to the info div dynamically
Create a css style:
.restrict{
max-height: 180px;
}
On click of more:
$(".info").removeClass('restrict');
On click of less:
$(".info").addClass('restrict');
See my forked fiddle with the changes:
https://jsfiddle.net/jdnf5vka/4/
Yes you can enable and disable the buttons as the browser is resized.
You'll need to build your javascript like this:
// make your function re-usable
var buttonChecker = function() {
// show / hide buttons logic here
}
// bind the function to the resize event (note, no parenthesis for calling the function here, it's just a reference passed in that is then called when the resize event is triggered)
$(window).on('resize', buttonChecker);
// call your function on page load so the buttons are correctly shown then (note, parenthesis are used, function is called
buttonChecker();
This way when the browser is resized the show / hide button functionality will be re-called.
PS - here is the OPs example fixed: http://jsfiddle.net/9dgs6432/20/ - note the contents of the buttonChecker() function and the logic to hide as well as show.
I have an HTML page and unfortunatly I don't know much about it. In my HTML page there is a simple button that redirect to another website. What I would like to do is to show a popup that advise the user that he is moving to another site. If he accepts so he is redirected, if not then he stays in page.
I've made a graphic for all the process described before and it is a simple gif animated. what I wanna do is this:
The user click on the button
the gif animated pop up (and all the background is unclickable with a dark color if it's possible to do)
after 2 seconds the alert pop up next to the gif.
I've an example of what I wanna do. http://imgur.com/8dAf3Xp
Try this sample i created in js fiddle
fiddle
I use 2 overlapping divs to achieved this, wait 2 seconds and the pop-out will automatically show.
Hope this helps :)
HTML
<div id = "pop-out">
<div id = "message">
Message goes here
<button class = "ok"> Ok </button>
</div>
</div>
<div id = "container">
Content goes here
<button>You can't click me</button>
</div>
CSS
div#pop-out {
position: absolute;
top: 0;
left: 0;
background-color: rgba(255,255,255,.2);
width: 100%;
height: 100%;
z-index: 1;
display: none;
}
div#message {
width: 50%;
height: 100px;
margin: 0 auto;
border: 1px solid red;
text-align: center;
line-height: 100px;
}
jQuery
$(document).ready(function(){
setTimeout(function(){
$("#pop-out").show();
},2000);
$("button.ok").click(function(){
$("#pop-out").hide();
});
});