Sometimes, We Write Stuff...
Mootools Content Slider Class
Sorry for the delays between posts, everyone! For this particular one, I've revisited the old 'content slider' posts and converted it into a class. As you probably guessed, it's far more flexible/powerful this way – plus it's easier to modify and customize!
I must warn everyone, I probably will not have much time to answer questions about this. I really just want to share with everyone, and hopefully some folks will take it and learn something and use/improve upon it. (That's what it's all about, anyhow.)
There are three parts to this – the XHTML, the CSS, and of course the JavaScript. The XHTML and CSS are used to create a 'container' to hold a series of divs, just like the past tutorials I've written on this. It is included in the demo files, and obviously you can customize everything if you know what you are doing. I must mention one thing about the XHTML, though. If you want to use the numbered navigation and/or the pause button, you will need to add them somewhere in your page like this:
<div id="controls"> <div id="play_btn"> </div> <div id="num_nav"> <ul></ul> </div> </div>
The javascript consists of the class code and the domReady event to instantiate it. There are a few options for this class, most of which should be fairly self-explanatory.
slideTimer: 8000, isPaused: 0, transitionTime: 1000, container: null, items: null, itemNum: 0, hasControls: false, numNavActive: false, numNavHolder: null, playBtn: null, prevBtn: null, nextBtn: null
Again, everything is included in the demo files – so feel free to poke around and change things, etc. As always, I'm sure this code is far from perfect... so any and all criticisms/praises/etc. are welcome!
+ Comments
Just FYI, interferes with Ruby on Rails default scriptaculous library. Although works well without any built in rails functions.
Ahh, that's a bummer... sorry!
I'm not a big fan of Scriptaculous for many reasons, and now it looks like I have yet another item to add to that list. (And frankly, I'm very surprised that ROR would use such an inefficient JS library...)
I see that you have options for prev and next buttons, but not referenced in code - are you planning to update the changeIt function to allow prev/next?
I'm having a problem with this class in IE 7 when I attempt to place the sliding content div inside another div. For some reason, certain elements in the slide item divs do not always slide. For instance, I've got an h1, an h3 and a p within my sliders. Right now, the h3 and the p slide, but the h1 items for every slider are present and will not slide when I call slideIt. I figure this is a css issue, but other than font-size, there is no difference between my h1, h3, and p declarations in the css. In firefox, everything works just dandy. If I remove the sliding content from the parent div that I have created, the class works just fine in IE. I'd love to run it that way, but then I run into issues with the way I'm trying to present my content. Got any ideas?
I appear to have solved my non-moving element problem (IE 7) with the slider when it's inserted inside of another div. If I declare widths for each item class element (h1, h3, p, etc.), all the elements seem to move. CSS problem, after all!
Here's a preview of your comment:
Perfect, i've been checking back for updates. this is awesome.