Home/ Questions/Q 6087409
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T11:52:02+00:00

here is jsFiddle: http://jsfiddle.net/arJEx/ Here’s what I got so far: <!DOCTYPE html PUBLIC -//W3C//DTD

  • 0

here is jsFiddle: http://jsfiddle.net/arJEx/

Here’s what I got so far:

<!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" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Waiting</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>


    <style>
* { margin:0;padding:0; }
    #wait {

background:#ABC7D9;
border-top:4px solid #597F99;
border-bottom:4px solid #597F99;
padding:50px;
text-align:center;
font:23pt Georgia;
color:#1C5378;
display:none;
overflow: hidden;

    }
    </style>

    <script type="text/javascript">
$(function() {

$(".act").live("click",function() {
     $("#wait").slideDown("slow");
    });
    });
    </script>

</head>

<body>

<button class="act">Activate effect</button>

<div id="wait">Please wait...</div>



</body>
</html>

I want it so the blue div when I press that button slides down to the middle of the page… but I juts can’t seem to find out how to do it. Please help?

edit: ok, it doesn’t HAVE to be middle of screen but near the top of part. like.. anywhere near middle to top of page.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Everything is just fine with Your JS. You need to change CSS. First of all div’s container must fill all window:

    html, body { width: 100%; height: 100%; padding: 0; margin: 0; }

    Than change div’s css. First approach (not sure about IE):

    #wait {
   /* remove padding and append those */
   position: absolute;
   top: 5%; /* change it */
   bottom: 50%;
   width: 100%
}

    Second one:

    #wait {
   /* remove padding and append those */
   height: 50%;
}

    There is one problem You will need to solve. You will need to verticall align Your text without using padding and this is another question (just search for it in stackoverflow or goole).

    • 0