How to print the contents of a lens?

Message has been deleted

lbjvg

unread,

Nov 7, 2009, 7:39:01 PM11/7/09

to SIMILE Widgets

Hi - Is there an easy way to insert a link into a lens view that will
print the contents of the lens? I have tried this javascript (see
below) but it
prints the names of all the facets - so I think there is a lack of
focus on the lens. I am able to use this script method to print other
things like the item list. But the lens popup bubble is elusive.

The lens div is:
<div ex:role="lens" style="display: none;" id="lens_view"
align="left">
<div align="left"><a href="javascript:Clickheretoprint_lens()"> Click
here to print </a> </div>
...
</div>

The Clickheretoprint script (found on a javascript website) is below:

script language="javascript">
//printer friendly script
function Clickheretoprint_lens()
{
var
disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100,
top=25";
//var content_vlue = document.getElementById("middle-
column").innerHTML;
//var content_vlue = document.getElementById("content-
area").innerHTML;
var content_vlue = document.getElementById("lens_view").innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<html><head><title>DermDudes</title>');
docprint.document.write('</head><body onLoad="self.print
()"><center>');
docprint.document.write(content_vlue);
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.focus();
}

</script>

I am certain there is a way to do this but I am not knowledgeable
enough to get it to work.

Thank you - Jim

Michiel

unread,

Nov 10, 2009, 4:04:14 PM11/10/09

to SIMILE Widgets

Hi Jim,

As you notice yourself you are almost there. Your only flaw is that
exhibit leaves the lens as it is, it does its magic on a clone of the
lens and it is the clone that you see on your screen. As you will
realize cloning and IDs don't go together. So you can't use the id
attribute to set content_vlue, you must use some other way. The clone
is in a div with a class attribute that contains "simileAjax-bubble-
contentContainer". So if you replace your line:

var content_vlue = document.getElementById("lens_view").innerHTML;

with:

var content_vlue = $("div.simileAjax-bubble-contentContainer")
[0].innerHTML;

you will hopefully be fine.

Michiel

Jonathan Bogacki

unread,

Nov 10, 2009, 4:28:54 PM11/10/09

to simile-...@googlegroups.com

Jim,

Not sure if this is what you are looking for, but I ensure the styling of my printed lenses using a print.css style sheet (http://www.alistapart.com/articles/goingtoprint/).

<link rel="stylesheet" type="text/css" media="print" href="control/print.css" />

When the page prints, it applies the style from this CSS file. My print.css file looks a bit like this:

body {
    background: white;
    font-size: 100%;
    }

td.sidebar {
    display: none;
    }

Basically it removes the side bar where my facets sit, so the lens prints with the whole page, and ensures the text is the correct size.

Regards,
Jonno

lbjvg

unread,

Nov 10, 2009, 4:37:48 PM11/10/09

to SIMILE Widgets

Michiel - It worked like a charm. Let me know if you ever write a
book on Exhibit - I want to be first in line to buy it. - Jim

lbjvg

unread,

Nov 10, 2009, 4:43:47 PM11/10/09

to SIMILE Widgets

Jonno - Thank you for that advice and reference. Improving the
appearance is the next step. Thanks, Jim

On Nov 10, 4:28 pm, Jonathan Bogacki <jonathan.boga...@gmail.com>
wrote:

Reply all

Reply to author

Forward