-
Apr 23rd, 2012, 08:35 AM
#1
Thread Starter
Fanatic Member
disabling the page whilst a serverside process happens.
in my css I have defined:
Code:
#overlay
{
position: fixed;
height: 100%;
width: 100%;
z-index: 1000000;
background-color: #000000;
background: url('ui-bg_diagonals-thick_90_eeeeee_40x40.png');
background-repeat: repeat;
opacity:0.5;
filter:alpha(opacity=60);
display:block;
}
and then back on my client I have:
Code:
$("#Button1").click(function () {
var fileName = $("#MainContent_FileUpload1").attr("value");
var jsonData = '{ "fileName" : "' + encodeURI(fileName) + '"}';
if (checkFileExtension(fileName)) {
overlay = $('<div></div>').prependTo('body').attr('id', 'overlay');
$.ajax({
type: "POST",
url: "Default.aspx/Process",
data: jsonData,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (response) {
if (response != null && response.d != null) { overlay.remove(); alert(response.d); }
},
error: function (XMLHttpRequest, textStatus, errorThrown) { overlay.remove(); alert(errorThrown); }
});
}
});
Can someone spot why my overlay doesn't display.
-
Apr 23rd, 2012, 10:55 AM
#2
Thread Starter
Fanatic Member
Re: disabling the page whilst a serverside process happens.
Ok Guys, I've had some success:
in my css file I have declared:
Code:
.overlay
{
position: fixed;
height: 100%;
width: 100%;
z-index: 1000000;
background-color: #000;
background: url('ui-bg_diagonals-thick_90_eeeeee_40x40.png');
background-repeat: repeat;
display:block;
opacity:0.5;
filter:alpha(opacity=50);
}
then at the top of my page I have:
Code:
<div id="overlay" class="overlay" style="display:none">
<div class="centreText"><span>Please Wait, this could take some time....</span></div>
</div>
then in my usage I have:
Code:
$("#overlay").attr("style", "display:block;");
Now the screen overlay appears. The problem I now have is with the inner Div showing my 'Please Wait' message. It doesn't matter what I do with the css class assigned, the message always appears at the top left of the page.
This class is declared:
Code:
.centreText
{
position:absolute;
vertical-align:middle;
text-align: center;
font-size: 2.6em;
font-weight: bold;
color: #0000ff;
display:inline-block;
}
why doesn't the text centre on screen?
-
Apr 23rd, 2012, 08:32 PM
#3
Re: disabling the page whilst a serverside process happens.
You got many flows that i don't have time to point one by one.I suggest you read some css on how to make a whole screen page.
Anyhow try adding this on your .centreText:
left:30%;
top:50%;
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Apr 24th, 2012, 03:05 AM
#4
Thread Starter
Fanatic Member
Re: disabling the page whilst a serverside process happens.
Adding left and top to centreText, made no difference
-
Apr 24th, 2012, 04:18 AM
#5
Thread Starter
Fanatic Member
Re: disabling the page whilst a serverside process happens.
Here's the weird thing:
if I have:
Code:
<div id="overlay" class="overlay" style="display:none">
<div id="centreText" style="left:30%;color: #0000ff;top:50%;font-size: 1.6em;font-weight: bold;position:absolute;"><p>Please Wait, this could take some time....</p></div>
</div>
The inline style works. if I move the style into my CSS file and reference the class it stops working. So, why wont the inner <div> apply the style from the style sheet? the outer <div> uses the class no problem
-
Apr 24th, 2012, 08:17 PM
#6
Re: disabling the page whilst a serverside process happens.
So did adding left and top to centreText, made a difference?
I don't know why the inline style works, i should be the opposite if any error.
Maybe this :$("#overlay").attr("style", "display:block;"); made a problem.Try creating your page with the block display already added to CSS.If it works then the jquery is probably the problem.
P.S. also rename the id="overlay" to something else, it's the same with the Class an is a bad practice.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|