I've read a lot of web-sites about printing page numbers, but still I couldn't make it display for my html page when I try to print it.
So the CSS code is next:
#page {
margin: 10%;
#top-center {
font-family: sans-serif;
font-weight: bold;
font-size: 2em;
content: counter(page);
}
}
I've tried to put this page rule inside
#media all {
*CSS code*
}
And outside of it, tried to put it in #media print, but nothing helped me to display the page numbers on my page. I've tried to use FireFox and Chrome(based on WebKit as you know). I think the problem is in my html or css code. Could somebody show me an example of implementing this #page rule in the big html page with several pages? I just need the code of html page and the code of css file, that works.
P.S. I have the latest supported versions of browsers.
As #page with pagenumbers don't work in browsers for now I was looking for alternatives.
I've found an answer posted by Oliver Kohll.
I'll repost it here so everyone could find it more easily:
For this answer we are not using #page, which is a pure CSS answer, but work in FireFox 20+ versions. Here is the link of an example.
The CSS is:
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
And the HTML code is:
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
This way you can customize your page number by editing parametrs to #pageFooter. My example:
#pageFooter:after {
counter-increment: page;
content:"Page " counter(page);
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20;
-moz-border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
}
This trick worked for me fine. Hope it will help you.
Try to use https://www.pagedjs.org/. It polyfills page counter, header-/footer-functionality for all major browsers.
#page {
#bottom-left {
content: counter(page) ' of ' counter(pages);
}
}
It's so much more comfortable compared to alternatives like PrinceXML, Antennahouse, WeasyPrince, PDFReactor, etc ...
And it is totally free! No pricing or whatever. It really saved my life!
This javascript will add absolute positioned div's with pagenumbers on the right bottom corner and works in all browsers.
A4 height = 297mm = 1123px(96dpi)
<html>
<head>
<style type="text/css">
#page {
size: A4;
margin: 0;
}
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = addPageNumbers;
function addPageNumbers() {
var totalPages = Math.ceil(document.body.scrollHeight / 1123); //842px A4 pageheight for 72dpi, 1123px A4 pageheight for 96dpi,
for (var i = 1; i <= totalPages; i++) {
var pageNumberDiv = document.createElement("div");
var pageNumber = document.createTextNode("Page " + i + " of " + totalPages);
pageNumberDiv.style.position = "absolute";
pageNumberDiv.style.top = "calc((" + i + " * (297mm - 0.5px)) - 40px)"; //297mm A4 pageheight; 0,5px unknown needed necessary correction value; additional wanted 40px margin from bottom(own element height included)
pageNumberDiv.style.height = "16px";
pageNumberDiv.appendChild(pageNumber);
document.body.insertBefore(pageNumberDiv, document.getElementById("content"));
pageNumberDiv.style.left = "calc(100% - (" + pageNumberDiv.offsetWidth + "px + 20px))";
}
}
</script>
<div id="content">
Lorem ipsum....
</div>
</body>
</html>
Can you try this, you can use content: counter(page);
#page {
#bottom-left {
content: counter(page) "/" counter(pages);
}
}
Ref: http://www.w3.org/TR/CSS21/generate.html#counters
http://www.princexml.com/doc/9.0/page-numbers/
If you are looking to add page numbers when printing under Chrome/Chromium, one easy solution is to use Paged.js.
This JS library takes your HTML/CSS and cuts it into pages, ready to print as a book, that you will preview in your browser. It makes the #page and most the CSS3 specifications work for Chrome.
Solution 1 (easy) if you are OK with cutting your view into pages, ready to print
Just add their CDN in the head tag of your page :
<link href="path/to/file/interface.css" rel="stylesheet" type="text/css">
You can then add page numbers by using the automated counter page. Example :
HTML to put anywhere you want to display the current page number:
<div class="page-number"></div>
CSS to make the number appear in the div :
.page-number{
content: counter(page)
}
The library also allows to easily manage page margins, footers, headers, etc.
Solution 2 (trickier) if you want to show numbers (and page breaks) only when printing
In this case, you need to apply the Paged.js CDN only when printing the document.
One way I can think of would be to add a print me button that fires Javascript to :
add the CDN to the page
and then execute window.print(); to launch the printing prompt of the navigator
I don't know if someone still out there needs the answer, try this, it might work for you
in your html file put a div element your html like this
<div class="page-number"></div>
and do your css like this
.page-number:before {
content: "Page: " counter(page);}
hope it works for you
I know this is not a coding answer but it is what the OP wanted and what I have spent half the day trying to achieve - print from a web page with page numbers.
Print to pdf without the numbers
Run it through ilovepdf here https://www.ilovepdf.com/add_pdf_page_number which adds the page numbers
Yes, it is two steps instead of one but I haven't been able to find any CSS option despite several hours of searching. Real shame all the browsers removed the functionality that used to allow it.
This is what you want:
#page {
#bottom-right {
content: counter(page) " of " counter(pages);
}
}
I use page numbers styled in CSS to generated PDF documents, and it works:
#page {
size: A4 portrait;
margin-top: 1.2cm;
margin-bottom: 1.2cm;
margin-left: 1.2cm;
margin-right: 1.2cm;
background-image: url('../../images/logo_small.png');
background-repeat: no-repeat;
background-position: 40px 10px;
#bottom-center {
content: counter(page);
}
}
**#page {
margin-top:21% !important;
#top-left{
content: element(header);
}
#bottom-left {
content: element(footer
}
div.header {
position: running(header);
}
div.footer {
position: running(footer);
border-bottom: 2px solid black;
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
<div class="footer" style="font-size:12pt; font-family: Arial; font-family: Arial;">
<span>Page <span class="pagenumber"/> of <span class="pagecount"/></span>
</div >**
Related
I am trying to add page number during printing in the browser using CSS3 #page rule as follows
#page {
size: A4;
margin: 5%;
padding: 0 0 10%;
}
#page {
#bottom-right {
content: counter(page) " of " counter(pages);
}
}
I have known through the internet this only works for Firefox link
I have also tried this link that is only for the paragraph but my page is made with different types of the element like table, div, p etc
How to add page number during printing over any browser
Can anyone help me?
Copy css and make one file call that css in yourcss and done on header and footer option in chrome advance option give id="www" to body
<script type="text/javascript">
function PrintPanel() {
var panel = document.getElementById("www");
var printWindow = window.open();
printWindow.document.write(panel.innerHTML);
printWindow.document.write('<link href="yourecss.css" rel="stylesheet" />');
printWindow.document.write('</body></html>');
printWindow.document.close();
setTimeout(function () {
printWindow.print();
printWindow.close();
}, 1200);
return false;
}
</script>
.page{
counter-reset: page;
}
.page .page-number{
display:block;
}
.page .page-number:after{
counter-increment: page;
content:counter(page);
}
.page:after{
display: block;
content: "Number of pages: " counter(page);
}
<div class="page">
<span class="page-number">Page </span>
<span class="page-number">Page </span>
<span class="page-number">Page </span>
<span class="page-number">Page </span>
</div>
So I have this HTML code, it displays a twitter feed.. The only problem is, it flows off the page. I would like the feed to be 100% width and 600px height. I've fiddled with this for a while, and can make it work somewhat.. I think it needs to be one single code.
https://jsfiddle.net/33nw5jcd
<div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
appreplicaapp = 'twitter';
appreplicaapikey = 'aa869d1f61a088e04e6fe1a66fc07933e404f9bb';
</script>
<script src="//api.appreplica.com/js/1/arc.js"></script>
</div>
Try this:
CSS
#a {
height: 600px;
background-color: #fff;
width: 100%;
}
#a::after {
content: 'hello this is the last node';
}
HTML
<div id="a">
</div>
Note: Try keeping your script after the element with id a. It may be a issue where your script executes before your element is rendered.
First off, hello! I'm new to this website so I apologize for any errors that I make posting-wise.
I am in a web technology class where we are learning JavaScript. In a previous class we learned HTML5 and CSS. Our current assignment is to make a webpage that will either display 1 of 3 images or no images when the user enters the corresponding word in the prompt window.
I was wondering if there was a way to account for user-entered typos? For example, I have in the code "Spn" but was wondering if there was a way to easily make it so that if a user were to enter "Son" by mistake, they would still be shown the image.
Is there a way to do this without having to add a separate if statement?
Below is the code I have so far, which includes my little "test" to see if I could do this. I thought it had worked when I only had two items (ex: "Spn, "spn"), but when I added a third it stopped working, and now it isn't working again. I may have very well been mistaken that there was ever a success, though.
Oh, also, we are only allowed to use JavaScript, HTML, and CSS. So if you have a solution that is jquery (I have no idea what that is), then thank-you, but I'm afraid I can't use it.
Please let me know if there is any other information that you need and I will gladly supply it to you. Thank-you very much for your help, I very much appreciate it!
-Carly
JavaScript Code (file name is switch.js):
var temp = "None";
function choose()
{
temp = prompt("Spn, DW, SH, or None?");
if (temp == "Spn","spn")
{
document.getElementById("picture").src="first.jpg";
document.getElementById("sub").innerHTML="Supernatural";
document.getElementById("picture").style.visibility="visible";
};
if (temp == "DW","dw","Dw")
{
document.getElementById("picture").src="second.jpg";
document.getElementById("sub").innerHTML="Doctor Who";
document.getElementById("picture").style.visibility="visible";
};
if (temp == "SH","sh","Sh")
{
document.getElementById("picture").src="third.jpg";
document.getElementById("sub").innerHTML="Sherlock";
document.getElementById("picture").style.visibility="visible";
};
if (temp == "None","none")
{
document.getElementById("picture").src="blank.jpg";
document.getElementById("sub").innerHTML="Click button to reveal image";
document.getElementById("picture").style.visibility="hidden";
};
}
HTML Code (file name is userchoice.html):
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="switch.js"></script>
<title>What is this not working I'm going to cry</title>
</head>
<body>
<h1>SuperWhoLock</h1>
<h2 id="sub">Click button to reveal image</h2>
<div id="picblock">
<img src="blank.jpg" id="picture">
</div>
<div id="buttons">
<button onclick="choose()">Choose Picture</button>
</div>
</body>
</html>
CSS code (the file name is style.css):
body
{ background-image:url('background.jpg');
}
h1
{ width: 25%;
text-align: center;
margin-left: auto;
margin-right: auto;
background: black;
color: white;
}
h2
{ width: 25%;
text-align: center;
margin-left: auto;
margin-right: auto;
background: white;
color: black;
}
#picblock
{ width: 25%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#picture
{visibility:hidden;
}
#buttons
{ text-align: center;
margin-left: auto;
margin-right: auto;
}
Barring the foray into putting intelligence in the code, I will give a rather simplistic approach, detailed below:
Since you are the one who is deciding that "Son" should pull up the image ideally meant for "Spn", we should use a mapping that is created by you yourself. We can have something like this:
`
var spn = "Spn", dw ="DW",sh="SH";
//creating a custom mapping
var dict = {
"Son":spn,
"Sln":spn,
"Spn":spn,
"DW":dw,
"DE":dw,
"SH":sh
}
//Your if would look like:
temp = (dict && dict[temp])?dict[temp]:null;
if (temp && temp.toLower() == "spn")
`
2. For creating that dictionary, you will just have to consider the characters around the letter that you are typing.
Note: This approach assumes you have only these three things to compare. If you want a more generic solution that should work beyond Spn,DW,SH, None, please let me know.
Just an amateur/hobbyist here - what this is supposed to do is be a tool for a board game I play with friends. The plastic sliders the game uses are too loose to be reliable so I wanted to reproduce that functionality as a webpage to use on a smartphone while playing.
It gets a character's name from a form (on another page) and supplies it to
the one below. Based on the name, it chooses the right set of attributes from the switch statement (I removed all but two cases for the sake of simplicity), runs through a for loop to display the attributes in a list and highlight the "current" value as green. Two buttons are supposed to increase or decrease the array counter ("speed"), and rerun the function that draws the array with the new highlighted value. innerHTML is meant to redraw the div ("speeddiv") with the new results.
Now the javascript console in chrome is telling me that speedcounter() and character are undefined. I suspect this has something to do with the scope of the function and variables I'm using being lost through innerhtml. All I want to do is find a way to easily redraw/replace the stat counter so it appears that the highlighted number is moving up and down as you press the + or - buttons, within the div.
I'm only working on the "speed" attribute below, so I can get that working first.
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
html, body { height: 100%; width: 100%; margin: 0; }
#dossier {height: 10%; text-align: center; background: #808080}
#container {height: 90%; width: 100%; background: #000000; overflow: hidden; float: left}
#stats {height: 100%; width: 100%; float: left; position: relative}
#speeddiv, #mightdiv, #sanitydiv, #knowledgediv {width: 25%; height: 100%; text-align: center; float: left; position: relative; overflow: hidden}
#speeddiv {background: #0000FF}
#mightdiv {background: #FF0000}
#sanitydiv {background: #FFFF00}
#knowledgediv {background: #00FF00}
</style>
<?php $character = $_GET["character"]; ?>
<script type="text/javascript">
var character = "<?php echo $character ?>";
var sp;
var speed;
function speedcounter() {
var spx;
document.write(' <h2>Speed</h2></br>');
document.write('<input type="button" onclick="addspeed();" value="+"><br />');
for (spx=8; spx>=0; spx--) {
if (spx == speed) {
document.write('<font color=#00FF00>');
}
document.write(sp[spx]);
document.write('<font color=#000000><br />');
}
document.write ('<input type="button" onclick="remspeed();" value="-">');
}
function addspeed() {
if (speed < 8) {
speed++;
document.getElementById("speeddiv").innerHTML = "<script type="text/javascript">speedcounter();<\/script>";
}
}
function remspeed() {
if (speed > 0) {
speed--;
document.getElementById("speeddiv").innerHTML = "<script type="text/javascript">speedcounter();<\/script>";
}
}
switch (character) {
case "brandon":
sp=["0","3","4","4","4","5","6","7","8"];
mt=["0","2","3","3","4","5","6","6","7"];
sn=["0","3","3","3","4","5","6","7","8"];
kn=["0","1","3","3","5","5","6","6","7"];
speed=3;
might=4;
sanity=4;
knowledge=3;
break;
case "flash":
sp=["0","4","4","4","5","6","7","7","8"];
mt=["0","2","3","3","4","5","6","6","7"];
sn=["0","1","2","3","4","5","5","5","7"];
kn=["0","2","3","3","4","5","5","5","7"];
speed=5;
might=3;
sanity=3;
knowledge=3;
break;
}
</script>
<div id="dossier">
<script type="text/javascript">
document.write(character);
</script>
</div>
<div id="container">
<div id="stats">
<div id="speeddiv">
<script type="text/javascript">
speedcounter();
</script>
</div>
<div id="mightdiv">
<h2>Might</h2></br></br>
</div>
<div id="sanitydiv">
<h2>Sanity</h2></br></br>
</div>
<div id="knowledgediv">
<h2>Knowledge</h2></br></br>
</div>
</div>
</div>
</script>
</body>
</html>
I've created a jsfiddle from the code you've posted http://jsfiddle.net/amelvin/bwwce/ - working on it interactively in there may help.
I think your problem is what is happening with the document.write; the section on document.write explains that what document.write does is not very predictable.
Use a javascript library like jquery to insert elements into the webpage rather than document.write - the html() method in jquery (amongst others) allows you dynamically and predictably manipulate any aspect of the page based on events like button pushes, adding or removing buttons or divs.
I'm working on modifying a website which has a chart of FAQs which have has a question link.
If question link is clicked, it reveals the answer in a drop down.
My goal is to swap out a plus icon image with a minus icon next to the linked text for the drop down reveal action.
the FAQs use Spry Collapsible Panel (sprycollapsiblepanel.js) to manage the show/hiding from the link. before I go about modifying the code in the javascript source code, I was wondering if there was an easier way of doing this through dreamweaver someone might be aware of.
thanks in advance.
UPDATE:
the html calling the show/reveal actions are:
<div class="CollapsiblePanel">
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="1">Fax to E-Mail</div>
<div class="CollapsiblePanelContent">Here is the text content as it relates to Fax to E-Mail</div>
</div>
</div>
The construct the actions for the drop down, Spry requires the following at the bottom of the page:
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
</script>
In SpryCollapsiblePanel.css, amend the following style rules:
.CollapsiblePanelTab {
font: bold 0.7em sans-serif;
background-color: #DDD;
border-bottom: solid 1px #CCC;
margin: 0px;
padding: 2px 2px 2px 25px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
}
This increases the padding on the left to make room for the image.
Then add the images to the following rules:
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #EEE;
background-image: url(images/plus.gif);
background-position:left top;
background-repeat: no-repeat;
}
.CollapsiblePanelClosed .CollapsiblePanelTab {
background-image: url(images/minus.jpg);
background-position:left top;
background-repeat: no-repeat;
/* background-color: #EFEFEF */
}
THe plug ins adds a class to each panel title when is opened and when is closed, these are "CollapsiblePanelOpen" and "CollapsiblePanelClosed" accordingly. With that you can use CSS to add the +- effect with a background image perhaps.
onclick switch an image then onclick of something else switch back to + sign
If it's an image, and you don't want to change the source code, and you want to use javascript, you'll need to change the src property of the image.
// Grab the img object from the DOM
var img = document.getElementById("theImageId");
// If it's the plus pic, switch for minus, and vice versa.
if(img.src == "plus.png") {
img.src = "minus.png";
}
else {
img.src = "plus.png";
}
You can put this code in wherever you need (in an onclick or a function or whatever). Also, the URLs for the images will obviously need to be updated.
Easy fix with some simple JavaScript.
Add the following script:
<script type="text/javascript">
<!--
function name ()
{
var img = document.getElementById("imgid");
if (img.src == "plus.png") {
img.src = "minus.png";
}
else {
img.src = "plus.png";
}
}
//-->
</script>
When that's done look at the div defining the collapsible panel. It looks something like this:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Name <img src="url.com/minus.png" id="imgid"></div>
<div class="CollapsiblePanelContent">content</div>
All you need for this to work is to add onclick="name();" to the syntax:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="name();">Name <img src="url.com/minus.png" id="imgid"></div>
<div class="CollapsiblePanelContent">content</div>