June 20th, 2010
Hi there. I posted previously about making jQuery tabs, but this week I found myself wanting take that code a bit further. In the old version, the “controls” were written out in a ul above the slides. It got the job done, but wasn’t ideal from a progressive-enhancement point of view (non-JS don’t really have much need for them, so they really shouldn’t be there for those users).
In this version we’re going to include an h3 at the top of each slide and have jQuery pull those out to make the ul controls. The HTML is like so:
1
2
3
4
5
6
7
8
9
10
| <div id="slides">
<div class="slide">
<h3>Slide 1</h3>
<p>This is the content of slide one</p>
</div>
<div class="slide">
<h3>Slide 2</h3>
<p>This is the content of slide two</p>
</div>
</div> |
And the jQuery (the new action is in the first fifteen lines):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| $(document).ready(function() {
// Insert the wrapper for the controls
$('#slides').before('<ul id="slidecontrols"></ul>');
//For each heading...
$('#slides div.slide > h3').each(function(){
// Copy it into the controls
$(this).clone().appendTo("#slidecontrols");
// and replace the heading markup with list markup, keeping the contained text
$('#slidecontrols h3').replaceWith('<li><a href="#">' + $(this).text() + '</a></li>');
});
// Hide those H3s
$('.slide > h3').hide();
//Set the initial state: highlight the first button...
$('#slidecontrols').find('li:eq(0)').addClass('selected');
//and hide all slides except the first one
$('#slides').find('> div:eq(0)').nextAll().hide();
//actions that apply on click of any of the buttons
$('#slidecontrols li').click( function(event) {
//turn off the link so it doesn't try to jump down the page
event.preventDefault();
//un-highlight the buttons
$('#slidecontrols li').removeClass();
//hide all the slides
$('#slides > div').hide();
//highlight the current button
$(this).addClass('selected');
//get the index of the current button...
var index = $('#slidecontrols li').index(this);
//and use that index to show the corresponding slide
$('#slides > div:eq('+index+')').show();
});
}); |
Happy coding!
Tags: JavaScript, jQuery
Posted in Development | No Comments »
May 9th, 2010
Hi there. I’m learning jQuery and finding it super easy and fun to work with!
Here’s a simple fade-in/out slideshow I wrote for a friend’s website. I knew there were already plug-ins out there for achieving this sort of thing, but I decided to write my own in order to become more familiar with some of the basic concepts.
See it in action. Here’s the HTML we’re outputting:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <div class="slideshow">
<div>
<img src="1.jpg" alt="Image One" />
<p class="controls"><a href="#2" class="next">Next</a></p>
</div>
<div>
<img src="2.jpg" alt="Image Two" />
<p class="controls"><a href="#1" class="prev">Prev</a> /
<a href="#3" class="next">Next</a></p>
</div>
<div>
<img src="3.jpg" alt="Image Three" />
<p class="controls"><a href="#2" class="prev">Prev</a></p>
</div>
</div> |
And here’s the jQuery:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| $(document).ready(function(){
// Set the initial state: Hide all but the first slide
$('.slideshow').find('> div:eq(0)').nextAll().css({'opacity':'0','display':'none'});
// On click of a controller link...
$('.controls > a').click(function(event) {
event.preventDefault();
// Get the div containing the clicked link...
var currentslide = $(this).parents('div:first');
// ... and get the index of that div
var currentposition = $('.slideshow div').index(currentslide);
// Use that index to get the slide we'll be fading to
var nextposition = ($(this).attr('class')=='next') ? currentposition+1 : currentposition-1;
// Fade the current slide out...
$('.slideshow div:eq('+currentposition+')').animate({opacity: 0}, 250, function() {
// ... and hide it.
$('.slideshow div:eq('+currentposition+')').css('display','none');
// Show the next slide...
$('.slideshow div:eq('+nextposition+')').css('display','block');
// ... and fade it in.
$('.slideshow div:eq('+nextposition+')').animate({opacity: 100}, 1500);
}
);
});
}); |
As you can see, it’s pretty basic. There’s a number of improvements that could be made, such as having the jQuery insert the control links as they’re somewhat redundant for the non-JS user. Also, it’s a bit fussy about divs — you might want to have some inside your slides but, as written, that would confuse it. I’ll post again if I get around to addressing that.
As always, best wishes to you in your coding!
Tags: JavaScript, jQuery
Posted in Development | No Comments »
December 9th, 2009
Updated June 20: There’s an improved version of this code posted here. Use it instead!
I am learning jQuery and really loving it! Here’s a simple bit of code I wrote to achieve an interface element. It’s basically tabs — there’s a list of links and when you click one the corresponding content is shown. It assumes there’s an equal number of links and content blocks. And that they’re in the same order. The HTML is like so:
1
2
3
4
5
6
7
8
9
| <ul id="slidecontrols">
<li><a href="#one">Onea>li>
<li><a href="#two">Twoa>li>
</ul>
<div id="slides">
<div>This is content block One</div>
<div>This is content block Two</div>
</div> |
The # links / id’s on the content div’s are to give some functionality for people without JavaScript. Here’s the jQuery:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| $(document).ready(function() {
//Set the initial state: highlight the first button...
$('#slidecontrols').find('li:eq(0)').addClass('selected');
//and hide all slides except the first one
$('#slides').find('> div:eq(0)').nextAll().hide();
//actions that apply on click of any of the buttons
$('#slidecontrols li').click( function(event) {
//turn off the link so it doesn't try to jump down the page
event.preventDefault();
//un-highlight the buttons
$('#slidecontrols li').removeClass();
//hide all the slides
$('#slides > div').hide();
//highlight the current button
$(this).addClass('selected');
//get the index of the current button...
var index = $('#slidecontrols li').index(this);
//and use that index to show the corresponding slide
$('#slides > div:eq('+index+')').show();
});
}); |
Simple! Best wishes to you in your coding!
Tags: JavaScript, jQuery
Posted in Development | No Comments »