I have a page that contains 2 interactive report.
I need to print it so I have a javascript function that calls window.print()
So I've put some CSS to adjust my table
#media print {
width: 100%;
height: 100%;
margin: 0% 0% 0% 0%;
}
The problem is running this page on IE 8 (or prior), because #media
isn't supported.
How can I print these files?
I've put the same CSS into an external file and call it
<link href="print.css" rel="stylesheet" media="print" type="text/css" />
but it doesn't work
How can I solve it?
Thank you
In this case I think ou should use 'conditional stylesheets'.
You can create a css file like IEPrint.css and put the specific styles you want there, and with your other stylesheets you put something like this:
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="IEPrint.css">
<![endif]-->
The code above will only 'work' if the user is in Internet Explorer 8.
You can use other conditionals like:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
The code above 'works' for Internet Explorer 8 and Lower.
Here is a great article about stylesheets conditionals: https://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Trigger print style on click For Internet Explorer with jQuery
But to control the element style when another element click event is triggered, we should use javascript (this is not the best way).
I did a fiddle so you can see the code in action: https://jsfiddle.net/dobbinx3/pLvzk8rv/6/
Basically we have an element <p> that when we want to print it turns red, when we are not printing it, the color is black.
A button that has a click event triggered on it.
And a function to restore the screen layout when we finish the print action.
REMEMBER
You should do this 'workaround' only for Internet Explorer, put an <script> inside the conditional I mentioned before and use it only for the browsers that did not support #media print.
I noticed that you will set the height to 100%, check the display, and if you want the position attributes. If you think it is not working. For example if you want to set it in a <div> element.
Hope it works,
Cya.
Related
I know that when we link CSS files in HTML, we can use media to load different Stylesheets depending on certain things, can we do this while linking to scripts? Here is my HTML:
<link rel="stylesheet" href="stylesheet/main.css" />
<link rel="stylesheet" href="stylesheet/style.css" media="(min-width: 808px)" type="text/css" />
<link rel="stylesheet" href="stylesheet/mobile.css" media="(max-width: 807px)" type="text/css" />
<script media="(min-width: 808px)" src = "scripts/script.js"></script>
<script media="(max-width: 807px)" src = "scripts/mobile.js"></script>
Will this work?
No. The specification for script doesn't list media as one of the supported attributes. And if you think about it, for that particular example, what is the browser supposed to do if, after loading the page when the width was 850px and running the script.js file, the user resizes the window to 600px wide? It can't undo what script.js did.
But if you were testing for something that wouldn't change, you could use window.matchMedia to determine which script to load dynamically. (Reasonably supported, including the last several releases of iOS Safari and Android's built-in browser and the latest release of most mobile browsers, but not IE9 or earlier, or Opera Mini.)
You can write like this:
var winCurrWidth = $(window).width();
If window resize happens, just add:
$(window).on('resize', function(){
winCurrWidth = $(window).width();
});
Now start wirting like this:
if(winCurrWidth < 808){
//Do Something..
}
else{
//Do something else..
}
I am having some dynamic content that should be shown only in the printing page and not in the web page using CSS or javascript.
Please help me to do this.
For example;
I am having a div content like this..
echo '<div id="noshow">'.$val.'</div>'; //i am using php and $val is a dynamic value.
I need to show this value only in the printing page and not in the browser page. I used display:none. But, I don't know how to make it to display again in the printing page.
In you're regular stylesheet you could use #media queries for your print css...
#media print {
#hid { display: table-row; }
}
or you could add a print style.css to the head of your page with the media attribute.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
You need to have two sets of CSS. One that is specifically around displaying to the browser and one that is for printing.
Look in to http://printstylesheet.dbushell.com/
Cheers
Truez
I want to add dynamic css in my html page, I made a function using navigator function if the browser is mozilla then function will add mozilla css otherwise it should add IE css but somehow I am unable to make it working.
<head>
<script type="text/javascript">
var cs;
function nav() {
var txt= navigator.appCodeName;
if(txt=='mozilla') {
cs= mozilla;
}
else{
cs= ie;
}}
</script>
</head>
<body onload="nav ()">
<p id="cab"></p>
</body>
</html>
This is not really the way to implement dynamic css. Instead you should be using conditional commenting:
<!--[if IE 6]>
Insert CSS Link for IE6 here
<![endif]-->
See HERE
Also see THIS answer
You really should use conditional IE comments for this, not JavaScript. This is for many reasons including:
The CSS will work when JavaScript is disabled or not available.
Your JavaScript handles Mozilla, but what about other browsers like Chrome and Opera?
You tend to need separate CSS to "fix" the page layout for IE (especially older versions...), but the rest of the major browsers should all cope with standard CSS rules.
The JavaScript you've written has a couple of issues:
The 'mozilla' string comparison will never match because browsers return it with a capital M: 'Mozilla'.
The '+cs+' in the link tag won't ever do anything because the browser won't treat it as javascript.
If you really want to do it with JavaScript you could remove the link tag from your page's head section and try a function something like this (not tested):
function setCss() {
var cssFileName;
if(navigator.appCodeName.toLowerCase() == 'mozilla') {
cssFileName = 'mozilla-style.css';
}
else {
cssFileName = 'ie-style.css';
}
// Create the element
var cssFileTag = document.createElement("link")
cssFileTag.setAttribute("rel", "stylesheet")
cssFileTag.setAttribute("type", "text/css")
cssFileTag.setAttribute("href", cssFileName)
// Add it to the head section
document.getElementsByTagName("head")[0].appendChild(cssFileTag)
}
As an alternative that requires no scripting at all, you could detect IE, or not IE, by using conditional comments:
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
so you could detect IE this way, or load in the 'Mozilla' spreadsheet in this statement
<!--[if !IE]> -->
According to the conditional comment this is not IE
<!-- <![endif]-->
You also have some syntactic issues in your code, the line
<link href="css/+cs+.css" rel="stylesheet" type="text/javascript" />
will not work, you can't have that variable output inside the link tag, nor can the type be text/javascript.
say that I have an id defined like this
<span id ="radiobuttonContainer"> Check to enable checkboxes:
<input type="radio" name="cov-failed" value="cover" onclick="javascript:printoutCheckboxes('cover')">
Coverage
<input type="radio" name="cov-failed" value="failed" onclick="javascript:printoutCheckboxes('failed')">
Failed</span>
I dont want to show this "spanId" in browsers below I.E 9 Because this enables alot more vizualizing of data which IE < 8 don't can manage. I know that you can have diffrent javascripts and css:es depending on browsers like this
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="root/include/excanvas.min.js"></script><![endif]-->
And then chose display: 'none';
But I wonder if it really is nessecary to have 2 equal .css files containing exactly the same information besides this single row?
Can't I just do something like this?
<!--[if lte IE 8]>document.getElementById('radiobuttonContainer').style.display = 'none';<![endif]-->
you should just be able to wrap the tag in a conditional comment. alternately, since CSS included inline in the page takes precedence over included CSS, you wouldn't have to include a second style sheet, just a new definition specific for that case. i.e.
<!--[if lte IE 8]>
<style type="text/css">
#radiobuttonContainer{
display = 'none';
};
<![endif]-->
and have that come after your included CSS file.
if you use a tool like Modernizr, you can use it to determine the capabilities of the browser.
If there's a particular feature which isn't available in IE8, you can reference it in your stylesheet, and hide this element if the browser doesn't have that feature.
Lets say the feature is HTML5 canvas, all you'd need to do is the one line script to include the Modernizr Javascript in your page, and then you'd do something like this in your CSS:
.nocanvas .radiobuttonContainer {
display:none;
}
I think you can surely do something like this:
<!--[if lte IE 8]><script type="text/javascript">
document.getElementById('radiobuttonContainer').style.display = 'none';
</script><![endif]-->
which is a merge of your examples by the way.
I am trying to alter style at print-time:
Is there an event in javascript that you can listen for for when file>>print is called? What is it? Also - is there a handler for when printing is finished? What is it?
or if there is a better way to do this with some other means, such as style sheets, how do you do that?
Different Style Sheets
You can specify a different stylesheet for printing.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
One Style Sheet
As kodecraft mentioned, you can also put the styles into the same file by using the #media block.
#media print {
div.box {
width:100px;
}
}
#media screen {
div.box {
width:400px;
}
}
In IE there are the nonstandard window.onBeforePrint() and window.onAfterPrint() event listeners. There isn't a non-IE way to do it that I know of, however.
What kinds of changes are you trying to make? It's possible that your problem could be solved by specifying different rules for your print stylesheet.
Firefox 6 now supports beforeprint and afterprint
https://developer.mozilla.org/en/Printing#Detecting_print_requests
We also found that you can do a print-only style with the following:
<style type="text/css">
#media print {
div
{
overflow:visible;
}
}
</style>
IE has onbeforeprint and onafterprint