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);
}
Related
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);
}
I am trying to add few HTML lines to div that is inside the update panel using the following lines.
protected void ListView2_ItemCommand(object sender, ListViewCommandEventArgs e)
{
string[] arg = new string[2];
arg = e.CommandArgument.ToString().Split(';');
listofdisplayblogs.Count();
DisplayBlog db = listofdisplayblogs.ElementAt(0);
Blog b = db.DisplayBlogsByYear.ElementAt(Convert.ToInt32(arg[1]) - 1);
div1.InnerHtml = b.BlogContent;
}
In design page I have this code inside update panel.
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ListView1" EventName="ItemCommand" />
</Triggers>
<ContentTemplate>
<div style="width: 70%; height: 500px; overflow: scroll; scrollbar-3dlight-color: cadetblue; float: right; border: 1px solid black">
<div id="div1" runat="server"></div>
</ContentTemplate>
</asp:UpdatePanel>
I have a list view above it and updating on Itemcommand.
But i browser I see this error.
Cannot read property 'PRM_ParserErrorDetails' of undefined
Have you tried using a placeholder?
<ContentTemplate>
<div style="width: 70%; height: 500px; overflow: scroll; scrollbar-3dlight-color: cadetblue; float: right; border: 1px solid black">
<div id="div1" runat="server">
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</div>
</ContentTemplate>
And then in you backend code do
PlaceHolder1.Controls.Add(b);
I'm trying to show a div on top of my grid view when the grid is loading.
This is how I placed my UpdateProgress, UpdatePanel and GridView:
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdtPnlRefList" >
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<span style="border-width: 0px; position: fixed; padding: 50px; background-color: #FFFFFF; font-size: 36px; left: 40%; top: 40%;">Loading ...</span>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdtPnlRefList" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView>
......
</asp:GridView>
...
I've used the ProgressTemplate code from another question which I've lost track to, however this code greys out the whole page, but i need to only grey out my grid.
Is that possible?
I've achieved this in the past by using the Ajax Control Toolkit's UpdatePanelAnimationExtender control.
<ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server" TargetControlID="YourUpdatePanel">
<Animations>
<OnUpdating>
<Sequence>
<ScriptAction Script="UpdatePanel_OnUpdating(updatePanelClientID, divToOverlayClientID);" />
<Parallel duration="0">
<FadeOut minimumOpacity=".5" />
</Parallel>
</Sequence>
</OnUpdating>
<OnUpdated>
<Sequence>
<Parallel duration="0" >
<FadeIn minimumOpacity=".5" />
<ScriptAction Script="UpdatePanel_OnUpdated(divToOverlayClientID);" />
</Parallel>
</Sequence>
</OnUpdated>
</Animations>
Ensure that you set the two required ClientIDs on load, like so:
<script type="text/javascript">
var updatePanelClientID = '<%=YourUpdatePanel.ClientID %>';
var divToOverlayClientID = '<%=divUpdateProgress.ClientID %>';
</script>
My div comprises this:
<div id="divUpdateProgress" runat="server" align="center" style="display: none; height: 40px; width: 200px; text-align: center; vertical-align: middle;">
<asp:Image ID="imgProgress" runat="server" ImageUrl="~/images/common/waitspin.gif" />
</div>
The final piece of the puzzle is the pair of JS functions called by the UpdatePanelAnimationExtender. They look like this:
function UpdatePanel_OnUpdating(updatePanelClientID, divClientID) {
// Displays a div over an updating UpdatePanel
// Get the update progress div
var divUpdateProgress = $get(divClientID);
// Make it visible
divUpdateProgress.style.display = '';
// Get the UpdatePanel element
var pnlUpdatePanel = $get(updatePanelClientID);
// Get the bounds of both the UpdatePanel and the progress div
var pnlUpdatePanelBounds = Sys.UI.DomElement.getBounds(pnlUpdatePanel);
var divUpdateProgressBounds = Sys.UI.DomElement.getBounds(divUpdateProgress);
// Work out where to position the element (the centre of the UpdatePanel)
var x = pnlUpdatePanelBounds.x + Math.round(pnlUpdatePanelBounds.width / 2) - Math.round(divUpdateProgressBounds.width / 2);
var y = pnlUpdatePanelBounds.y + Math.round(pnlUpdatePanelBounds.height / 2) - Math.round(divUpdateProgressBounds.height / 2);
// Set the progress element to this position
Sys.UI.DomElement.setLocation(divUpdateProgress, x, y);
}
function UpdatePanel_OnUpdated(divClientID) {
// Related to UpdatePanel_OnUpdating, above. Hides the div once the UpdatePanel has been updated
$get(divClientID).style.display = 'none';
}
This code was originally written almost 10 years ago, but I've just successfully reused it in a legacy project.
<asp:GridView>
<div style="position: relative;">
Code goes here
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdtPnlRefList" >
<ProgressTemplate>
<div style="position: absolute; display: table; width: 100%; text-align: center; top: 0; right: 0; left: 0; bottom: 0; z-index: 9999999; background-color: rgba(255,255,255,0.7);">
<span style="border-width: 0px; padding: 50px; font-size: 36px; display: table-cell"; vertical-align: middle;>Loading ...</span>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</asp:GridView>
place the <ProgressTemplate></ProgressTemplate> inside the <asp:GridView></asp:GridView> tags.
and give the <div> a position: relative; and the div inside the <ProgressTemplate></ProgressTemplate> a position: absolute;
.
Don't use opacity as it applies for the whole tag and everything inside. Unless that's exactly what you want.
I have used an rgba(255,255,255,0.7); which will only decrease the opacity of the background color to 70%.
I have vertically centered the <span>Loading ...</span> by adding display: table-cell"; vertical-align: middle; and adding display: table; to the parent tag.
It would be advisable to use a separate stylesheet for all this. =)
Hopefully this helps.
Its a wonderful day to CODE =)
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);
}
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