Css print - page break on content - javascript

I have a web page which prints its content on a pre-printed receipt template. The problem I am facing is that the template has three sections on each page.
Header section with bill no, customer name etc..
Content section which is populated in tabular row format. This section is dynamic and cannot predict the number of rows and height.
Footer section contains sum of amount etc..
I would like to keep the header only in first page, footer only in the bottom part of last page. The dynamic middle part should break and distribute in multiple pages depends on the content. Header and footer part of intermediate pages should remain empty on its respective space.
Could anyone please help me to make this structure with html5 and css3.

Hello there this is my solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
// does not show the div other than print
#media all {
.page-break { display: none; }
}
//make it break the page
#media print {
.page-break { display: block; page-break-before: always; }
#content{
color:blue;
}
}
</style>
<header>
<h1>HEADER</h1>
</header>
<div class="page-break"></div>
<section id="content">
<h1>CONTENT</h1>
</section>
<div class="page-break"></div>
<footer>
<h1>FOTTER</h1>
</footer>
</body>
</html>
Hope it helps, for more info here is a link

Related

Show html as a new tab for print

In my app when the user clicks on a certain button, i will call an API and the API returns an HTML as a response, this HTML is a page (with and image and a few text) and i want to show this HTML in a new tab to my user and i also want to offer the user to print this page, how can i achieve this?
I tried windows.open but i'm not sure how i can use the response's HTML as the source for this page.
Is it even possible to do something like this in ReactJS ?
The best solution I can think about is creating an hidden container under your body element and placing your HTML into it. Then use the #media print magic to hide the page's content and display the printing element only.
For example:
<html>
<head>
<title>This is my amazing title</title>
<style>
#print-section {
display: none;
}
#media print {
body > * {
display: none;
}
#print-section {
display: block;
}
}
</style>
</head>
<body>
<h1>A lot of content</h1>
<p>A lot of text will be displayed here</p>
<div id="print-section">
<!-- HTML code will be rendered into this section -->
</div>
</body>
</html>

Hide elements until page is fully loaded

I want a vanilla JS code that hides all page elements (except the loading spinner) untill page is fully loaded, and then deletes or hides the loading spinner element. My code does a good job at hiding the spinner once the page is loaded, but I couldn't accomplish the other part. It looks like this:
function hideloader() {
document.getElementById("loading").style.display="none";
}
<html>
<head>
<title>My Title</title>
<link href="main.css" rel="stylesheet" type="text/css"/>
<script src="script.js"></script>
</head>
<body onload="hideloader()">
<div id="loading">
<!--All loading spinner design goes here-->
Loading...
</div>
<header>
<!--Header stuff-->
<h1>My Title</h1>
</header>
<p>
<!--Main content-->
My content
</p>
<footer>
<!--footer stuff-->
Footer stuff
</footer>
</body>
</html>
Thank you in advance!
In general, it's better not to do this, but instead to design the page so that progressive loading provides some content to the user while waiting for the rest of the page.
But doing it is quite easy: Just put your main content in an element (say, a div) that has a class on it (say, hidden), and remove that class when you want to show it:
CSS:
.hidden {
display: none;
}
JavaScript when you're ready to show it:
document.getElementById("content").classList.remove("hidden");
(classList is supported by all modern browsers; if you need to support old browsers, it can be polyfilled or, to remove all classes, just do .className = "".)
Another approach is to add a class to body when it's loaded, and then classes on the various elements you want to show/hide during load, with CSS like this:
body:not(loaded) .hide-for-load {
display: none;
}
body.loaded .hide-after-load {
display: none;
}
Then .hide-for-load elements are hidden until you add the class, and .hide-after-load elements are hidden when you add the clas.
Live Example derived from your page:
setTimeout(function() {
document.body.classList.add("loaded");
}, 1000);
body:not(.loaded) .hide-for-load {
display: none;
}
body.loaded .hide-after-load {
display: none;
}
<div id="loading" class="hide-after-load">
Loading<!--All loading spinner design goes here-->
</div>
<header class="hide-for-load">
<!--Header stuff-->
<h1>My Title</h1>
</header>
<p class="hide-for-load">
<!--Main content-->
My content
</p>
<footer class="hide-for-load">
<!--footer stuff-->
Footer stuff
</footer>

