Correcting AJAX Calendar Extender Popup Calendar Position

Recently I encountered a positioning error in AJAX calendar extender. When I use the calendar extender inside of other container controls the popup calendar started appearing few inches above the button. You will be able to get an idea of the problem by the following image.

Since I couldn’t get it fixed by changing the properties I thought to find a solution for this.

One way to correct this is by applying a CSS style sheet to change the calendar positioning manually. I found this method while searching the web. This way since you need to enter the location of the calendar you need to try several times to get the correct positioning. If you are using this method simply place the following CSS style in your page and apply the style as shown. Remember you need to change the value to suit your form.

1. <style type="text/css">
2.     .fromDtPos
3.     {
4.         left: 245px !important;
5.     }
6. </style>

Apply the style to your calendar extender.

1. <cc2:calendarextender id="calExpiry" runat="server" targetcontrolid="txtExpiry"
2.     format="dd MMM yyyy" popupbuttonid="imgExpiry" enabled="True" cssclass="ajax__calendar fromDtPos">
3. </cc2:calendarextender>

My preferred way to do this is by using the JavaScript that I wrote below. Since you do not need to enter the position manually this will be easier. Also this code will work irrespective of the number of parent containers it is having above of the control.

Insert the below JavaScript into your page.

1. <script type="text/javascript" language="javascript">
2.     function showCalendar(sender, args) {
3.         var processingControl = $get(sender._button.id); // Getting the control which triggered the calendar.
4.         sender._popupDiv.parentElement.style.top = processingControl.offsetTop + processingControl.height + ‘px’;
5.         sender._popupDiv.parentElement.style.left = processingControl.offsetLeft + ‘px’;
6.  
7.         var positionTop = processingControl.height + processingControl.offsetTop;
8.         var positionLeft = processingControl.offsetLeft;
9.         var processingParent;
10.         var continueLoop = false;
11.  
12.         do {
13.             // If the control has parents continue loop.
14.             if (processingControl.offsetParent != null) {
15.                 processingParent = processingControl.offsetParent;
16.                 positionTop += processingParent.offsetTop;
17.                 positionLeft += processingParent.offsetLeft;
18.                 processingControl = processingParent;
19.                 continueLoop = true;
20.             }
21.             else {
22.                 continueLoop = false;
23.             }
24.         } while (continueLoop);
25.  
26.         sender._popupDiv.parentElement.style.top = positionTop + ‘px’;
27.         sender._popupDiv.parentElement.style.left = positionLeft + ‘px’;
28.     }
29. </script>

Then call the function showCalendar on onClientShown event of the calendar extender as seen below.

1. <cc2:calendarextender id="calExpiry" runat="server" targetcontrolid="txtExpiry"
2.     format="dd MMM yyyy" popupbuttonid="imgExpiry" enabled="True" onclientshown="showCalendar">
3. </cc2:calendarextender>

Both of the above methods will correct the appearance of the popup calendar of the AJAX Calendar Extender as seen below.

Advertisement

Reloading a Page using JavaScript

Ways to reload a page using Java script.

When doing web development if you need to reload / refresh a page using Java script, you can use one of the following three methods.

1. <script language="javascript" type="text/javascript">
2.     function ReloadMethod1() {
3.         window.location.href = window.location.href;
4.     }
5.     function ReloadMethod2() {
6.         window.location.reload();
7.     }
8.     function ReloadMethod3() {
9.         history.go(0);
10.     }
11. </script>
12. <input type="button" value="Reload" onclick="window.location.href=window.location.href" />
13. <%–Calling Javascript function on button click.–%>
14. <input type="button" value="Reload" onclick="ReloadMethod2()" />
15. <input type="button" value="Reload" onclick="window.location.reload()" />
16.  
17. <!– ASP Buttons –>
18. <asp:Button ID="Button1" runat="server" Text="Reload" OnClientClick="window.location.href=window.location.href" />
19. <%–Calling Javascript function on button click.–%>
20. <asp:Button ID="Button2" runat="server" Text="Reload" OnClientClick="ReloadMethod2()" />
21. <asp:Button ID="Button3" runat="server" Text="Reload" OnClientClick="ReloadMethod3()" />

Expandable Regions using HTML

You can create nice looking expandable regions using just HTML and some Java scripting. This is specially useful if you are to create a site without any major programming languages. Today I thought to share an expandable region that I created to give you an idea to get it done.

When the code works it will look like the following.

You should be excited by now, to get it working you need the following code inserted into a body section of a HTML file. Please note I have added the CSS also in to the page body, but if you have a separate CSS file please separate the CSS .

