This is my aspx code
<div id="tabs-1">
<table id="BookingTable" runat="server" class="tableResultClass">
<tr>
<th>ID</th>
<th>PlanTime</th>
</tr>
</table>
</div>
<div id="tabs-2">
<div id="circleG" style="margin-left: auto; margin-right: auto; padding-top: 50px; padding-bottom: 50px;">
<div id="circleG_1" class="circleG"></div>
<div id="circleG_2" class="circleG"></div>
<div id="circleG_3" class="circleG"></div>
</div>
</div>
<div id="tabs-3">
<p>
Date:
<input type="text" id="datepicker" runat="server">
</p>
<asp:ScriptManager ID="ScriptManager" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Button ID="BookingForDate" runat="server" OnClick="BookingForDate_Click" Text="Search" />
<span style="color: red" id="errorDateMessage" runat="server"></span>
<div runat="server" id="circleG2" style="margin-left: auto; margin-right: auto; margin-left: 400px; padding-bottom: 60px;">
<div id="circleG_1" class="circleG"></div>
<div id="circleG_2" class="circleG"></div>
<div id="circleG_3" class="circleG"></div>
</div>
<table id="DateBookingTable" runat="server" class="tableResultClass">
<tr>
<th>ID</th>
<th>PlanTime</th>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
It is simple code that have three div as tabs.
I want to know which tab is selected in a specific moment. how please?
I think it is something about session but I don't know what it is
You can do the following:-
1) Declare a global variable.
2) Attach a onClick event for each div. Whenever this event is fired, set this global variable with the id of corresponding div.
3) Access this global variable in the required function.
Related
When I open my aspx page I have 3 images horizontally side by side on desktop. But I want to open my page in mobile with these images aligned in center vertically. The content on the page should remain same except the images.
Aspx page
<div class="row enrollmentStep">
<div class="col-xs-12 step-container">
<!-- Top Container -->
<div class="row inner-step-container">
<div class="col-xs-12 top-spacing">
<div align="center" class="row">
<div id="pageDescription" class="col-xs-12" runat="server"></div>
</div>
<table align="center" border="0" cellpadding="3" cellspacing="0" width="100%">
<tr>
<div align="center">
<asp:Image ID="qrCodeImage" runat="server" Height="200px" Width="200px" Visible="true" />
</div>
<div align="center">
<a id="secret" runat="server" class="txtLabel" visible="true" target="_blank"></a>
<td>
<div align="center">
<label id="siLabel" runat="server" for="siBox" class="txtLabel"></label>
</div>
</td>
</div>
</tr>
</table>
<div class="imgrow" align="center" visible="true">
<div class="top-spacing bottom-spacing" style="float: left; margin-left: 20%; margin-bottom: 0.5em; overflow:auto">
<a id="iTunesLink" runat="server" class="txtLabel" visible="true" target="_blank">
<asp:Image ID="itunes" Height="64px" Width="128px" runat="server" Visible="true" />
</a>
</div>
<div class="top-spacing bottom-spacing" style="float: left; align:center; margin-left: 20%; margin-bottom: 0.5em; overflow:auto">
<a id="play_storeLink" runat="server" class="txtLabel" visible="true" target="_blank">
<asp:Image ID="play_store" Height="64px" Width="128px" runat="server" Visible="true" />
</a>
</div>
<div class="top-spacing bottom-spacing" style="float: left; margin-left: 20%; margin-bottom: 0.5em; overflow:auto">
<a id="windows_storeLink" runat="server" class="txtLabel" visible="true" target="_blank">
<asp:Image ID="windows_store" Height="64px" Width="128px" runat="server" Visible="true" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
I have a repeater which has two columns one column contains label and another has textbox.
on enter data in the text box it should show as label and another textbox in the same row should appear.i am getting a text box but not able to do as said above.Please help me.
<asp:Repeater ID="RepDetails" runat="server" OnItemDataBound="RepDetails_ItemDataBound" >
<HeaderTemplate>
<table style="border: 0px solid #df5015; width: 100%">
<tr style="background-color: White; color: White">
<td colspan="2">
<b>Atrributes</b>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr style="background-color: #EBEFF0; height: 50px;" >
<td >
<table style="background-color: #EBEFF0; border: 0px dotted #df5015; width: 100%; margin-bottom: 30px;">
<tr style="height: 20px;">
<td style="width: 30%">
<asp:Label ID="lblAttributeName" runat="server" Text='<%#Eval("AttirbuteName") %>' Font-Bold="true" /></td>
<td id="textboxId" style="width: 70%">
<asp:TextBox ID="txtAttributeNameDef" runat="server" ToolTip='<%#Eval("AttirbuteDefination") %>' Width="100%"></asp:TextBox>
</td>
</tr>
</table>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
You can do using repeater like this way DEMO
<div class="detailBox">
<div class="titleBox">
<label>Comment Box</label>
<button type="button" class="close" aria-hidden="true">×</button>
</div>
<div class="commentBox">
<p class="taskDescription">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="actionBox">
<asp:Repeater ID="RepDetails" runat="server" >
<ItemTemplate>
<ul class="commentList" id="listchat">
<li>
<div class="commenterImage">
<img src="http://lorempixel.com/50/50/people/6" />
</div>
<div class="commentText">
<p class="">Hello this is a test comment.</p> <span class="date sub-text">on March 5th, 2014</span>
</div>
</li>
</ul>
</ItemTemplate>
</asp:Repeater>
<div class="form-inline" role="form">
<div class="form-group">
<input class="form-control" type="text" id="txtcomment" placeholder="Your comments" />
</div>
<div class="form-group">
<button class="btn btn-default" id="postcomment">Add</button>
</div>
</div>
</div>
</div>
I am using a Telerik RadListView (the elements are the same in a standard ASP.NET ListView) to show some data from a database. I want to show them in a tiled layout, but it loads the items from left to right.
For example - if I have 4 items in a row, the 5th item is shown on the left side. I tried to add dir="rtl" to all divs but that doesn't work.
How can I make this load items from right to left?
Here is my code:
<telerik:RadListView ID="RadListView1" runat="server" AllowPaging="True" AllowCustomSorting="True" AllowMultiFieldSorting="True" AllowNaturalSort="True" DataKeyNames="product_key" DataSourceID="DS_pure_product" PageSize="12">
<LayoutTemplate>
<div class="RadListView RadListViewFloated RadListView_Default" dir="rtl">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<telerik:RadDataPager ID="RadDataPager1" runat="server" SEOPagingQueryPageKey="CurrentPageKey" PageSize="12">
<Fields>
<telerik:RadDataPagerButtonField FieldType="FirstPrev" LastButtonImageUrl="" NextButtonImageUrl="" PrevButtonImageUrl="" />
<telerik:RadDataPagerButtonField FieldType="Numeric" LastButtonImageUrl="" NextButtonImageUrl="" PrevButtonImageUrl="" />
<telerik:RadDataPagerButtonField FieldType="NextLast" LastButtonImageUrl="" NextButtonImageUrl="" PrevButtonImageUrl="" />
<%--<telerik:RadDataPagerGoToPageField />
<telerik:RadDataPagerNumericPageSizeField />--%>
</Fields>
</telerik:RadDataPager>
</div>
<div class="col-md-3">
<table>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<div class="rlvFloated">
<div class="container-fluid" dir="rtl" style="text-align:right;">
<div class="row">
<div id="itemPlaceholder" runat="server">
</div>
</div>
</div>
</div>
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="rlvI col-md-3 lv_items">
<asp:Button ID="SelectButton" runat="server" CausesValidation="False" CommandName="Select" CssClass="rlvBSel" Text=" " ToolTip="Select" />
<table class="tbl_product">
<tr>
<td>
<asp:Image ID="Image2" CssClass="img-responsive img_product" runat="server" ImageUrl='<%# Eval("product_img") %>' />
</td>
</tr>
<tr>
<td>
<asp:Image ID="Image1" runat="server" CssClass="img_product_logo" ImageUrl='<%# Eval("product_brand") %>' />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("product_name") %>' />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("product_price") %>' />
</td>
</tr>
</table>
</div>
</ItemTemplate>
<EmptyDataTemplate>
<div class="RadListView RadListView_Default">
<div class="rlvEmpty">
There are no items to be displayed.</div>
</div>
</EmptyDataTemplate>
</telerik:RadListView>
After some conversation in the comments, it sounds like what you want is to right-align your content. In that case, float: right is what you're looking for.
The key is to have an overall container that will hold all of your data. Then, have another container for each row. This inner container is what you will float to the right. By not giving the inner container a width, it will grow to be as big as its children. If the inner container's width is less than that of its parent, it will show as aligning to the right side.
Below is an example of that.
.body {
height: 100px;
width: 500px;
background-color: red;
}
.child-container {
height: 100%;
float: right;
}
.child-1 {
height: 50%;
width: 100px;
float: left;
background-color: green;
}
.child-2 {
height: 50%;
width: 100px;
float: left;
background-color: orange;
}
.child-3 {
height: 50%;
width: 100px;
float: left;
background-color: blue;
}
<div class="body">
<div class="child-container">
<div class="child-1">
</div>
<div class="child-2">
</div>
<div class="child-3">
</div>
</div>
</div>
I have three taps. with drop down list as this:
I want that when I change the Drop down list, I want to do something in the server side and then update the first two tabs. I can do that.
my problem
If I were in the second tab and I changed the drop down, the page is loaded and set to the first tap.
I tried to
I tried to surrown the table in the second tab with update panel like this:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<table id="BookingTableTomorrow" runat="server" class="tableResultClass">
<tr>
<th>ID</th>
<th>PlanTime</th>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
see the bellow all code, and note that I have another update panel in the third tab, and that third tab is working perfectly
<div id="tabs">
<ul>
<li>Today</li>
<li>Tomorrow</li>
<li>Any Date</li>
<label style="float: right">
<asp:DropDownList AutoPostBack="true" runat="server" ID="mealTimeSelector" OnSelectedIndexChanged="TodayTab_Click">
<asp:ListItem Value="1">Breakfast</asp:ListItem>
<asp:ListItem Value="2">Lunch</asp:ListItem>
<asp:ListItem Value="3">Dinner</asp:ListItem>
</asp:DropDownList>
</label>
</ul>
<div id="tabs-1">
<table id="BookingTable" runat="server" class="tableResultClass">
<tr>
<th>ID</th>
<th>PlanTime</th>
</tr>
</table>
</div>
<div id="tabs-2">
<div id="circleG" style="margin-left: auto; margin-right: auto; padding-top: 50px; padding-bottom: 50px;">
<div id="circleG_1" class="circleG"></div>
<div id="circleG_2" class="circleG"></div>
<div id="circleG_3" class="circleG"></div>
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<table id="BookingTableTomorrow" runat="server" class="tableResultClass">
<tr>
<th>ID</th>
<th>PlanTime</th>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="tabs-3">
<p>
Date:
<input type="text" id="datepicker" runat="server">
</p>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Button ID="BookingForDate" runat="server" OnClick="BookingForDate_Click" Text="Search" />
<span style="color: red" id="errorDateMessage" runat="server"></span>
<div runat="server" id="circleG2" style="margin-left: auto; margin-right: auto; margin-left: 400px; padding-bottom: 60px;">
<div id="circleG_1" class="circleG"></div>
<div id="circleG_2" class="circleG"></div>
<div id="circleG_3" class="circleG"></div>
</div>
<table id="DateBookingTable" runat="server" class="tableResultClass">
<tr>
<th>ID</th>
<th>PlanTime</th>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
You can set a the dropdownlist as asynchronous postback trigger...
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Dropdownlist1" />
</Triggers>
</asp:UpdatePanel>
I have a one dropdown box in webpage that is with autopostback = true and one modal popup extender in same webp age.. When i changed the selection and then open modal popup and enter value then close the modal popup.. It will postback and entered value does not display when open modal popup again....How i prevent postback when close modalpopup and getting same value again...
Please help for the same...My code is given below:
<asp:DropDownList runat="server" ID="ddlDBANameFormField" AutoPostBack="true" >
<asp:ListItem Selected="True" Text="Select"></asp:ListItem>
<asp:ListItem Text="One"></asp:ListItem>
<asp:ListItem Text="Two"></asp:ListItem>
<asp:ListItem Text="Three"></asp:ListItem>
</asp:DropDownList>
<div id="tempHotelStatistic">
<div id="MainHotelStatistic" style="width: 998px;" runat="server">
<div style="width: 330px; height: 30px; float: left;" id="RoomsRentedAfterAudit"
runat="server">
<div style="width: 150px; float: left;">
<asp:Label ID="lblRoomsRentedAfterAudit" runat="server" Text="After Audit Rooms:"
Width="175px" CssClass="label"></asp:Label>
</div>
<asp:UpdatePanel UpdateMode="Conditional" runat="server" ID="UpdatePanel3">
<ContentTemplate>
<div style="width: 150px; float: left;">
<table>
<tr>
<td>
<asp:TextBox ID="txtRoomsRentedAfterAudit" runat="server" CssClass="textboxpopup"></asp:TextBox>
<cc1:ModalPopupExtender ID="ModalPopupExtender4" OkControlID="ModalOKButtonRoomsRented"
runat="server" TargetControlID="btnpopupRoomsRented" CancelControlID="btnpopupCancelRoomsRented"
PopupControlID="PanelRoomRented" Drag="true" PopupDragHandleControlID="PopupHeader1" >
</cc1:ModalPopupExtender>
</td>
<td>
<asp:Button ID="btnpopupRoomsRented" runat="server" Text="...." CssClass="buttonpopup"
Style="color: #333333; margin-left: 0; margin-right: 0; width: 35px;" />
</td>
</tr>
</table>
</div>
<div id="PanelRoomRented" style="display: none;" class="popupConfirmation">
<div class="popup_Container">
<div class="popup_Titlebar" id="Div3">
<div class="TitlebarLeft">
Reason :
</div>
<div>
<asp:Button ID="btnpopupCancelRoomsRented" class="TitlebarRight " runat="server" />
</div>
</div>
<div>
<table>
<tr>
<td valign="top" height="5px">
</td>
</tr>
<tr>
<td valign="bottom">
<textarea id="txtRoomsRentedAfterAuditReason" runat="server" rows="20" cols="20"
style="width: 270px; height: 100px;"></textarea>
</td>
</tr>
<tr>
<td valign="top" height="5px">
</td>
</tr>
</table>
</div>
</div>
<div class="popup_Container" align="right">
<asp:Button ID="ModalOKButtonRoomsRented" runat="server" Width="60px" Text="OK" CssClass="buttonForPopUp" />
</div>
</div>
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender111" runat="server" FilterType="Custom,Numbers"
ValidChars="-" FilterMode="ValidChars" TargetControlID="txtRoomsRentedAfterAudit">
</cc1:FilteredTextBoxExtender>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnpopupRoomsRented" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
Solved the problem by applying trigger for the update panel , in which modal popup resides...
<Triggers>
<asp:PostBackTrigger ControlID="ddlDBANameFormField" />
</Triggers>