Automatically fill div from file

I am very new to html but need to throw together something for work as a POC, so apologies if I am asking a question that have been answered before, the truth is I wouldn't even know how to go about looking for the question because I am not sure how to ask it myself
I have included a description of what the code is doing at the moment and what I am trying to get it to do. I have also included the code itself which I have stripped it down to it's most simple form and embedded it as a snippet so that you can see how it behaves in it's current state.
CURRENT STATE
click on a topic
div opens up and hard coded, default information gets displayed
click on the topic name again/on the hide link/on any other topic, do any of these three things and the div closes again. If I click on any of the topics again, the same information get's displayed as before (regardless of what topic was selected)
WHAT I WOULD LIKE IT TO DO
click on a topic
takes the topic id and then reads data in from a text file relating to that specific topic (each topic has it's own file, it will read the entire file)
opens up the div as before except now it populates with the data that it just read in
if I hit the same topic again I want the div to close
if I hit close, obviously I want the div to close
if I hit another topic, instead of closing the div, I want it to just read in the info for that topic from it's own specific file and repopulate the div with the new data
<!doctype html>
<html lang="en">
<head>
<title>HTML5 Skeleton</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {
font-family: Verdana, sans-serif;
font-size:0.8em;
}
header,nav,section,article,footer {
border:1px solid grey;
margin:5px;
padding:8px;}
nav ul {
margin:0;
padding:0;
}
nav ul li {
display:inline;
margin:5px;
}
.slidingDiv {
height:300px;
padding:20px;
margin-top:10px;
}
.show_hide {
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
</head>
<body>
<header>
<h1 position="centre">Blah</h1>
</header>
<nav>
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
</ul>
</nav>
<section class="slidingDiv">
<h1>Main heading</h1>
<article>
<h2>Sub heading</h2>
<p>Blahblahblahblahblah</p>
</article>
hide</div>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
Sounds like using a database instead of a text file might be more along the lines of what you would need. If you made a database that hosted the title, content, links, etc. related to each topic, you could fill each of the <article> tags from the database rows with a little bit of php.

Can I not use embedded <style> CSS on Android?

I'm debugging a site on an Android HTC Sense. The site uses a lot of inserted content, which comes along with it's own CSS and JS like:
// wrapper id = snippet_id
<html>
<head>
<style type="text/css">
#snippet_id div {border: 1px solid red !important;}
div {border: 1px solid blue !important;}
</style>
</head>
<body>
<div>Hello World</div>
</body>
<html>
This is inserted into an existing page, so it sort these snippets are sort of like iFrames I guess.
Question:
Problem is, that while Javascript works fine, all CSS I'm specifying using <style> tags is being ignored. Any idea why?
EDIT:
Works on:
- Android 4.0.1
Does not work on:
- Android 2.3.1
- IOS 4.1
If I add the CSS to the main.css file being requested when the page loads, all is ok. If it's inside my gadget, it's not working.
EDIT:
So from what I can see, <style> does not seem to work on classes and id. If I use regular HTML elements as selectors it works.
EDIT:
My dev-site is here. I'm using a plugin called renderJs, which encapsultes HTML snippets (along with their CSS and JS) into resuable gadgets. Gadgets content will be appended to the page body, so although a gadget can act as a standalone HTML page, it can also be part of a page.
Example code from my page (I stripped out all gadgets but one below):
index.html - include index_wrapper gadget
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Organization" lang="en" class="render">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/overrides.css">
<script data-main="../js/main.js" type="text/javascript" src="../js/libs/require/require.js"></script>
<title></title>
</head>
<body class="splash">
<div data-role="page" id="index">
<div id="index_wrapper" data-gadget="../gadgets/index_wrapper.html"></div>
</div>
</body>
</html>
The page has a gadget called index_wrapper link - code below:
<!DOCTYPE html>
<head></head>
<body>
<div id="index_social" data-gadget="../gadgets/social.html"></div>
<p class="mini t" data-i18n="gen.disclaimer"></p>
</body>
</html>
Which has another gadget called social here. This gadget includes some CSS, but on the devices in question, it is ignored (just saw, I'm missing a </div> in the index_wrapper, so trying to see if that fixed the problem, too).
The code below includes my fix:
<!DOCTYPE html>
<head>
<style type="text/css" scoped>
// will be ignroed
.el {width: 1px;}
.menu_social {text-align: center; margin: 1em 0;}
.action_menu {display: inline-block;}
.follow_us {display: inline-block; margin: 0; padding: 0 .5em 0 0;}
...
</head>
<body>
<div class="menu_social">
<div>
<span class="el ui-hidden-accessible"></span><!-- fallback for CSS not working -->
<div data-role="controlgroup" data-type="horizontal" data-theme="c" class="action_menu">
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
(function () {
$(document).ready(function() {
var gadget = RenderJs.getSelfGadget();
// fallback for old devices which cannot load <style> css
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/social.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
// trigger enhancement
$(this).trigger("render_enhance", {gadget: gadget.dom});
});
})();
//]]>
</script>
</body>
</html>
So aside from probably missing a closing </div> I'm still wondering why my embedded CSS is not working.
Looking at the generated HTML code (i.e., code as modified by JavaScript) of the demo page suggests that style elements are generated inside body. Although such elements are allowed by HTML5 drafts when the scoped attribute is present, support to that attribute seems to be nonexistent, and the style sheet is applied globally. It is possible however that some browsers do not apply it at all, at least when the style element is dynamically generated.
A better approach is to make all style sheets global to the document, preferably as external style sheets, and use contextual selectors to limit the rules to some elements only. And possibly using JavaScript to change classes of elements, rather than manipulating style sheets directly.
Ok. Ugly workaround:
In the inline section, set this:
<style>
.el {width: 1px;}
</style>
In the page, set hide an element el like this:
// ui-hidden-accessible is a JQM class, moving the item out of view
// since it uses pos:absolute, is needed to not break
// selects on the page (compare to JQM ui-icon)
<span class="el ui-hidden-accessible"> </span>
Then check for the width when running inline Javascript (which works) and require the inline CSS as a separate file, when the width is not at 1px
// fallback for old devices which cannot load <style> css
// gadget is my iframe-look-a-like
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/translate.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
Ugly and an extra HTTP request, but at least the CSS is working then.

How to implement Bing Travel like UI in Metro style app

I'm looking for a way to make a layout similar to the Bing Travel app that comes standard with Windows 8. I'm developing the app using Javscript/CSS in Visual Studio 2012.
Here is a simple mock up:
The part that puzzles me is the first item that's being showed. Somehow, the first item is shown using the maximum vertical space, while all the next items are aligned in a gridlayout ListView..
I already have the gridlayout with the groupheader shown on the right. Is there a best practice for adding the first item? Should I add another parent css-grid with 2 columns (the 1stt with fixed and 2nd auto width) or can I somehow manipulate the listview to keep the layout simple?
Ok I solved it, this is based on the VS 2012 GridLayout template. I did two things.
1) Created a (parent) grid layout with 2 columns with the correct
overflow properties.
2) Disabled the overflow properties generated by the WinJS.UI.ListView control.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>groupedItemsPage</title>
<!-- WinJS references -->
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/groupedItems/groupedItems.css" rel="stylesheet" />
<script src="/js/data.js"></script>
<script src="/pages/groupedItems/groupedItems.js"></script>
<style type="text/css">
#scrollContainer
{
height:100%;
display:-ms-grid;
-ms-grid-columns: 480px max-content;
-ms-grid-rows: 1fr;
overflow-x:scroll;
overflow-y:hidden;
-ms-overflow-style:scrollbar;
}
#col1
{
-ms-grid-column:1;
}
#col2
{
-ms-grid-column:2;
-ms-overflow-style:none;
}
</style>
</head>
<body>
<!-- templates -->
<!-- The content that will be loaded and displayed. -->
<div id="scrollContainer">
<div id="col1">
col1
</div>
<div id="col2" class="fragment groupeditemspage ">
<!-- the code from the GridLayout example goes here -->
</div>
</div>
</body>
</html>
If it were me, I would go with adding a column to the element containing the first item and the ListView. You could try and come up with a way to manipulate the ListView, but since you are group data it would be a pain, IMHO. No reason to make things harder than they need to be.

Categories

Resources