Jan 07
This is an update to the original Mootools horizontal DIV slider I wrote back in December of 2007.
It now uses the Mootools 1.2.3 Core and Fx.Slide from the More build.
LATEST UPDATED: It now comes in two flavors, the original unordered list navigation and now the new next/previous buttons.
Unordered List Navigation
HTML Code:
<ul class="nums">
<li class="current" id="trigger1">
<a class="liinternal" href="javascript:slideFolio(1);">1</a>
</li>
<li id="trigger2">
<a class="liinternal" href="javascript:slideFolio(2);">2</a>
</li>
</ul>
<div id="mask">
<div id="folio">
<div class="col">
<div class="site">
<h3>adra</h3>
<a href="http://www.adra.org.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_adra.gif" border="0" /><span>www.adra.org.nz</span></a>
</div>
<div class="site">
<h3>adrian hodge</h3>
<a href="http://www.adrianhodge.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_adrian.gif" border="0" /><span>www.adrianhodge.com</span></a>
</div>
<div class="site">
<h3>bienetre</h3>
<a href="http://www.bienetre.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_bienetre.gif" border="0" /><span>www.bienetre.co.nz</span></a>
</div>
<div class="site">
<h3>billsblog</h3>
<a href="http://www.billsblog.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_billsblog.gif" border="0" /><span>www.billsblog.co.nz</span></a>
</div>
</div>
<div class="col">
<div class="site">
<h3>cablesearch</h3>
<a href="http://www.cablesearch.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_cablesearch.gif" border="0" /><span>www.cablesearch.co.nz</span></a>
</div>
<div class="site">
<h3>delectable</h3>
<a href="http://www.delectable.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_delectable.gif" border="0" /><span>www.delectable.co.nz</span></a>
</div>
<div class="site">
<h3>farmmap</h3>
<a href="http://www.fmsl.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_farmmap.gif" border="0" /><span>www.fmsl.co.nz</span></a>
</div>
<div class="site">
<h3>fionahodge</h3>
<a href="http://www.fionahodge.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_fionahodge.gif" border="0" /><span>www.fionahodge.com</span></a>
</div>
</div>
</div>
</div>
CSS Styles:
*{margin:0;padding:0}
body{margin:20px}
ul.nums{float:left;width:100%;margin-bottom:10px}
ul.nums li {
border:1px solid #333333;
float:left;
font-weight:bold;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 5px 0 0;
text-align:center;
}
ul.nums span {
float:left;
font-weight:bold;
line-height:25px;
margin:0 5px 0 0;
}
ul.nums li a {
color:#666666;
display:block;
padding:3px;
text-decoration:none;
width:15px;
}
ul.nums li a:hover {
background-color:#DDDDDD;
}
ul.nums li.current {
background-color:#B2A384;
}
ul.nums li.current a {
color:#FFFFFF;
}
ul.nums li.current a:hover {
background-color:#B2A384;
}
#mask {
width:505px;
height:305px;
overflow:hidden;
border:1px solid #666;
position:relative;
background-color:#999;
float:left;
}
#folio {
position:absolute;
top:0;
left:0;
width:3535px;
float:left;
}
.col {
display:block;
width:505px;
height:305px;
float:left;
}
.site {
width:233px;
height:133px;
float:left;
padding:5px;
margin:5px 0 0 5px;
border:1px solid #666;
background-color:#FFF;
font-size:11px;
font-family:"Courier New", Courier, monospace;
}
.site img{padding:2px;border:1px solid #CCC}
.site span{display:block}
Javascript Function:
function slideFolio(col){
var x = ((col-1)*-505)
var folioChange = new Fx.Tween('folio', {duration:1000});
folioChange.start('left',x);
var cur = "trigger"+col;
$(cur).addClass('current');
for (i=1;i<=8;i++){
var loopLI = "trigger"+i;
if (cur==loopLI){}else{
$(loopLI).removeClass('current');
}
}
}
Next/Previous Navigation
HTML Code:
<div id="prev" class="button"></div>
<div id="mask">
<div id="folio">
<div class="col">
<div class="site">
<h3>adra</h3>
<a href="http://www.adra.org.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_adra.gif" border="0" />
<span>www.adra.org.nz</span></a>
</div>
<div class="site">
<h3>adrian hodge</h3>
<a href="http://www.adrianhodge.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_adrian.gif" border="0" />
<span>www.adrianhodge.com</span></a>
</div>
<div class="site">
<h3>bienetre</h3>
<a href="http://www.bienetre.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_bienetre.gif" border="0" />
<span>www.bienetre.co.nz</span></a>
</div>
<div class="site">
<h3>billsblog</h3>
<a href="http://www.billsblog.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_billsblog.gif" border="0" />
<span>www.billsblog.co.nz</span></a>
</div>
</div>
<div class="col">
<div class="site">
<h3>cablesearch</h3>
<a href="http://www.cablesearch.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_cablesearch.gif" border="0" />
<span>www.cablesearch.co.nz</span></a>
</div>
<div class="site">
<h3>delectable</h3>
<a href="http://www.delectable.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_delectable.gif" border="0" />
<span>www.delectable.co.nz</span></a>
</div>
<div class="site">
<h3>farmmap</h3>
<a href="http://www.fmsl.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_farmmap.gif" border="0" />
<span>www.fmsl.co.nz</span></a>
</div>
<div class="site">
<h3>fionahodge</h3>
<a href="http://www.fionahodge.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_fionahodge.gif" border="0" />
<span>www.fionahodge.com</span></a>
</div>
</div>
</div>
</div>
<div id="next" class="button"></div>
CSS Styles:
*{margin:0;padding:0}
body{margin:20px}
.button{width:50px;height:305px;float:left;border:1px solid #666;cursor:pointer;background:url(buttons.jpg) no-repeat}
#next{margin-left:10px;background-position:center right}
#prev{margin-right:10px;background-position:center left}
#mask {
width:505px;
height:305px;
overflow:hidden;
border:1px solid #666;
position:relative;
background-color:#999;
float:left;
}
#folio {
position:absolute;
top:0;
left:0;
width:3535px;
float:left;
}
.col {
display:block;
width:505px;
height:305px;
float:left;
}
.site {
width:233px;
height:133px;
float:left;
padding:5px;
margin:5px 0 0 5px;
border:1px solid #666;
background-color:#FFF;
font-size:11px;
font-family:"Courier New", Courier, monospace;
}
.site img{padding:2px;border:1px solid #CCC}
.site span{display:block}
Javascript Function:
window.addEvent('domready', function(){
var currentCol = 0;
var folioChange = new Fx.Tween('folio', {duration:1000});
var columns = $$('div.col');
$('prev').addEvent('click', function(){
if(currentCol>0){
currentCol -= 1;
var x = (currentCol*-505);
folioChange.start('left',x);
}
});
$('next').addEvent('click', function(){
if(currentCol<columns.length-1){
currentCol += 1;
var x = (currentCol*-505);
folioChange.start('left',x);
}
});
});
im using this on my site and it works great my only problem is when the number of pages gets large they numbers go on forever. can you suggest a way to make a dynamic nav bar. so it only shows x number of buttons and then wraps as you click?
Hi phynias, so you want a limit on the number of buttons and show next/previous for other ‘groups’ of buttons?
You could always have just next/previous buttons instead of numbered buttons?
Clientcide offer a great layout library called ‘Simple Carousel’ which is just awesome.
http://www.clientcide.com/wiki/cnet-libraries/08-layout/03-simplecarousel
Hey, any way to make a Next/Previous link instead of numbered pagination?
Yeah, there will be, just give me another day or two, my wife just had our second child, so kinda tied up at the moment.
I’m snowed under with work, so cannot write a solution at the moment, this website has a great viewer class that I’ve used a few times, a much better solution than mine…
http://www.efectorelativo.net/laboratory/viewer/
Any headway on adding next/previous buttons?
Have updated to Mootools 1.2.3 Core and have split out the result into the two demos, with unordered list navigation or next, previous buttons.
is there any demo available for such a thing in verttical setting?
so it scrolls from top to bottom instead of left to right?
Hi John,
Try updating the javascript function to (untested):
window.addEvent(‘domready’, function(){
var currentCol = 0;
var folioChange = new Fx.Tween(‘folio’, {duration:1000});
var columns = $$(‘div.col’);
$(‘prev’).addEvent(‘click’, function(){
if(currentCol>0){
currentCol -= 1;
var y = (currentCol*-<>);
folioChange.start(‘top’,y);
}
});
$(‘next’).addEvent(‘click’, function(){
if(currentCol<columns.length-1){
currentCol += 1;
var y = (currentCol*-<>);
folioChange.start(‘top’,y);
}
});
});
You’ll also need to update the CSS folio style to be high rather than wide.
Let me know how you get on.
Hi,
Love this btw! just had a question, is it possible to link to a specific ‘col’ set? like how an anchor would work?
With the unordered list navigation, you have links as the navigation, so I guess you mean with the Next/Previous button navigation?
Add the following function into the javascript:
function colJump(myCol){
var x = ((myCol-1)*-505);
folioChange.start('left',x);
}
And move it all down into the footer of the page before the closing
Then add your links like so:
<a href="colJump(1);" rel="nofollow">Column One</a>
I’ve created a test demo for you here.
Hope that helps some people.
Thanks for the speedy response! That was what I was looking for.
How can I make it so that each column has it’s own URL? So if you go to the web address: http://demo-slider.html#3 it will automatically go to the third column.
This would make it easier for people to bookmark pages.
I’ve got it. Here is the code: http://pastie.org/760381
Nice work Justin, thanks for sharing
Hi Adrian
I was Just wondering if I could use your sliding div on my website at http://www.Hightechhangout.com
I was Very Impressed by it ….
Just let me know if it’s ok use it ….
Thanks
Kidatheart
Sure thing KidatHeart, it’s there for anyone to use.
Hey Adrian
Thats Cool and Thank you for let me use it on my website and I will post a link to your website in my view source code area and on my website page too somewhere……….
Thanks
Kid At Heart
Hey Adrian
I have question for you….:)
I have been trying for a long time to make a multiple of div Sliders on one page and I can’t seem to figure it out ????? Do you know how to have more than one ” Div Slider” on a page ???
Thanks
Kidatheart
Hey Kidatheart
You could duplicate the javascript function and call another unique div ID. e.g.
function slideFolio1(col){
var x = ((col-1)*-505)
var folioChange = new Fx.Tween(‘folio1′, {duration:1000});
folioChange.start(‘left’,x);
var cur = "trigger"+col;
$(cur).addClass(‘current’);
for (i=1;i<=8;i++){
var loopLI = "trigger"+i;
if (cur==loopLI){}else{
$(loopLI).removeClass(‘current’);
}
}
}
Change Fx.Tween(‘folio’..
to Fx.Tween(‘folio1′.. in the first function and
Fx.Tween(‘folio2′.. in the duplicate function.
Then make sure the first slider has the div id “folio1″ and the second has the div id “folio2″
Call the sliders by slideFolio1(col) or slideFolio2(col).
This isn’t the best way to do it, but there are many other great mootools javascript div sliders out there.
hey Adrian
Thanks for that help about it…
I’ll try that sometime soon here and i think that just might work
and thanks again for the help 
…..
Kidatheart