Question

I have a page with input fields. I want to do hide the all 0 values text fields when page is in media type print.

I have tried in jQuery. But this is works both in screen mode and print model.

HTML:

<div class="screen">some screen</div>
<div class="print">some print</div>
<input type='text' name='' id='1' class='' value='0'/>
<input type='text' name='' id='2' class='' value='5'/>
<button>Print</button>

JS:

$('button').click(function(){
    $('input[type=text]').each(function(){
      if ( $(this).val() == 0 ){
        $(this).hide()
      }     
    })
})

CSS:

@media print{
    .screen{
      display:none;
    }

    .print{
      display:block;  
    }
}

@media screen{
    .screen{
      display:block        
    }

    .print{
      display:none;   
    }
}

If I detect the current page’s media type. I can finished it. Unfortunately I couldn’t get the right code.

I also tried jmediatype, but there is no download option.

Answer 1

If you just want to hide the fields with value="0", you can do this with just CSS:

@media print {
    input[value="0"] {
        display: none;
    }
}

An alternative would be to give those elements a class that only gets hidden by the print stylesheet:

$('button').click(function(){
    $('input[type=text]').filter(function() {
        return parseInt(this.value, 10) == 0;
    }).addClass('print-hidden');
});

And use a style like this:

@media print {
    .print-hidden {
        display: none;
    }
}