jQuery accordion
Ik ben bezig met een accordion te maken in javascript mbv jquery. Hierbij moet een divje inschuiven en tegelijkertijd moet er een ander divje uitschuiven. Echter, als ik deze acties allebij laat plaats vinden vallen de elementen uit hun container omdat hij te groot word door het uitschuiven. Heeft iemand al een zoiets gemaakt dat je dus precies de zelfde aantal pixels uitschuift als inschuift. Constant dus, als hij 1 pixel teveel uitschuift als inschuift valt hij uit zijn container.
Hieronder het stukje script welke ik gemaakt heb hiervoor.
Code (php)
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
(function($) {
$.fn.sefAccordion = function(options) {
options = $.extend({
defaultOpen: null,
previousDiv: null,
defaultid: '0',
currentcounter: 0,
intervalid: 0,
autodelay: 0,
event: "click",
alldivs_array:new Array()
}, options);
$(this).css({overflow:"hidden"});
var elementid = $(this).attr("id");
options.alldivs_array = $(this).children('div.Product');
if( options.autodelay > 0 ) {
$("#"+ elementid +" > div").bind("mouseenter", function() { pause(); });
$("#"+ elementid +" > div").bind("mouseleave", function() { startPlay(); });
};
options.alldivs_array.each( function(iCurrent) {
$(this).attr('id', 'slide_' + iCurrent);
$(this).children('div.Image').bind( options.event , function() {
pause();
options.currentcounter = iCurrent;
openSlide($('#slide_' + iCurrent));
});
});
if(options.defaultOpen != null) {
$(options.alldivs_array[options.defaultOpen]).children('div.Description').css('display', 'block');
options.previousDiv = $('#slide_' + options.defaultOpen);
if(options.defaultOpen == (options.alldivs_array.length - 1)) {
options.currentcounter = 0;
} else {
options.currentcounter == options.defaultOpen;
}
};
if( options.autodelay > 0 ) {
startPlay();
};
function openSlide( oSlide ) {
if(options.previousDiv != null) {
options.previousDiv.children('div.Description').animate({width : 'toggle'}, function() {
});
}
oSlide.children('div.Description').animate({width: 'toggle'});
options.previousDiv = oSlide;
};
function startPlay() {
options.intervalid = window.setInterval(play, options.autodelay );
};
function play() {
openSlide($('#slide_' + options.currentcounter));
if(options.currentcounter == (options.alldivs_array.length - 1)) {
options.currentcounter = 0;
} else {
options.currentcounter++;
}
};
function pause() {
window.clearInterval(options.intervalid);
};
}
})(jQuery);
$.fn.sefAccordion = function(options) {
options = $.extend({
defaultOpen: null,
previousDiv: null,
defaultid: '0',
currentcounter: 0,
intervalid: 0,
autodelay: 0,
event: "click",
alldivs_array:new Array()
}, options);
$(this).css({overflow:"hidden"});
var elementid = $(this).attr("id");
options.alldivs_array = $(this).children('div.Product');
if( options.autodelay > 0 ) {
$("#"+ elementid +" > div").bind("mouseenter", function() { pause(); });
$("#"+ elementid +" > div").bind("mouseleave", function() { startPlay(); });
};
options.alldivs_array.each( function(iCurrent) {
$(this).attr('id', 'slide_' + iCurrent);
$(this).children('div.Image').bind( options.event , function() {
pause();
options.currentcounter = iCurrent;
openSlide($('#slide_' + iCurrent));
});
});
if(options.defaultOpen != null) {
$(options.alldivs_array[options.defaultOpen]).children('div.Description').css('display', 'block');
options.previousDiv = $('#slide_' + options.defaultOpen);
if(options.defaultOpen == (options.alldivs_array.length - 1)) {
options.currentcounter = 0;
} else {
options.currentcounter == options.defaultOpen;
}
};
if( options.autodelay > 0 ) {
startPlay();
};
function openSlide( oSlide ) {
if(options.previousDiv != null) {
options.previousDiv.children('div.Description').animate({width : 'toggle'}, function() {
});
}
oSlide.children('div.Description').animate({width: 'toggle'});
options.previousDiv = oSlide;
};
function startPlay() {
options.intervalid = window.setInterval(play, options.autodelay );
};
function play() {
openSlide($('#slide_' + options.currentcounter));
if(options.currentcounter == (options.alldivs_array.length - 1)) {
options.currentcounter = 0;
} else {
options.currentcounter++;
}
};
function pause() {
window.clearInterval(options.intervalid);
};
}
})(jQuery);
Zet de duration time voor beide gelijk en de breedte van je site wordt behouden!
Gewijzigd op 25/08/2010 10:44:04 door Moe BE
@vincent: Wat heeft MooTools hiermee te maken?
@alle mensen die over een wiel zeuren: De bestaande accordions heb ik niks aan. Het is een stuk maatwerk.
http://flowplayer.org/tools/demos/tabs/accordion-horizontal.html