[caboose96z]

Okay, I have come up with a piece of code that will allow you to print part of a webpage and not the whole thing. It uses the <div></div> codes and <id> tags to get this done. However, I am having issues getting it to work in Firefox or Netscape. It does work like a charm in IE. Anythoughts on how I can get this done?

Here is the code:

<style type="text/css">
<!--
@media print{
.noprn{
display:none;
visibility:hidden;
}
.prn{
left:0px;
top:0px;
display:block;
visibility:visible;
}
}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function printDiv (id) {
var divs = document.getElementsByTagName('DIV');
for (var d = 0; d < divs.length; d++){
divs[d].className='noprn';
}
document.getElementById(id).className='prn';
window.print();
}
//-->
</script>


<input name="Print" type="button" onClick="printDiv(this.form.divSelect.value); history.go(0)" value="Print" />


Here is the website that I am using it on:

http://jobs.georgiasouthern.edu

on the employment/professional-admin and classified page.

also, a forum I built http://www.cgfyb.com/ if you would like to review and make some suggestions!

Thanks in advance

Jamey Bland

[TwoD]

I get an error (in FF) saying that document.getElementById(id) didn't work. (Probably becuase id isn't defined)
Maybe the value of divSelect isn't grabbed properly. Try using divSelect.options[this.frame.divSelect.selectedIndex].value instead.

I also noted that FF thinks most part of your code is commented out (the part you are trying to print). Try removing the comments to see if it helps.

[caboose96z]

I would use that option but I'm using it with a form select. I guess I should have added that! Also, when testing in Dreamweaver, it works as a single page and prints the div that I want. It's only in application where this is in the main frame of a frameset that it cannot print.

<FORM>
<SELECT NAME="divSelect">
<option value="000960">000960&nbsp;&nbsp;&nbsp; Administrative Secretary</option>
<option value="000959">000959&nbsp;&nbsp;&nbsp; Cook I</option>
<option value="000958">000958&nbsp;&nbsp;&nbsp; Cook I</option>
<option value="000953">000953&nbsp;&nbsp;&nbsp; Secretary</option>
<option value="000935">000935&nbsp;&nbsp;&nbsp; Groundskeeper I</option>
<option value="000888">000888&nbsp;&nbsp;&nbsp; Public Safety Officer</option>
<option value="000001">000001&nbsp;&nbsp;&nbsp; Custodian I - (Multiple Positions, Night Shift)</option>
<option value="000000">000000&nbsp;&nbsp;&nbsp; Groundskeeper I - (Multiple Positions)</option>
<option value="casual2">Casual Labor #2&nbsp;&nbsp;&nbsp; Custodian I - Temporary (15 Positions)</option>
<option value="casual3">Casual Labor #3&nbsp;&nbsp;&nbsp; Groundskeeper (2 Positions)</option>
</SELECT>
<INPUT TYPE="button" onCLICK="printDiv(this.form.divSelect.value); history.go(0)" VALUE="Print">
</FORM>

Thanks again

UPDATE: It's the history.go(0) that's messing firefox up. working on it now....

[caboose96z]

::FIXED::

It was the history.go(0) that was throwing it off. Netscape and Firefox have a thing with the go() command. I could have used .back but i wanted it to refresh instead.

So for those that are interested, insted of "history.go()" in NS or FF, you can use "javascript:window.location.reload();"

Thanks for your help!

[TwoD]

I know you were using a selectbox, that's why I suggested using .selectedIndex instead of .value...

Anyway, I'm glad you found the problem and posted the solution so other people can learn from it.