How to detect current page media type in jQuery

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;
    }
}

Answer 2

Define a CSS file for media print only which contain:

.empty
{
    display: none;
}

include this CSS file in your mage, only for media print

Add a listener on the button for the click event. This listener will add empty CSS class for input with empty value.

$("ID_OF_YOUR_BUTTON").click(function(mouseEvent) {

    $("input[type=text]").each(function(index, element) {

        if ($(element).val().length == 0)
            $(element).addClass("empty");

    });
});

For the media screen, this class will do nothing, but for the media print it will change the display to none.