JavaScript - Wait For Variable To Change Before Continuing.

This is my first post and hope someone can show me how to have JavaScript wait until a function has completed before moving on? I tried a timer, but the database does not always came back with data durning the time alloted. Thank you for any help.

Code:

function RunMerch()

//Reprompt script


{
                var fW = (typeof getFormWarpRequest == 'function' ? getFormWarpRequest() : document.forms['formWarpRequest']);
                if ( !fW || fW == undefined) { 
                fW = ( formWarpRequest_THIS_ ? formWarpRequest_THIS_ : formWarpRequest_NS_ );}
                //fW._oLstChoicesMyFieldName.selectedIndex = 0;
                var preFix = '';
                if (fW.elements['cv.id'])
                {
                preFix = fW.elements['cv.id'].value;
                }
setTimeout('oCV' + preFix + '.promptAction(\'reprompt\')', 1000);
{

//Call val () function  -- This is where I want it to complete the reprompt 

function before moving on
val();
}
}

// This will run the valtradselection() function

function val()
{
valtradselection();
}

I try to get data from database and display them onto a div, after all messages are shown on the div, then only it will know the scrollheight of the div, it will auto scroll to the bottom of div as default by function asd(). My problem is when there are too many messages on database, it took very long time to display them all onto the div, so asd() executed before all messages are displayed. Meaning the scrollheight of the div is incorrect at this point, thus auto scroll to bottom is fail.
Code:

$(function() { showMsg(); asd(); });

How to wait until showMsg() finish render the contents before execute asd()? I havejQuery.get(); .append(); .replace(); .innerHTML inside showMsg().

The problem is fixed when I use timeout to execute asd() after 3 seconds :

Code:

$(function() { showMsg(); setTimeout(asd();, 3000); });

That's why I sure asd() is executed when showMsg() is not yet finish loaded the contents.

I guess I know where is the problem. If showMsg() is executed BEFORE the DOM is ready, and if asd() is executed AFTER DOM is ready (at this point all messages are rendered already), so the problem is fix. But now my situation is AFTER the DOM is ready, all messages still not yet finish rendered, because showMsg() and asd() are executed only AFTER the DOM is ready. "executed" doesn't mean "finish rendered". My question is how to make sure showMsg() finish rendered the contents into a div before execute asd() ?

I have an embedded font in my CSS however somtimes the texts loads before the font loads (i.e. the text is loaded in a normal font the it changes after). Is there anyway i can say dont load page until the font file is loaded, or maybe dont show the div until the font is loaded?

Watching firebug on facebook, I noticed I'm able to receive chat messages and notifications without constantly polling the server. How is this achieved? Google gives me mixed (seemingly irrelevant) results. I read 3 different methods related to "reverse AJAX" but it doesn't seem to be exactly what I'm looking for - i.e., no constant polling and no "piggy-backing" (waiting for user to do something then send extra data).

ok.

so i have all these big images and i need to let the whole page load before the viewer sees it

what i would like is for a separate url (or something to completely cover the html page so you cant see it loading) to say please wait or something like that.

Help!

Hi,

I have php script that uploads a file. once i click upload it should display a animated GIF image or "Loading please wait" message with the backround transparent screen covering the whole page so that the user is not able to click anything during file upload. How can i do this?

Could someone help me on this.

Thanks in advance.

Hi,

I have a site that runs a javascript slideshow automatically when a user visits it.

It is designed in such a way that I cannot pre-load individual images for aesthetic reasons. (Also the whole concept makes my brain hurt.)

I therefore need 1 of 2 things:

1. A preloader that doesn't show the page or start the slideshow until all the images are loaded.

or

2. I could start with the slideshow paused, and when the page is fully loaded, the play command (currently attached to a 'play' button) is 'sent'.

