Introduction
I'm writing this tutorial in an Airport, heading back to my home country for a short holiday. It was a long day and had a farewell lunch with my fellow colleague. He got a better job offer, resigned and moved on. Well, that's life, had a great time working with him accross different projects, no doubt about it, I learnt heaps of stuff from him. I'm pretty sure I'll miss his daily quotes, jokes and whinging.
Alright, let's get into the tutorial
This time, we are going to make a custom content slider. I implemented this in my recent project and I'm pretty happy about it. My colleague spiced it up a little bit with some nice buttons. The way it works is quite simple, we will have a UL list with 3 buttons and each of the button has a link with a reference to the right panel. How it scroll to the correct panel? It uses jQuery scroll-To plugin. Basically you just have to pass the ID of the panel to the scroll-To plugin, and it will sroll the content to the correct position.
For more information about the plugin, please visit the scrollTo plugin website
1. HTML
HTML is a little bit long this time. Basically, it has two sections:
- UL List: This is the list of buttons, you can add as many as you want, or style the layout the way you want.
- Slider: Slider is where we put all the content for the panels, in this case, we have 3 panels with unique ID panel-1, panel-2 and panel-3. We hide the panel with overflow hidden set in the Mask Div.
<div id="hero-slider"> <ul> <li><a href="#" rel="#panel-1" class="active">Item 1</a></li> <li><a href="#" rel="#panel-2">Item 2</a></li> <li><a href="#" rel="#panel-3">Item 3</a></li> </ul> <div class="mask"> <div class="slider-body"> <div class="panel" id="panel-1"> <h2>Title 1</h2> <p>Paragraph</p> </div> <div class="panel" id="panel-2"> <h2>Title 2</h2> <p>Paragraph</p> </div> <div class="panel" id="panel-3"> <h2>Title 3</h2> <p>Paragraph</p> </div> </div> </div> <!-- .mask --> <div class="clear"></div> </div> <!-- #hero-slider -->
2. CSS
The only tricky part of the CSS would be the mask. You have to make sure it has overflow set to hidden to hide panels. Also, the dimension of the panel and mask must be the same.
#hero-slider { text-align:left; background-color:#efefef; border:1px solid #ccc; width:450px; -moz-border-radius:10px; -webkit-border-radius:10px; margin:0 auto; font-family:arial; } #hero-slider .mask { float:left; width:300px; height:280px; margin:15px 0 0 10px; overflow:hidden; } #hero-slider .panel { width:300px; height:280px; text-align:left; } #hero-slider ul { margin:0; padding:15px 15px 0 15px; list-style:none; float:left; border-right:1px solid #dedede; height:285px; } #hero-slider ul li { margin:10px 0; } #hero-slider ul a { outline:none; text-decoration: underline; display:block; width:75px; height:74px; text-indent:-999em; } #hero-slider a { background: url(button.png) no-repeat 0 0; } #hero-slider ul a.active { background-position: -75px; } .panel h2 { padding:15px 0 0 0; color:#0058a9; } .panel p { color:#666; } .clear {clear:both}
3. Javascript
Javascript is short and simple, I have added comments to explain every line of the javascript
//append click event to the UL list anchor tag $('#hero-slider ul a').click(function () { //reset all the items $('#hero-slider ul a').removeClass('active'); //set current item as active $(this).addClass('active'); //scroll it to the right position $('.mask').scrollTo($(this).attr('rel'), 300); //disable click event return false; });
Conclusion
That's it, a simple script that will able to make your website more interactive. Most importantly, it able to help you use the space wisely and display information in an interesting way. It's simple, and I believe it will be pretty handy for your upcoming web projects.
Comments will be moderated and
rel="nofollow"
will be added to all links. You can wrap your coding with[code][/code]
to make use of built-in syntax highlighter.If I refresh the page while viewing panel 3 (for example), the tab button resets to the first tab however the panel infomation remains as panel 3 (whereas it should reset to panel 1).
I've styled all of my tabs differently so this refreshing issue means the information becomes misleading.
I know this is unlikely to be noticed by users but if there is a solution it would be the icing on the 'tabbed content' cake.
It's probably something simple but my java script knowledge is also.....simple
$('.mask').scrollTo('#panel-1', 0);
to make sure it always start from panel 1.
First of all, thanks for making this tutorial and sharing the scripts with all of us. I modified the slider to make the icon into purely hyperlinks and make the boxes bigger. This works well on all other browsers except Internet Explorer and I am using IE7 to test it. The problem is the hyperlinks (used to be icons) are not appearing on IE7. Can anyone please highlight to me which part of my script went wrong?
Thank you.
I thought it might have been something I changed in the css, but I downloaded the files all over again and it still does it. I can't tell any difference between the downloaded files and your demo page.
It happens with both current versions of Chrome and Firefox, not tested in IE yet.
Other than that, your slider works great. Definitely the easiest to use I've seen so far!
Thanks in advance!
-Krez
Thanks,
Charley
$('#hero-slider ul a').removeClass('active');
Would You please gimme some more detail tutorial for my blog? I tried here:http://muxdemo.blogspot.com/2012/01/demo-2.html
Thanks in advance :)
Then, you need to set #hero-slider .panel float:left.
with that, the panel will align horizontally. For the scrolling part, don't have to worry about it, scrollTo plugin will scroll it by itself as long as you get the arrangement right.