jQuery datepicker; hidden by PDF Viewer in Internet Explorer
What my page does:
The user selects a report, selects some开发者_运维知识库 parameters and then click the preview button, which calls crystal reports to run the report and export the result as a PDF. I have a DIV that has an object tag to display the PDF file.
They can then setup a schedule to run the report automatically for them. This schedule section uses the datepicker to select start and end dates for the schedule.
When displaying a PDF (in IE) the datepicker is blocked. If the object displays a simple HTML file the datepicker overlays just fine. So it is something about the PDF viewer that is demanding it be the top most element.
Here is a simple test I am using:
<html>
<head>
<link href="styles/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
<link href="styles/timepicker.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
<script src="scripts/jquery-timepicker.js" type="text/javascript"></script>
<!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.js"></script><![endif]-->
<script type="text/javascript">
$(document).ready(function() {
$('#txtStartDate').datepicker({minDate: new Date()});
$('#txtEndDate').datepicker({minDate: new Date()});
$('#txtTime').timepicker();
});
</script>
</head>
<body>
<form id="mainForm">
<div id="divSchedule" style="z-index:2;font-family:Arial;font-size:8.5pt">
<table cellpadding="3px" cellspacing="0" style="width:600px;display:block;padding: 0px 3px 0px 0px">
<tr><td colspan="7"><div style="width:100%;border-bottom:1px solid #F3C13D;color:#0067AC">Schedule automated report delivery</div></td></tr>
<tr>
<td><span>Start Date:</span></td>
<td><input id="txtStartDate" type="text" style="width:70px"/></td>
<td><span>End Date:</span></td>
<td><input id="txtEndDate" type="text" style="width:70px"/></td>
<td><span>Time:</span></td>
<td><input type="text" id="txtTime" style="width:70px"/></td>
<td> </td>
</tr>
<tr>
<td colspan="2">
<span>via:</span>
<input type="radio" name="rdoScheduleVia" value="Printer">Printer
<input type="radio" name="rdoScheduleVia" value="Email">Email
</td>
<td><span id="lblViaText">Printer Name:</span></td>
<td colspan="3"><input id="txtViaText" style="width:235px"/></td>
<td>
<input type="button" ID="btnPrinterName" value="Select Printer" Class="LoginButton" Width="115px" />
</td>
</tr>
<tr>
<td colspan="5">
<div style="widht:100%;align:right"><input type="button" ID="btnSaveSchedule" Class="LoginButton" value="Save" /></div>
</td>
<td>
<input type="button" ID="btnCancel" Class="LoginButton" value="Cancel" />
</td>
</tr>
</table>
</div>
<div id="divPDFView" style="z-index:1;height:300px;witdh:400px;border:1px solid blue">
<object ID="objPrevReport" data="test.pdf" type="application/pdf" style="position:relative;z-index:-1;width:100%;height:100%">
alt : <a href="test.pdf">test.pdf</a>
</object>
</div>
</form>
</body>
</html>
Section of jQuery-ui-1.8.12. Custom. Css for the datepicker that I changed the z-index to 10 in
/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
. Ui-datepicker-cover {
display: none; /*sorry for IE5*/
display/**/: block; /*sorry for IE5*/
position: relative; /*must have*/
z-index: 10; /*must have*/
filter: mask(); /*must have*/
top: -4px; /*must have*/
left: -4px; /*must have*/
width: 200px; /*must have*/
height: 200px; /*must have*/
}/*
This works in Firefox 4, loading the same viewer that IE uses. There is a delay displaying the lower part of the datepicker as if FF is thinking about it and then decides to do it.
Works in Chrome (uses it's own PDF viewer)
IE8 and IE9 do the same thing in hiding the lower part of the datepicker popup
Also I have the same result whether the viewer is Adobe or PDF-Xchanger (really nice PDF viewer alternative)
Any assistance would be greatly appreciated!
加载中,请稍侯......
精彩评论