Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Mar 2006
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Display a loading box

    Ok, basically, i want a box, (150px x 50px) to display on my page...that will be on top of everything else...

    so, so i click the button to load data, that box comes up, saying 'Loading Data'.

    i have the javascript code, but i dont know the css to make it A) get out of the normal flow of code, and B) sit on top of everything else on the page.

    Any tutorials would also be nice.

    Thanks, Justin

  • #2
    Registered User
    Join Date
    Oct 2006
    Posts
    80
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ummm would you mind posting the code you have? thanks

  • #3
    Regular Coder
    Join Date
    Mar 2006
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by <?austin ?> View Post
    ummm would you mind posting the code you have? thanks
    Code:
    <div class="loadBox">Please wait. Loading</div>
    i just need to know the css style to display it in the center of the page and on top of the rest of the page...

    i havent implemented the backend code yet, only as its irellevant at this stage, as this box will be used on more than one script.

    Thanks, Justin

  • #4
    Registered User
    Join Date
    Oct 2006
    Posts
    80
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmmmmm actually....the method i thought would work, wont....grrr ima have to play with it a little.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    height:100%;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:13px;
    }
    #loadBox {
    width:148px;
    border:1px solid #000;
    height:48px;
    background:#FFF;
    text-align:center;
    line-height:48px;
    display:none;
    z-index:2;
    top:50%;
    left:50%;
    margin-top:-25px;
    margin-left:-75px;
    position:fixed;
    }
    * html #loadBox {
    position:absolute;
    }
    #trans {
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    z-index:1;
    display:none;
    filter:alpha(opacity=60);
    opacity:0.6;
    -khtml-opacity:0.6;
    -moz-opacity:0.6;
    background:#CCC;
    }
    * html #trans {
    position:absolute;
    }
    </style>
    <script type="text/javascript">
    function loadData()
    {
    	document.getElementById('loadBox').style.display = 'block';
    	document.getElementById('trans').style.display = 'block';
    	document.getElementsByTagName('html')[0].style.overflow = 'hidden';
    	setTimeout('dataSent()',5000);
    }
    function dataSent()
    {
    	document.getElementById('loadBox').style.display = 'none';
    	document.getElementById('trans').style.display = 'none';
    	document.getElementsByTagName('html')[0].style.overflow = 'auto';
    }
    </script>
    </head>
    <body>
    <div id="loadBox">Loading...</div>
    <div id="trans">&nbsp;</div>
    <form action="#" method="post">
    	<input type="button" onClick="loadData();this.blur()" value="Load Data">
    </form>
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris purus diam, fringilla a, feugiat nec, accumsan eget, nulla. Nunc ut nunc quis nulla luctus hendrerit. Nullam sit amet ligula. Donec a felis ac odio tincidunt interdum. Nulla massa velit, vestibulum a, consectetuer eu, consequat a, lectus. Aliquam laoreet sagittis ligula. Nam pulvinar eros sit amet libero. Duis luctus ligula eget libero. In hac habitasse platea dictumst. Nulla facilisi. Fusce neque metus, posuere a, fringilla sed, condimentum eu, ante. Nunc et turpis. Curabitur dapibus imperdiet purus. Phasellus ornare, eros id porta adipiscing, lectus leo scelerisque neque, at aliquam augue metus nec est. Suspendisse tincidunt viverra lectus. Vestibulum eleifend laoreet dolor. Quisque sit amet libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
    <p> Donec tristique, diam et aliquam lobortis, mauris lorem tristique orci, quis imperdiet massa libero id ante. Pellentesque iaculis tristique ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla imperdiet, est ut egestas iaculis, quam arcu fringilla ante, dictum consectetuer magna risus in nunc. Nam arcu velit, iaculis non, congue non, nonummy aliquet, nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vehicula adipiscing ligula. Morbi nonummy ipsum vel risus. Ut augue massa, molestie vitae, rhoncus id, ullamcorper vitae, neque. Sed ultricies. Nullam magna. Etiam tempus nibh ac purus. Sed accumsan. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris eu lorem. Cras orci. Morbi ipsum orci, interdum vitae, interdum in, feugiat sed, tellus. Aenean tempus. </p>
    <p> Integer est. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris non nunc eu purus scelerisque mollis. Proin nonummy posuere nulla. Morbi eleifend cursus mi. Praesent ultrices. Integer ultrices tempus turpis. Proin aliquam, urna id feugiat commodo, massa libero pharetra tortor, aliquet auctor ligula turpis eget sapien. Mauris porttitor euismod felis. Nunc ut velit. </p>
    <p> Sed ut libero in enim mollis vulputate. Fusce rutrum ante sit amet elit. Duis eget tellus. Ut nisi diam, sodales quis, posuere at, scelerisque eget, est. Pellentesque nec arcu nec urna aliquam semper. Vestibulum condimentum. Nam vitae augue. Suspendisse id velit. Pellentesque volutpat ipsum. Nam ipsum. Maecenas viverra. </p>
    <p> Sed elit. Proin scelerisque pretium ante. Fusce nisi ante, scelerisque nec, volutpat non, tincidunt non, massa. In ut mauris nec nibh tristique imperdiet. Phasellus blandit, ante in ullamcorper sagittis, lorem ligula pulvinar sem, quis viverra nisi lacus ac lorem. Nam luctus. Quisque faucibus massa sit amet pede. Aenean aliquam dictum dui. Donec sagittis. Phasellus sit amet sapien sed arcu lobortis hendrerit. Sed tempus. Sed non purus. Pellentesque risus lectus, pulvinar et, tincidunt tincidunt, commodo eu, massa. Sed non arcu at risus eleifend consectetuer. Cras eu turpis. Proin tempus tincidunt felis. Duis viverra massa in mauris. </p>
    <p> Proin odio est, vulputate ac, convallis ac, faucibus et, lectus. Quisque sagittis, quam vel fringilla fringilla, massa erat tempor metus, id rutrum nisl enim vel magna. Sed vel lacus ut eros tempus elementum. In iaculis, urna eu mattis mollis, ligula metus dignissim orci, quis imperdiet lacus ligula sit amet lectus. Nunc vel justo. Duis varius porta augue. Nunc mattis egestas quam. Duis ultrices pharetra augue. Etiam ultricies. Nullam tempus sapien ac nisi. Ut nonummy erat sed enim. Pellentesque viverra magna nec nulla. Aliquam quis velit at enim placerat dictum. Nulla felis libero, dictum vel, luctus at, pellentesque id, arcu. Duis leo tellus, rutrum ut, ornare in, commodo at, ligula. Proin cursus est sed ante. Sed tincidunt urna vitae lectus. Pellentesque lectus. </p>
    <p> Integer sem diam, placerat eu, dapibus et, dignissim ac, orci. Suspendisse at ligula. In vehicula ante non ante. Quisque eu sem. Donec adipiscing. In hac habitasse platea dictumst. Nullam cursus eleifend pede. Nam dapibus ultrices nunc. Aenean ligula enim, accumsan in, congue iaculis, tincidunt at, mauris. Sed eget lacus eget orci convallis cursus. Curabitur mollis purus ut sapien. Vestibulum viverra, magna ut convallis bibendum, diam dui viverra ligula, a luctus elit metus vitae nisl. In tincidunt. Mauris et magna nec dui fringilla ultrices. Praesent et ipsum sed lorem lobortis condimentum. Ut et massa. Duis porttitor. Donec mi tellus, imperdiet nec, hendrerit in, congue a, est. Nam posuere sem quis mauris. Morbi eu tellus sodales elit iaculis viverra. </p>
    <p> Cras euismod, neque sit amet fringilla feugiat, elit mi tempus pede, id auctor dolor nisl non neque. Proin consequat, mi sit amet cursus mattis, eros lectus faucibus ipsum, eget mollis nulla dolor at ante. Nulla sem. Aliquam ac nisl. Aenean eu pede. Aliquam commodo turpis sit amet lacus. Sed quam enim, nonummy suscipit, interdum eget, imperdiet quis, neque. Proin ac mi quis nibh posuere volutpat. Quisque pede. In hac habitasse platea dictumst. Nulla luctus ante nec sem. Nunc nec est eu ipsum semper viverra. Mauris leo. Aenean eget enim. Maecenas varius. Etiam id magna. </p>
    </body>
    </html>
    Last edited by _Aerospace_Eng_; 10-18-2006 at 03:02 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Regular Coder
    Join Date
    Mar 2006
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi _Aerospace_Eng_,

    Wow, Thank you. that is exactly what i was looking for. Thank you so much, i didnt realise it was that indepth.

    Cheers, Justin

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I made a change while you were replying. Be sure to get the newest code. The previous one didn't make the scrollbar go away in IE7. The newest one does.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Regular Coder
    Join Date
    Mar 2006
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    I made a change while you were replying. Be sure to get the newest code. The previous one didn't make the scrollbar go away in IE7. The newest one does.
    Thank you so much again. very apreciated

    Cheers, Justin


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •