Remove Header and footer using print media CSS

Question

when I'm printing my page using window.print ,Its automatically adding some data's in header and footer

for ex: In top of the page its adding - page tittle and localhost url . In bottom of the page adding - page number and time . How can I get rid of these information from my page

My Html Page:

<title>GM Shop Click Drive Tracker Tool - Reports</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.css" media="screen"/>
<style>
  body {
    padding-top: 6px; /* 60px to make the container go all the way to the bottom of the topbar */
  }
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/gmpt.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
<![endif]-->

<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
                <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
                               <link rel="shortcut icon" href="ico/favicon.png">

<style type="text/css">

@media print {
    input {
        display:none !important;
    }
    .ui-helper-hidden-accessible {
        display:none !important;
    }
    #headRow {
        display:none;
    }
    .sidebar-nav {
        display:none !important;
    }
    select {
        display:none !important;
    }
    .dataList {
        width:90% !important;
    }
}

    table.dataList {
        border-collapse: separate;
        border-spacing: 0;
    }
    table.dataList th {
        background-color: #f0f0f0;
    }

    table.dataList tr th,
    table.dataList tr td {
        border-right: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        padding: 5px;
    }
    table.dataList tr th:first-child,
    table.dataList tr td:first-child {
        border-left: 1px solid #bbb;
    }
    table.dataList tr th {
        background: #eee;
        border-top: 1px solid #bbb;
        text-align: left;
    }

    /* top-left border-radius */
    table.dataList tr:first-child th:first-child {
        border-top-left-radius: 6px;
    }

    /* top-right border-radius */
    table.dataList tr:first-child th:last-child {
        border-top-right-radius: 6px;
    }

    /* bottom-left border-radius */
    table.dataList tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }

    /* bottom-right border-radius */
    table.dataList tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }   
    tr.alternate {
        background-color: #f0f0f0;
    }
    .highlight {
        background-color:#FFFFE0 !important;
    }
</style>                                   

<div class="container-fluid">
    <div class="row-fluid" id="headRow">
        <div class="span2" style="text-align: center">
        <img src="images/shop_click_drive_logo.jpg" style="width:100px"/>
        </div>
        <div class="span10" style="vertical-align: bottom;padding-top:40px;padding-bottom:0px">
        <ul class="nav nav-tabs" style="padding-bottom:0px;" id="topTabs">
          <li class="active" id="dealerTab"><a href="#" onclick="navToReport('dealer');return false;">Dealer Report</a></li>
          <li  id="statusTab"><a href="#" onclick="navToReport('status');return false;">Dealer by Status</a></li>
          <li id="stepTab"><a href="#" onclick="navToReport('step');return false;">Dealer by Step</a></li>
          <li id="userTab"><a href="#" onclick="navToReport('user');return false;">Dealer by User</a></li>
          <li id="userTab"><a href="#" onclick="navToReport('inProcess');return false;">"In Process" Report</a></li>
          <li id="userTab"><a href="ajax.php?cmd=routeOneReport">RouteOne Report</a></li>
        </ul>           

        </div>
    </div>
    <div class="row-fluid">
        <div class="span2">
            <div class="well sidebar-nav">
                <ul class="nav nav-list">
                  <li><a href="index.php">Dashboard</a></li>
                  <li><a href="tracker.php">Tracker</a></li>
                  <li class="active"><a href="reports.php">Reports</a></li>
                  <li><a href="broadcast.php">BroadCast</a></li>
                  <li><a href="calendar.php">Calendar</a></li>
                  <li><a href="documents.php">Documents</a></li>
                                      <li><a href="admin.php">Admin</a></li>
                                      <li><a href="profile.php">Profile</a></li>
                  <li><a href="#" onclick="logout();">Logout</a></li>
                </ul>
            </div><!--/.well -->
        </div><!--/span-->
        <div class="span10" id="mainContent" style="padding-left:20px">
            <!-- Begin Content -->
        <div class="row">
<div class="span12">
<input type="text" style="width:50%" name="locationSelector" id="locationSelector" value="Start typing location name/id" onfocus="this.value=''"/>
</div>

</div><!-- /container -->

Solution

You will not be able to remove these headers and footers, as it is the browser that puts them there. On some browsers, the user may be able to remove the header and footer, but since this requires intervention from a (savvy) user, it's probably not the solution you are looking for.

If you really must remove the header/footer yourself, your only option seems to be producing PDF output which the user can then print, or save to disk. Some CMSs will offer this functionality automatically (e.g. Joomla). If you're rolling your own, have a look at the following libraries:

• http://www.fpdf.org/

• http://www.tcpdf.org/

These classes are able to convert an HTML document (or part thereof) into PDF. They allow you to pass in a CSS file so you can determine the layout and style of the resulting PDF. In my experience, it works well as long as you steer clear of (complex) tables.

Comments

[Ming]

This is user/browser controlled, you cannot change this for users. You could, however, use something like PHP to print elements on your page to PDF, and then print that PDF out I believe ...

[naivists]

Google this: google.lv/search?q=print+without+header+html (the answer is - you can' t force the user's browser to print without headers/footers if they don't explicitly change some settings)

[Karthick V]

@ursitesion here I cant be able to add my html code.

[Karthick V]

I added ...pls check and let me know if you want anything from my end

[Admin]

You sure it's with jQuery?

[Gopal Joshi]

It will Create new webpage and send to print.You can add specific div to print .

[ursitesion]

why is it needed to do all these stuffs while we can manage this just by using CSS. By using css, need to hide header and footer elements @media print{} section. refer thislink http://stackoverflow.com/questions/7710315/how-to-remove-pri‌​nt-header-footer-wit‌​h-code

[Alexander van Oostenrijk]

I don't think you can hide the printing date/time and URL with CSS. In the question you are linking to, it seems this is also stated.

[Karthick V]

Thanks sameer. I'll try this one . before that I need to know whether we can control through media css.

[rockusbacchus]

Looks like you're missing a curly bracket, too. Nothing to match the closing bracket at the end.