-2

im tryng to print my page with below code, but actually navigation bar is included in the file to print i just want to know hot to print page without header or navigation bar.

<script language="JavaScript" type="text/javascript">
            //<![CDATA[
            if (window.print) {
                document
                        .write('<form> '
                                + '<input type=button name=print class="btn btn-info" value="Print" '
                                + 'onClick="javascript:window.print()"> <\/form>');
            }
            // End -->
            //]]>
        </script>
Edwin Bossman
  • 91
  • 2
  • 10
  • 2
    Not hard to research how to set up print css. The button shown has nothing to do with any navigation bar. Take some time to read [ask] and [mcve] – charlietfl Nov 04 '17 at 19:03
  • searching @media print will get you started – andrew Nov 04 '17 at 19:04
  • i think you are not getting my point – Edwin Bossman Nov 04 '17 at 19:04
  • Perhaps not but your question is completely lacking in sufficient details and honestly shows signs of no research effort – charlietfl Nov 04 '17 at 19:05
  • [How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) – charlietfl Nov 04 '17 at 19:08
  • I've already research for the same, also i checked related post but still not working for me thats why i asked... if you feel my question is not adequate, please leave my post. – Edwin Bossman Nov 04 '17 at 19:12
  • What have you tried and why did those solutions not work for you? – agrm Nov 04 '17 at 19:13
  • i've tried changing CSS https://stackoverflow.com/questions/8228088/remove-header-and-footer-from-window-print, also tried with javascript hidden elements but in regular basics elements are hidden, also trying with another ways to print page with jquery – Edwin Bossman Nov 04 '17 at 19:16
  • What about something like `@media print { .navigation { display: none; } }`? – agrm Nov 04 '17 at 19:19
  • already used: @media print { .nav { display: none; } } but still not working – Edwin Bossman Nov 04 '17 at 19:24
  • In what way does it not work? If it's not hidden there's either a problem including your CSS or you are using the wrong selector. If the problem is the rest of the page getting messed up when the nav is removed, you might want `opacity:0` or `visibility:hidden` instead. – agrm Nov 04 '17 at 19:27
  • That being said, you should already include details on what you've tried and why it didn't work for you in the question itself. WIll make it a lot easier for others to actually help you out! :o) – agrm Nov 04 '17 at 19:28
  • Possible duplicate of [How to print HTML/PHP page without including the NAVIGATION TAB contents, FOOTER, and head part](https://stackoverflow.com/questions/28912250/how-to-print-html-php-page-without-including-the-navigation-tab-contents-footer) – agrm Nov 04 '17 at 19:28
  • not sure why but display: none is not working but visibility:hidden is working thanks @agrm can you please answer the question in below box in order to accept your solution? – Edwin Bossman Nov 04 '17 at 19:30

1 Answers1

1

The following will hide .navigation when printing the document:

@media print {
   .navigation {
      visibility: hidden;
   }
}

You can also try opacity: 0 or display: none.

agrm
  • 3,735
  • 4
  • 26
  • 36