ok, have tried the following code which is pretty similar to this
effect. but the problem is the panel is sliding from up to down
side,but i want it to work like twitter login panel which slides up to
down.
Here is my code:
<script type="text/javascript" src="mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
<style type="text/css">
body{
border:0;
padding:0;
margin:0;
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial,
Helvetica, sans-serif;
font-size:12px;
color:#555555;
}
a:link, a:visited{color:#0066CC;}
#top-panel{
background:#e8f3c6;
border-bottom:3px solid #a6c34e;
padding:14px 20px;
text-align:right;
width:250px;
height:230px;
}
#sub-panel{
text-align:center;
}
#sub-panel a{
width:150px;
float:left;
color:#FFFFFF;
text-decoration:none;
margin-right:30px;
font-weight:bold;
background:url(img/sub-left.png) bottom left no-repeat #a6c34e;
}
#sub-panel a span{
padding:6px;
background:url(img/sub-right.png) right bottom no-repeat;
display:block;
}
strong{color:#000000;}
.face{border:solid 2px #a6c34e; margin-left:10px; float:right;}
</style>
</head>
<body>
<div id="top-panel">
<p>
<label for="username">Username or email</label>
<input id="username" name="username" value="" title="username"
tabindex="4" type="text">
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" value="" title="password"
tabindex="5" type="password">
</p>
<p>
<input id="signin_submit" value="Sign in" tabindex="6" type="submit">
</p>
<p>
<input id="remember" name="remember_me" value="1" tabindex="7"
type="checkbox">
<label for="remember">Remember me</label>
</p>
</div>
<div id="sub-panel">
<a href="#" id="toggle"><span>Show Panel</span></a>
</div>
</body>
</html>
can anyone check this code and tell me how can make it to slide from
up to down?
On Aug 19, 10:12 am, Deepali <[email protected]> wrote:
> Thanks for your reply Rolf,
>
> You have explained me really good about how to move ahead with
> mootools. As you have asked me what i have done so far with mootools,
> so my answer is not much. Just started learing. I am not a front end
> devloper. so may be thats why its pretty difficult to convert this
> code to mootools or learn by myself. but offcourse i want to learn it.
> (Actually started following some mootools tutorial, so just dont
> wanted to jumbled up with jquery as i am newbie)
>
> that's why asking here for some one who can show me this effect with
> mootools so i can compare both the codes and start learning.
>
> please can anyone tell me how can i do that?
>
> On Aug 18, 11:44 pm, Fábio M. Costa <[email protected]> wrote:
>
> > As Rolf said (thanks for the explanation Rofl), this plugin has nothing
> > special.
> > Its basically a simple effect on a click event. I think the hardest part is
> > the style you'll apply there.
> > @deep, Rofl gave you a good start.
>
> > --
> > Fábio Miranda Costa
> > Solucione Sistemas
> > Front-End Engineerhttp://meiocodigo.com
>
> > On Tue, Aug 18, 2009 at 3:12 PM, Rolf <[email protected]> wrote:
>
> > > Hi,
>
> > > What have you done with mootools so far? How known are you with
> > > mootools/javascript? Maybe you should use jquery and just grab that
> > > plugin? ;)
> > > Nah, from what I see this is basically a div that is set to display
> > > "none" on the page. When you click the sign button all it does is
> > > switch to display "block" (and maybe position it).. it also sets the
> > > button to an "active" state (e.g. adding a css class).
>
> > > It's not using some fancy fx or something.
>
> > > Also, you just add the regular href link to the login page like you
> > > normally do. With mootools you add a domready event to the page that
> > > will initiate the script that adds a click event to the Sign in button
> > > prevents the button to use the href and add the logic to display the
> > > div that contains the login form (and perhaps positions the div if the
> > > Sign button location is not fixed).
>
> > > E.g. roughly:
>
> > > $('btnSignIn').addEvent('click', function(e) {
> > > e.stop(); //you will not be redirected
> > > $('containerSignInForm').setStyle('display', 'block'); //display
> > > login form etc.
> > > this.toggleClass('active'); //makes the button light blue
> > > });
>
> > > Ok, this is really simply put, because you also need to handle the
> > > follow up when someone clicks again on the button (hide the div,
> > > remove active class for the button etc.)..
>
> > > You have an idea how to start experimenting with this now?
>
> > > I'm swamped with some moo crazyness myself atm so can't cook up a
> > > complete piece of code, but once you start experimenting (or: check
> > > out sources from stuff you like, like the tutorial you found), you
> > > will learn and pick up the standard stuff pretty easy.
>
> > > Maybe someone can post a complete chunk of code, with some advanced
> > > logic in it as well, but I'd advise you to practice yourself and then
> > > bit by bit move forward to more "complicated" stuff.
>
> > > Hope this helps ;)
>
> > > Rolf
>
> > > On Aug 18, 12:34 pm, Deepali <[email protected]> wrote:
> > > > Thats ok, :)
> > > > Can anyone else tell me how can get this effect with mootools?
>
> > > > On Aug 18, 3:16 pm, Thierry bela nanga <[email protected]> wrote:
>
> > > > > I wish I could,
> > > > > I've planned to do it but right now i'm too busy, maybe someone could
> > > do
> > > > > this for you.
>
> > > > > On Tue, Aug 18, 2009 at 11:04 AM, deep <[email protected]> wrote:
>
> > > > > > Thanks for your quick reply thierry bela,
>
> > > > > > I am pretty new to mootools. Could you please tell me how can i
> > > change
> > > > > > this modules jquery to mootools?
>
> > > > > > o
>
> > > > > > On Aug 18, 2:57 pm, Thierry bela nanga <[email protected]> wrote:
> > > > > > > you can try to port this jquery example to mootools,
>
> > >http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-wi...
>
> > > > > > > On Tue, Aug 18, 2009 at 10:50 AM, deep <[email protected]> wrote:
>
> > > > > > > > Hello,
>
> > > > > > > > I want to build up log in system using mootools. I have goggled
> > > on net
> > > > > > > > and got this nice tutorial
>
> > > > > > > >http://web-kreation.com/demos/login_form_mootools_1.2/
>
> > > > > > > > But i want to do it something like twitter has on their home
> > > page.
> > > > > > > > When you clicks on login link, the login box opens up there
> > > only. and
> > > > > > > > if someone clicks before the page is getting load it redirects
> > > you to
> > > > > > > > the login page.
>
> > > > > > > > Can we do this using mootools? Can anyone guide me how can i do
> > > that?
>
> > > > > > > > Thanks in advance.
>
> > > > > > > > Deepali
>
> > > > > > > --http://tbela99.blogspot.com/
>
> > > > > > > fax : (+33) 08 26 51 94 51
>
> > > > > --http://tbela99.blogspot.com/
>
> > > > > fax : (+33) 08 26 51 94 51