(I'm not techy, so this is the best I can do as explanation.)

The latter would probably be more elegant, especially if ultimately I could hide the controls for the slideshow with a loading bar until all the html is loaded, and then show them when the slideshow starts.

I'm sorry if this is a really basic question. I tried searching the site but couldn't find anything.

If you do feel like answering, can you imagine that you are speaking to a 5 year old. Then dumb it down a bit. I need all the explanation and clarity I can get!

Thanks!

I have been using a javascript code to display a "Please wait..." message on screen but it seems to work in some instances and not in others.
Please assist me with javascript code that works in all instances

Issue 1:-
it doesnt pops up with d wait msg ven v click on buttons..
the buttons are not submit buttons.. instead on clicking dat button it calls a fnformsubmit() userdfnd funtion..

Issue 2:--
even after d response cums the wait msg window doesnt close.. it hangs in d backgrnd..

The foll code is used in the footer.jsp file... Please assist...

<html>
<head>
<script type="text/javascript" src="/js/os/jquery-1.5.1.min.js" ></script>
<script type="text/javascript" src="/js/os/jquery-ui-1.8.14.custom.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="/js/os/jquery-ui-1.8.14.custom.css">

<script type="text/javascript">

for (var i = 0; i < document.links.length; i++) {
var attrib = document.links[i];
if (attrib.addEventListener) {
attrib.addEventListener('click', attachModalDialog, false);
} else if (attrib.attachEvent) {
attrib.attachEvent('onclick', attachModalDialog);
}
}

function attachModalDialog(evt) {
//alert('for Click event.');

$(ModalDialog).dialog({
modal: 'true',
title: 'Please Wait...',
width: 400,
height: 300,
closeOnEscape: false
}).dialog('open');
return true;
}

</script>

</head>


<body>
<div id="ModalDialog" style="display:none;">
<pre>

Server side process is in-progress.
Please wait.....

</pre>
</div>

</body>

</html>

Hi,

I have a webpage with a world clock.

On the clock page are 12 buttons (World Cities). When the user clicks these buttons. The time for the relevant world city is displayed. (The time is updated by an on.click function for each individual button. That either subtracts or adds the hours from GMT. For example. If the time is GMT 18:00:00. The user clicks the Paris button and the function adds 1 hour to result in 19:00:00)

However. If the GMT time is for example 21:00:00 and the user clicks the Tokyo button (GMT+9 hours). The time displayed is 30:00:00.

So I have been trying to work out how I can stop the time adding past 23:59:59.

This is probably so simple which is probably why I cant find any help online. It has stumped me and any help would be appreciated.

I have copied and pasted my code below in the hope that helps. Thanks in advance if you can offer any advice.

Code:

<script>
	  

function start() {
  GMToffset = 0;
  t=setInterval('digitalclock()',500);
}

function digitalclock()
{
var today=new Date();
var hours=today.getHours() + GMToffset;
var minutes=today.getMinutes();
var seconds=today.getSeconds();
minutes=checkTime(minutes);
seconds=checkTime(seconds);
hours=checkTime(hours);
document.getElementById('txt').innerHTML=hours+":"+minutes+":"+seconds;
}

function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}

function updatetime1() {
  GMToffset = -3; 
}

function updatetime2() {
  GMToffset = -4; 
}

function updatetime3() {
  GMToffset = -7; 
}

function updatetime4() {
  GMToffset = -10; 
}

function updatetime5() {
  GMToffset = -11; 
}

function updatetime6() {
  GMToffset = -13; 
}

function updatetime7() {
  GMToffset = +9; 
}

function updatetime8() {
  GMToffset = +8; 
}

function updatetime9() {
  GMToffset = +7; 
}

function updatetime10() {
  GMToffset = +1; 
}

function updatetime11() {
  GMToffset = +0; 
}

function updatetime12() {
  GMToffset = +3; 
}

</script>