1. <style type="text/css">
2.     a.headingStyle
3.     {
4.         text-decoration: none;
5.         margin-left: 0.5em;            
6.     }
7.     a.headingStyle:hover
8.     {
9.         text-decoration: underline;
10.     }
11.     a.headingStyle span.charStyle
12.     {
13.         font-family: monospace;
14.         font-weight: normal;
15.     }
16.     .contentStyle
17.     {
18.         display: none;
19.         margin-left: 1.5em;
20.         margin-right: 0.5em;
21.         margin-bottom: 0.5em;
22.         border-width: thin;
23.         border-style: outset;
24.         background-color:#D2E3FF;
25.     }
26.     .upArrowStyle
27.     {
28.         height:32px;
29.         background-image: url('Up_Arrow_32x32.png');
30.         background-repeat:no-repeat;
31.     }
32.     .downArrowStyle
33.     {
34.         height:32px;
35.         background-image: url('Down_Arrow_32x32.png');
36.         background-repeat:no-repeat;
37.     }
38. </style>
39.  
40. <script type="text/javascript">
41.     function display(item) {
42.         if (document.getElementById) {
43.             // Retrieving the first child item.
44.             var firstChildItem = item.firstChild;
45.             // Getting the correct child item with inner HTML text.
46.             firstChildItem = item.firstChild.innerHTML ? item.firstChild : item.firstChild.nextSibling;
47.             // Toggling the + or – according to the state after click.
48.             firstChildItem.innerHTML = firstChildItem.innerHTML == '+' ? '-' : '+';
49.             // Toggling the display image after click.
50.             item.className = item.className == "downArrowStyle" ? "upArrowStyle" : "downArrowStyle";
51.             // Get the sub item to toggle visibility.
52.            var nextSubItem = item.parentNode.nextSibling.style ? item.parentNode.nextSibling : item.parentNode.nextSibling.nextSibling;
53.             // Toggle visibility of the sub item.
54.             nextSubItem.style.display = nextSubItem.style.display == 'block' ? 'none' : 'block';
55.         }
56.     }
57.  
58.     // Displaying everything if item could not be found.
59.     if (!document.getElementById)
60.         document.write('<style type="text/css"><!–\n .dspcont{display:block;}\n //–></style>');
61. </script>
62.  
63. <!– If Java scripts are blocked, display everything expanded. –>
64. <noscript>
65.     <style type="text/css">
66.         .dspcont
67.         {
68.             display: block;
69.         }
70.     </style>
71. </noscript>
72. <div>
73.     <!– If + or – is required to be displayed besides the image simply change display:none; to display:block; in following sections. –>
74.     <h1>
75.         <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
76.             <span style="display:none;">+</span><span style="margin-left:34px;">Main Title 1</span>
77.         </a>
78.     </h1>
79.     <div class="contentStyle">Title 1 content goes here.</div>
80.     <h1>
81.         <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
82.             <span style="display:none;">+</span><span style="margin-left:34px;">Main Title 2</span>
83.         </a>
84.     </h1>
85.     <div class="contentStyle">
86.         <h2>
87.             <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
88.             <span style="display:none;">+</span><span style="margin-left:34px;">Sub Title 1</span></a></h2>
89.         <div class="contentStyle">
90.             Sub title 1 content goes here.</div>
91.         <h2>
92.             <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
93.             <span style="display:none;">+</span><span style="margin-left:34px;">Sub Title 2</span></a></h2>
94.         <div class="contentStyle">
95.             Sub title 2 content goes here.</div>
96.     </div>
97.     <h1>
98.         <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
99.         <span style="display:none;">+</span><span style="margin-left:34px;">Main Title 3</span></a></h1>
100.     <div class="contentStyle">Title 3 content goes here.</div>
101. </div>

Remember to correct the image URLs, otherwise they will go missing.

I need to thank M. C. Matti for his great article which gave me this idea. Also you can use this method to create expandable regions in other sites which use different technologies. For example if you need to add this to a SharePoint site, just use a Content Editor web part and paste the code using Source Editor in web part properties.

Hope this helps.

JavaScript Performance Testing

Recently I found a site which enable us to compare the performance of different JavaScripts that we write. This makes us choose the best code when we have several ways of doing the same thing because we can compare the performance of the script that we wrote easily.

If you are interested, go to http://jsperf.com/ to start testing.

You need to just put in “Presentation code HTML” and the required JavaScripts as test cases. Then after saving you can run the tests to check for performance.

Another feature of this site is that you can share your tests with others since you can access the tests using the shown public URL.