If I could, I might just marry jQuery. That’s right. I said it. I might just marry jQuery. Why? Because I can understand it. I can make it work. Although, it might have gotten me to the point where I can understand javascript. But, I digress. The point of today’s post? To teach you a fun new trick!
Almost every website has a featured content slider or tabbed section of some sort, so today, we will make an auto-scrolling, fancy-schmancy featured tabbed content thingy. Which will be primed and ready for us to make add some WordPress code to next time.
We are going to start by downloading a couple of important files:
Put these in your project folder/js.
Now create an HTML file in your root folder.
And create a blank stylesheet in your project folder /css.
Now, we need to make sure that we are calling the script files and css.
<link type="text/css" href="css/style.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/ui.core.js"></script> <script type="text/javascript" src="js/ui.tabs.js"></script>
The core and tabs js files can be found in the development folder of your download.
Now, lets have some fun. In your HTML file, you will need to create an unordered list which will become the tabs, and a series of divs that will contain the corresponding content.
<div id="Container">
<!-- Tabs -->
<div id="tabs">
<div id="tabs-1" class="feature">
<h3>my<strong>robot</strong></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip x ea commodo consequat.
</p>
<img src="images/robot1-big.jpg" alt="Featured Product" class="bigIMG" />
</div>
<div id="tabs-2" class="feature">
<h3>big<strong>robot</strong></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquipx ea commodo consequat.
</p>
<img src="images/robot2-big.jpg" alt="Featured Product" class="bigIMG" />
</div>
<div id="tabs-3" class="feature">
<h3>cool<strong>robot</strong></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
x ea commodo consequat.
</p>
<img src="images/robot3-big.jpg" alt="Featured Product" class="bigIMG" />
</div>
<ul id="tabby">
<li>
<a href="#tabs-1"><img src="images/robot1.jpg" alt="robot" /></a>
</li>
<li>
<a href="#tabs-2"><img src="images/robot2.jpg" alt="robot" /></a>
</li>
<li>
<a href="#tabs-3"><img src="images/robot3.jpg" alt="robot" /></a>
</li>
</ul>
</div>
</div><!--end Container-->
This is where it gets fun! We are now going to make the slider look pretty and act the way it is supposed to. I used Eric Meyer’s CSS reset to start with, and you probably should too. It is followed by the styling telling the featured content how to look and finally the CSS telling the tabs how to behave.
/*Reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/*End Reset*/
body {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
line-height::21px;
}
#Container {
width:960px;
margin-left:auto;
margin-right: auto;
position:relative;
}
.clrBOTH {
clear:both
}
img {
border: none;
}
#tabs {
background-color: #6cb9c7;
height:275px;
padding-top: 25px;
}
.feature p {
color: #ffffff;
float:left;
font-size: 1.166667em;
margin-left:30px;
margin-right:30px;
line-height: 1.5em;
width: 520px;
}
.feature h3 {
color:#ffffff;
float:left;
font-size: 2em;
font-weight:normal;
line-height: 0.875em;
margin-top:00px;
margin-left:30px;
margin-bottom:10px;
width: 620px;
}
.bigIMG {
margin-left:20px;
}
#tabby {
position:absolute;
left:0px;
bottom:-75px;}
/* Tabs
----------------------------------*/
.ui-tabs {
padding: 0em;
zoom: 1;
z-index: 100;
}
.ui-tabs .ui-tabs-nav {
list-style: none;
position: relative;
padding: 0em 0em 0;
}
.ui-tabs .ui-tabs-nav li {
position: relative;
float: left;
border-bottom-width: 0 !important;
margin-top:5px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
padding: 0;
}
.ui-tabs .ui-tabs-nav li a {
float: left;
text-align: center;
text-decoration: none;
padding-top:30px;
width:320px;
color: #ffffff;
height:75px;
font-size: 1.5em;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
background-image: url('../images/arrow.png');
background-repeat: no-repeat;
padding-bottom: 0px;
border-bottom-width: 0;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
cursor: text;
}
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
cursor: pointer;
}
/* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel {
padding: 0em 0em;
display: block;
border-width: 0;
background: none;
}
.ui-tabs .ui-tabs-hide {
display: none !important;
}
Here’s why that is working: we positioned the div contianing the tabs below the content area, but allowed the padding (the area where the arrow is) to overlap. We set the arrow to be a background image on the selected li (the selected class will be applied by the jQuery. Pretty nifty, eh? Meh, that’s alright, but it is still lacking a little magic. We want it to cycle through the featured content automatically, all sexy and such. How do we do that? We add a little bit more javascript!
$(function(){
$('#tabs').tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 2000);
});
Make sure to wrap that in <script> tags or put it in an external js file and link to it after your other files. And, voila! You have now made our slider! Hooray!
