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.

Blender · Accepted Answer · 2012-10-19 03:10:24Z

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

MatRt · Accepted Answer · 2012-10-19 03:15:35Z

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.

elclanrs · Accepted Answer · 2012-10-19 03:15:50Z

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.

Collectives™ on Stack Overflow

How to detect current page media type in jQuery

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related