I am currently developing a page where users can rate products with the usage of AJAX Rating. The control works fine, users are able to rate products, however the images showing the rating does not appear.
This page is created with the use of a Master Page and the inclusion of a CSS Sheet stored elsewhere.
Below is the following CSS involved:-
<style type="text/css">
.StarRating{
font-size: 0pt;
width:50px;
height:50px;
margin: 0px;
padding: 0px;
cursor:pointer;
display: block;
background-repeat: no-repeat;}
.FilledStars{
background-image:url("css/images/star.png");
width:50px;
height:50px;
}
.WaitingStars{
background-image:url("css/images/wait.png");
width:50px;
height:50px;
}
.EmptyStars{
background-image:url("css/images/empty.png");
width:50px;
height:50px;
}
</style>
And below is code for displaying the Rating:-
<tr>
<td>Select Rating:</td>
<td>
<asp:scriptmanager ID="s1" runat="server"></asp:scriptmanager>
<asp:updatepanel runat="server">
<ContentTemplate>
<ajaxToolkit:Rating ID="Rating1" AutoPostBack="true" runat="server"
StarCssClass="StarRating"
FilledStarCssClass="FilledStars"
EmptyStarCssClass="EmptyStars"
WaitingStarCssClass="WaitingStars"
MaxRating="5"
CurrentRating="1"
style="float: left;"
>
</ajaxToolkit:Rating>
</ContentTemplate>
</asp:updatepanel>
</td>
</tr>
Related
Here is my asp.net codes
<div class="output">
<div class="listbox">
<asp:ListBox ID="ListBox1" runat="server" Height="304px" Width="240px" ></asp:ListBox>
<asp:Label ID="Label1" runat="server" Text="."></asp:Label>
<asp:ListBox ID="ListBox3" runat="server" Height="100px" Width="240px"></asp:ListBox>
</div>
</div>
and here css style
.listbox {
width: 100%;
}
.output{
background-color:rgba(23, 23, 23, 0.71);
border: 2px solid grey;
width: 270px;
height: 540px;
position:absolute;
top:25%;
left:60%;
border-radius: 25px;
padding: 10px; }
I dont know why but on page inspecter it is left but on google chrome always aligned right.I have deleted history on chrome and check my code but couldnt find solution
How can I access an html element inside an <asp:multiview> using jquery or javascript?
Let's say I have the structure for multiview:
<div runat="server" class="tabContents" style="height:100%; width:100%;">
<asp:MultiView id="MultiView1" ActiveViewIndex="0" Runat="server">
<asp:View ID="v1" runat="server" >
<iframe id="f1" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v2" runat="server" >
<iframe id="f2" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v3" runat="server" >
<iframe id="f3" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v4" runat="server" >
<iframe id="f4" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v5" runat="server" >
<iframe id="f5" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v6" runat="server" >
<iframe id="f6" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v7" runat="server" >
<iframe id="f7" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v8" runat="server" >
<iframe id="f8" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v9" runat="server" >
<iframe id="f9" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v10" runat="server" >
<iframe id="f10" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
</asp:MultiView>
</div>
I tried this code in the code behind:
string s;
s =
"<script>" +
"$('#f" + index++ + "').src(" + "'" + url + "'" + ");" +
"</script>";
Page.ClientScript.RegisterStartupScript(this.GetType(), "ExeCuteScript", s);
but it's not working.
Please help me with this. Thank you!
I have never used multiviews before but if f1 is accessible from your code behind then your jquery can be as simple as:
$('#<%= f1.ClientID %>')
If you look at the rendered markup of the page, you'll see that the IDs of the elements you're trying to access aren't the same as the ones you assigned. This is because ASP.NET generates unique IDs for runat="server" elements.
However, you will notice that the very end of the ID is the actual ID you specified in your XAML. You could do this by using the jQuery "endswith" selector like so:
String.Format("$('[id$=f{0}]').src('{1}');", index++, url);
So your code block becomes:
string s;
s = "<script>" +
String.Format("$('[id$=f{0}]').src('{1}');", index++, url) +
"</script>";
Page.ClientScript.RegisterStartupScript(this.GetType(), "ExeCuteScript", s);
Alternatively, if you are not using your iframes in your codebehind, just remove runat="server" from them.
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>