0

Hi,

I have this popup with a Login Form (and a register form comment):

div id="login" style="float:right; width:15%; padding-top:3px;">
                            <a href="#" class="topopup">LOGIN | REGISTAR</a>

                            <div id="toPopup"> 
                                <div class="close"></div>
                                <div id="popup_content"> <!--your content start-->
                                    <h2>Login</h2>
                                    <form id="login">
                                        <table cellpadding="3" cellspacing="2">
                                            <tr>
                                                <td>
                                                    Username:
                                                </td>
                                                <td>
                                                    <input type="text" name="username" id="username" />
                                                </td>
                                            </tr>

                                            <tr height="10px"></tr>

                                            <tr>
                                                <td>
                                                    Password:
                                                </td>
                                                <td>
                                                    <input type="password" name="password" id="password" />
                                                    <br/>
                                                    <span style="font-size:10px;"><a href="">Esqueceu-se da password?</a></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>

                                                </td>
                                                <td style="text-align:left;">
                                                    <input type="submit" name="login" id="login" />
                                                    <span style="font-size:12px;"><a href="">Ainda não está inscrito?</a></span>
                                                </td>
                                            </tr>
                                        </table>
                                    </form>

                                    <!--
                                    <form id="register">
                                        <table cellpadding="3" cellspacing="2">
                                            <tr>
                                                <td>
                                                    Username:
                                                </td>
                                                <td>
                                                    <input type="text" name="username" id="username" />
                                                </td>
                                            </tr>

                                            <tr height="10px"></tr>

                                            <tr>
                                                <td>
                                                    Password:
                                                </td>
                                                <td>
                                                    <input type="password" name="password" id="password" />
                                                    <br/>
                                                    <span style="font-size:10px;"><a href="#">Esqueceu-se da password?</a></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>

                                                </td>
                                                <td style="text-align:left;">
                                                    <input type="submit" name="login" id="login" />
                                                    <span style="font-size:12px;"><a href="#register">Ainda não está inscrito?</a></span>
                                                </td>
                                            </tr>
                                        </table>
                                    </form>
                                    -->
                                </div> <!--your content end-->
                            </div> <!--toPopup end-->
                            <div class="loader"></div>
                            <div id="backgroundPopup"></div>
                        </div>

What i want is to change with a jquery effect the forms when i click in the anchor link

<span style="font-size:12px;"><a href="#register">Ainda não está inscrito?</a></span>

Can you help me, please?

Thank you

2
Contributors
3
Replies
20
Views
4 Years
Discussion Span
Last Post by JorgeM
0

Here's one option. Create two links above... a login and register. They can be side by side by doing something like this.

<a href="#" id="loginLink" class="topopup">LOGIN</a> | 
<a href="#" id="registerLink" class="topopup">REGISTAR</a>

Ok, then just add a block of jQuery code to show and hide the appropriate form.

<script>
    $("#loginLink").click(function() {
      $("#login").show();
      $("#register").hide();
    });

    $("#registerLink").click(function() {
      $("#login").hide();
      $("#register").show();
    });
</script>

Note
In your example, you used the id="login" twice.. Line 1 & 8. IDs should be unique. Call the Div in line #1 something else. Also, move in the <h2> Login element within the appropriate form areas, by wrapping each form within their own divs in the event you want to have other elements that are specific to each form area... such as titles, other links, etc...

Oh, also, you may want the one of the forms to be set to display:none upon page load.

Edited by JorgeM

0

Well, there is a link on that demo page that takes you back to the actual tutorial/instructions on how to build it.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.