I have been grappling with this particular issue for weeks now, seeking guidance from previous inquiries here. Yet, despite the helpful hints, I am still struggling to find a viable solution.
My website features a scrolling sidebar measuring approximately 350x320 pixels, and I am eager to implement a dedicated Print function for it. The sidebar is encapsulated within a Div element. I have already added a print button inside the sidebar that triggers a new print window.
An interesting quirk of this challenge is that our CMS does not support "media-query" specific stylesheets, thus ruling out the option of a Print stylesheet!
The crux of my difficulty lies in understanding the syntax of what I believe is jquery's "$css()" function, which needs to be inserted within the callback function on the page.
<script type="text/javascript">
$(document).ready(function() {
$("a.printText").click(function(){
w=window.open('','_blank','width=1024,height=768,scrollbars=1,location=0,menubar=0')
w.document.write('<link rel="stylesheet" type="text/css" href="css/print.css">');
w.document.write("<h2>{$node.name}</h2>");
w.document.write("<h3>{$node.data_map.dek.content.output.output_text}</h3>" + "<p>By {attribute_view_gui attribute=$node.data_map.instructors}</p>");
w.document.write($('#descIntro').html());
/*w.print();
w.close();*/
});
});
</script>
The line "w.document.write('');" proved ineffective, serving as a workaround that failed to deliver results.
Below are the styles that must be seamlessly integrated into the aforementioned callback:
body {
color: #000;
font: 400 12px/19px Palatino, Georgia, serif;
line-height: 1.5em;
margin: 15px 20px;
}
h2 {
color: #3d3d3d;
}
h3 {
color: #3d3d3d;
margin-bottom: 1px;
padding-bottom: 0;
}
p {
font-size: 1.1em;
margin: 0 0 4px 0;
padding: 0;
}
ul, ol {
margin: 3px 0 3px 20px;
}
.sidebarText {
background-color: #dfdfdf;
border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
margin: 7px auto;
padding: 1px 12px 8px;
width: 500px;
}
.sidebarText + h3 {
padding-top: 0;
margin-top: 0;
}
This may seem like a simple matter, but given its specificity, I am optimistic that someone possesses the quick solution right at their fingertips.
Thank you for your assistance!