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);
slidedown en slideup
Zet de duration time voor beide gelijk en de breedte van je site wordt behouden!
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
Volgensmij heeft Dreamweaver een accordion bij spry staan als je dreamweaver heb zou ik als ik jou was daar zeker even naar kijken.
@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.
Is het dan niet gewoon een kwestie van de juiste breedtes op te geven en zien dat je slide-tijden gelijk lopen? Ik kan me niet inbeelden dat js het ineens breder gaat maken dan dat je hebt opgegeven.
Snelheden zijn hetzelfde, hij valt wel uit zijn container, welke alleen kan betekenen dat hij breeder word.
Als je die demo ziet, en je goed oplet op het rechter plaatje zie ook, dat bij deze het plaatje iets naar rechts verschuift als je een element opent. Zelfde geval als bij mijn.