I want to create a horizontal and vertical accordion in asp.net.
I have use Ajax Toolkit Accordion but cannot change its orientation:
-------
-------
------- created using ajax toolkit
-------
|||||
||||| looking for this
|||||
|||||
Here is an working example for ASP.NET (C#)
(USER CONTROL)
<head>
<title></title>
<link href="/UserControls/Accordion/Css/Accordion.css" rel="Stylesheet" type="text/css" media="all" />
</head>
<asp:Table ID="AccordionTable" runat="server" CellPadding="0" CellSpacing="0" Width="100%">
<asp:TableRow Width="100%" Height="200px">
<%-- SLIDER 1 --%>
<asp:TableCell CssClass="Border">
<asp:Panel ID="Slide1Panel" runat="server" Style="display:block">
<p>Panel 1 content.</p>
</asp:Panel>
</asp:TableCell>
<asp:TableCell CssClass="Border" Width="20px">
<asp:LinkButton ID="LinkButton_1" runat="server" Text="Header 1" CssClass="VerticalText" OnClick="Slide_Click" />
</asp:TableCell>
<%-- SLIDER 2 --%>
<asp:TableCell CssClass="Border">
<asp:Panel ID="Slide2Panel" runat="server" Style="display:none">
<p>Panel 2 content.</p>
</asp:Panel>
</asp:TableCell>
<asp:TableCell CssClass="Border" Width="20px">
<asp:LinkButton ID="LinkButton_2" runat="server" Text="Header 2" CssClass="VerticalText" OnClick="Slide_Click" />
</asp:TableCell>
<%-- SLIDER 3 --%>
<asp:TableCell CssClass="Border">
<asp:Panel ID="Slide3Panel" runat="server" Style="display:none">
<p>Panel 3 content.</p>
</asp:Panel>
</asp:TableCell>
<asp:TableCell CssClass="Border" Width="20px">
<asp:LinkButton ID="LinkButton_3" runat="server" Text="Header 3" CssClass="VerticalText" OnClick="Slide_Click" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
(CODE BEHIND)
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Slide_Click(object sender, EventArgs e)
{
ResetSlides();
LinkButton linkButton = (LinkButton)sender;
char[] separator = new char[] { '_' };
string[] trigger = linkButton.ID.Split(separator);
foreach (TableRow tblRow in AccordionTable.Rows)
{
int i = 1;
foreach (TableCell tblCell in tblRow.Cells)
{
if (i % 2 == 0)
{
// Dont touch our LinkButtons (!)
}
else
{
Panel slidePanel = (Panel)FindControl("Slide" + trigger[1] + "Panel");
if (slidePanel != null)
{
slidePanel.Style.Add("display", "block");
tblCell.Style.Remove("display");
tblCell.Style.Add("display", "block");
}
}
i++;
}
}
}
protected void ResetSlides()
{
foreach (TableRow tblRow in AccordionTable.Rows)
{
int i = 1;
foreach (TableCell tblCell in tblRow.Cells)
{
Panel slidePanel = (Panel)FindControl("Slide" + i + "Panel");
if (slidePanel != null)
{
tblCell.Style.Remove("display");
slidePanel.Style.Add("display", "none");
}
if (i % 2 == 0)
{
// Dont resize LinkButtons (!)
}
else
{
tblCell.Style.Remove("display");
tblCell.Style.Add("display", "none");
}
i++;
}
}
}
(STYLESHEET (BASIC))
.VerticalText
{
writing-mode: tb-lr;
filter: flipV flipH;
}
.Border
{
border: solid 1px Black;
}
Try the Horizontal Accordion, a jQuery plugin.
The two solutions didn't work for me, so came up with this instead. Works completely without any code behind it, so you can just load it up and rely on the user to refresh the page or you can do as I have done, put some updatepanels and update sections when you click on them.
HTML
<div class="Accordion-Container">
<div class="Accordion-Header" onclick="resizeAccordion(this);">Header One</div>
<div class="Accordion-Content">
<asp:UpdatePanel ID="upOne" runat="server">
<ContentTemplate>
Content One
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="Accordion-Header" onclick="resizeAccordion(this);">Header Two</div>
<div class="Accordion-Content acSelected">
<asp:UpdatePanel ID="upTwo" runat="server">
<ContentTemplate>
Content Two
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="Accordion-Header" onclick="resizeAccordion(this);">Header Three</div>
<div class="Accordion-Content">
<asp:UpdatePanel ID="upThree" runat="server">
<ContentTemplate>
Content Three
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="Accordion-Header" onclick="resizeAccordion(this);">Header Four</div>
<div class="Accordion-Content">
<asp:UpdatePanel ID="upFour" runat="server">
<ContentTemplate>
Content Four
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
CSS
html, * {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.Accordion-Container {
height: 300px;
width: 100%;
position: relative;
background-color: #006;
border: 4px solid #006;
border-radius: 10px;
}
.Accordion-Container div {
height: 100%;
display: inline-block;
}
.Accordion-Header {
background-color: #006;
color: #fff;
width: 30px;
line-height: 30px;
writing-mode: vertical-rl;
transform: rotateZ(180deg);
font-weight: bold;
font-size: 1.6em;
text-align: center;
cursor: pointer;
}
.Accordion-Header:hover {
background-image: radial-gradient(#009 10%, #006 80%);
}
.Accordion-Content {
width: 0px;
overflow: hidden;
background-color: #fff;
padding: 0;
transition: width 400ms ease-in-out;
}
.acSelected {
width: calc(100% - 148px); /* Need to adjust this to how many panels you have. 37px per panel */
padding: 2px 4px;
}
jQuery
function resizeAccordion(el) {
$('.acSelected').removeClass("acSelected");
$(el).next('.Accordion-Content').addClass('acSelected');
}
Related
I want to display a popup window when I select a specific value from drop-down list. But I don't have any idea to do it as I want. I little example would be enough for this. For the pop up I expect to use panel.
It's pretty simple.Use SelectedIndexChanged event of dropdownlist
.aspx
<asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server" Enabled="false" PopupControlID="PanelMonthly" TargetControlID="ddlfeegroup">
.cs
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
ModalPopupExtender2.Enabled = true;
ModalPopupExtender2.Show();//popup show
}
on close button event again make ModalPopupExtender2.Enabled = false; or onclienclick of close button disable it
You can find more information here
Hope this will work
<asp:HiddenField ID="hidForModel" runat="server" />
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged1"></asp:DropDownList>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<!-- ModalPopupExtender -->
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="hidForModel"
CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none">
<asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>
<!-- ModalPopupExtender -->
.cs code
protected void DropDownList1_SelectedIndexChanged1(object sender, EventArgs e)
{
mp1.Show();
}
css
<style type="text/css">
.modalBackground {
background-color: Black;
filter: alpha(opacity=90);
opacity: 0.8;
}
.modalPopup {
background-color: #FFFFFF;
border-width: 3px;
border-style: solid;
border-color: black;
padding-top: 10px;
padding-left: 10px;
width: 300px;
height: 140px;
}
</style>
I have AjaxControlToolkit popup Control in my asp.net project. While Clicking Submit, the popup window closed. but i have wrote code to validate form in C#,. How to stop the popup closeing.
Popup will be close button Clicking, otherwise popup not want to close.
STYLE
<style type="text/css">
.Background
{
background-color: Black;
filter: alpha(opacity=90);
opacity: 0.8;
}
.Popup
{
background-color: #FFFFFF;
border-width: 3px;
border-style: solid;
border-color: black;
padding-top: 10px;
padding-left: 10px;
width: 400px;
height: 350px;
}
.lbl
{
font-size: 16px;
font-style: italic;
font-weight: bold;
}
</style>
ASPX CODE -
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="Button1" runat="server" Text="Fill Form in Popup" />
<!-- ModalPopupExtender -->
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"
CancelControlID="btnClose" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" Style="display: none">
<table>
<tr>
<td>
<asp:Label runat="server" CssClass="lbl" Text="First Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtName" runat="server" Font-Size="14px"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" Click="btnSubmit_Click" />
<asp:Button ID="btnClose" runat="server" Text="Close" Click="btnClose_Click" /> <br />
<asp:Label ID="lblError" runat="server" />
</td>
</tr>
</table>
<br />
</asp:Panel>
<!-- ModalPopupExtender -->
</form>
C# -
protected void btnSubmit_Click(object sender, EventArgs e)
{
if (txtName.Text != "")
{
lblError.Text = "Error";
}
}
Output -
Dont Go for C# Try JavaScript Validation Like This
<script language="javascript" type="text/javascript">
function ValidateControls() {
if (document.getElementById('<%=txtName.ClientID %>').value == "") {
alert('ERROR');
return false;
}
else {
alert('OK');
return true;
}
}
</script>
//button code
<asp:Button ID="btnSubmit" runat="server" Text="Submit" Click="btnSubmit_Click" OnClientClick="return ValidateControls() />
i have an ajax modalpopupextender that opens a popup in the event that an error occurs.
This works fine in all browsers i have tested so far. But not in internet explorer 7 (it does in ie 8 and 9)
basically the height of the panel isnt being applied. on screen its about 20 pixels high. I have no idea why and have used various samples to no avail for hours now. The width os working fine.
Any help appreciated
Thanks
Damo
HTML
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="myapp.Logon" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="assets/css/Logon.css" rel="stylesheet" type="text/css" />
<link href="assets/css/modalBackground.css" rel="stylesheet" type="text/css" />
<title>myapp Login</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtenderError" runat="server"
TargetControlID="PanelLogonDetails">
</ajaxToolkit:RoundedCornersExtender>
<asp:Panel ID="PanelLogonDetails" runat="server" Width="350" Height="300" BorderColor="White" BackColor="White">
<div id="container">
<asp:Label ID="LabelLogo" runat="server" Text="Logo"></asp:Label>
<br />
<div id="inputcontainer">
<asp:Label ID="lblUsername" runat="server" Text="Username"></asp:Label>
<br />
<asp:TextBox CssClass="Textbox" ID="txtUserName" runat="server" Text="Administrator"
ToolTip="Username" Width="200px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorUsername" runat="server" ErrorMessage="You must enter a Username"
ControlToValidate="txtUserName" ForeColor="White"></asp:RequiredFieldValidator>
<br />
<asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
<br />
<!-- TextMode set to singleline for testing - set to Password for production-->
<asp:TextBox CssClass="Textbox" ID="txtPassword" runat="server" Text="!password£$nmj5%$-12"
ToolTip="Password" TextMode="SingleLine" Width="200px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorPassword" runat="server" ErrorMessage="You must enter a password"
ControlToValidate="txtPassword" ForeColor="White"></asp:RequiredFieldValidator>
<br />
<br />
<asp:Button CssClass="Button" ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />
<br />
<br />
</div>
</div>
</asp:Panel>
<!-- Error Modal Form -->
<asp:HiddenField ID="hideForModal" runat="server" />
<ajaxToolkit:ModalPopupExtender runat="server" ID="ErrorModal" BehaviorID="modalPopupExtenderError"
TargetControlID="hideForModal" PopupDragHandleControlID="popUpPaneError" PopupControlID="popUpPaneError"
OkControlID="btnOk" BackgroundCssClass="modalBackground" DropShadow="False" Drag="true">
</ajaxToolkit:ModalPopupExtender>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="popUpPaneError">
</ajaxToolkit:RoundedCornersExtender>
<asp:Panel ID="popUpPaneError" runat="server" CssClass="confirm-dialog" Width="485" Height="285" BackColor="White">
<div id="ErrorInputContainer">
<div>
<b>Error Code:</b></div>
<asp:Label ID="lblErrorCode" runat="server" Text="Error Code"></asp:Label>
<div>
<b>Error Message:</b></div>
<asp:Label ID="lblErrorMessage" runat="server" Text="Error Message"></asp:Label>
<div>
<b>Ex message:</b></div>
<asp:Label ID="lblExMessage" runat="server" Text="Ex Message"></asp:Label>
<br />
<asp:Button ID="btnOk" runat="server" Text="Ok" CssClass="Button" />
<br />
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="$find('modalPopupExtenderError').hide(); return false;" />
</div>
</asp:Panel>
<!-- End Error Modal Form -->
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Logon.css
#PanelLogonDetails
{
background-color:#FFFFFF;
width: 350px;
height: 300px;
position:absolute;
left: 40%;
top: 40%;
margin-left: -50px;
margin-top: -50px;
}
/* main div */
#container
{
padding-left:50px;
padding-top:20px;
}
#LabelLogo
{
font-family: Arial, Sans-Serif;
font-size: 20px;
font-weight: bold;
}
/* end main div */
/* inputcontainer (within the main div above) */
#inputcontainer {
position:absolute;
height:100px;
width:230px;
left: 35%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
/* End inputcntainer */
html,body {
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
line-height:1.5em;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003366', endColorstr='#FFFFFF'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#036), to(#FFF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #036, #FFF); /* for firefox 3.6+ */
height: 100%;
}
/* Error Modal */
#ErrorInputContainer
{
background-color:White;
background:white;
position:absolute;
height:260px;
width:460px;
top:20px;
left:20px;
color:Black;
}
#popUpPaneError
{
height:260px;
width:460px;
}
/* End Error Modal */
/* TextBox */
.Textbox
{
width:auto;
padding:2px;
color:Black;
text-align:left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
font-size: 10pt;
font-family: Arial;
}
.Textbox:focus
{
background-color:#FFCC33;
}
/* End TextBox */
/* Button */
.Button
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
text-align:left;
padding-left:22px;
background-repeat: no-repeat;
background-image: url(/assets/img/action.gif);
background-position:3px 50%
}
.Button:hover
{
background: #FFCC33;
background-repeat: no-repeat;
background-image: url(/assets/img/action.gif);
background-position:3px 50%
}
/* End Button */
modalBackground.css
.modalBackground
{
background-color:#696969;
filter: alpha(opacity=60);
opacity: 0.6;
}
.close {
DISPLAY: block;BACKGROUND: url(img/close.png) no-repeat 0px 0px;
LEFT: -5px;WIDTH: 26px;TEXT-INDENT: -1000em;POSITION: absolute;
TOP: -7px;HEIGHT: 26px;
}
.modalBackground {
background-color:Gray;filter:alpha(opacity=70);opacity:0.7;
}
http://www.mindfiresolutions.com/Workaround-for-Modal-Popup-with-RoundedCornerExtender-issue-833.php
this is the solution. Bug with the ajax controltoolkit....
thanks
Damo
I have a repeater control with an Image and a hyperlink one below the other. Everytime I add more than one line of text the text pushes the imahe control up. I wan the top of the images to be aligned horizontally and the text to continue downward if there is more than a line of text.
please advise.
Here is the ascx code I have used:
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<asp:UpdatePanel ID="UpdatePanelAnnouncements" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table>
<tr>
<asp:Repeater ID="repAnnouncements" runat="server">
<ItemTemplate>
<td style="padding-right:19px; padding-top:1px; padding-left:7px;">
<asp:HiddenField ID="ItemID" Value='<%#Eval("ID") %>' runat="server" />
<asp:HyperLink ID="hypImageEditLink" runat="server">
<div class="ImageStyle" >
<asp:Image ID="imgLink" Height="110px" Width="150px" runat="server" ImageUrl='<%#Eval("Images")%>' CssClass ="magnify"/>
</div>
</asp:HyperLink>
<br/><br/>
<div id="div3" class="Div3"><asp:HyperLink ID="hypTextEditLink" runat="server" Text='<%#Eval("Title")%>' CssClass="TitleStyle"/></div>
</td>
</ItemTemplate>
</asp:Repeater>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:View>
And here is the style sheet:
.div3
{
width: 150px !important;
display:inline !important;
/*display: -moz-inline-box !important;
display: inline-block !important; */
float:left !important;
}
.ImageStyle
{
margin-left:8px;
/* Width:150px !important; Height:110px !important;
box-shadow: 0px 0.5px 35px 15px #888888;*/
border-collapse: separate !important;
box-shadow: 0px 0.5px 11px 4px #888888;
/*box-shadow: 0px 0.5px 11px 4px rgb(150,150,150);*/
}
.ImageStyle:hover
{
opacity:0.5 !important;
filter: alpha(opacity=50) !important;
border-color:blue !important;
border-width:thick !important;
}
As I understand your question, when there is a lot of text underneath a picture it causes the rest of the pictures to align themselves vertically in the middle of their cells. To resolve this alter your TD tag to the following:
<td style="vertical-align: top; padding-right:19px; padding-top:1px; padding-left:7px;">
i have a page wherein i need to lock the screen when user clicks on the send email button, but everything is happening except i am unable to see my lock screen page. i have used the update progress for this purpose.. m posting part of the code here
.aspx part
<asp:UpdatePanel ID="SendMailUpdatePanel" runat="server">
<ContentTemplate>
<div style="float: right;">
<asp:Button ID="btnSend" runat="server" Text="Send" ToolTip="Send "
Visible="false" Font-Bold="True" OnClick="btnSendResume_Click" />
<asp:Button ID="btnDown" runat="server" Text="Download IDs" ToolTip="follow-up"
Visible="false" Font-Bold="True" OnClick="btnDownloadEmailIDs_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<table>
<td style="width: auto; vertical-align: top;">
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="SendMailUpdatePanel">
<ProgressTemplate>
<div id="blur" style="width: 100%; background-color: black; moz-opacity: 0.5; khtml-opacity: .5;
opacity: .5; filter: alpha(opacity=50); z-index: 120; height: 100%; position: absolute;
top: 0; left: 0;">
<div id="progress" style="z-index: 200; background-color: White; position: absolute; top: 0pt;
left: 0pt; border: solid 1px black; padding: 5px 5px 5px 5px; text-align: center;">
<b>Mail in progress.Please Wait...</b>
<br />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</table>
.cs part
protected void btnSendResume_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);
}
rest of the part i have not mentioned here...any help
Your HTML Table is incorrectly formed. You have no <tr> elements, but the real problem probably lies with your style attributes, please see my updated code below.
You can find a good example of how to accomplish what you are trying to do here: http://blogs.visoftinc.com/2008/03/13/Modal-UpdateProgress-for-UpdatePanel-Revisited/
Try adjusting your code to the following:
<asp:UpdatePanel ID="SendMailUpdatePanel" runat="server">
<ContentTemplate>
<div style="float: right;">
<asp:Button ID="btnSend" runat="server" Text="Send" ToolTip="Send "
Visible="false" Font-Bold="True" OnClick="btnSendResume_Click" />
<asp:Button ID="btnDown" runat="server" Text="Download IDs" ToolTip="follow-up"
Visible="false" Font-Bold="True" OnClick="btnDownloadEmailIDs_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="SendMailUpdatePanel">
<ProgressTemplate>
<div id="blur" style="position:fixed; top:0px; bottom:0px; left:0px; right:0px; overflow:hidden; padding:0; margin:0; background-color:black; filter:alpha(opacity=50); opacity:0.5; z-index:1000;" />
<div id="progress" style="position:fixed; top:30%; left:43%; width:14%; z-index:1001; background-color:white; border:solid 1px black; padding:5px; text-align:center;">
<b>Mail in progress.Please Wait...</b>
<br />
<br />
</div>
</ProgressTemplate>
</asp:UpdateProgress>