Actual issue is I have three anchors which is for time in and time out and for menu when page load first time all works fine but when I click on time in or time out button then menu button stops working . with out update panel all thing works fine but only time in and out button load page on click only I place update panel only for time in and out to avoid page load
1-menu button shows menu item on click 2-Time in and out buttons mark attendance respectively
Protected Sub Anchortimein_ServerClick(sender As Object, e As System.EventArgs) Handles Anchortimein.ServerClick
Some code here
End Sub
Protected Sub AnchortimeOut_ServerClick(sender As Object, e As System.EventArgs) Handles AnchortimeOut.ServerClick
Some code here End Sub
Public Sub AttendanceValidationMessage(strmsg As String, msg As String)
Dim strMessage As String = strmsg
Dim strScript As String = "alert('" & strMessage & " " & msg & "'); "
If (Not Me.Page.ClientScript.IsStartupScriptRegistered("clientScript")) Then
ScriptManager.RegisterClientScriptBlock(Me.Page, Me.GetType, "clientScript", strScript, True)
End If
End Sub
// Open/hide menu
$('#open-menu').on('touchend click', function(event)
{
event.preventDefault();
// Check if valid touch-click event
if (!$.template.processTouchClick(this, event))
{
return;
}
// Close shortcuts
bod.removeClass('shortcuts-open');
// If in wide screen mode, show/hide side menu, else open/close drop-down menu
bod.toggleClass($.template.mediaQuery.is('desktop') || $.template.mediaQuery.is('tablet-landscape') ? 'menu-hidden' : 'menu-open');
// Refresh drop-down menu size if needed
watchMenuSize();
});
// Close drop-down menu
bod.on('click', function(event)
{
// Check if open, and if the click is not on the menu or on the open button
if (bod.hasClass('menu-open') && !$(event.target).closest('#open-menu, #menu').length)
{
bod.removeClass('menu-open');
}
});Css for ul li
ul.topmainmenu {
position: relative;
width: 99.4%;
height: 38px;
z-index: 9;
margin: 4.5px 0;
}
ul.topmainmenu > li {
float: right;
list-style: none;
}
CSS for Menu
#open-menu {
top: 0;
right: 0;
padding: 10px 8px 11px;
}
#title-bar + #open-menu {
top: 35px;
}
body.reversed #open-menu {
right: auto;
left: 0;
}
#open-menu > span {
display: block;
width: 20px;
height: 17px;
border: 0;
padding: 0;
overflow: hidden;
background: url(../img/standard/sprites.png) no-repeat 0 0;
text-indent: 100px;
white-space: nowrap;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
body.reversed #open-menu > span {
background-position: 0 -17px;
}
#open-menu:hover > span {
background-position: -20px 0;
}
body.reversed #open-menu:hover > span {
background-position: -20px -17px;
}
body.menu-hidden #open-menu > span {
background-position: 0 -17px;
}
body.menu-hidden.reversed #open-menu > span {
background-position: 0 0;
}
body.menu-hidden #open-menu:hover > span {
background-position: -20px -17px;
}
body.menu-hidden.reversed #open-menu:hover > span {
background-position: -20px 0;
}
/* Menu opener icon */
#open-menu {
position: absolute;
z-index: 4;
top: 5px;
right: 8px;
-webkit-tap-highlight-color: transparent;
}
body.reversed #open-menu {
left: 8px;
right: auto;
}
.fixed-title-bar > #open-menu {
position: fixed;
}
#open-menu > span {
padding: 0 8px 0 30px;
background: url(../img/menu.png) no-repeat 7px center;
font-size: 16px;
height: 27px;
line-height: 27px;
}
#open-menu > span,
#open-shortcuts {
display: block;
border: 1px solid #020203;
color: white;
-webkit-text-shadow: 0 -1px 0 black;
-moz-text-shadow: 0 -1px 0 black;
text-shadow: 0 -1px 0 black;
background-color: #454545;
background-color: rgba(255, 255, 255, 0.3);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
-webkit-background-clip: padding-box;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
CSS for InOut
.open-menu23 {
z-index: 4;
top: 65px;
right: 43.3%;
-webkit-tap-highlight-color: transparent;
}
body.reversed .open-menu23 {
left: 8px;
right: auto;
}
.fixed-title-bar > .open-menu23 {
position: static;
}
.open-menu23 > span {
padding: 0 8px 0 30px;
background: url(../img/inout5.png) no-repeat 7px center;
font-size: 16px;
height: 27px;
line-height: 27px;
}
.open-menu23 > span {
display: block;
border: 1px solid #020203;
color: white;
-webkit-text-shadow: 0 -1px 0 black;
-moz-text-shadow: 0 -1px 0 black;
text-shadow: 0 -1px 0 black;
background-color: #454545;
background-color: rgba(255, 255, 255, 0.3);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
-webkit-background-clip: padding-box;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width:56px;
}
.open-menu24 {
z-index: 6;
top: 65px;
right: 50.8%;
-webkit-tap-highlight-color: transparent;
}
body.reversed .open-menu24 {
left: 8px;
right: auto;
}
.fixed-title-bar > .open-menu24 {
/*position: fixed;*/
position: static !important;
}
.open-menu24 > span {
padding: 0 8px 0 30px;
background: url(../img/inout4.png) no-repeat 7px center;
font-size: 16px;
height: 27px;
line-height: 27px;
}
.open-menu24 > span {
display: block;
border: 1px solid #020203;
color: white;
-webkit-text-shadow: 0 -1px 0 black;
-moz-text-shadow: 0 -1px 0 black;
text-shadow: 0 -1px 0 black;
background-color: #454545;
background-color: rgba(255, 255, 255, 0.3);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
-webkit-background-clip: padding-box;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width:55px;
} <asp:UpdatePanel ID="UP" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<header role="banner" id="title-bar" style="padding:0px;">
<h2></h2>
<ul class="topmainmenu">
<li style="margin: 0px -1.2px;"><a href="#" id="open-menu" ><span>Menu</span></a> </li>
<%If AccountPagePermissionBLL.IsPageHasPermissionOf(15, 1) Then%>
<li style="margin: 0px -1.2px;"><a href="../AccountAdmin/AdminMain.aspx" id="open-menu4"><span><asp:Label ID="lbladmin" runat="server" ForeColor="White" Font-Size="Smaller" Text="Admin Options" ></asp:Label></span></a> </li>
<%End If%>
<%If Session("Role") = "Administrator" Then%>
<li style="margin: 0px -1.0px;"><a href="../Employee/EmployeeProfile.aspx" id="open-menu22"><span><asp:Label ID="nametop" runat="server" ForeColor="White" Font-Size="Smaller" Text="<%$ Resources:TimeLive.Web, LoggedIn As:%>" ></asp:Label></span></a> </li>
<%Else %>
<%If AccountPagePermissionBLL.IsPageHasPermissionOf(15, 1) Then%>
<li style="margin: 0px -1.0px;"><a style="right:210px;" href="../Employee/EmployeeProfile.aspx" id="open-menu2"><span><asp:Label ID="nametop2" runat="server" ForeColor="White" Font-Size="Smaller" Text="<%$ Resources:TimeLive.Web, LoggedIn As:%>" ></asp:Label></span></a> </li>
<%Else%>
<li style="margin: 0px -1.0px;"><a style="right:90px;" href="../Employee/EmployeeProfile.aspx" id="open-menu21"><span><asp:Label ID="nametop3" runat="server" ForeColor="White" Font-Size="Smaller" Text="<%$ Resources:TimeLive.Web, LoggedIn As:%>" ></asp:Label></span></a> </li>
<%End If%>
<%End If%>
<li style="margin: 0px -1.2px;"><a href="#" runat="server" id="AnchortimeOut" class="open-menu23"><span><asp:label ID="lblTimeOut" runat="server" ForeColor="White" Font-Size="Smaller" Text="<%$ Resources:TimeLive.Web, Time Out%>" ></asp:label></span></a></li>
<li style="margin: 0px -1.2px;"><a href="../Employee/Default.aspx" runat="server" id="Anchortimein" class="open-menu24"><span><asp:label ID="lblTimeIn" runat="server" ForeColor="White" Font-Size="Smaller" Text="<%$ Resources:TimeLive.Web, Time In%>" ></asp:label></span></a></li>
</ul>
</header>
</ContentTemplate>
</asp:UpdatePanel> Resolve by Putting update panels inside the li