set a default link with HTML and later change it with js. On Wed, Aug 19, 2009 at 2:07 PM, Deepali <[email protected]> wrote:
> > thierry, But its working for me. > > Just wanted to ask one more question here. sometimes it take time to > load JS file/page. so like twitter if i click before the page is > completely loaded it redirect me to login page of twitter. so can > anyone tell me how can i do that? > > Thanks. > > On Aug 19, 3:59 pm, Thierry bela nanga <[email protected]> wrote: > > 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 > > > > ... > > > > read more »
