I have a page with 10 videos, each with a text box made with <div>. I put an image button for every text box so that users can print only the text for that video. I spent days searching the Net and experimenting before I could figure out the way to do it, so I'll put my question at the end and, first of all, here's how I did it, so that it can help other people (this way is very simple, compared to some complicated non-working solutions I found on the Net):
I made one external stylesheet document with the configuration of the page for screen, and 10 stylesheets for the printing of the 10 videoscripts:
<link rel="stylesheet" type="text/
css" media="screen" href="textboxes.
css">
<link rel="stylesheet" type="text/
css" media="print" href="printsVideomix/print1.
css" >
<link rel="stylesheet" type="text/
css" media="print" href="printsVideomix/print2.
css" >
etc.
In every print stylesheet I included this code to disable all the text boxes divs except the one I wanted to print. This code is in print1.
css, to print the first videoscript and hide the other 9:
div.imprimir1 { display:block; padding: 5px;}
div.imprimir2 { display:none;}
div.imprimir3 { display:none;}
etc.
Then I wrote the following script code in the head of my web page:
<!-- FUNCTION TO CHANGE EXTERNAL STYLESHEETS AND PRINT-->
<script language="JavaScript">
<!--
var doAlerts=false;
function changeSheets(whichSheet){
whichSheet=whichSheet-1;
if(document.styleSheets){
var c = document.styleSheets.length;
if (doAlerts) alert('Change to Style '+(whichSheet+1));
for(var i=0;i<c;i++){
if(i!=whichSheet){
document.styleSheets[i].disabled=true;
}else{
document.styleSheets[i].disabled=false;
}
}
window.print();
}
}
//-->
</script>
and then I called that function from a image-button using this code:
<a href="javascript
:changeSheets(3)" >
<img style="[....blah, blah, blah....]" onClick=" window.location.reload();">
</a>
The line: <a href="javascript
:changeSheets(3)" > is calling the
css shifting script to load the
css to print the first videoscript. I found that to print the first print stylesheet I had to send the number 3, and number 4 opens the second stylesheet and so on. I suppose that’s because I have two other link-rel labels before my print stylesheets (so this script is probably counting the number of total link-rel in your header). If you try this script, change the numbers and see what numbers work for you.
The code: onClick=" window.location.reload();" at the end of the image-button code is reloading the page, so that it gets back the original stylesheet for screen (for some reason, when the script changes the print stylesheet, the screen changes format and it gets all messed up, so I need to restore the screen stylesheet)
You can see all the code and everything, and see how it works here:
http://www.multimedia-english.com/videos/videomix.htm
THE PROBLEM IS...
And here's the catch. If you are using Firefox, you have no problem, you click on one "Print" button and you get an impression of that videoscript. Beautiful.
But if you are using Internet Explorer (at least up to v.6, I don't know about v.7), you click on the button and you get your page reload but no printing at all.
BUT IF WE MAKE A LITTLE CHANGE...
Just let's take away the OnClick part in the image-button code:
<a href="javascript
:changeSheets(3)" >
<img style="[....blah, blah, blah....]" onClick=" window.location.reload();">
</a>
And now we can take the reload function up into the code of the head script, right after the window.print(); like this:
window.print(); window.location.reload();
Now, you solved things up for Internet Explorer, which is working beautifully, but Firefox refuses to print anything.
So my question is: does anybody know how I can fix my script so that both users of Firefox and IE can print my videoscripts?!
After some days of struggle I just reached my limit. My knowledge of Javascript is close to zero, so I don't think I can get any further on my own.
Of course I've been thinking of just making a print-friendly version for every videoscript and then create a link to the page, but that option was there from the beginning and that's precisely what I don't want to do (I'm changing vids weekly, there are many other things to update on my site and I want to simplify things as much as possible).
Any help will be welcome, thanks in advance
PS- if you enter my page and everything’s working well, that means that somebody helped me out and now it'
Submit Your Article
Announcements
Contact
