hide btn werkt niet.
Dan verdwijnt de ene en komt er een nieuwe in de plaats dit werk perfect, nu wil ik ze ook weer allemaal resetten dit gaat perfect als ik ze allemaal tegelijk reset. Maar wil ik ze net zo als bij het openen een voor een doen met this.find werkt dit niet. Wat doe ik verkeerd....
Jquery:
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
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
$('.idboxwrapper').click (function () {
var $array = $(".content:visible").length;
if ($array < 5){
if( $('.content').is(':hidden') ) {
$(this).find(".content").show(0);
$(this).find(".info").hide(0);
}
} else if ($array > 4){
if( $('.content').is(':visible') ) {
$(".content").hide(0);
$(".info").show(0);
}
}
});
// dit werkt wel maar is niet de bedoeling (tijdelijke oplossing)
$('.titel').click(function() {
if( $('.content').is(':visible') ) {
$(".content").hide(0);
$(".info").show(0);
//location.reload();
}
});
// dit werkt niet en dat zou wel moeten...
$(".sluiten").click(function() {
if( $('.content').is(':visible') ) {
$(this).find(".content").hide(0);
$(".info").show(0);
}
});
var $array = $(".content:visible").length;
if ($array < 5){
if( $('.content').is(':hidden') ) {
$(this).find(".content").show(0);
$(this).find(".info").hide(0);
}
} else if ($array > 4){
if( $('.content').is(':visible') ) {
$(".content").hide(0);
$(".info").show(0);
}
}
});
// dit werkt wel maar is niet de bedoeling (tijdelijke oplossing)
$('.titel').click(function() {
if( $('.content').is(':visible') ) {
$(".content").hide(0);
$(".info").show(0);
//location.reload();
}
});
// dit werkt niet en dat zou wel moeten...
$(".sluiten").click(function() {
if( $('.content').is(':visible') ) {
$(this).find(".content").hide(0);
$(".info").show(0);
}
});
HTML:
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
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
<div class="idboxwrapper">
<div class="info">
<div class="idbox">
#<?echo $row['id'];?>
<div class="titel2">
<h1><b><?echo $row['benaming'];?></b></h1>
</div>
</div>
<div class="<?echo $row['kleur'];?>" style="margin-left: -5px; width:135px; height: 12px;">
</div>
<b>Auteur:</b> <? echo $row['auteur'];?><br/>
<b>Bestand:</b> <? echo $row['bestand'];?><br/>
<b>Bestands grote:</b> <? echo $row['size'];?><br/>
<b>Tags:</b> <? echo $row['tags'];?><br/>
<b>Type:</b> <? echo $row['class'];?><br/>
</div> <!-- info -->
// dit moet verstoppen na dat ik op een knop boven in de hoek gedrukt heb.
<div class="content" style="display:none;">
<div class="contenttext">
//Dit is de sluitknop...
<div class="sluiten" style="float:right; margin-right: 5px;"><b>[X]</b></div>
<div class="idbox">
<!--
<h1><b>#<?echo $row['id'];?></b></h1>
-->
<?echo $row['benaming'];?>
</div>
<b>Auteur:</b> <? echo $row['auteur'];?><br/>
<b>Bestand:</b> <? echo $row['bestand'];?><br/>
<br/>
<b>Samenvatting:</b><br/>
<? echo $row['samenvatting'];?><br/>
<br/>
<b>Content:</b><br/>
<? echo $row['content'];?><br/>
</div> <!-- contenttext -->
<div class="<?echo $row['kleur'];?>" style="margin-top: 5px; margin-bottom: -1px; width:100%;"></div>
</div> <!-- content -->
</div> <!-- idboxwrapper -->
<div class="info">
<div class="idbox">
#<?echo $row['id'];?>
<div class="titel2">
<h1><b><?echo $row['benaming'];?></b></h1>
</div>
</div>
<div class="<?echo $row['kleur'];?>" style="margin-left: -5px; width:135px; height: 12px;">
</div>
<b>Auteur:</b> <? echo $row['auteur'];?><br/>
<b>Bestand:</b> <? echo $row['bestand'];?><br/>
<b>Bestands grote:</b> <? echo $row['size'];?><br/>
<b>Tags:</b> <? echo $row['tags'];?><br/>
<b>Type:</b> <? echo $row['class'];?><br/>
</div> <!-- info -->
// dit moet verstoppen na dat ik op een knop boven in de hoek gedrukt heb.
<div class="content" style="display:none;">
<div class="contenttext">
//Dit is de sluitknop...
<div class="sluiten" style="float:right; margin-right: 5px;"><b>[X]</b></div>
<div class="idbox">
<!--
<h1><b>#<?echo $row['id'];?></b></h1>
-->
<?echo $row['benaming'];?>
</div>
<b>Auteur:</b> <? echo $row['auteur'];?><br/>
<b>Bestand:</b> <? echo $row['bestand'];?><br/>
<br/>
<b>Samenvatting:</b><br/>
<? echo $row['samenvatting'];?><br/>
<br/>
<b>Content:</b><br/>
<? echo $row['content'];?><br/>
</div> <!-- contenttext -->
<div class="<?echo $row['kleur'];?>" style="margin-top: 5px; margin-bottom: -1px; width:100%;"></div>
</div> <!-- content -->
</div> <!-- idboxwrapper -->
- .find() gaat opzoek naar een element in het huidige element ($(this)). Dat wil je niet, want die bestaat niet. Je wilt gewoon alle .container elementen. (die var van toenet dus)
Gewijzigd op 01/05/2013 17:29:09 door Wouter J
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
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
function toggleProductColor(el) {
img_id = '#prd_img_' + $(el).data('prd_id');
size_id = '#prd_sizes_' + $(el).data('prd_id');
if (typeof $(el).data('image') == "string") {
new_image = new Image();
new_image.src = img_url + $(el).data('image');
$(el).data('image', new_image);
}
$(img_id).attr('src', $(el).data('image').src);
$(size_id).empty();
$.each(eval($(el).data('sizes')), function(index, value) {
$(size_id).append("<div class=\"size\">" + value + '</div>');
});
}
$(document).ready(function() {
$(".article-color-multi").mouseover(function() {
toggleProductColor(this);
});
$(".clickable.detail-color").click(function() {
toggleProductDetailColor(this);
});
$('.thumb').eq(0).addClass('is_active');
$(".cloud-zoom-gallery").bind("click", function() {
$(".thumb").toggleClass("is_active");
})
});
img_id = '#prd_img_' + $(el).data('prd_id');
size_id = '#prd_sizes_' + $(el).data('prd_id');
if (typeof $(el).data('image') == "string") {
new_image = new Image();
new_image.src = img_url + $(el).data('image');
$(el).data('image', new_image);
}
$(img_id).attr('src', $(el).data('image').src);
$(size_id).empty();
$.each(eval($(el).data('sizes')), function(index, value) {
$(size_id).append("<div class=\"size\">" + value + '</div>');
});
}
$(document).ready(function() {
$(".article-color-multi").mouseover(function() {
toggleProductColor(this);
});
$(".clickable.detail-color").click(function() {
toggleProductDetailColor(this);
});
$('.thumb').eq(0).addClass('is_active');
$(".cloud-zoom-gallery").bind("click", function() {
$(".thumb").toggleClass("is_active");
})
});
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$(document).ready(function() {
var content = $('.content');
var sluiten = $('.sluiten');
...
sluiten.click(function(e) {
...
})
}
var content = $('.content');
var sluiten = $('.sluiten');
...
sluiten.click(function(e) {
...
})
}
var content kan je dan blijven gebruiken. Het kost energie om $('.foo') aan te roepen. Als dat gecached wordt, moet dat maar 1 keer gebeuren.
---
En dan heb je de functie eq(). Die zal je goed kunnen gebruiken.
bv.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$(document).ready(function() {
var content = $('.content'),
sluiten = $('.sluiten');
sluiten.click(function(e) {
var derde_div = content.eq(2); // uiteraard 0-based; eq(0) geeft je het eerste element ...
});
var content = $('.content'),
sluiten = $('.sluiten');
sluiten.click(function(e) {
var derde_div = content.eq(2); // uiteraard 0-based; eq(0) geeft je het eerste element ...
});
Je kan dat bv. ook in een for-lus steken
Code (php)
1
2
3
2
3
for (var i=0; i<content.length; i++) {
content.eq(i).hide();
}
content.eq(i).hide();
}
Herschrijf eens je code, met alles gecached. Dan zien we ten gronde hoe dat probleem opgelost raakt.
1.Hoe plaats ik een functie mee in de sluit variable (zie code).
2.En hoe zorg ik er voor dat als ik op de sluit var click dat deze alleen de geklikte box sluit? (nu sluit deze ze allemaal).
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
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
//deze is nodig omdat ik maar een click op me box wil hebben
function bindButton() {
$(".idboxwrapper").unbind('click').one("click", function() {
var $array = $(".content:visible").length;
//document.write($array+1);
if ($array < 5){
if( $('.content').is(':hidden') ) {
var $bodywidth = $(window).width() -50;
var $aantal = $array+1;
var $width = $bodywidth/$aantal;
var $minwidth = "235px";
var $framewidth = $width/2;
$(this).find(".content").show(0);
$(this).find(".info").hide(0);
$(".content").css( "width", $width);
$(".content").css( "min-width", $minwidth);
$("iframe").css( "width", $framewidth);
$("iframe").css( "height", $width/3);
}
}
});
}
bindButton();
// tijdelijke oplossing werkt prima
$(".titel").click(function() {
bindButton();
if( $('.content').is(':visible') ) {
$(".content").hide(0);
$(".info").show(0);
}
});
//het herschreven deel werkt goed alleen zogauw de functie bindButton uncomment word doet deze het niet meer...
var $content = $('.content');
var $sluiten = $('.sluiten');
$sluiten.click(function(e) {
$content.hide(0);
$(".info").show(0);
//bindButton();
});
function bindButton() {
$(".idboxwrapper").unbind('click').one("click", function() {
var $array = $(".content:visible").length;
//document.write($array+1);
if ($array < 5){
if( $('.content').is(':hidden') ) {
var $bodywidth = $(window).width() -50;
var $aantal = $array+1;
var $width = $bodywidth/$aantal;
var $minwidth = "235px";
var $framewidth = $width/2;
$(this).find(".content").show(0);
$(this).find(".info").hide(0);
$(".content").css( "width", $width);
$(".content").css( "min-width", $minwidth);
$("iframe").css( "width", $framewidth);
$("iframe").css( "height", $width/3);
}
}
});
}
bindButton();
// tijdelijke oplossing werkt prima
$(".titel").click(function() {
bindButton();
if( $('.content').is(':visible') ) {
$(".content").hide(0);
$(".info").show(0);
}
});
//het herschreven deel werkt goed alleen zogauw de functie bindButton uncomment word doet deze het niet meer...
var $content = $('.content');
var $sluiten = $('.sluiten');
$sluiten.click(function(e) {
$content.hide(0);
$(".info").show(0);
//bindButton();
});
Code (php)
1
$(this).children(".content").hide(0);
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
$(".newstitle").click(function() {
parent = $(this).parent()
$(parent).children(".info").hide();
$(parent).children(".content").show();
$(parent).children(".sluiten").show();
});
$(".sluiten").click(function() {
parent = $(this).parent()
$(parent).children(".info").show();
$(parent).children(".content").hide();
$(parent).children(".sluiten").hide();
});
parent = $(this).parent()
$(parent).children(".info").hide();
$(parent).children(".content").show();
$(parent).children(".sluiten").show();
});
$(".sluiten").click(function() {
parent = $(this).parent()
$(parent).children(".info").show();
$(parent).children(".content").hide();
$(parent).children(".sluiten").hide();
});