Show div buiten de parent div met 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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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
<div class="timelinescroll">
<div class="timeline" style="width:<?echo $num_rows*65;?>px;">
<?
while($row = mysql_fetch_array($result)){
?>
<div class="contentbtn">
<div class="<?echo $row['tags'];?>">
<div class="<?echo $row['class'];?>" style="height:<?echo $row['size'] * 10; ?>px;">
<?echo $row['id'];?>
<div class="benaming">
<br/>
<?echo $row ['benaming'];?>
</div>
<div class="content" style="display:none;">
<b>Naam:</b> <? echo $row['benaming'];?><br/>
<b>Auteur:</b> <? echo $row['auteur'];?><br/>
<b>Bestanden:</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>
</div>
</div>
</div>
<?
}
?>
<script>
$('.contentbtn').click(function() {
$(".content").hide(0);
if( $('.content').is(':hidden') ) {
$(this).find(".content").show(0);
}
else {
$('.sluit').click(function() {
$(".content").hide(0);
});
}
});
$(document).ready(function() {
$('.content').css({
position: 'absolute',
top: '100px',
left: '0px'
});
});
</script>
<div class="timeline" style="width:<?echo $num_rows*65;?>px;">
<?
while($row = mysql_fetch_array($result)){
?>
<div class="contentbtn">
<div class="<?echo $row['tags'];?>">
<div class="<?echo $row['class'];?>" style="height:<?echo $row['size'] * 10; ?>px;">
<?echo $row['id'];?>
<div class="benaming">
<br/>
<?echo $row ['benaming'];?>
</div>
<div class="content" style="display:none;">
<b>Naam:</b> <? echo $row['benaming'];?><br/>
<b>Auteur:</b> <? echo $row['auteur'];?><br/>
<b>Bestanden:</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>
</div>
</div>
</div>
<?
}
?>
<script>
$('.contentbtn').click(function() {
$(".content").hide(0);
if( $('.content').is(':hidden') ) {
$(this).find(".content").show(0);
}
else {
$('.sluit').click(function() {
$(".content").hide(0);
});
}
});
$(document).ready(function() {
$('.content').css({
position: 'absolute',
top: '100px',
left: '0px'
});
});
</script>
Zoals het nu werkt plaatst deze steeds de div onder div van uit waar deze geopend word maar het is de bedoeling dat het een soort van pop up idee word.
Ook zou je kunnen kijken naar javascript modal dialog. Of de div verplaatsen naar de body ivm het positioneren.
Waar wil je de div hebben aande onder kant boven links of rechts?
http://www.marcohendriksportfolio.nl/help/2.png
Hier heb ik op de balk geklikt en zie je de eerste contentbox deze staat op de juiste plek.
http://www.marcohendriksportfolio.nl/help/3.png
Hier zie je de contentbox van balk id 4 en daar zie je dat deze precies daar onder opent.
Wat ik wil is dat deze contentbox ook net zoals bij de eerste foto op die positie hebben.
Dus er moet een variable zijn die tegen iedere nieuwe content na balk 1 zegt 5 px terug en balk 2 bijv 10 px terug.
Gewijzigd op 04/04/2013 16:34:43 door Marco Hendriks
Lijkt me dat dat toch moet lukken?