Home/ Questions/Q 6093551
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T12:34:22+00:00

I’ve been asked to prototype a login box for a project, with the goal

  • 0

I’ve been asked to prototype a login box for a project, with the goal of emulating how an AJAX-y login box would.

Idea is:

  1. User types in username/password (any; again, this isn’t hooked up to any DBs or anything yet) and hits enter
  2. Throbber shows up for 3 seconds.
  3. User info appears.

I’ve tried doing this with jQuery as per the below; anyone have an idea what I’m doing wrong? Many thanks!

<html>
    <head>
        <link href="c/main.css" media="screen" rel="stylesheet" type="text/css" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
        <!--[if lte ie7]>
        #header #logo {margin-right: 100px;}
        <!-[endif]--> 
                <script type="text/javascript">
            jQuery(document).ready(function(){
                jQuery('#login-form').submit(function(){
                    jQuery('#login-form > *').hide();
                    jQuery('#throbber').show().delay(300).hide();
                    jQuery('#logged-in').show();
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <div id="wrapper">
            <div id="utilities"><a href="">Volunteer</a><a href="">About Us</a><input type="text" /></div>
            <div id="header">
                <img src="i/logo.png" id="logo" />
                <div id="pnav-wrapper">
                    <ul id="pnav">
                        <li><a href="#">Upgrade Your<br /><span>Skills</span></a></li>
                        <li><a href="#">Browse<br /><span>Events</span></a></li>
                        <li><a href="#">Browse<br /><span>Jobs</span></a></li>
                    </ul>
                    <div id="login">
                        <form action="#" method="get" id="login-form">
                        Username: <input id="username" type="text" /><br />
                        Password:&nbsp; <input id="password" type="password" />
                        <input type="submit" style="visibility: hidden;">
                        </form>
                        <img src="i/throbber.gif" style="display: none;" id="throbber">
                        <p id="logged-in" style="display: none;"><strong>The Admin</strong><br />
                        Administrator
                        </p>
                    </div>
                </div>
            </div>
            <div id="content"></div>
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The delay() only affects the queue for #throbber (and 300 is 0.3 second).

    Instead, use the callback of .hide() to show #logged-in after #throbber has been hidden:

    jQuery('#login-form').submit(function() {
    jQuery('#login-form > *').hide();
    jQuery('#throbber').show().delay(3000).hide(function() {
        jQuery('#logged-in').show();
    });

    return false;
});

    (demo)

    • 0