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.

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.

• javascript
• jquery
• css

3 Answers 3

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

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.

If you want to find out the media type of a particular stylesheet you can do this in jQuery:

var media = $('link[href$="styles.css"]').attr('media');

You'd have to separate your stylesheets and load them in the markup with the media attribute instead of using the media queries in one file.