In "mootools.svn.js" file they have given something like this
(start code)
var mySlider = new Fx.Slide('myElement', {duration: 500});
mySlider.toggle() //toggle the slider up and down.
(end)
But, how can i do it the toggle slider effect like on click from that
position to the down side like twitter ?
On Aug 19, 11:34 am, Deepali <[email protected]> wrote:
> 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 liketwitterlogin 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 liketwitterhas 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
