What can I do while javascript submits the page??

Discussion in 'Javascript' started by charlie_M, Sep 22, 2005.

  1. charlie_M

    charlie_M Guest

    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='................'>
    <table border=0 cellpadding=3>
    <tr ><td class='blkshort' bgcolor='#c51806' colspan='3'
    >&nbsp;</TD></TR>

    <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
    charlie_M, Sep 22, 2005
    #1
    1. Advertising

  2. charlie_M

    ASM Guest

    charlie_M wrote:
    > 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;}


    ..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='blkshort' bgcolor='#c51806' colspan='3'
    >
    >>&nbsp;</TD></TR>

    >
    > <TR><Td class="navup"


    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>


    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>


    --
    Stephane Moriaux et son [moins] vieux Mac
    ASM, Sep 22, 2005
    #2
    1. Advertising

  3. charlie_M

    ASM Guest

    charlie_M wrote:

    > 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??


    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 !

    --
    Stephane Moriaux et son [moins] vieux Mac
    ASM, Sep 22, 2005
    #3
  4. charlie_M

    charlie_M Guest

    "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??
    charlie_M, Sep 22, 2005
    #4
  5. charlie_M <> wrote:

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


    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.

    --
    Christopher Benson-Manica | I *should* know what I'm talking about - if I
    ataru(at)cyberspace.org | don't, I need to know. Flames welcome.
    Christopher Benson-Manica, Sep 22, 2005
    #5
  6. charlie_M

    ASM Guest

    charlie_M wrote:
    > "why not use links??"..... because it works without links.


    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.


    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.


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


    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 ?

    --
    Stephane Moriaux et son [moins] vieux Mac
    ASM, Sep 23, 2005
    #6
  7. charlie_M

    charlie_M Guest

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

    Many thanks
    Chuck
    charlie_M, Sep 23, 2005
    #7
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Scott M.

    Run JavaScript before Form Submits

    Scott M., Nov 17, 2003, in forum: ASP .Net
    Replies:
    14
    Views:
    7,041
    Joe Gass
    Nov 18, 2003
  2. Umesh

    Page Submits twice

    Umesh, Feb 24, 2006, in forum: HTML
    Replies:
    3
    Views:
    597
    Alan J. Flavell
    Feb 24, 2006
  3. Umesh

    Page Submits Twice

    Umesh, Feb 24, 2006, in forum: ASP General
    Replies:
    5
    Views:
    132
    Evertjan.
    Feb 25, 2006
  4. jpf
    Replies:
    0
    Views:
    87
  5. David Williams

    document.write submits page

    David Williams, Oct 18, 2007, in forum: Javascript
    Replies:
    1
    Views:
    76
    Dr J R Stockton
    Oct 18, 2007
Loading...

Share This Page