Solved

Use lightbox to tell user page is loading

Posted on 2009-07-12
3
250 Views
Last Modified: 2012-05-07
Hey,

I have a form which when submitted uses a $.get(script, {}, gotoSite) query, which runs a python script and then redirects to the required page. The script takes approximately 30 seconds to run, so during this time i want to use a lightbox to tell the user that the page is loading.

 I had a look at jquery's lighbox, but couldnt see how i could implement it.
At the moment i load a 'laoding' html page at the same time as the $.get() function, then i close that page when the gotoSite() function is reached.

View bellow code:
<script>
    url = "cgi-bin/script.py?";
    function submitUsingGet()
    {
        ....
        $.get(url, {}, gotoSite);
        createWindow();   // This is where i load the html 'loading page'
    }
 
    function gotoSite()
    {
        window.location = "page.htm";
        closeBar();   // This is where i close the 'loading page'
    }
</script>

Open in new window

0
Comment
Question by:bman87
3 Comments
 
LVL 17

Accepted Solution

by:
selvol earned 500 total points
ID: 24836696
Have yo tried this method here.
 
You can replace the <iframe............
with your page....
 
http://www.weberdev.com/get_example-4431.html
Selvol

<style>
 
body {
  margin: 0; 
  padding: 0;
}
 
A {
  font-family: Verdana, Arial;
  font-size: 11px;
  color: #4D6E8D;
  text-decoration: none;
}
 
INPUT {
  font-family: Verdana, Arial;
  font-size: 11px;
  color: #8B92A7;
  border: 1px solid #E0DEDE;
  background: #FFFFFF;
}
 
.dropdown {
  font-family: Verdana, Arial;
  font-size: 11px;
  color: #8B92A7;
  border: 1px solid #E0DEDE;
  background: #FFFFFF;
}
 
TEXTAREA {
  font-family: Verdana, Arial;
  font-size: 11px;
  color: #8B92A7;
  border: 1px solid #E0DEDE;
}
 
A:HOVER {
  font-family: Verdana, Arial;
  font-size: 11px;
  color: #8B92A7;
  text-decoration: none;
}
 
.text {
  font-family: Verdana, Arial;
  font-size: 11px;
  color: #999999;
}
 
.small_text {
  font-family: Verdana, Arial;
  font-size: 9px;
  color: #8B92A7;
}
 
A.enlarge {
  font-family: Courier New, Courier, Verdana, Arial;
  font-size: 11px;
  color: #4D6E8D;
}
 
A.enlarge:HOVER {
  font-family: Courier New, Courier, Verdana, Arial;
  font-size: 11px;
  color: #8B92A7;
}
 
.comment_head {
  font-family: Verdana, Arial;
  font-size: 11px;
  color: #8B92A7;
  font-weight: bold;
}
 
.ok {
  font-family: Verdana, Arial;
  font-size: 11px;
  color: #008811;
}
 
.err {
  font-family: Verdana, Arial;
  font-size: 11px;
  color: #FF0000;
}
 
.head {
  font-family: Verdana, Arial;
  font-size: 26px;
  color: #999999;
}
 
.admin_head {
  font-family: Verdana, Arial;
  font-size: 30px;
  color: #999999;
}
 
.blog_head {
  font-family: Verdana, Arial;
  font-size: 20px;
  color: #949BA9;
}
 
.blog_head A {
  font-family: Verdana, Arial;
  font-size: 20px;
  color: #949BA9;
}
 
.blog_head A:HOVER {
  font-family: Verdana, Arial;
  font-size: 20px;
  color: #DDDDDD;
}
 
.subHead {
  font-family: Verdana, Arial;
  font-size: 18px;
  color: #8B92A7;
}
 
.menu {
  font-family: Verdana, Arial;
  font-size: 11px;
  color: #8B92A7;
  border-left: 1px solid #E0DEDE;
  border-right: 1px solid #E0DEDE;
  border-top: 1px solid #E0DEDE;
  border-bottom: 1px dashed #E0DEDE;
  cursor: pointer;
}
 
.sub_menu {
  font-family: Verdana, Arial;
  font-size: 11px;
  color: #999999;
  border-left: 1px solid #E0DEDE;
  border-right: 1px solid #E0DEDE;
  border-bottom: 1px solid #E0DEDE;
  cursor: pointer;
}
 
.admin_menu {
  font-family: Verdana, Arial;
  font-size: 11px;
  color: #999999;
  border-top: 1px solid #E0DEDE;
  border-left: 1px solid #E0DEDE;
  border-right: 1px solid #E0DEDE;
  border-bottom: 1px solid #E0DEDE;
  cursor: pointer;
}
 
.selected_menu {
  background: #F3F3F3
}
 
.cptext {
  font-family: Verdana, Arial;
  font-size: 10px;
  color: #888888;
}
 
#fullPage {
	position: absolute;
	z-index: 100;
	background-color: #fff;
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
	top: 0%;
	left: 0;
	height: 100%;
	width: 100%;
	text-align: center;
	line-height: 10;	
}
 
#siteLoader {
	position: absolute;
	z-index: 100;
	background-color: #000;
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
	top: 40%;
	left: 0;
	height: 43%;
	width: 100%;
	text-align: center;
	line-height: 0;	
}
 
#loadImg {
	position: absolute;
	text-align: center;
	background-color: #fff;
	width: 100%;
	z-index: 100;
	top: 10%;
	left: 0;
	line-height: 0;	
}
 
#loadText {
  position: relative;
  font-family: Verdana, Arial;
  font-size: 20px;
  top: 87%;
  height: 25px;
  color: #fff;	
  text-align: center;  
	vertical-align: bottom;
}
 
#siteDetailLoader {
  position: relative;
  font-family: Verdana, Arial;
  font-size: 10px;
  color: #fff;	
	text-align: right;  
  top: 5%;	
  right: 10px;
}
</style>
<html>
  <head>
    <title>Load</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen">
  </head>
  <body topmargin="0" bottommargin="5" onLoad="document.getElementById('siteLoader').style.display = 'none';">
      <div id='siteLoader'>
        <div id='siteDetailLoader'>
        </div>
        <div id='loadImg'>
        <img src='YOUR IMAGE.gif' border='0'>
        </div>
        <div id='loadText'>
  Loading
        </div>
      </div>
      YOUR PAGE HERE
    </body>
 
 </html>

Open in new window

0
 
LVL 16

Expert Comment

by:CWS (haripriya)
ID: 37304483
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
how can i turn the array into an object 4 50
jQuery dialog box help 2 17
How can I make the first part identical to the second ? 1 26
Validating Date 4 15
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question