MooTools - FX.Slide

I found this code (using MooTools 1.2 FX.Slide) and tested it on my server... works great. But when I drop it into my header chunk for my Modx site template, the code no longer works.

First thing I noticed is that the <base href="http://www.mysite.com/" /> in my head was attaching to the "#" links in the script. So I tested the page with the base ref commented out. That made the "go to # on this page" link status display correctly - as it does on the working server test page.

But clicking on the link in Modx, isn’t calling the script. It adds the "#" to the address and tries to load the "#" page. I am keeping my js file inside my template folder using this path: assets/templates/myTemplate/js/.

Question 1: Does Modx want/need the js file to be in a different location?

Question 2: Why is the code breaking? There is a JQuery version of this as well, but other topics in the Modx forums indicate that I shouldn’t be using JQuery with Modx. I don’t know enough about php/javascript/Mootools to know if this code is inappropriate to drop into Modx. If this code is problematic, could you please explain why. I’ve only been using Modx a few days... so I am still figuring out some of the basic do’s and don’ts.

Here’s the link to the tutorial where I found the code: http://web-kreation.com/index.php/ajax-javascript/nice-login-and-signup-panel-using-mootools-12/.

Here’s a demo of the code working on the tutorial site: http://web-kreation.com/demos/login_form_mootools_1.2/


This is the HTML in my header chunk
<!-- Mootools - the core -->
<script src="/assets/templates/myTemplate/js/mootools-1.2-core-yc.js" type="text/javascript"><!--mce:0--></script>
<!--Toggle effect (show/hide login form) -->
<script src="/assets/templates/myTemplate/js/mootools-1.2-more.js" type="text/javascript"><!--mce:1--></script>
<script src="/assets/templates/myTemplate/js/fx.slide.js" type="text/javascript"><!--mce:2--></script>
<!-- END Fx.Slide -->
</head>
<body>
<div id="login">
<div class="loginContent">
<form action="#" method="post">
<label for="log"><b>Username: </b></label>
<input class="field" type="text" name="log" id="log" value="" size="23" />
<label for="pwd"><b>Password:</b></label>
<input class="field" type="password" name="pwd" id="pwd" size="23" />
<input type="submit" name="submit" value="" class="button_login" />
<input type="hidden" name="redirect_to" value=""/>
</form>
<div class="left">
<label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
<div class="right">Not a member? <a href="#">Register</a> | <a href="#">Lost your password?</a></div>
</div>
<div class="loginClose"><a href="#" id="closeLogin">Close Panel</a></div>
</div>

Here’s the fx.slide.js:
window.addEvent(’domready’, function(){
$(’login’).setStyle(’height’,’auto’);
var mySlide = new Fx.Slide(’login’).hide(); //starts the panel in closed state

//Show-Hide login panel when you click the link "Login" on top of the page
$(’toggleLogin’).addEvent(’click’, function(e){
e = new Event(e);
mySlide.toggle(); //show-hide login panel
e.stop();
});

//Hide login panel when you click the button close on the upper-right corner of the login panel
$(’closeLogin’).addEvent(’click’, function(e){
e = new Event(e);
mySlide.slideOut(); //Hide login panel
e.stop();
});
});

You’ll need to stop the # anchor loading the home page when you have <base href> in your template.
There are a couple of plugins to do this in the repository.
Try Base URL Same-Page-Link Fix

Thanks. The Base URL Same-Page-Link Fix fixed part of the problem.

The second issue still exists. Where I now click on the "login" link and instead of the script being called.. the click is calling the link and the "#" is added to the address bar... however with the Base URL Same-Page-Link installed, the url address change is no longer loading the new page address.

before click: www.mysite.com/index.php
after click: www.mysite.com/index.php#

On the testing page outside of Modx, the address doesn’t change when the "login" link is clicked.

If I recall correctly the form action needs to be [~[*id*]~]

AMDbuilder

Thanks. That fixed the problem in Firefox. The login drops down as expected. But Safari is still loading the link and sending me to the index page.

I am using mootools script

<script type="text/javascript" src="../js/mootools12.js"></script>
<!-- MooSlide (show/hide login form) -->
<script type="text/javascript" src="../js/mooSlide2-moo12.js"></script>
<script language="javascript" type="text/ecmascript">
window.addEvent('domready', function () {
var myLogin = new mooSlide2({ slideSpeed: 1500, fadeSpeed: 500, toggler: 'login', content: 'loginPanel', height: 250, close: false, effects: Fx.Transitions.Bounce.easeOut, from: 'top' });
//optional: AutoStart the slider on page load:
// MyLogin.run();

myLogin.run();

$('close').addEvent('click', function (e) {
e = new Event(e);
myLogin.clearit();
e.stop();
});
});
</script>

I am using the above code for displaying the login form . But my problem is on page load i cant display the login form.Please help..!!