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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
voltrader
Forum Contributor
Posts: 223
Joined: Wed Jul 07, 2004 12:44 pm
Location: SF Bay Area

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

Post 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?
Last edited by voltrader on Fri Aug 27, 2004 8:38 am, edited 1 time in total.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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..
User avatar
voltrader
Forum Contributor
Posts: 223
Joined: Wed Jul 07, 2004 12:44 pm
Location: SF Bay Area

Post by voltrader »

Thanks feyd. That makes sense -- I'll give it a go.
k7k0
Forum Newbie
Posts: 2
Joined: Tue Mar 30, 2004 2:40 pm

Post 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).
User avatar
voltrader
Forum Contributor
Posts: 223
Joined: Wed Jul 07, 2004 12:44 pm
Location: SF Bay Area

Post 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')>;">
User avatar
voltrader
Forum Contributor
Posts: 223
Joined: Wed Jul 07, 2004 12:44 pm
Location: SF Bay Area

Post 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')>;">
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Code: Select all

var obj = document.getElementById ? document.getElementById( lyr ) : document.all&#1111; lyr ];
obj.visibility = 'visible';
User avatar
voltrader
Forum Contributor
Posts: 223
Joined: Wed Jul 07, 2004 12:44 pm
Location: SF Bay Area

Post 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')>;">
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

hmmm... maybe adding the CSS like so:

Code: Select all

<html>
<head>
<style type="text/css">
#layer1
&#123;
  visibility: hidden;
&#125;
</style>
User avatar
voltrader
Forum Contributor
Posts: 223
Joined: Wed Jul 07, 2004 12:44 pm
Location: SF Bay Area

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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>
User avatar
voltrader
Forum Contributor
Posts: 223
Joined: Wed Jul 07, 2004 12:44 pm
Location: SF Bay Area

Post 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.
Post Reply