mooSlide - revamp!
May 23, 2008 · Print This Article
Done - the new mooSlide is easier to use than ever as it has become a mootools class, with a lot of options that you can influence. The best of it: The slider can contain ANY content, so put videos, flash, images, text or html stuff in it.
The options:
* The slider DIV
* The slide in speed
* The fade out speed
* Remove on click yes / no
* The final opacity
* The height of the slider container
* The type of effect used ( see the mootools transitions effects )
* The toggler element ( i.e. a link )
Calling the box:
var px = new mooSlide2({ slideSpeed: 1700, fadeSpeed: 500, toggler:’toggle’, content:’test’, height:250, removeOnClick: true, opacity:’1′, effects:Fx.Transitions.Bounce.easeOut });
whereas the toggler is the element that will show / hide the box, content defines the div’s ID with your slide contents, the rest of the options should be self-explanatory.
Demo:
mooSlide 3.2
It really looks good! but how do you get it to work on a basic website?
Please check the demo page and view the source, it’s all there what you need to get this running.
I want to use this slide box for the login purpose but it disappear after the postback. how to control it from being disappearing.
well this issue is not so hard, you need to stop the submit event and send the request via AJAX and then output the return of the login function to a DIV.
Here’s the basic functionality, add this into your document:
window.addEvent(’domready’,function(){
$(’myForm’).addEvent(’submit’,function(e){
e = new Event(e).stop();
new Ajax(’checkUserLogin.php’, { method:’post’, data:this, update:’answer’ }).request();
})
})
Whereas:
update:’answer’ -> answer defines the DIV where the return values should appear
$(’myForm’) -> is the form ID that holds the login fields
checkUserLogin.php -> defines the file the data is sent to for checking
So this should do the trick, as the page is not reloaded anymore, but sent via AJAX requests.
Hi, i have some problems - is this script compatible to work with wordpress plugins? I have lightbox2 plugin and i ponder if they are incompatible with each other. I really want this script. I have tried to make it work (with a copie of your source on the demo site).
Sooo - what now?
kindly Lillan
Thx! Very Nice!!!
But one question… why morph can’t works fine on IE6?
(sorry my bad english not my native language)
Lillan, it should be yes, as we had the lightbox working together with this script ( not in wordpress but working ). If you could point out a link where you tried to install it, I can have a look at your probs and hopefully figure out, what’s wrong with it.
How can I use 2 separate buttons - 1 to open the slider and a different one to close it?
Jeremy,
you’ll need an additional function ( look at the removeOnClick function, duplicate this, rename it to ‘removeSlider’, add a new variable for the element you want to use for closing ). You should end up having something like this:
options: {
closeHandle: ‘myCloseDIV’,
….
}
in the initialize function you need this part:
initialize:function(options){
….
if(options['closeHandler']) this->closeHandler = options['closeHandler'];
and to register the click event on the closing element, this line: ( also in ‘initialize’ ):
$(this.closeHandler).addEvent(’click’,this.removeSlider.bindWithEvent(this));
var px = new mooSlide2({ slideSpeed: 1700, fadeSpeed: 500, toggler:’toggle’, content:’test’, height:250, removeOnClick: true, closeHandler:’myCloseDIV’, opacity:’1′, effects:Fx.Transitions.Bounce.easeOut });
whereas the closeHandler will be the element that closes the slider.
Is it possible to open a url in the slidebox? or can it only be a div?
@yukon: Theoretically this is possible, but requires additional coding to make it work. You could send an ajax request to the page in question, and put the content of the result into the div. Yet this will have some drawbacks - you’d have to know the height of the document before loading it into the slider.
How can i run this using a onload event, i tried to created a function and use it on the body tag but that didn’t work, any help is greatly appreciated, thanks.
@nick: You could load the box as pointed out in the demo, and then simply do a toggle() on the element. Example:
window.addEvent(’domready’,function(){
var p = call_your_box_here;
p.toggle();
})
This should do the trick.
Thanks admin, that worked great
You’re welcome Nick
This is a wonderful tool, thank you!
I’m trying to follow the advice you gave Nick above to make the box show immediately upon page view.
Thus i have:
var px = new mooSlide2({slideSpeed: 1700, fadeSpeed: 500, toggler:’toggle’, content:’test’, height:32, removeOnClick: false, opacity:’1′, effects:Fx.Transitions.Bounce.easeOut, from:’top’ });
px.toggle();
at the bottom of all the code within:
window.addEvent(’domready’,function(){ })
Everything works fine EXCEPT the box does not show upon page load.
website I’m implementing this on is http://www.decksrus .org
would you be able to tell me what I may be doing wrong here?
Thanks again!
Hi Cameron,
well, maybe I am a bit late, but checking your source code on that particular page doesn’t show any inclusion of the mootools.js nor the mooslide implementation. Did you take it out?
One thing I noticed, you’re using prototype and scriptaculous on the same page; this interferes with mootools so if you had both of them included I am quite confident that this has caused the error.
Let me know if you plan to re-implement the moo framework to that page, I’ll have a look at it then.
Thank you so much for this. You did an amazing job. I read the post about pulling information from a URL instead of a DIV on the current page. Would it be possible to put an iFrame (I hate them too) in the DIV that loads the desired page? Maybe there is another alternative? Thanks!
Hi,
Currently I use “lbox” (http://www.huddletogether.com/projects/lightbox2/) in my page but when I place moosocialize.php script in page none of them work:
I really like your script. Is any way to use both your script and lbox in a page?
Many thanks.
That problem occurs as you use the prototype and the mootools framework in the same page - these two frameworks conflict.
Therefore you could use Slimbox which does exactly the same as the old lightbox 2.0.
Give it a try
Using mooslide successfully in manual mode (thanks!), but like one of the posters above I can’t get the slide to start on page load… in all browsers, that is. I have the tiny snippet
px.toggle();
right before the close of the main function, but this is only works in IE 7 (not FF2 nor Safari 3). Can you think of a reason for that cross-browser discrepancy?
Thanks.
})
Ok folks, the issue is solved. When you look at the toggle function, you can see it prevents an event ( in this case the click event of the link ) so the link won’t follow its href parameter.
When adding this to call the box right away, there’s nothing to prevent which leads to this error.
Please re-donwload the mooSlide package and you’ll find a new function called run();
So replace your call to p.toggle() with p.run(). For demo purposes I’ve let it on the demo page, so you can see popping up the first box right after loading the page.
Awesome! Thanks for the fix. Interesting that it worked in IE (I know there’s a different event model, so that must be th’ cause, right?). I could use fireEvent and get that to work in IE as well. But in Saf/FF, equivalent call to onclick() didn’t work.
To add a little more functionality to the script, I’ve added the possibility to execute a function when toggling the slider to disappear from the page. The new option is called
‘executeFunction:’myFunction()’
add this to your call to the class, and write a function that you’d like to have executed after the slider disappeared. Comes in handy i.e. when you have the slider covering a select element, which in IE will always shine through. ( … IE crap ).
And - as always - I am eager to see what you’re doing with the slider, so post your links here!
How do i load the external HTML?
Im trying to get the content from the test.html file to load but it is still pulling it from the div on the slider page
code:
window.addEvent(’domready’,function(){
var px = new mooSlide2({ slideSpeed: 1700, fadeSpeed: 500, toggler:’toggle’, content:’test’, height:250, removeOnClick: true, opacity:’1′, effects:Fx.Transitions.Bounce.easeOut, from:’bottom’, loadExternal:’test.html’ });
p.run();
})
Hi!
I have this problem: If the mooslide content is over a flash movie, it disapears in the flash area. It works great, when the flash movie reached it´s end. Can you please help me out?
Thanks in regards
Tom
One thing you could do Tom, is to add the parameter “wmode” and the value “transparent” to your flash movie, that mostly helps preventing the flash having always the highest z-index.
Give it a try,
This is great and totally what I’ve been looking for…
The only problem is I’m not big on JavaScript and wanted a button within a flash movie to activate the mooslider and the content of the div be a page from anotherwebsite which is a blog….!?!?
Then somehow have a floating “close Div” button in the blog’s Div… :S
am I wasting my time or would this be ever possible?
thanks for you time.
@James: Do you have any sample you can provide? I’d like to have a look at the issue before speaking out any advices.
Thanks!
Hi!
I want to ask something, how I can close the slider if ‘removeOnClick’ is false…
Thanks for your time..