I have downloaded new version. But still no difference. I have two
pages(trail pages)
mootoolslogin.php
<!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-1.2.3.1-more.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>
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('v-menu2').hide();
$('toggle').addEvent('click', function(e){
e.stop();
mySlide.toggle();
});
});
</script>
</head>
<body>
<form action='<?$PHP_SELF;?>' name="messageFrm" method="post">
<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="loginpagehere.php" id="toggle"><span>Show Panel</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>
<li>
</li>
</ul>
</div></td>
</tr>
</table>
</form>
</body>
loginpagehere.php
<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="loginpagehere.php" id="toggle"><span>Show Panel</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>
As you can see there is nothing that can crack the js. now the status
is as soon as i click on the Show Panel link it goes to loginpagehere
page. It means the effect is not yet working.On your m/c, is it
working without using mooshells?
On Aug 20, 12:52 pm, cbolson <[email protected]> wrote:
> It looks like you are now includug the same flle (more or less)
> several times.
>
> Go to motools.net and download the mootools.1.2.3.js latest version
> here:http://mootools.net/download
>
> Then you need to get the Fx.Slide from the "more" builder
> here:http://mootools.net/more
> On that page, you need to mark the Fx.Slide option from within the
> "FX" category (and any others you think that you might need -
> personally I always add all the fx effects and the drag effects)
>
> This basically extends the mootools library.
>
> You don't need the other js files that you currently have.
>
> I have just followed this process - ie redownloaded mootools core,
> downloaded the "more" with just the fx.slide and it works correctly
> using the code as in the mootshell link.
> If you still can't get this to work, you may well have some other
> element on your page which is causing the javascript to break - an url
> would be useful to really be able to help any further.
>
> Chris
>
> On Aug 20, 7:16 am, Deepali <[email protected]> wrote:
>
> > Thanks for your reply cbolson,
> > I have copied the code which you have mentioned but it not working. I
> > mean its going on login page directly. Not showing the effect. I just
> > wanted to ask you for this effect i needed to add the following JS
> > <script type="text/javascript" src="mootools.svn.js"></script>
>
> > Is this the new version of svn? additionally i have added the
> > following scripts as well
>
> > <script type="text/javascript" src="mootools.1.2.3.js"></script>
> > <script type="text/javascript" src="mootools-1.2.3-core-nc.js"></
> > script>
> > <script type="text/javascript" src="mootools-1.2.3-core-yc.js"></
> > script>
>
> > but its not working. could you please tell me which script i have to
> > use to get the effect as well as while not uploaded on click ll show
> > me login page?
>
> > On Aug 19, 6:14 pm, cbolson <[email protected]> wrote:
>
> > > This all works, including your html code from the earlier post, when
> > > running it through mooshell.net.
> > > The $('toggle').set('href', '#'); is not actually needed as the link
> > > action is being stopped by e.stop(); and, as Thierry mentioned
> > > earlier, the e = new Event(e); is not needed either.
> > > So this should be enough:
>
> > > window.addEvent('domready', function(){
> > > var mySlide = new Fx.Slide('v-menu2').hide();
> > > $('toggle').addEvent('click', function(e){
> > > e.stop();
> > > mySlide.toggle();
> > > });
>
> > > });
>
> > > Here it is in mooshell:http://mooshell.net/yzsCs/1
>
> > > Maybe you should try getting the latest version of mootools from
> > > mootools.net ??
>
> > > Chris
>
> > > On Aug 19, 2:48 pm, Deepali <[email protected]> wrote:
>
> > > > Thanks for your reply cbolson,
>
> > > > But its not working. what can i do?
>
> > > > On Aug 19, 5:21 pm, cbolson <[email protected]> wrote:
>
> > > > > Hi,
> > > > > The e.stop(); should be enough to prevent this from happening...
>
> > > > > Try to remove the href value as soon as the dom is ready, not wait
> > > > > until the link is is clicked .
>
> > > > > So, $('toggle').set('href', '#') should be outside the $
> > > > > ('toggle').addEvent('click', function(e){ function.
>
> > > > > window.addEvent('domready', function(){
> > > > > $('toggle').set('href', '#');
> > > > > //-vertical
> > > > > var mySlide = new Fx.Slide('v-menu2').hide();
> > > > > $('toggle').addEvent('click', function(e){
> > > > > e = new Event(e);
> > > > > mySlide.toggle();
> > > > > e.stop();
> > > > > });
>
> > > > > });
>
> > > > > Try that and see if it works....
>
> > > > > Chris
>
> > > > > On Aug 19, 2:04 pm, Deepali <[email protected]> wrote:
>
> > > > > > Dirar,
>
> > > > > > I have tried. but its only gonig to login page its not showing any
> > > > > > effect. here is the code
>
> > > > > > <script type="text/javascript">
> > > > > > window.addEvent('domready', function(){
> > > > > > //-vertical
> > > > > > var mySlide = new Fx.Slide('v-menu2').hide();
> > > > > > $('toggle').addEvent('click', function(e){
> > > > > > $('toggle').set('href', '#');
> > > > > > e = new Event(e);
> > > > > > mySlide.toggle();
> > > > > > e.stop();
> > > > > > });});
>
> > > > > > </script>
>
> > > > > > php code
>
> > > > > > $navlogin = "<li class='login'><a href='login.php' id='toggle'
> > > > > > title='Login'".classkey('Login',$classtitle)."><span>Login</span> </
> > > > > > a></li>";
>
> > > > > > how can i get it work? please help me.
>
> > > > > > On Aug 19, 4:45 pm, Dirar Abu Kteish <[email protected]> wrote:
>
> > > > > > > in your case: $('toggle').set('href', '#');
>
> > > > > > > On Wed, Aug 19, 2009 at 2:38 PM, Deepali <[email protected]>
> > > > > > > wrote:
>
> > > > > > > > i tried. but its not working. May be i dont know where to put it
> > > > > > > > exactly. could you please tell me where to put this code
> > > > > > > > actually?
>
> > > > > > > > Here is my code
> > > > > > > > JS
>
> > > > > > > > <script type="text/javascript">
> > > > > > > > window.addEvent('domready', function(){
> > > > > > > > //-vertical
> > > > > > > > var mySlide = new Fx.Slide('v-menu2').hide();
> > > > > > > > $('toggle').addEvent('click', function(e){
> > > > > > > > $('v-menu2').getElement('a').set('href', '#');
> > > > > > > > e = new Event(e);
> > > > > > > > mySlide.toggle();
> > > > > > > > e.stop();
> > > > > > > > });
> > > > > > > > });
> > > > > > > > </script>
>
> > > > > > > > php-
> > > > > > > > /* this is for mootools slider */
> > > > > > > > $navlogin = "<li class='login'><a href='login.php'
> > > > > > > > id='toggle'
> > > > > > > > title='Login'".classkey('Login',$classtitle).">Login</a></li>";
>
> > > > > > > > On Aug 19, 4:27 pm, Dirar Abu Kteish <[email protected]>
> > > > > > > > wrote:
> > > > > > > > > <div id="sub-panel">
> > > > > > > > > <a href="loginpagehere.php" id="toggle"><span>Show
> > > > > > > > > Panel</span></a>
> > > > > > > > > </div>
>
> > > > > > > > > then in js something like this :
> > > > > > > > > $('top-panel').getElement('a').set('href', '#');
>
> > > > > > > > > On Wed, Aug 19, 2009 at 2:22 PM, Deepali <[email protected]>
> > > > > > > > > wrote:
>
> > > > > > > > > > thanks for your reply dirar,
>
> > > > > > > > > > how can we set default link? because the effect i am
> > > > > > > > > > showing that
> > > > > > > > > > page is index.php and on that showing login panel. so could
> > > > > > > > > > you please
> > > > > > > > > > tell me how can i show the default link ?
>
> > > > > > > > > > On Aug 19, 4:12 pm, Dirar Abu Kteish
> > > > > > > > > > <[email protected]> wrote:
> > > > > > > > > > > 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{
> > > > > > > > > > > > > >
>
> > ...
>
> > read more »