<div align="center">
<input type="button" onclick="updatetime1()" value="Time in Buenos Aires" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime2()" value="Time in New York" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime3()" value="Time in San Francisco" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" /><br>
<input type="button" onclick="updatetime4()" value="Time in Hawaii" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime5()" value="Time in Fiji" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime6()" value="Time in Sydney" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" /><br><br>

<body onload="start()">
<div id="txt"></div>

</div>

<div align="center">
<input type="button" onclick="updatetime7()" value="Time in Tokyo" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime8()" value="Time in Hong Kong" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime9()" value="Time in Bangkok" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" /><br>
<input type="button" onclick="updatetime10()" value="Time in Rome" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime11()" value="Time in London" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime12()" value="Time in Moscow" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />

Hii...i have created a Gallery for my website..now i want to add a Please Wait gif image between every picture until it loads completely..So Please Help..where to and what to add..?

HTML Part :

Code:

<div id="gellary">
 <center>
<form name=slideform>
<table cellspacing=1 cellpadding=4 bgcolor="#4b7b9f">
<tr>
<td align=center bgcolor="white">
<font style="color:#24618e"><b>Our Gallery</b></font>
</td>
</tr>
<tr>
<td align=center bgcolor="white" width=960 height=540>
<img src="gallery/gall1.jpg" name="show" height="540" width="960">
</td>
</tr>
<tr>
<td align=center bgcolor="#88d6f0">
<select name="slide" onChange="change();">
<option value="gallery/gall1.jpg" selected >Image 1
<option value="gallery/gall2.jpg" >Image 2
<option value="gallery/gall3.png">Image 3
<option value="gallery/gall4.png">Image 4
<option value="gallery/gall5.png">Image 5
<option value="gallery/gall6.jpg">Image 6
<option value="gallery/gall7.jpg">Image 7
<option value="gallery/gall8.jpg">Image 8




</select>
</td>
</tr>
<tr>
<td align=center bgcolor="#1797c4">
<input type=button onClick="first();" value="<< First" title="Beginning">
<input type=button onClick="previous();" value="<<" title="Previous">
<input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay">
<input type=button onClick="next();" value=">>" title="Next">
<input type=button onClick="last();" value="Last >>" title="End">
</td>
</tr>
</table>
</form>
</center>
 </div>

===============================

JavaScript Part:

Code:

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
var rotate_delay = 3000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {

if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;

   }
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
   }
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
   }
}
//  End -->
</script>

Hi, I'm having some issues turning this "Please Wait"/Disabled button into a function.

Code:

<input type="submit" value="Submit Form" onClick="this.disabled = 'true'; this.value='Please wait...';" />

Code:

function pleasewait()
{
this.disabled = 'true';
this.value='Please wait..'
}

<input type="submit" value="Submit Form" onClick="pleasewait();" />

Thanks much

Hello,

I have been looking for a code which loads my content and images as well as my javascript and style before my visitor enters my site. I have been on a website before (I cannot remember the link) and it has:

Quote:
Please wait til we take our own sweet time to load this page
with the content behind it, but slightly 'dimmed'. I think that this would be great for my site.

If anyone would help me with this I will greatly appreciate it!
Thanks.

http://www.***.com/5.html

i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple....

thanks for any help

ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done?

Hi,

I have a programing problem that have been around for ages. I have search on google using several expressions and words and after hours of digging i'm still unable to do it.

I would like to get a value from a HTML page hosted remotely with an inconstant value. Then define this value and name as a javascript variable and apply or show in my page.

Thanks for all the help

P.S. Is there any way to make a domain lookup in javascript? I mean a user enters a domain and the script converts to an ip and shows to the user. If not thanks, probably it can only be done in the server side...

Hello

I have a php page in which I declared a js variable... right at the top of the page...

<script type="text/javascript">
var tester = 0;
</script>


Later in the page I test this variable...

<script type="text/javascript">

if (tester==1){

do some stuff!!
}

</script>

But I keep getting an error variable _tester undefined


Am I missing something obvious... I am new to js... but this seems really straightforward