Show div buiten de parent div met Jquery?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Marco Hendriks

Marco Hendriks

04/04/2013 14:12:20
Quote Anchor link
Ik wil graag dat mijn div (content) verschijnt buiten de parent div. Ideaal zou zijn als ik hem kan positioneren van uit de top,left van de body. Dit is wat ik nu heb:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>


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.
 
PHP hulp

PHP hulp

28/03/2024 23:36:24
 
Tim S

Tim S

04/04/2013 14:55:27
Quote Anchor link
Bedoel je z-index?

Ook zou je kunnen kijken naar javascript modal dialog. Of de div verplaatsen naar de body ivm het positioneren.
 
Marco Hendriks

Marco Hendriks

04/04/2013 15:03:26
Quote Anchor link
De z-index heb ik al aangepast maar dat werkt niet. En de div verplaatsen naar een anderen positie gaat niet omdat hij gekoppeld zit aan een loop waar de data uit komt. Maar ik zal eens kijken naar de javascript oplossing.
 
Tim S

Tim S

04/04/2013 15:16:07
Quote Anchor link
z-index wel een groot getal geven 10000 bijvoorbeeld. De div zou je ook later kunnen verplaatsen doormiddel van jquery maar dat lijkt me eigenlijk niet nodig.
 
Marco Hendriks

Marco Hendriks

04/04/2013 15:58:28
Quote Anchor link
De z-index verhogen zou niks moeten uithalen en de modal dialog is niet wat ik zoek. De div die zichtbaar word moet een soort groot lees vlak worden waar van allerlei content vindbaar in is. Wat ik al aangaf nu opent deze precies onder onder de knop div en deze bevind zich weer in een container. Nu moet deze daar buiten openen ik dacht dat er een oplossing zou zijn met Jquery iets van offset body ofzo maar ik kan niks concreets vinden.
 
Tim S

Tim S

04/04/2013 16:11:45
Quote Anchor link
Als de div een position absolute heeft kan je hem gewoon buiten de parent div krijgen door margin - een aantal px te doen. Als dit niet is wat je bedoeld zou ik online een vergelijkbaar iets zoeken zodat ik kan zien wat je wilt.
 
Marco Hendriks

Marco Hendriks

04/04/2013 16:18:14
Quote Anchor link
Ja dat klopt dat kan wel. Alleen omdat het dynamisch gecreëerde content is kan ik niet maar een min margin opgeven. En daarom dacht ik met jquery te kunnen berekenen van uit de left van de body naar het punt waar ik wil beginnen.
 
Tim S

Tim S

04/04/2013 16:29:56
Quote Anchor link
Volgens mij kan die Margin wel. Ik ga er ook vanuit dat de website een vaste breedte heeft, dus waarom moet je het punt berekenen waar je wilt beginnen?
Waar wil je de div hebben aande onder kant boven links of rechts?
 
Marco Hendriks

Marco Hendriks

04/04/2013 16:30:03
Quote Anchor link
misschien dat deze screenshots helpen bij mij vraag:

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
 
Tim S

Tim S

04/04/2013 21:52:24
Quote Anchor link
Wil je dat .content even breed is als de pagina(zonder de sidebar dan)?
 
N K

N K

04/04/2013 22:40:38
Quote Anchor link
Kan je niet <div class="timeline"> relative maken en daarin de content absolute positioneren?
Lijkt me dat dat toch moet lukken?
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.