What can I do while javascript submits the page??

C

charlie_M

I am looking for advice... I am using a 'stylesheet menu' and
javascript events to produce a visual menu for some fairly complex
pages. Below is the basic idea
on how it works:
//===================
<html><head><title>My menu</title>
<style>
..navdown {Font-family : Arial, Helvetica, sans-serif;font-size : 12px;
background-color : #2580c6;color : White;line-height : 25px;}
..navup {Font-family : Arial, Helvetica, sans-serif;font-size : 12px;
color : black;background-color : #dbdbdb;line-height : 25px;}
</style>
</head><body>

<form method=POST action='................'>
&nbsp;</TD></TR>
Click to expand...
<TR><Td class="navup"
onClick="document.forms[0].MYBUTTON.value='SIMPLE';document.forms[0].submit()"
onMouseOver="className='navdown'; style.cursor='pointer';"
onMouseOut="className='navup';" >Customer Service Subscriber
Lookup</Td><TD class='blkbord'>Perform address change, suspend,
extend, seasonal addresses</td><td class='blkbord'>&nbsp;</TD></TR>
<tr><td class="navup"
onClick="document.forms[0].MYBUTTON.value='GLOOK';document.forms[0].submit()"
onMouseOver="className='navdown'; style.cursor='pointer';"
onMouseOut="className='navup';" align='top'>Customer Service Group
Lookups</Td><TD class='blkbord'>View/manage group subscribers</td><td
class='blkbord'>&nbsp;</TD></TR>
</table></form></body></html>
//========================
as you can see... it manipulates a table's <TD>'s forground/background
colors when the mouse passes on/off them. The advise I need is what can
I do when the client CLICKS on one of the menu items since it takes a
second or two for the new page to arrive???? Something like : blank the
forground/background colors??? Can this be done??

At present... the user clicks on the element.. and releases... and
sometimes he can still slide around over other buttons until the new
page is displayed. There is just no visual feedback.

What are the possibilities that could be done?? How??

TIA
Chuck
 
A

ASM

charlie_M said:
I am looking for advice... I am using a 'stylesheet menu' and
javascript events to produce a visual menu for some fairly complex
pages. Below is the basic idea
on how it works:
//===================
<html><head><title>My menu</title>
<style>
.navdown {Font-family : Arial, Helvetica, sans-serif;font-size : 12px;
background-color : #2580c6;color : White;line-height : 25px;}
.navup {Font-family : Arial, Helvetica, sans-serif;font-size : 12px;
color : black;background-color : #dbdbdb;line-height : 25px;}
Click to expand...

..navdown, .navup, .navclic {
Font-family : Arial, Helvetica, sans-serif;
font-size : 12px; line-height : 25px;
}
..navdown { background-color : #2580c6;color : White; cursor='pointer'; }
..navup {color : black;background-color : #dbdbdb;}
..navclick {color : red;background-color : yellow;}
</style>
</head><body>

<form method=POST action='................'>
<table border=0 cellpadding=3>


<TR><Td class="navup"
Click to expand...

onmousedwn="this.className='navclic';"
onmouseup="document.forms[0].MYBUTTON.value='SIMPLE';
this.className='';
document.forms[0].submit()"
onMouseOver="this.className='navdown'; style."
onMouseOut="this.className='navup';" >Customer Service Subscriber
Lookup</Td>
Click to expand...

and why to do not use simple links ?

..nav a {
display: block;
width: 100%;
font-family : Arial, Helvetica, sans-serif;
font-size : 12px; line-height : 25px;
background-color : #2580c6;color : White;
}
..nav a:hover { color : black;background-color : #dbdbdb; }
..nav a:active { color : red;background-color : yellow; }

<form method=POST action='................'>
<table border=0 cellpadding=3 class="nav">
<tr >
<td class='blkshort' bgcolor='#c51806' colspan='3'>
&nbsp;
</TD>
</TR>
<TR>
<TR>
<TD>
<a href="#" onclick="
document.forms[0].MYBUTTON.value='SIMPLE';
document.forms[0].submit();
return false;">
Customer Service Subscriber
</a>
</TD>
<TD class='blkbord'>
Perform address change, suspend,
extend, seasonal addresses
</td>
<td class='blkbord'>&nbsp;
</TD>
</TR>
<tr>
<td>
<a href="#" onclick="
document.forms[0].MYBUTTON.value='GLOOK';
document.forms[0].submit()"
return false;">
Customer Service Group Lookups
</a>
</Td>
<TD class='blkbord'>View/manage group subscribers</td>
<td class='blkbord'>&nbsp;</TD>
</TR>
</table></form>
 
A

ASM

charlie_M said:
At present... the user clicks on the element.. and releases... and
sometimes he can still slide around over other buttons until the new
page is displayed. There is just no visual feedback.

What are the possibilities that could be done?? How??
Click to expand...

with example given with css and links

<table ID="navig" class="nav">

... blah ...

<a href="#" onclick="
document.forms[0].MYBUTTON.value='SIMPLE';
document.forms[0].submit();
document.getElementById('navig').style.display='none';
return false;">
Customer Service Subscriber
</a>


surprise !
 
C

charlie_M

"why not use links??"..... because it works without links. There is
MUCH more involved than simply writing some javascript.... it is at
least 3 languages deep... I cannot change it.

I was wondering what options were available to basically disable this
and the rest of the rollovers during submit() while the webserver and
underlying applications get around to answering the request.

Looking at your solution... can I redefine the 2 styles' colors at
onclick() time??
 
C

Christopher Benson-Manica

charlie_M said:
I was wondering what options were available to basically disable this
and the rest of the rollovers during submit() while the webserver and
underlying applications get around to answering the request.
Click to expand...

One thing you could do is have submit direct the user to a "waiting"
page, that displays a progress bar or some other animation. It would
be responsible for making the actual request, so while the server
processes and sends the results of the request, the user can see a
reassuring "please wait" screen.
 
A

ASM

charlie_M said:
"why not use links??"..... because it works without links.
Click to expand...

No, it works also without links :-/

To change color and appearance on mouse hovering
css about links are made for that
To use JS to change class eat more CPU (overall with IE Windows)

Any way :
I do not understand, you already have a style-sheet ...
and JS is only needed to do I don't no what with some unknown buttons
There is
MUCH more involved than simply writing some javascript.... it is at
least 3 languages deep... I cannot change it.
Click to expand...

it's your baby
I was wondering what options were available to basically disable this
and the rest of the rollovers during submit() while the webserver and
underlying applications get around to answering the request.
Click to expand...
Looking at your solution... can I redefine the 2 styles' colors at
onclick() time??
Click to expand...

hu? you can use colors you want of course :)

some corrections (hide table on td clicked) :

<table id="navig">
<tr><td class="navup"
onmousedown="this.className='navclic';"
onmouseup="document.forms[0].MYBUTTON.value='SIMPLE';
this.className='';
document.getElementById('navig').style.display='none';
document.forms[0].submit();"
onMouseOver="this.className='navdown';"
onMouseOut="this.className='navup';"> your text here </td>

but I don't know why this button value is changed
while submiting
aren't we leaving this page ?
 
C

charlie_M

Setting the ID on the table and then declaring 'style=none' at submit
time works great..... is exactly what I needed.

Many thanks
Chuck
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can anyone please help? HTML - two tables applying different styles 4
I need help fixing my website 2
Help with my responsive home page 2
Can I modify the tooltip display on an <input type="xx"> statement? 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Image shifts to the right when export the page to pdf 4
Can I change the "root" value for rem sizes? 3
SendGrid email issue in responsive Gmail 1

Members online

No members online now.
Total: 24 (members: 0, guests: 24)
Robots: 368

Forum statistics

Threads
473,770
Messages
2,569,584
Members
45,077
Latest member
SangMoor21

Latest Threads

Top