i currently have this code working on my website:
<script>
if (window.top!=window.self) {
loadCSSFile("http://www.website.com/css/iframe.css");
} else {
loadCSSFile("http://www.website.com/css/style.css");
}
</script>
I am looking to fix this as i want to load three files but only if required? hoping you use php or add to the script above, currently this loads normal Css and CSS for Iframe (Facebook Apps) and now i want to style the mobile css, but with one file mobile.css i need to add a file to the above or a php code that handles this?
Cheers!
If you to load a CSS to style for mobile devices you can use the following code. This will detect that the device is a mobile by looking at the screen size and if it matches then it will load the css.
<link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" media="(max-width: 800px)" href="mobile.css" />
Please don't use JS for this.
Related
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.
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
Hi i'm making a web based POS and when printing the ticket I use javascript
window.print()
But I have buttons for going back to the main page, ando I dont want those printed on the ticket, Can I print only Text from a Browser Window? If so how can I do it?
Also Im new at this, so if there's a better way to do this I will appreciate commments about how to do it
tx in advance
Add a print stylesheet that hides everything you do not want to be printed:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
In this stylesheet you could e.g. hide all images using img { display: none; } or do something more fancy such as replacing colors with black/white etc.
You should look into building a print stylesheet.
Here is a guide to how you produce a print stylesheet:
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
You need a stylesheet like this:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
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