Print Area

How to print selected area

you want to print selected area from the full web page you need to implement this code, you can easy to solve your problem.
exp:

 

In the above example you can print only displaying table using below code.

Add code in your .js file.

<script type="text/javascript">

function print1(strid)
{
if(confirm("Do you want to print?"))
{
var values = document.getElementById(strid);
var printing =
window.open('','','left=0,top=0,width=550,height=400,toolbar=0,scrollbars=0,sta­?tus=0');
printing.document.write(values.innerHTML);
printing.document.close();
printing.focus();
printing.print();
printing.close();
}
}
</script>

HTML code.

<div id="print2">
<table width="40%" cellpadding='0' cellspacing='0' border="1">
    <tr bgColor="#ccc">
        <th>Sno</th><th>Name</th><th>Address</th>
    </tr>
    <tr>
        <td>1</td><td>sonu</td><td>6355</td>
    </tr>
    <tr>
        <td>2</td><td>ankush</td><td>hno 3322</td>
    </tr>
    <tr>
        <td>3</td><td>dimple</td><td>hno 1245</td>
    </tr>
    <tr>
        <td>4</td><td>reena</td><td>3344</td>
    </tr>
    <tr>
        <td>5</td><td>sonu</td><td>6355</td>
    </tr>
    <tr>
        <td>6</td><td>ankush</td><td>hno 3322</td>
    </tr>
    <tr>
        <td>7</td><td>dimple</td><td>hno 1245</td>
    </tr>
    <tr>
        <td>8</td><td>reena</td><td>3344</td>
    </tr>
</table>
</div>
<br/><br/>
<input type="button"  name="printbutton" value="Prin table" onclick="return print1('print2')"/>

You can implement above script in your project you just need to give id for div and pass from the print function.

You can try this example.

Sno	Name	Address
1	sonu	6355
2	ankush	hno 3322
3	dimple	hno 1245
4	reena	3344
5	sonu	6355
6	ankush	hno 3322
7	dimple	hno 1245
8	reena	3344

Full screen popup

You want to add popup in your site, it is very easy to implement popup in your site just use given code.

<div class="overlay" id="over-flow">   
</div>
<div class="main-box" id="compare-box">
    <span class="close-btn" onclick="boxClose()">Close</span>
</div>

Add CSS in your css file.
<style>
       .overlay{
             display:none;
              z-index:4;
             position:fixed;
             background:#000;
              opacity:0.8;
            left:0;
                top:0;
             right:0;
           bottom:0;
        }
     .main-box{
          display:none;
                left:10px; top:10px; right:10px; bottom:10px;
               background:#FDFFF4;
                  z-index:100;
                      color:#000;
                    position:absolute;
                     border:2px solid #ddd;
                 padding:5px;
    }
    .close-btn{
              padding:5px 10px 5px 10px;
                              border-radius:5px;
                         cursor:pointer;
                        background:#ccc;
                           float:right;
                     font-family:verdana;
                 font-size:12px;
      }
</style>

Add this script in your .js file.
<script>
        function boxClose(){
        $('#over-flow').hide();
        $('#compare-box').hide();
    }
    function get_compare(){
        $('#over-flow').show();
        $('#compare-box').show();
    }
</script>


Try this example:

 

Close