CODEWITHSUNDEEP
javascripthtmlcss
Ly Double II
Ly Double II

Reputation: 129

Javascript window print footer only print page number

in javascript window.print function, how to remove the url in the page footer but still contains the page number? this is my result page.enter image description here I want the url to be gone but page number remain as the same, is it anyway i can achieve that? seems this code does not work. 

<style type="text/css" media="print">
@page {
    size: landscape; margin:0 0 10mm 0 ;float: none !important;
}

a {
   display: none;
}

Upvotes: 1

Views: 11885

Answers (1)

Ashiqur Rahman
Ashiqur Rahman

Reputation: 424

Easily you can achieve this by using CSS. For this answer, we are not using @page, which is a pure CSS answer, but work in FireFox 20+ versions. Here is the link to 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 parameters to #pageFooter.

My example:

#pageFooter:after {
    counter-increment: page;
    content:"Page " counter(page);
    left: 0; 
    top: 100%;
    white-space: nowrap; 
    z-index: 20px;
    -moz-border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  }

Hope this trick will help you.

For Total Page

You can use this

@page {
   @bottom-right {
    content: counter(page) " of " counter(pages);
   }
}

Upvotes: 1

Related Questions