I added to my view "show/hide attachments" button. I want to have
attachments invisible by default. When user presses "show attachments" the
attachments (images and movies) should be shown. When user presses "hide
attachments" the attachments should be hidden. The attachments should never
be printed.
Here is main part of my view:
<div align="center">
<input id="print_announcement1" name="print_announcement" type="button"
class="normal_button" value="Print announcement" onclick="window.print();">
</div>
<br>
<style type="text/css" media="print">
input#print_announcement1, input#summary1, input#print_announcement2,
input#summary2, input#show_hide_attachments, div#attachments { display:
none; }
</style>
<script type="text/javascript">
function showHideAttachments(btn) {
var a = document.getElementById('attachments');
var movies = document.getElementsByTagName('embed');
var i;
if (a.style.visibility == 'hidden') {
a.style.visibility = 'visible';
for (i = 0; i < movies.length; i++) {
movies[i].hidden = false;
}
btn.value = 'Hide attachments';
} else if (a.style.visibility == 'visible') {
a.style.visibility = 'hidden';
for (i = 0; i < movies.length; i++) {
movies[i].hidden = true;
}
btn.value = 'Show attachments';
}
}
</script>
<table id="printout" border="0">
<caption>
<h6>Announcement</h6>
<hr>
</caption>
<tfoot>
<tr><td colspan="2"><hr></td></tr>
</tfoot>
<tbody>
... <!-- announcement data -->
<?php
if ($images + $movies > 0) {
echo "<tr><td>Attachments:</td><td>";
echo '<b>', $images, ' images, ', $movies, ' movies</b> ';
echo '<input id="show_hide_attachments" type="button" value="Show
attachments" onclick="showHideAttachments(this);">';
echo '</td></tr></tbody></table>';
echo '<div id="attachments" align="center" style="visibility: hidden">';
$dir = getPicturesDir($fullAnnouncementNo);
$picturesDir = substr($dir, strlen($publicHtmlDir) + 1);
$pictures = getPicturesOf($fullAnnouncementNo);
foreach ($pictures as $p) {
if (isMovie($p)) {
echo '<embed hidden="true" autostart="false" height="0"
width="0" src="' . base_url($picturesDir . '/' . $p) . '"><br>';
} elseif (isImage($p)) {
echo '<img src="' . base_url($picturesDir . '/' . $p) .'"><br>';
}
}
echo '<input id="print_announcement2" name="print_announcement"
type="button" class="normal_button" value="Print announcement"
onclick="window.print();">';
echo '</div>';
}
?>
I use <embed hidden="true" autostart="false" ...> becase I don't want the
movies to be displayed at document load.
The problem is that the movies are not displayed at all when user presses
"show attachments". I don't know why and I don't know how to program it
correctly.
Please help.