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.

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.

Disabling Browser Back Button after Logout

Recently in an application we developed there was a requirement to stop the browser back button after user logs out of the application.

The reason behind this was to stop the security risk of another user without proper permissions peeking into the earlier users screens. If you notice in many applications if the browser back is not properly handled then after the user is logged out you can re visit the site by just pressing the browser back button. This happens because the browser shows the cached page when the back is pressed. Even if you have server side code to check for the user they will not fire since the page will load from cache.

With the limited time I found a genius idea to handle this in the internet. What this javascript does is it will always try to put the user back to the last page in the history. For example, I am having a login page and a default page which I am taking a user after he logs in. You need to place the following javascript in the default page to make the above happen.

1. <script type="text/javascript" language="JavaScript">
2.     window.history.forward(1);
3. </script>

Then once a user logs out from the system and if presses the back button of the browser, when the default page loads it will put the user again to login (history forward) page which is the login page. Ultimately user needs to login again to go back to the site.

MaxLength property not Working in TextBox

If you are involved in coding using .Net sooner or later you will notice that when the TextMode of a TextBox is changed to MultiLine the MaxLength property will stop working. What this means is in the textbox users will be able to type as many character as they want.

When searching the web for a fix for this I found several ideas to solve this. Following is the code which I modified for my requirement. Hope this helps.

ASPX

1. <html xmlns="http://www.w3.org/1999/xhtml">
2. <head runat="server">
3. <script type="text/javascript">
4.     function RestrictLength(textBox) {
5.         /* Get the Max Length attribute's value. */
6.         var allowedLength = textBox.getAttribute('MaximumLength');
7.         /* Check for the number of characters typed in by the user. */
8.         if (textBox.value.length > allowedLength) {
9.             /* If it is more than the allowed limit remove the additional text. */
10.             textBox.value = textBox.value.substring(0, allowedLength);
11.             /*  Show a message to user with the tooltip used for the textbox. */
12.             alert("Maximum characters allowed for '" + textBox.title +"' is " + allowedLength + ".");
13.         }
14.     }
15. </script>
16.     <title></title>
17. </head>
18. <body>
19.     <form id="form1" runat="server" style="vertical-align:top;">
20.     <!-- I am binding my java script to the onkeyup event of the textbox. So each time a key
21.     is pressed it will fire my javascript. -->
22.     Address <asp:TextBox ID="TextBox1" runat="server" MaxLength="10"
23.         onkeyup="RestrictLength(this);" Height="58px" TextMode="MultiLine"></asp:TextBox>
24.     </form>
25.     </body>
26. </html>
27. 
    

 

ASPX.CS

1. protected void Page_Load(object sender, EventArgs e)
2. {
3.     // Adding the attribute to the TextBox1.
4.     // Note that this is different to the MaxLength property.
5.     // Also this is not case sensitive.
6.     TextBox1.Attributes.Add("maximumlength", "10");
7.     // Adding a tooltip which is used in the message.
8.     TextBox1.ToolTip = "User Address";
9. }
10. 
    

The output will me something similar to the following.

Disabling Right Click

To disable right click context menu you can use one of the following methods.

Method 1 – Using attribute oncontextmenu attribute of the body tag.
By using this you can block the right click action and the context menu without using JavaScript.

1. <body oncontextmenu="return false">

This will be useless if you need to do some action on the click. In such a case use the Method 2.

 

Method 2 – Using JavaScript.

Place the following JavaScript and modify the script as you need. This will just show a popup window to the user saying that Right clicking is disabled.

1. <script language="javascript">
2.     document.onmousedown = disableRightClick;
3.     function disableRightClick(e) {
4.         if (event.button == 2) {
5.             alert("Right click is disabled.");
6.             return false;
7.         }
8.     }
9. </script>