When my coworker decided to use mootools for a project we are working on. I decided to give it a try also.
I decided to use the FX.Slide effect on some tab based boxes. This was pretty straight forward. The mootools library is pretty easy in usage. And the documentation is darn good. Bellow i will show how to add the most basic FX.Slide effect. This is directly copied from the mootools manual.
To create the sliding effect all you need is the following lines of javascript.
window.addEvent('domready', function() {
// create an instance of the FX.Slide object
var mySlide = new Fx.Slide('test');
// Attach the click event to the wrapper div
$('toggle').addEvent('click', function(e) {
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
And of course some HTML to represent the sliding elements.
<h3 class="section">Fx.Slide Vertical</h3> <a id="toggle" href="#">toggle</a> <div id="test"> foo </div>
And some CSS to cover it all in a nice sauce.
#test {
background: #222;
color: #fff;
padding: 10px;
margin: 20px;
border: 10px solid pink;
}
So this looks great. It functions well. And the sliding is very smooth. There is one small problem though. When the wrapper contains an element with a style attribute overflow set to “auto”. The sliding will cause a flicker effect on the page. This is probably caused by rescaling the wrapper. Witch in it’s turn rescales the element with attribute overflow set to auto.
I didn’t really try to figure out why this happens. Maybe that’s a later project. But i did come up with a small fix. When a slide object is created. FX.Slide wraps a div around the container that will slide in and out. This wrapper has the attribute overflow set to hidden. I couldn’t figure out why overflow is set to hidden on this wrapper. So i added the ability to set it through the options object. When overflow is set to auto the flicker bug disappears. To add this feature we need to add some small changes to the FX.Slide class.
options: {
mode: 'vertical'
},
First we change the code above to reflect the code below:
options: {
mode: 'vertical',
overflow: 'hidden'
},
Then on the third line of the initialize function we change:
this.wrapper = new Element('div', {'styles': $extend(this.element.getStyles('margin'), {'overflow': "hidden"})}).injectAfter(this.element).adopt(this.element);
To:
this.wrapper = new Element('div', {'styles': $extend(this.element.getStyles('margin'), {'overflow': this.options.overflow})}).injectAfter(this.element).adopt(this.element);
When all this is done and we want to create a FX.Slide object without the flicker bug. We add the options parameter. The constructor will make sure the right value is used.
var mySlide2 = new Fx.Slide('test', {overflow: 'auto'});
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide2.toggle();
e.stop();
});
Twitter
Hacker News
Delicious
Reddit
I am Thijs Lensselink a Webdeveloper from the Netherlands.
Hi there!
I’ve been toiling with the FX.Slide Flicker bug for a while now.
Your example looks great but I just can’t get it to work when using the steps above.
My test keeps throwing ‘illegal character’ javascript errors in both the lines of javascript provided and the mootools javascript file!
I’m using 4 files:
xhtml page
css file
mootools uncompressed js
js file (from code provided above)
Which mootools files would I need to download for the above? Just the latest umconpressed version?
As you can probably tell, I’m not too hot with javascript!
Thanks a lot!!
Richard.
Hey Richard.
i’ve added a second post about the FX.Slide flicker bug. This post provides two downloads. Fixes for both the 1.1 and 1.2 version of mootools. Hope it helps. If you have any questions. Just let me know.
Cheers
Hi again.
Many thanks for that.
The illegal character error due to copying and pasting the code direct from the web page!
Many thanks for adding the 2nd post, I’ll take a look now and match the versions up!
Thanks again for sharing!
Richard.
No problem. If you have any questions. Just let me know.
gr,
Thijs
Thank you for publishing this annoying “flicker-bug”. I found this post rather quickly and I presume that it saved me hours of investigating the bug on my own.
For others reading this article I would like to add, that this is a Firefox (v2 and v3) Problem. I believe that it has something todo with Mozillas behaviour when rendering overflow:auto boxes. Maybe the developers did not consider the fact, that someone actually wants to move these boxes ;)
Happy to help.
Maybe i should report the bug :)
I am having a similar problem with the mootools accordion. When I load the accordion in domready, it will show the entire div for a millisecond, even though I set it on hide…
Well only in Internet Explorer though.
Hi,
Thank you for this fix :)
I was fiddling around with the slide-effect, and couldn’t help but to get annoyed with that flicker. Your fix was exactly the thing I needed!
I do have one question though… I changed the JavaScript in the original Mootools fx.slide document to “.hide()”, but I can’t seem to find the proper place to put this function in your Mootools-files. I wanted the slides to start off closed so I can use them as an optional informationpanel :)
Would you happen to know where to put that little function?
Thank you in advance :)
Hey Joram,
NP. Good to hear it’s usefull :)
If you want to start the Slide hidden. You have to change the following line in the domready function:
var mySlide2 = new Fx.Slide(‘test2′, {overflow: ‘auto’});
to:
var mySlide2 = new Fx.Slide(‘test2′, {overflow: ‘auto’}).hide();
gr,
Thijs
An alternative quick fix is to target the extra div that mootools adds around the sliding content in your style sheet, and give it a rule:
overflow:auto !important; /* fix mootools slide flicker bug in firefox*/
Nice find Richard. That’s a more elegant way to solve this problem.
Hello Richard,
You can’t imagine how Happy I am coz I found your blog, you made my day after a loooong night. My skills are not so great as its my first job. Now I see the difference between uni and work experience.
Back to the subject, I can’t see your files with the fix, could you give a link… sry if its somewhere there and I cant see it, now I can’t see anyway..
I would like to give a try to your last quick fix inside of css, but I am wondering how can I set it? Element is created automatically and i am a bit confused.
Please, if you have time check http://www.myfoxnet.com/rest I would like to activate bars for “coctails & shakers” thus I need overflow:auto
Richard.. you are my last hope before I quit web designing and go to be baker…
Cheers.
Hello Spiros,
This blog is not Richards. So if you would like any info about his fix. I’d suggest mailing him. The less elegant fix can be found here
http://lenss.nl/2008/06/mootools-fxslide-flicker-bug-ii/
I gues in your case you could do something like this.
#horizontal_slide div {
overflow:auto !important;
}
Hi Thijs Lensselink,
Nice blog, Thanks for sharing your info with us.
I had it as you purposed but I had problem, so I got some inspiration and courage from you to open mootools.js and at line 348 I replaced
overflow:”hidden”
to
overflow:”auto”
and now it works.
Hope it will help somebody else.
Cheers
Hello Thijs,
Excellent blog post. I am working on implementing the fix, but I ran into an issue. The following page:
http://law2.hofstra.edu/AcceptedStudents/Checklist-for-Admission.html
use the FX.Slide for 10 menu items. The flicker is still occurring. I am sure I am just missing something obvious, but I am stumped. Would you mind taking a look at the code?
Thanks,
Mike
Hello Mike,
When i’m at the office i will take a look at it.
Greetz,
Thijs
[...] University of Illinois Press, 2009. Call No: PN1992.3.U5S415. Writing for the screen : creative …Mootools FX.Slide Flicker bug at Web Development and stuff…Thijs Lensselink Web Developer … Name (required) Mail (will not be published) (required) Website. [...]