/    Sign up×
Community /Pin to ProfileBookmark

accessing the media property

Copy linkTweet thisAlerts:
Mar 03.2006

Has anyone found a way to access the media object of a browser, if one should exist? I have a javascript that executes onload which detects the screen size and resizes a div to take up 100% (minus the height of the headers and footers) of the user’s screen and scrolls appropriately, simulating frames.

The problem is that in FF, when the user prints, they only get the visible portions because I’m unable to deactivate the JS on printing. Is there a way to specify media in a script tag, like

[CODE]<script type=”text/javascript” media=”print”>[/CODE]

or accessing a media property inside it, like this?

[CODE]if (window.media == “print”)[/CODE]

Unfortunately, since the height is decided by javascript, I’m unable to use the media property of a link tag to a css file. The javascript overrides it. If I try to reset the height into “auto” then I get worse results. So I’d rather just disable the functions that resize the table when printing.

Thanks for your time!

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@mrhooMar 04.2006 — I have a button called 'Print View' on every page that uses javascript to change the display.

When the user clicks it, the page is reloaded with a tail on the url: somepage.html?_printview

The page is reloaded and no display altering code is run.

I had to develop it for accessibility, so users with screen readers could opt out of the visual intricasies,

but I found it makes my pages print very nicely as well.

There is no reason you couldn't apply this to a single page.

You could even call the button 'Print' and direct the browser to print when you reload the page:

[CODE]function doWhat(){
if(location.search.indexOf('_printview')!=-1){
window.print();
}
else do that thing you do normally
}
onload=doWhat[/CODE];
Copy linkTweet thisAlerts:
@jennhiauthorMar 06.2006 — That's an excellent idea -- really beats up trying to create a hardcoded "print view" page for every content page. Thanks, mrhoo! I'll go ahead and do something similar to my pages.

I'd still like to know if there's a way to access via js what media is being used. If anyone knows how to do that, I'd really appreciate it! Thanks!
Copy linkTweet thisAlerts:
@mrhooMar 06.2006 — A browser doesn't actually have a 'media' object- the media attribute belongs to a link or script element. To know what media is in use you need to know what the user application is-

a browser uses 'screen', a printer 'print', a palm pilot 'handheld' and so on.

HTML defines several values for media,but allows future expansion:

'all,screen,tv,handheld,aura,braille,print,projection,screen,tty';

if you are looking for the media defined for a page:

[CODE]var A=document.getElementsByTagName('link');
var B=document.getElementsByTagName('style');
A=A.concat(B);
var L=A.length;
var C=new Array;
for(var i=0;i<L;i++){
var tem=A[i];
var temp=tem.getAttribute('media');
if(!temp)temp='all';
C.push(temp);
}
return C;[/CODE]
Some browsers will collect all the css files in a document.styleSheets nodelist; but it isn't very portable yet.

Hope this helped.
Copy linkTweet thisAlerts:
@jennhiauthorMar 06.2006 — Thanks, mrhoo. That is a great way to see what stylesheets are being applied in total. Unfortunately, what I'm looking for is a way to detect if the user's media is print, and then have the javascript do (or not do) something; I don't want the javascript to be applied if the page is being printed out, or else the content is unusable since it's being cut off by the resizing. Is there no way to detect the actual media being used and pass it into the js?
×

Success!

Help @jennhi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...