[Solved ] displaying "Photo loading" msg on page s
Moderator: General Moderators
[Solved ] displaying "Photo loading" msg on page s
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?
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.
k7k0,
Would this work?
Would this work?
Code: Select all
<javascript>
var currentLayer = 'layer1';
function showLayer(lyr)
{
hideLayer(layer2);
eval(lyr).visibility = 'visible';
layer2 = lyr;
}
function hideLayer(lyr)
{
eval(lyr).visibility = 'hidden';
}
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')>;">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?
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)
{
eval(lyr).visibility = 'visible';
return true;
}
</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')>;">- feyd
- Neighborhood Spidermoddy
- Posts: 31559
- Joined: Mon Mar 29, 2004 3:24 pm
- Location: Bothell, Washington, USA
Code: Select all
var obj = document.getElementById ? document.getElementById( lyr ) : document.allї lyr ];
obj.visibility = 'visible';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.
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)
{
var obj = document.getElementById ? document.getElementById( lyr ) : document.allї lyr ];
obj.visibility = 'visible';
return true;
}
</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')>;">- feyd
- Neighborhood Spidermoddy
- Posts: 31559
- Joined: Mon Mar 29, 2004 3:24 pm
- Location: Bothell, Washington, USA
hmmm... maybe adding the CSS like so:
Code: Select all
<html>
<head>
<style type="text/css">
#layer1
{
visibility: hidden;
}
</style>- feyd
- Neighborhood Spidermoddy
- Posts: 31559
- Joined: Mon Mar 29, 2004 3:24 pm
- Location: Bothell, Washington, USA
hmmm.. obj.style.visibility should be the control for it..
the following works..
here's a variant using "display":
the following works..
Code: Select all
<html>
<head>
<style type="text/css">
#id1
{
visibility: hidden;
}
</style>
<script language="Javascript">
function flipIt(id)
{
var obj = document.getElementById ? document.getElementById( id ) : document.allї id ];
var link = document.getElementById ? document.getElementById( 'link1' ) : document.allї '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)
{
buf += (buf != '' ? '<br />' : '') + 'document.' + id + '.style.' + x + ' = ';
switch(typeof(obj.styleїx]))
{
case 'string':
buf += '''' + obj.styleїx] + '''';
break;
case 'object':
if(obj.styleїx] == null)
{
buf += '<i>null</i>';
break;
}
default:
buf += obj.styleїx];
break;
}
buf += ';';
}
obj.innerHTML = '<small>' + buf + '</small>';
}
</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>Code: Select all
<html>
<head>
<style type="text/css">
#id1
{
display: none;
}
.test td
{
font-size: 10px;
/*border: 1px solid black;*/
padding: 4px;
margin: 0;
}
.test tr.even
{
background-color: #AAA;
}
.test tr.odd
{
background-color: #99F;
}
</style>
<script language="Javascript">
function flipIt(id)
{
var obj = document.getElementById ? document.getElementById( id ) : document.allї id ];
var link = document.getElementById ? document.getElementById( 'link1' ) : document.allї '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)
{
if(z % y == 0)
buf += '<tr class="' + (flip ? 'even' : 'odd' ) + '">';
buf += '<td nowrap="nowrap">document.' + id + '.style.' + x + ' = ';
switch(typeof(obj.styleїx]))
{
case 'string':
buf += '''' + obj.styleїx] + '''';
break;
case 'object':
if(obj.styleїx] == null)
{
buf += '<i>null</i>';
break;
}
default:
buf += obj.styleїx];
break;
}
buf += ';</td>';
if(z % y == y - 1)
{
buf += '</tr>\n';
flip++;
flip %= 2;
}
z++;
}
var left = --z % y;
if(left)
if(left > 1)
buf += '<td colspan="' + left + '"> </td></tr>';
else
buf += '<td> </td></tr>';
obj.innerHTML = '<table class="test">' + buf + '</table>';
}
</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>