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
