Hi,
This is the situation:
I have a webpage that uses 2 different css definitions. One definition
is for viewing the page in the browser and one is used when printing
the page. The page is using a plugin (jScrollPane) to hide the normal
scrollbar and display a dhtml-scrollbar.
- Both css are always defined in the <head> of the document.
- The webpage is not created dynamically.
The implementation:
In an external js-include i have created the following lines:
$(document).ready(function() {
$('div.frame').jScrollPane({scrollbarWidth:5, scrollbarMargin:0});
});
The problem:
When the browser prints the page the new css is just applied to the
page. Which results in the wanted output except the created objects
using the jScrollPane.
After a certain time of investigation i found out that the problem
comes up because the plugin sets inline css definitions (which are
applied to every media) to the div-container that is scrolled by the
plugin. I have researched the internet if there is a possibility to
disable the javascript when printing the page but there isnt. So there
are only a few solutions to get around the problem.
1. ugly solution:
When clicking on the link "Print Page" a parameter is added to the
current url. When the parameter is set the javascript is not evaluated
and the applied css for printing takes place.
Contras:
- I need to use window.open to create a new popup-window and
automatically close it after printing (only working in FF).
- When the user uses the "Print Page"-menu from the menu of the
browser this solution is not working
2. possible solution:
I found a definition to also assign inline css to a certain media-
type:
Syntax: <div style="@media=screen(overflow:hidden;)">
This should output the wanted result because the given inline styles
are only applied if the media is screen.
Is there a way to set a parameter in jQuery to set inline-style by
default only to a given css-media? Like in the example above?
I hope the description is readable ;)
Best regards in advance
Thorsten
