Results 1 to 6 of 6

Thread: disabling the page whilst a serverside process happens.

  1. #1

    Thread Starter
    Fanatic Member
    Join Date
    Feb 2000
    Location
    Dunmow,Essex,England
    Posts
    898

    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.

  2. #2

    Thread Starter
    Fanatic Member
    Join Date
    Feb 2000
    Location
    Dunmow,Essex,England
    Posts
    898

    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?

  3. #3
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    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%;
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  4. #4

    Thread Starter
    Fanatic Member
    Join Date
    Feb 2000
    Location
    Dunmow,Essex,England
    Posts
    898

    Re: disabling the page whilst a serverside process happens.

    Adding left and top to centreText, made no difference

  5. #5

    Thread Starter
    Fanatic Member
    Join Date
    Feb 2000
    Location
    Dunmow,Essex,England
    Posts
    898

    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

  6. #6
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    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
  •  



Click Here to Expand Forum to Full Width