unless you use mootools 1.11, you should not use -> e = new Event(e);
in mootools 1.2 e is already extended On Wed, Aug 19, 2009 at 11:56 AM, Deepali <[email protected]> wrote: > > solved my problem. > here is my code > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// > www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> > <title>Untitled Document</title> > <script type="text/javascript" src="mootools.svn.js"></script> > <style type="text/css"> > body{font-family:Arial, Helvetica, sans-serif; font-size:13px;} > /* -------------------------------------------------------- */ > /* BUTTON > */ > .button{ > background:url(img/button.png) -32px right no-repeat; > color:#FFFFFF; > clear:both; > display:block; > float:left; > font-size:13px; > font-weight:bold; > height:31px; > line-height:31px; > width:auto; > margin-right:30px; > } > a.button { > text-decoration:none; > } > .button span { > background:url(img/button.png) left top no-repeat; > display:block; > height:31px; > line-height:31px; > padding-left:10px; > padding-right:8px; > margin-right:20px; > } > /* -------------------------------------------------------- */ > /* MENU > */ > .v-menu{ > border:solid 1px #7F9FBF; > width:200px; > clear:both; > } > ul.v-menu, .v-menu li{ > padding:0; > margin:0; > list-style:none; > } > ul.v-menu{ > clear:both; > margin-top:6px; > padding:6px 10px; > } > .v-menu li a{ > color:#555555; > font-weight:bold; > display:block; > border-top:solid 1px #DEDEDE; > padding:4px; > text-decoration:none; > } > .v-menu li a:hover{ > color:#999999; > } > > </style> > <script type="text/javascript"> > function showElement(layer){ > var myLayer = document.getElementById(layer); > if(myLayer.style.display=="none"){ > myLayer.style.display="block"; > myLayer.backgroundPosition="top"; > } else { > myLayer.style.display="none"; > } > } > </script> > > <!-- Mootools --> > <script type="text/javascript"> > window.addEvent('domready', function(){ > //-vertical > > var mySlide = new Fx.Slide('v-menu2'); > mySlide.hide(); > $('toggle').addEvent('click', function(e){ > e = new Event(e); > mySlide.toggle(); > e.stop(); > }); > > }); > </script> > > </head> > > <body> > <table width="600" border="0" align="center" cellpadding="0" > cellspacing="0"> > <tr> > <td width="50%"><h2>Login</h2></td> > </tr> > <tr> > <td width="50%" valign="top"> > <a href="#" id="toggle" class="button"><span>Click Here</span></a> > <div style="clear:both"> > <ul id="v-menu2" class="v-menu"> > <li> > <label for="username">Username or email</label> > <input id="username" name="username" value="" title="username" > tabindex="4" type="text"> > </li> > <br/> > <li> > <label for="password">Password</label> > <input id="password" name="password" value="" title="password" > tabindex="5" type="password"> > </li> > <br/> > <li> > <input id="signin_submit" value="Sign in" tabindex="6" type="submit"> > </li> > <li> > <input id="remember" name="remember_me" value="1" tabindex="7" > type="checkbox"> > <label for="remember">Remember me</label> > </li> > > </ul> > </div></td> > </tr> > </table> > </body> > </html> > > May it ll help someone who is looking for it. :) > My problem is solved. > > > > On Aug 19, 11:58 am, Deepali <[email protected]> wrote: > > 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 > -- http://tbela99.blogspot.com/ fax : (+33) 08 26 51 94 51
