Page 1 of 1

[Solved ] displaying "Photo loading" msg on page s

Posted: Sun Aug 22, 2004 6:12 pm
by voltrader
I would like to display a message on a page submit while a large image loads (so that the user doesn't keep pressing "done"!).

I tried this:
<input type=submit name=submit value="done" tabindex=21 onclick="javascript:document.write('<b>Please wait while we upload your photo</b>');">

but that didn't work.

Any suggestions?

Posted: Sun Aug 22, 2004 6:15 pm
by feyd
that stops the submit from happening, I believe.. call the submit, then disable the submit button, maybe "replace" the form with your "wait" text... but you need to rename your submit button to do those..

Posted: Sun Aug 22, 2004 6:50 pm
by voltrader
Thanks feyd. That makes sense -- I'll give it a go.

Posted: Sun Aug 22, 2004 9:44 pm
by k7k0
Put the message in a div tag with a style visbility:hidden and change it to "visibe" in the onSubmit (return true in the javascript function to effectively submit the form). That is the way I do (the div has a showy style to catch the attention).

Posted: Sun Aug 22, 2004 10:49 pm
by voltrader
k7k0,
Would this work?

Code: Select all

<javascript>
  var currentLayer = 'layer1';

   function showLayer(lyr)
  &#123;
      hideLayer(layer2);
      eval(lyr).visibility = 'visible';
      layer2 = lyr;
   &#125;
   function hideLayer(lyr)
  &#123;
      eval(lyr).visibility = 'hidden';
   &#125;

return true;

</script>

SOME HTML
.
.
.

<div id="layer1" style="visibility: 
      hidden;">Please wait while we upload your photo...</div>

<input type=submit name=submit value="done" tabindex=21 onsubmit="javascript:showLayer('layer1')>;">

Posted: Sun Aug 22, 2004 11:43 pm
by voltrader
I made the function more direct than 1st try above, but it doesn't seem to work.

Script seems to be submitting form properly, but "Please wait while we upload your photo" isn't displayed.

Any suggestions?

Code: Select all

<script language='javascript'> 

   function showLayer(lyr) 
  &#123; 
      eval(lyr).visibility = 'visible';
      return true;
   &#125; 
</script> 

SOME HTML 
. 
. 
. 
<td>
<div id="layer1" style="visibility: 
      hidden;">Please wait while we upload your photo...</div> 
</td>
<input type=submit name=submit value="done" tabindex=21 onsubmit="javascript:showLayer('layer1')>;">

Posted: Sun Aug 22, 2004 11:53 pm
by feyd

Code: Select all

var obj = document.getElementById ? document.getElementById( lyr ) : document.all&#1111; lyr ];
obj.visibility = 'visible';

Posted: Mon Aug 23, 2004 12:25 am
by voltrader
Thanks feyd -- I switched my code for yours and gave it a try.

The div text started off as 'visible' before the submit page, so I tried a couple of different things: first, I removed the hard-coded "style: visbility='hidden'" in layer1, then I tried setting default visibility to 'hidden' at the top of js -- all to no avail.

Code: Select all

<script language='javascript'> 

// set default visibility

document.layer1.visibility='hidden'

   function showLayer(lyr) 
  &#123; 
   var obj = document.getElementById ? document.getElementById( lyr ) : document.all&#1111; lyr ]; 
   obj.visibility = 'visible';
   return true;
   &#125; 
</script> 

SOME HTML 
. 
. 
. 
<td> 
<div id="layer1">Please wait while we upload your photo...</div> 
</td> 
<input type=submit name=submit value="done" tabindex=21 onsubmit="javascript:showLayer('layer1')>;">

Posted: Mon Aug 23, 2004 12:40 am
by feyd
hmmm... maybe adding the CSS like so:

Code: Select all

<html>
<head>
<style type="text/css">
#layer1
&#123;
  visibility: hidden;
&#125;
</style>

Posted: Mon Aug 23, 2004 12:49 am
by voltrader
The bit of css worked in making the text hidden by default. For some reason, on pressing submit, the text does not become visible, although the form gets submitted properly.

I tried: obj.style.visibility='visible', but that didn't seem to do the trick either.

Posted: Mon Aug 23, 2004 1:31 am
by feyd
hmmm.. obj.style.visibility should be the control for it..
the following works..

Code: Select all

<html>
<head>
<style type="text/css">
#id1
&#123;
	visibility: hidden;
&#125;
</style>
<script language="Javascript">
function flipIt(id)
&#123;
	var obj = document.getElementById ? document.getElementById( id ) : document.all&#1111; id ];
	var link = document.getElementById ? document.getElementById( 'link1' ) : document.all&#1111; 'link1' ];

	link.innerHTML = (obj.style.visibility == 'visible') ? 'show it!' : 'hide it!';
	obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible';

	var buf = '';
	for(var x in obj.style)
	&#123;
		buf += (buf != '' ? '<br />' : '') + 'document.' + id + '.style.' + x + ' = ';
		switch(typeof(obj.style&#1111;x]))
		&#123;
			case 'string':
			buf += '''' + obj.style&#1111;x] + '''';
			break;

			case 'object':
			if(obj.style&#1111;x] == null)
			&#123;
				buf += '<i>null</i>';
				break;
			&#125;

			default:
			buf += obj.style&#1111;x];
			break;
		&#125;
		buf += ';';
	&#125;

	obj.innerHTML = '<small>' + buf + '</small>';
&#125;
</script>
</head>
<body>
	<div id="id1">you should never seen this content</div>
	<a href="javascript:flipIt('id1')" id="link1">show it!</a>
</body>
</html>
here's a variant using "display":

Code: Select all

<html>
<head>
<style type="text/css">
#id1
&#123;
	display: none;
&#125;

.test td
&#123;
	font-size: 10px;
	/*border: 1px solid black;*/
	padding: 4px;
	margin: 0;
&#125;

.test tr.even
&#123;
	background-color: #AAA;
&#125;

.test tr.odd
&#123;
	background-color: #99F;
&#125;
</style>
<script language="Javascript">
function flipIt(id)
&#123;
	var obj = document.getElementById ? document.getElementById( id ) : document.all&#1111; id ];
	var link = document.getElementById ? document.getElementById( 'link1' ) : document.all&#1111; 'link1' ];

	link.innerHTML = (obj.style.display == 'block') ? 'show it!' : 'hide it!';
	obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';

	var buf = '';
	var z = 0;
	var y = 3;
	var flip = 0;
	for(var x in obj.style)
	&#123;
		if(z % y == 0)
			buf += '<tr class="' + (flip ? 'even' : 'odd' ) + '">';
		buf += '<td nowrap="nowrap">document.' + id + '.style.' + x + ' = ';

		switch(typeof(obj.style&#1111;x]))
		&#123;
			case 'string':
			buf += '''' + obj.style&#1111;x] + '''';
			break;

			case 'object':
			if(obj.style&#1111;x] == null)
			&#123;
				buf += '<i>null</i>';
				break;
			&#125;

			default:
			buf += obj.style&#1111;x];
			break;
		&#125;
		buf += ';</td>';
		if(z % y == y - 1)
		&#123;
			buf += '</tr>\n';
			flip++;
			flip %= 2;
		&#125;
		z++;
	&#125;

	var left = --z % y;

	if(left)
		if(left > 1)
			buf += '<td colspan="' + left + '">&nbsp;</td></tr>';
		else
			buf += '<td>&nbsp;</td></tr>';

	obj.innerHTML = '<table class="test">' + buf + '</table>';
&#125;
</script>
</head>
<body>
	<div id="id1">you should never seen this content</div>
	<a href="javascript:flipIt('id1')" id="link1">show it!</a>
</body>
</html>

Posted: Mon Aug 23, 2004 3:01 am
by voltrader
Thanks again for the help!

Your initial suggestion:

document.getElementById('layer1').style.visibility='visible';

works fine now that I moved the onSubmit from the INPUT statement to the FORM statement.