]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: c9e6d28)
datepicker: fixes #3863: fixed vertical position when scroll position is present...
authorCa-Phun Ung <pazu2k@gmail.com>
Wed, 28 Jan 2009 05:11:10 +0000 (05:11 +0000)
committerCa-Phun Ung <pazu2k@gmail.com>
Wed, 28 Jan 2009 05:11:10 +0000 (05:11 +0000)
tests/visual/datepicker/viewport.html [new file with mode: 0644] patch | blob
ui/ui.datepicker.js patch | blob | history

diff --git a/tests/visual/datepicker/viewport.html b/tests/visual/datepicker/viewport.html
new file mode 100644 (file)
index 0000000..5028342
--- /dev/null
+++ b/tests/visual/datepicker/viewport.html
@@ -0,0 +1,277 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<title>Mon 26JanTest application details - by chrisv from #3863 (Viewport test)</title>
+<link href="css/styling.css" rel="stylesheet" type="text/css">
+<style type="text/css">
+label {
+       float: left;
+       min-width: 12em;
+}
+tr.rule-above td {
+       border-top: solid 1px #CCCCCC;
+       margin-top: 1em;
+}
+</style>
+<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
+<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
+<script type="text/javascript" src="../../../ui/ui.core.js"></script>
+<script type="text/javascript" src="../../../ui/ui.datepicker.js"></script>
+<style type="text/css">
+label.error {
+       color: #ff4c00;
+       font-style: italic;
+}
+input.error {
+       border: 1px dotted red;
+}
+
+</style>
+<style type="text/css">
+.ui-datepicker {
+       font-size: 80%;
+}
+</style>
+<script type="text/javascript">  /* configure date picker */
+$(function() {
+  $(".datepicker").datepicker({ 
+    dateFormat: 'd M yy', 
+    firstDay: 1, 
+    changeMonth: false, changeYear: false, 
+    showOtherMonths: true,
+    mandatory: true
+  });
+});
+</script>
+</head>
+<body>
+<div id="container">
+  <div id="center" class="column">
+    <h2>Mon 26JanTest</h2>
+    <h3>Application progress</h3>
+    <form name="frm" id="frm" method="post" action="">
+
+      <table>
+        <tr>
+          <td><label for="Firstname">First name:</label></td>
+          <td><input name="Firstname" id="Firstname"  size="12" value="Mon"></td>
+        </tr>
+        <tr>
+          <td><label for="Lastname">Last name:</label></td>
+          <td><input name="Lastname" id="Lastname" size="12" value="26JanTest"></td>
+
+        </tr>
+        <tr>
+          <td><label for="Email">Email:</label></td>
+          <td><input name="Email" id="Email" size="18" value="x@y.com"></td>
+        </tr>
+        <tr>
+          <td><label for="RegionalMentorID">Responsible RM:</label></td>
+          <td><select name="RegionalMentorID" id="RegionalMentorID">
+
+              <option value="">–</option>
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td><label for="Status">Status:</label></td>
+          <td><select name="Status" id="Status">
+              <option selected value="Active">Active</option>
+
+              <option  value="Dropped out">Dropped out</option>
+              <option  value="Completed">Completed</option>
+            </select>
+          </td>
+        </tr>
+        <tr class="rule-above">
+          <td>Applic’n rec’d</td>
+
+          <td><input type="text" name="ApplicationReceivedOn" id="ApplicationReceivedOn" value="26 Jan 2009" class="datepicker" size="12" title="Enter date"></td>
+        </tr>
+        <tr class="rule-above">
+          <td>Stage 1 mtg</td>
+          <td><input type="text" name="Stage1MtgOnD" id="Stage1MtgOnD" value="27 Jan 2009" class="datepicker" size="12" title="Enter date">
+            <input type="text" name="Stage1MtgOnT" id="Stage1MtgOnT" value="11:00" size="4" title="Enter time">
+            @
+            <input name="Stage1MtgAt" id="Stage1MtgAt" value="someplace">
+          </td>
+
+        </tr>
+        <tr>
+          <td>&nbsp;</td>
+          <td><label>Confirmed on</label>
+            <input type="text" name="Stage1MtgConfirmedOn" id="Stage1MtgConfirmedOn" value="26 Jan 2009" class="datepicker" size="12" title="Enter date">
+          </td>
+        </tr>
+        <tr>
+
+          <td>&nbsp;</td>
+          <td><label>Attended</label>
+            <input type="radio" name="Stage1MtgAttended" id="Stage1MtgAttendedY"  value="Y">
+            Yes
+            <input type="radio" name="Stage1MtgAttended" id="Stage1MtgAttendedY" checked value="N">
+            No </td>
+        </tr>
+        <tr>
+
+          <td>&nbsp;</td>
+          <td><label>Hard-copy given</label>
+            <input name="Stage1HardCopyGiven" type="radio"  value="Y">
+            Yes
+            <input name="Stage1HardCopyGiven" type="radio" checked value="N">
+            No </td>
+        </tr>
+        <tr>
+
+          <td>&nbsp;</td>
+          <td><br>
+            <label>Handover on</label>
+            <input type="text" name="Stage1HandoverOn" id="Stage1HandoverOn" value="26 Jan 2009" class="datepicker" size="12" title="Enter date">
+          </td>
+        </tr>
+        <tr class="rule-above">
+          <td>Stage 2 mtg</td>
+
+          <td><input type="text" name="Stage2MtgOnD" id="Stage2MtgOnD" value="28 Jan 2009" class="datepicker" size="12" title="Enter date">
+            <input type="text" name="Stage2MtgOnT" id="Stage2MtgOnT" value="11:00" size="4" title="Enter time">
+            @
+            <input name="Stage2MtgAt" id="Stage2MtgAt" value="someplace">
+            <br>
+            <label>Confirmed on</label>
+            <input type="text" name="Stage2MtgConfirmedOn" id="Stage2MtgConfirmedOn" value="26 Jan 2009" class="datepicker" size="12" title="Enter date">
+            <br>
+            <label>Contacts:</label>
+
+            <i></i> <br>
+            <label>Postcode areas:</label>
+            <i></i> <br>
+            <label>Document explanations given</label>
+            <input name="Stage2DocExplanGiven" type="radio"  value="Y">
+            Yes
+            <input name="Stage2DocExplanGiven" type="radio" checked value="N">
+
+            No <br>
+            <label>Franchisee contacts given</label>
+            <input name="Stage2ContactFranchiseesGiven" type="radio"  value="Y">
+            Yes
+            <input name="Stage2ContactFranchiseesGiven" type="radio" checked value="N">
+            No <br>
+            <label>Finance options given</label>
+
+            <input name="Stage2FinanceOptionsGiven" type="radio"  value="Y">
+            Yes
+            <input name="Stage2FinanceOptionsGiven" type="radio" checked value="N">
+            No <br>
+            <label>Financials given</label>
+            <input name="Stage2FinancialsGiven" type="radio"  value="Y">
+            Yes
+            <input name="Stage2FinancialsGiven" type="radio" checked value="N">
+            No <br>
+
+            <label>Business plan given</label>
+            <input name="Stage2BusinessPlanGiven" type="radio"  value="Y">
+            Yes
+            <input name="Stage2BusinessPlanGiven" type="radio" checked value="N">
+            No <br>
+            <label>Agreement given</label>
+            <input name="Stage2AgreementGiven" type="radio"  value="Y">
+            Yes
+            <input name="Stage2AgreementGiven" type="radio" checked value="N">
+
+            No <br>
+            <label>Disclosure letter given</label>
+            <input name="Stage2DisclosureLetterGiven" type="radio"  value="Y">
+            Yes
+            <input name="Stage2DisclosureLetterGiven" type="radio" checked value="N">
+            No <br>
+            <label>Medical letter given</label>
+
+            <input name="Stage2MedicalLetterGiven" type="radio"  value="Y">
+            Yes
+            <input name="Stage2MedicalLetterGiven" type="radio" checked value="N">
+            No <br>
+            <label>Attended</label>
+            <input name="Stage2MtgAttended" type="radio"  value="Y">
+            Yes
+            <input name="Stage2MtgAttended" type="radio" checked value="N">
+            No </td>
+
+        </tr>
+        <tr class="rule-above">
+          <td>Site visit</td>
+          <td><input type="text" name="SiteVisitOnD" id="SiteVisitOnD" value="29 Jan 2009" class="datepicker" size="12" title="Enter date">
+            <input type="text" name="SiteVisitOnT" id="SiteVisitOnT" value="13:00" size="4" title="Enter time">
+            @
+            <input name="SiteVisitAt" id="SiteVisitAt" value="somewhere else">
+            <br>
+            <label>Site visit contact</label>
+
+            <br>
+            <label>Confirmed on</label>
+            <input type="text" name="SiteVisitConfirmedOn" id="SiteVisitConfirmedOn" value="26 Jan 2009" class="datepicker" size="12" title="Enter date">
+            <br>
+            <label>Attended</label>
+            <input name="SiteVisitAttended" type="radio"  value="Y">
+            Yes
+            <input name="SiteVisitAttended" type="radio" checked value="N">
+
+            No </td>
+        </tr>
+        <tr class="rule-above">
+          <td>Director interview</td>
+          <td><input type="text" name="DirectorInterviewOnD" id="DirectorInterviewOnD" value="30 Jan 2009" class="datepicker" size="12" title="Enter date">
+            <input type="text" name="DirectorInterviewOnT" id="DirectorInterviewOnT" value="13:00" size="4" title="Enter time">
+            @
+            <input name="DirectorInterviewAt" id="DirectorInterviewAt" value="boss pad">
+
+            <br>
+            <label>Confirmed on</label>
+            <input type="text" name="DirectorInterviewConfirmedOn" id="DirectorInterviewConfirmedOn" value="26 Jan 2009" class="datepicker" size="12" title="Enter date">
+            <br>
+            <label>Attended</label>
+            <input name="DirectorInterviewAttended" type="radio"  value="Y">
+            Yes
+            <input name="DirectorInterviewAttended" type="radio" checked value="N">
+
+            No <br>
+            <label>Financials Recd</label>
+            <input name="DirectorFinancialsRecd" type="radio"  value="Y">
+            Yes
+            <input name="DirectorFinancialsRecd" type="radio" checked value="N">
+            No <br>
+            <label>Business plan Recd</label>
+
+            <input name="DirectorBusinessPlanRecd" type="radio"  value="Y">
+            Yes
+            <input name="DirectorBusinessPlanRecd" type="radio" checked value="N">
+            No <br>
+            <label>Agreement Recd</label>
+            <input name="DirectorAgreementRecd" type="radio"  value="Y">
+            Yes
+            <input name="DirectorAgreementRecd" type="radio" checked value="N">
+            No <br>
+
+            <label>Disclosure letter Recd</label>
+            <input name="DirectorDisclosureLetterRecd" type="radio"  value="Y">
+            Yes
+            <input name="DirectorDisclosureLetterRecd" type="radio" checked value="N">
+            No <br>
+            <label>Medical letter Recd</label>
+            <input name="DirectorMedicalLetterRecd" type="radio"  value="Y">
+            Yes
+            <input name="DirectorMedicalLetterRecd" type="radio" checked value="N">
+
+            No <br>
+            <label>Accept/decline sent on</label>
+            <input type="text" name="AcceptDeclineLetterSentOn" id="AcceptDeclineLetterSentOn" value="26 Jan 2009" class="datepicker" size="12" title="Enter date">
+          </td>
+        </tr>
+      </table>
+    </form>
+  </div>
+
+</div>
+<!-- 11ms -->
+</body>
+</html>
\ No newline at end of file
diff --git a/ui/ui.datepicker.js b/ui/ui.datepicker.js
index 831cabc9171b940125b18de3d4ab792150a0c5a6..c7705949d3d0281f32174066234461a105fb70e1 100644 (file)
--- a/ui/ui.datepicker.js
+++ b/ui/ui.datepicker.js
@@ -617,14 +617,14 @@ $.extend(Datepicker.prototype, {
                var dpHeight = inst.dpDiv.outerHeight();
                var inputWidth = inst.input ? inst.input.outerWidth() : 0;
                var inputHeight = inst.input ? inst.input.outerHeight() : 0;
-               var viewWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-               var viewHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+               var viewWidth = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) + $(document).scrollLeft();
+               var viewHeight = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) + $(document).scrollTop();
 
                offset.left -= (this._get(inst, 'isRTL') ? (dpWidth - inputWidth) : 0);
                offset.left -= (isFixed && offset.left == inst.input.offset().left) ? $(document).scrollLeft() : 0;
                offset.top -= (isFixed && offset.top == (inst.input.offset().top + inputHeight)) ? $(document).scrollTop() : 0;
 
-               // now check if datepicker is showing outside window viewpoint - move to a better place if so.
+               // now check if datepicker is showing outside window viewport - move to a better place if so.
                offset.left -= (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ? Math.abs(offset.left + dpWidth - viewWidth) : 0;
                offset.top -= (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ? Math.abs(offset.top + dpHeight + inputHeight*2 - viewHeight) : 0;
 
The official jQuery user interface library: https://github.com/jquery/jquery-ui