Hi,
Below is the CSS Code:
#formContainer{
width:288px;
min-height:100px;
margin:0 auto;
position:relative;
z-index:1;
-moz-perspective: 800px;
-webkit-perspective: 800px;
perspective: 800px;
}
#formContainer table{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
/* Enabling 3d space for the transforms */
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
/* When the forms are flipped, they will be hidden */
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* Enabling a smooth animated transition */
-moz-transition:0.666s;
-webkit-transition:0.666s;
transition:0.666s;
}
#login{
z-index:2;
}
#recover{
z-index:1;
opacity:0;
visibility: hidden;
/* Rotating the recover password form by default */
-moz-transform:rotateX(180deg);
-moz-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
transform:rotateX(180deg);
}
#formContainer.flipped #login{
opacity:0;
visibility:hidden;
z-index:1;
/**
* Rotating the login form when the
* flipped class is added to the container
*/
-moz-transform:rotateX(-180deg);
-webkit-transform:rotateX(-180deg);
transform:rotateX(-180deg);
}
#formContainer.flipped #recover{
opacity:1;
z-index:2;
visibility: visible;
/* Rotating the recover div into view */
-moz-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
transform:rotateX(0deg);
}
The following is the JS:
$(function(){
$('.flipLink').click(function(e){
$('#formContainer').toggleClass('flipped');
$('.flash').hide('slow');
})});
And the following is the html code:
<div id="formContainer">
{{=login_form.custom.begin}}
<table id="login">
<tr>
<td
colspan='2'>{{=login_form.custom.widget.email}}</td>
</tr>
<tr>
<td
colspan='2'>{{=login_form.custom.widget.password}}</td>
</tr>
<tr>
<td><a href="#" id="flipToRecover"
class="flipLink">Forgot Password?</a></td>
<td>{{=login_form.custom.submit}}</td>
</tr>
<tr>
<td colspan="2"><div class="error
flash">{{=response.flash}}</div></td>
</tr>
</table>
{{=login_form.custom.end}}
{{=LOAD('user','request_reset_password.load',ajax=False,ajax_trap=True)}}
</div>
On Wednesday, March 14, 2012 12:53:28 AM UTC+5:30, rochacbruno wrote:
>
> can you share your CSS/ Javascript code regarding the *flipLink and
> **flipToLogin
> objects?
>
>
> *
> On Tue, Mar 13, 2012 at 4:04 PM, Sushant Taneja <
> sushant.tanej...@gmail.com> wrote:
>
>> Hi,
>>
>> In my view index.html, I have two forms: auth.login() and custom forgot
>> password form.
>> Initially the login form is displayed with a Forgot Password link. When
>> we click on the link the form flips(rotates using CSS) and the forgot
>> password form is now displayed.
>>
>> The forgot password form is a SQLFORM.factory generated form and is
>> loaded in the page via the following line of code:
>>
>> {{=LOAD('user','request_reset_password.load',ajax=False,ajax_trap=True)}}
>>
>> The flip animation i.e. CSS rotation works fine until the forgot password
>> form is submitted.
>> After submission, the CSS breaksWARNING with import and
>> threading.local(): they were hot topics on the
>> pycon webdev summit, and other frameworks are facing problems with
>> them.
>>
>> They could be memory hungry and contention problems could arise, so
>> they could have scalabillity issues too.
>>
>> I think the web2py way is not so bad, but we should find some way to
>>
>> The .load component is as follows:
>>
>>
>> {{=forgot_pass_form.custom.begin}}
>> <table id='recover'>
>> <tr>
>> <td colspan='2'>Give us your email id and we will send you a link
>> to reset your password</td>
>> </tr>
>> <tr>
>> <td colspan='2'>{{=forgot_pass_form.custom.widget.email_id}}</td>
>> </tr>
>> <tr>
>> <td>*<a href="#" id="flipToLogin" class="flipLink">Back to
>> Login</a>*</td>
>> <td>{{=forgot_pass_form.custom.submit}}</td>
>> </tr>
>> <tr>
>> <td colspan='2'>
>> {{if forgot_pass_form.errors:}}
>> <div
>> class="error">{{=forgot_pass_form.errors.email_id}}</div>
>> {{pass}}
>> </td>
>> </tr>
>> </table>
>> {{=forgot_pass_form.custom.end}}
>>
>> The bold code above is the link which causes the CSS rotation but after
>> submission fails to do so
>>
>> Can somebody help me understand on what's happening ?
>>
>> Thanks,
>> Sushant
>>
>
>
>
> --
>
> Bruno Rocha
> [http://rochacbruno.com.br]
>
>
