I am using the updateProgress control to display loader.gif while the iframe in my page loads.
The iframe takes much time to load but the loader.gif does not appear
This is my aspx page
<!DOCTYPE html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial;
}
.MyModal {
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
}
.center {
z-index: 1000;
margin: 300px 400px 300px 400px;
padding: 10px;
width: 130px;
background-color: White;
border-radius: 10px;
filter: alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
}
.center img {
height: 128px;
width: 128px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h1>My Payment Page</h1>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="MyModal">
<div class="center">
<img alt="" src="images/my-loader.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<iframe id="frame1" runat="server" width="100%" height="600" scrolling="no" frameborder="0"></iframe>
</ContentTemplate>
</asp:UpdatePanel>
</form> </body> </html>
and in my code behind file i set the source for the iframe programmatically
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
frame1.Src = "http://example.com";
}
}
I don't know what i am missing.
UpdateProgress controls are for partial-page updates (AJAX requests); they do not respond to normal postbacks.
To see it work, put a button control inside the UpdatePanel (content template). Because it's inside the update panel it makes an AJAX request (basically) so the UpdateProgress control should work automatically.
If the response is really fast, you might not see the UpdateProgress control's image. For testing, add some time to the response so you can see the image.
protected void btn_Click(object sender, EventArgs e)
{
// add a fake delay for testing.
System.Threading.Thread.Sleep(3000);
}
Related
Hello friends I have a code that show a processing image, but I don't get that the background change its color, I need to change it to gray color.
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
// Get the instance of PageRequestManager.
var prm = Sys.WebForms.PageRequestManager.getInstance();
// Add initializeRequest and endRequest
prm.add_initializeRequest(prm_InitializeRequest);
prm.add_endRequest(prm_EndRequest);
// Called when async postback begins
function prm_InitializeRequest(sender, args) {
// get the divImage and set it to visible
var panelProg = $get('divImage');
panelProg.style.display = '';
// reset label text
var lbl = $get('<%= this.lblText.ClientID %>');
lbl.innerHTML = '';
// Disable button that caused a postback
$get(args._postBackElement.id).disabled = true;
}
// Called when async postback ends
function prm_EndRequest(sender, args) {
// get the divImage and hide it again
var panelProg = $get('divImage');
panelProg.style.display = 'none';
// Enable button that caused a postback
$get(sender._postBackSettings.sourceElement.id).disabled = false;
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblText" runat="server" Text=""></asp:Label>
<div id="divImage" style="display:none" class="divCentro">
<div class="FondoGris">
<asp:Image ID="img1" runat="server" ImageUrl="~/Procesando2.gif"/>
</div>
<br />
<p class="divCentro"><br /><br /><br />Processing...</p>
</div>
<br />
<asp:Button ID="btnInvoke" runat="server" Text="Click"
onclick="btnInvoke_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
And here is the css code:
<style type="text/css">
.divCentro {
text-align:center;
width: 327px; height: 60px; margin-top: -23px; margin-left: -158px; left: 50%; top: 40%; position: absolute;
}
</style>
I've tried writing background-color: gray transparent but this only change the color in the div image.
If anyone has any suggestion please help me.
Thanks in advance!
try this one..
<div class="divOuterCentro">
<p class="divCentro"><br /><br /><br />Processing...</p>
</div>
CSS:
.divOuterCentro{
height:100%;
width:100%;
background-color:rgba(0,0,0,0.4);
position:absolute;
}
.divCentro {
text-align:center;
width: 327px;
height: 60px;
margin-top: -23px;
margin-left: -158px;
left: 50%;
top: 40%;
position: absolute;
}
working fiddle.. link here
To create a semi-transparent background use rgba() or hsla() functions:
.divCentro {
background-color: rgba(60, 60, 60, 0.5);
}
I have a ModalPopup window in my asp.net application, that I want to display when a Listview control item is clicked.
<div id="ModalPopup" style="visibility:hidden" runat="server">
<div style="position: absolute; width: 100%; height: 100%; z-index: 10002; background-color: Gray; filter: alpha(opacity=70); opacity: 0.7;">
</div>
<table style="position: absolute; width: 100%; height: 100%; z-index: 10003;">
<tr>
<td align="center" valign="middle">
<div style="color: Black; font-weight: bolder; background-color: White; padding: 15px; width: 200px;">
<asp:Image ID="Image4" runat="server" ImageUrl="~/Images/ajax-loader.gif" />...Processing....
</div>
</td>
</tr>
</table>
</div>
However, in my RadListView1_SelectedIndexChanged event, my code is: ModalPopup.Attributes.Add("style", "visibility:visible"); but the modal popup does not display.
How can I display it when a ListView item is selected?
Since you've already defined your ModalPopup div as a server control (e.g. runat=server) and you're trying to decide if to show it or not in codebehind - just use the Visible property...
<div id="ModalPopup" Visible="false" runat="server">
....
</div>
And in your RadListView1_SelectedIndexChanged event in code behind just change Visible to true:
protected void RadListView1_SelectedIndexChanged()
{
ModalPopup.Visible = true;
}
and if you insist on changing the visibility attribute itself, you can use RegisterStartupScript like this:
protected void RadListView1_SelectedIndexChanged()
{
ClientScript.RegisterStartupScript(this.GetType(), "ShowPopup", "document.getElementById('" + ModalPopup.ClientID + "').style.visibility = 'visible';", true);
}
I am using rating control which is present in ASP.NET AJAX control toolkit. I have following questions.
It doesn't show up anything if I drag the control unto the page
CSS doesn't help either
How do I save the rating value in database
Thank you very much.
CSS
.ratingStar
{
font-size: 0pt;
width: 12px;
height: 12px;
cursor:pointer;
background-repeat: no-repeat;
}
.filledRatingStar
{
background-image: url(images/Star_filled.gif);
}
.emptyRatingStar
{
background-image: url(images/Star_empty.gif);
}
ASPX:
<asp:Rating ID="Rating2" runat="server" CurrentRating="1" MaxRating="6" StarCssClass="ratingStar"
WaitingStarCssClass="savedRatingStar"
FilledStarCssClass="filledRatingStar"
EmptyStarCssClass="emptyRatingStar"
RatingAlign="Vertical">
</asp:Rating>
Rating is not showing up:
You're missing the style for savedRatingStar
More importantly, because you've set RatingAling="Vertical" you must specify display:block; for ratingStar
Change your code as follows and it will work:
CSS:
<style type="text/css">
.ratingStar
{
font-size: 0pt;
width: 12px;
height: 12px;
cursor: pointer;
background-repeat: no-repeat;
display: block;
}
.filledRatingStar
{
background-image: url(images/Star_filled.gif);
}
.emptyRatingStar
{
background-image: url(images/Star_empty.gif);
}
.savedRatingStar
{
/*change this to your image name*/
background-image: url(images/Saved_star.gif);
}
</style>
ASPX:
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Rating ID="Rating2" runat="server" CurrentRating="1" MaxRating="6" StarCssClass="ratingStar"
WaitingStarCssClass="savedRatingStar" FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar"
RatingAlign="Vertical" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="SubmitRating" />
</form>
Saving the rating to the database:
The rating is available via the CurrentRating property of the Rating control, simply access it in code and insert it into the db (there are literally hundreds of examples on the net how to do this, I trust you'll be able to find your way from here)
protected void SubmitRating(object sender, EventArgs e)
{
int rating = Rating2.CurrentRating;
//Submit to database...
}
This is driving me mental!!!
Ok, I have the following scenario - ModalPopupExtender used to display an UpdateProgress panel when AJAX is running. So I have the following:
<asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress" >
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static">
<ProgressTemplate>
<div style="position: relative; top: 40%; text-align: center;">
<asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle;
padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" />
<asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle;
margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress"
BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress">
</ajaxToolkit:ModalPopupExtender>
Javascript to fire the thing when AJAX kicks ins:
<script type="text/javascript" language="javascript">
var ModalProgress = '<%= ModalProgress.ClientID %>';
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
function beginReq(sender, args) {
// shows the Popup
$find(ModalProgress).show();
}
function endReq(sender, args) {
// Hides the Popup
$find(ModalProgress).hide();
}
</script>
With the styling of :
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=50);
opacity: 0.50;
}
.updateProgress
{
float: right;
border-width: 1px;
border-style: solid;
background-color: #FAFAD2;
width: 250px;
height: 100px;
}
</style>
However, I cannot for the life of me get the updateProgress to float right or adjust position (just as an example).
Using the developer tools, I can see that some sort of inline style overides the CSS style.
How on earth can I get, for example, my updateprogress to float right?
If you're fighting against inline styles that you have no control over, this is one of those rare cases where the use of !important is actually justified:
Give this a try:
.updateProgress
{
float: right !important;
/* etc. */
}
If this doesn't work, try adding a clear:right, or using a more specific selector like:
#someElement .updateProgress {}
EDIT: Specificity in CSS selectors won't help against inline styles, so ignore that as a possible solution.
well I've ditch the style sheet and run with this:
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static">
<ProgressTemplate>
<div style="float: right; border-width: 1px; border-style: solid; background-color: #FAFAD2;
width: 250px; height: 100px;">
<div style="position: relative; top: 40%; text-align: center;">
<asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle;
padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" />
<asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle;
margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
It does the business so I'm happy for now :D
How do I add css for the Panle and the div tag, I am new to this I tried many ways but could not make it to work. How should I add css for individual Panel and individual Div tag. Thanks
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
<link href="Styles/AboutUs.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<asp:Panel ID="Panel2" runat="server" >
<div id="main">
</div>
</asp:Panel>
</asp:Content>
CSS:
----
.Panel2
{
position: relative;
top: -11px;
left: -20px;
height: 450px;
width: 928px;
}
.main
{
position: relative;
top: 17px;
left: 154px;
height: 110px;
width: 691px;
}
For this HTML
<asp:Panel ID="Panel2" runat="server" >
<div id="main">
</div>
</asp:Panel>
Change it to (see the change in BOLD)
<asp:Panel ID="Panel2" runat="server" **CssClass="pnlCSS"**>
<div id="main">
</div>
</asp:Panel>
and the css should be
#main
{
position: relative;
top: 17px;
left: 154px;
height: 110px;
width: 691px;
}
.pnlCSS
{
// CSS for panel here
}
If you what to use Ids instead of CssClass you will have to change your ClientIDMode="Static":
<asp:Panel ID="Panel2" ClientIDMode="Static" runat="server" >
<div id="main">
</div>
</asp:Panel>
What you need to do is look at the div and panel class in Firebug - when using ASP.NET Master pages, it will append certain things to your specified class; it will look something like #ct100_MainContent etc etc.
Again, take a look at Firebug and see what the div is being written to the browser as, and update that in your CSS.
You can use the CssClass property to define a css class for you panel div.
<asp:Panel ID="Panel2" runat="server" CssClass="myClass">
</asp:Panel>
And then use this class in your css:
.myClass {
position: relative;
top: -11px;
left: -20px;
height: 450px;
width: 928px;
}
Use
#main
{
position: relative;
top: 17px;
left: 154px;
height: 110px;
width: 691px;
}
and add CssClass="Panel2" to the panel