Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 15 von 33
  1. #1
    EvilBen ist offline Doppel-As
    registriert
    30-08-2015
    Beiträge
    108

    Divs überschneiden sich

    Hey Leute,

    ich habe folgendes kleines Problem:

    Ich habe mehrere Divs, die Beiträge in einer Timeline anordnen (ähnlich dem Posting - System auf Sozialen Netzwerken).

    Diese Beiträge können natürlich kommentiert werden. Funktioniert alles dank Jquery und Php auch 1A. Das kleine optische Problem was ich nun habe:

    wenn ich einen Beitrag kommentiere, und ihn absende, wird der Container gleich per Jquery aktualisiert, so dass der Kommentar direkt angezeigt wird. Das Problem ist jetzt nur, dass interessiert die anderen Divs nicht, und die Divs überschneiden sich, anstatt sich zu verschieben, wenn ein neues Kommentar erstellt wird.

    Hier einmal die Struktur:

    timeline_ausgabe.php: (hier werden alle Postings ausgegeben)
    Code:
         <?php 
    if(isset($_GET['sended'])){	 
    include "includes/_db.php";
    
    	include "includes/_functions.php";
    }
    ?>
          <div class="timeline row" data-toggle="isotope">
                  <div class="col-xs-12 col-md-6 col-lg-4 item">
                    <div class="timeline-block">
                      <div class="panel panel-default share clearfix-xs">
                        <div class="panel-heading panel-heading-gray title">
                          Was gibt's neues
                        </div>
                        <div class="panel-body">
                          <textarea name="status" id="status" class="form-control share-text" rows="3" placeholder="Teile deinen Status ..."></textarea>
                        </div>
                        <div class="panel-footer share-buttons">
                          <a href="#"><i class="fa fa-map-marker"></i></a>
                          <a href="#" data-toggle="modal" data-target="#foto"><i class="fa fa-photo"></i></a>
                          <a href="#"><i class="fa fa-video-camera"></i></a>
                          <input type="hidden" name="id" id="id" value="<?php echo $_COOKIE['ID']; ?>">
                          <button type="submit" class="btn btn-primary btn-xs pull-right display-none" onclick="return timelinepost();" href="#">Posten</button>
                        </div>
                      </div>
                    </div>
                  </div>
                 
    <?php
    
    
    $sql = "SELECT * FROM social_timeline ORDER BY timeline_date DESC";
    $result = $db->query($sql);
    $lastfoto = 0;
    
    while($row = $result->fetch_assoc()){
    if($row['timeline_type'] == "Post"){
    	$fotoid = $row['timeline_id'];
    ?>
    
    <div class="col-xs-12 col-md-6 col-lg-4 item">
                    <div class="timeline-block">
                      <div class="panel panel-default">
    
                        <div class="panel-heading">
                          <div class="media">
                            <div class="media-left">
                              <a href="">
                                <img src="<?php echo get_img_by_id($row['timeline_uid'], '50'); ?>" class="media-object">
                              </a>
                            </div>
                            <div class="media-body">
                              <a href="#" class="pull-right text-muted"><i class="icon-reply-all-fill fa fa-2x "></i></a>
    
                              <a href=""><?php echo get_name_by_id($row['timeline_uid']); ?></a>
    
                              <span><?php echo datum_formatiert($row['timeline_date']); ?></span>
                            </div>
                          </div>
                        </div>
    
                        <div class="panel-body">
                          <p><?php echo nl2br($row['timeline_text']); ?></p>
                        </div>
                                            <div id="kommentare_<?php echo $fotoid; ?>">
    
                        <?php include "timeline_comments_comment.php"; ?>
                        </div>
                        
                      </div>
                    </div>
                  </div>
                  
                  <?php 	
    	
    }else if($row['timeline_type'] == "Foto"){
    	if($row['timeline_foto'] != $lastfoto){
    	$lastfoto = $row['timeline_foto'];
    	?>
        
        <div class="col-xs-12 col-md-6 col-lg-4 item">
                    <div class="timeline-block">
                      <div class="panel panel-default">
    
                        <div class="panel-heading">
                          <div class="media">
                            <div class="media-left">
                              <a href="">
                                <img src="<?php echo get_img_by_id($row['timeline_uid'], '50'); ?>" class="media-object">
                              </a>
                            </div>
                            <div class="media-body">
                              <a href="#" class="pull-right text-muted"><i class="icon-reply-all-fill fa fa-2x "></i></a>
    
                              <a href=""><?php echo get_name_by_id($row['timeline_uid']); ?></a>
    
                              <span><?php echo datum_formatiert($row['timeline_date']); ?></span>
                            </div>
                          </div>
                        </div>
    
                        <div class="panel-body">
                          <!--<p>Late Night Show Photos</p> -->
                          <div class="timeline-added-images">
                          <?php
    					  			$tlfoto = "SELECT * FROM social_timeline WHERE timeline_type = 'Foto' AND timeline_foto = '".$row['timeline_foto']."'";
    								$tlresult = $db->query($tlfoto);
    								
    								while($tlfoto = $tlresult->fetch_assoc()){
    									$fotoid = $tlfoto['timeline_foto'];
    								echo  "<a class=\"example-image-link\" href=\"usr_timeline_img/".$tlfoto['timeline_text']."\" data-lightbox=\"".$tlfoto['timeline_foto']."\"><img class=\"example-image\" src=\"usr_timeline_img/thumbnails/".$tlfoto['timeline_text']."\" width=\"80\" alt=\"photo\" /></a>";
    	
    								}
                            ?>
                                 
    
                          </div>
                        </div>
                        
                        <div id="kommentare_<?php echo $fotoid; ?>">
                        <?php include "timeline_comments_comment.php"; ?>
                        </div>
                       
                       
                       
                      </div>
                    </div>
                  </div> <!-- col xs -->
        <?php
    	
    }
    }
    	
    }
    
    
    ?>
    timeline_comments_comment.php (Hier werden die Kommentare geladen)

    Code:
                       <?php
    					if(isset($_GET['sended'])){
    						$sqlid = $_GET['id'];
    						//include "includes/_db.php";
    						//include "includes/_functions.php";
    					}else{
    						$sqlid = $fotoid;
    					}
    					
    					if(isset($_GET['written'])){
    						include "includes/_db.php";
    						include "includes/_functions.php";
    					}
    					$comment = "SELECT * FROM social_timeline_comments WHERE comment_postid = '".$sqlid."' ORDER BY comment_date DESC LIMIT 3";
    					$commentresult = $db->query($comment);
    					
    					$anzahlcomments = "SELECT * FROM social_timeline_comments WHERE comment_postid = '".$sqlid."' ORDER BY comment_date DESC";
    					$anzahl = $db->query($anzahlcomments);
    					$anzahlcomments = $anzahl->num_rows;
    					
    					?>
                        <div class="view-all-comments">
                          <a type="button"  data-toggle="modal" data-target="#weitere_<?php echo $sqlid; ?>">
                            <i class="fa fa-comments-o"></i> Zeige alle
                          </a>
                          <span><?php echo $anzahlcomments; ?> Kommentare</span>
    
                        </div>
                        <ul class="comments">
    
    <?php
    					while($comment = $commentresult->fetch_assoc()){
    						?>
                          <li class="media">
                            <div class="media-left">
                              <a href="">
                                <img src="<?php echo get_img_by_id($comment['comment_abs'],'50'); ?>" class="media-object">
                              </a>
                            </div>
                            <div class="media-body">
                              <div class="pull-right dropdown" data-show-hover="li">
                          <?php if($comment['comment_abs'] == $_COOKIE['ID']){ ?>
                     
                                <a href="#" data-toggle="dropdown" class="toggle-button">
                                  <i class="fa fa-pencil"></i>
                                </a>
                                
                              
                                <ul class="dropdown-menu" role="menu">
                                  <li><a href="#">Edit</a></li>
                                  <li><a href="#" onclick="return deletecommentar(<?php echo $comment['comment_id']; ?>, <?php echo $sqlid; ?>);">Delete</a></li>
                                </ul>
                              </div>
                              <?php } ?>
                              <a href="" class="comment-author pull-left"><?php echo get_vorname_by_id($comment['comment_abs']); ?></a>
                              <span><?php echo $comment['comment_text']; ?></span>
                              <div class="comment-date"><?php echo datum_formatiert($comment['comment_date']); ?></div>
                            </div>
                          </li>
                          <?php }* 
    					
    					  ?>
    					  
    
    
                             <li class="comment-form">
                            <div class="input-group">
    
                              <span class="input-group-btn">
                       <a href="" class="btn btn-default"><i class="fa fa-photo"></i></a>
                    </span>
    							<form name="writecomment" action="" onSubmit="writeit(<?php echo $sqlid; ?>); return false;">
                              <input type="text" name="comment_<?php echo $sqlid; ?>" id="comment_<?php echo $sqlid; ?>" class="form-control" />
                              <input type="hidden" value="Foto" name="type" id="type"></form>
                            
    
                            </div>
                          </li> 
                        </ul>
                        
                        <!-- Modal -->
                   <?php
    			   
    			   $comment = "SELECT * FROM social_timeline_comments WHERE comment_postid = '".$sqlid."' ORDER BY comment_date DESC LIMIT 40";
    			   $commentresult = $db->query($comment);
    			   $comment = $commentresult->fetch_assoc();
    			   ?>
    <div class="modal fade" id="weitere_<?php echo $sqlid; ?>" tabindex="-1" role="dialog" aria-labelledby="meinModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Schließen"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="meinModalLabel"> <img src="<?php echo get_img_by_id($comment['comment_abs'],'50'); ?>" class="media-object"></h4>
          </div>
          <div class="modal-body">
    	                      <ul class="comments">
    
    	  <?php
    while($comment = $commentresult->fetch_assoc()){
    						?>
                          <li class="media">
                            <div class="media-left">
                              <a href="">
                                <img src="<?php echo get_img_by_id($comment['comment_abs'],'50'); ?>" class="media-object">
                              </a>
                            </div>
                            <div class="media-body">
                              <div class="pull-right dropdown" data-show-hover="li">
                          <?php if($comment['comment_abs'] == $_COOKIE['ID']){ ?>
                     
                                <a href="#" data-toggle="dropdown" class="toggle-button">
                                  <i class="fa fa-pencil"></i>
                                </a>
                                
                              
                                <ul class="dropdown-menu" role="menu">
                                  <li><a href="#">Edit</a></li>
                                  <li><a href="#" onclick="return deletecommentar(<?php echo $comment['comment_id']; ?>, <?php echo $sqlid; ?>);">Delete</a></li>
                                </ul>
                              </div>
                              <?php } ?>
                              <a href="" class="comment-author pull-left"><?php echo get_vorname_by_id($comment['comment_abs']); ?></a>
                              <span><?php echo $comment['comment_text']; ?></span>
                              <div class="comment-date"><?php echo datum_formatiert($comment['comment_date']); ?></div>
                            </div>
                          </li>
                          <?php }* 
    					
    					  ?>      </ul></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
          </div>
        </div>
      </div>
    </div>
    Lasst euch nicht von dem Modal stören, dass ist nur testweise, und soll entfernt werden wenn das oben beschriebene Problem behoben ist.
    Ich bin mir sicher man kann das irgendwie in der Style Eigenschaft leicht verändern, hoffe ihr wisst weiter.

  2. #2
    Avatar von kkapsner
    kkapsner ist gerade online Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.701

    AW: Divs überschneiden sich

    Hast du nicht einen Link wo wir uns das live ansehen können?

  3. #3
    EvilBen ist offline Doppel-As
    registriert
    30-08-2015
    Beiträge
    108

    AW: Divs überschneiden sich

    Doch klar:

    snango.de/social/

    und dann login:

    user: test@test.de
    pw: 123456

    dann kommt ihr direkt auf die timeline

  4. #4
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: Divs überschneiden sich

    Zitat Zitat von EvilBen Beitrag anzeigen
    wenn ich einen Beitrag kommentiere, und ihn absende, wird der Container gleich per Jquery aktualisiert, so dass der Kommentar direkt angezeigt wird. Das Problem ist jetzt nur, dass interessiert die anderen Divs nicht, und die Divs überschneiden sich, anstatt sich zu verschieben, wenn ein neues Kommentar erstellt wird.
    dann erstellst du beim direkten aktualisieren mit jquery eine andere struktur als beim laden der seite. vergleich mal beide

  5. #5
    EvilBen ist offline Doppel-As
    registriert
    30-08-2015
    Beiträge
    108

    AW: Divs überschneiden sich

    Aber in wie fern meinst du das, die Struktur ist ja immer die gleiche, da sie ja durch den php include "timeline_comments_comment.php" realisiert wird, oder habe ich etwas falsch verstanden ?
    Die Datei ändern sich ja nicht.
    lediglich die Div wird "neu gefüllt" mit dieser Datei, bzw aktualisiert.

  6. #6
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: Divs überschneiden sich

    Zitat Zitat von EvilBen Beitrag anzeigen
    Aber in wie fern meinst du das, die Struktur ist ja immer die gleiche
    anscheinend nicht, sonst würde es sich ja nicht anders aussehen


    Zitat Zitat von EvilBen Beitrag anzeigen
    lediglich die Div wird "neu gefüllt" mit dieser Datei, bzw aktualisiert.
    ich denke dü fügst einen kommentar und damit einen div-kontainer hinzu?

    vergleich doch enfach das dom für einen geladenen kommentar mit dem neu hinzugefügten

  7. #7
    EvilBen ist offline Doppel-As
    registriert
    30-08-2015
    Beiträge
    108

    AW: Divs überschneiden sich

    ok, dass mit dem Dom übersteigt schon wieder etwas meine Fähigkeiten *schäm*

    So sieht die Funktion aus, und eigentlich sollte er das gesamte Div einfach neu laden

    Code:
    function writeit(id){
    	
    	$.get('timeline_comment_write.php?id='+id+'&commi='+document.getElementById('comment_'+id).value+'&type='+document.getElementById('type').value, function(){ 
    	 
    				$('#kommentare_'+id).load('timeline_comments_comment.php?sended=true&written=true&id='+id).fadeIn("3000");
    
    	document.getElementById('comment_'+id).value = "";	
    	//console.log(this)
    
    	
    	});
    }
    in chrome wird das ganze im übrigen korrekt angezeigt, Safari macht mir nur Probleme

    Im übrigen werden die Kommentare auch anders angezeigt. Wenn du auf die Seite gehts, und dir die Kommentare anschaust, in Chrome wurden die letzten erstellt, dann schaut es irgendwie falsch aus, bzw die Kommentare werden nur beim Maus over angezeigt, umgekehrt genau das gleiche ?!

    Jetzt versteh ich nur noch Bahnhof *lach*
    Geändert von EvilBen (31-08-2016 um 12:57 Uhr)

  8. #8
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: Divs überschneiden sich

    Zitat Zitat von EvilBen Beitrag anzeigen
    ok, dass mit dem Dom übersteigt schon wieder etwas meine Fähigkeiten *schäm*
    im ff mit rechte maustaste auf das element klicken dann "element untersuchen"

  9. #9
    Avatar von kkapsner
    kkapsner ist gerade online Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.701

    AW: Divs überschneiden sich

    Verwendest du da isotope? Das musst du natürlich refreshen, da sonst die Positionen nicht aktualisiert werden.

  10. #10
    EvilBen ist offline Doppel-As
    registriert
    30-08-2015
    Beiträge
    108

    AW: Divs überschneiden sich

    nein isotope verwende ich nicht kkapsner.

    also das mit dem element untersuchen klappt nicht, da Firefox dann immer auf google weiterleitet, WARUM AUCH IMMER !??

  11. #11
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: Divs überschneiden sich

    Zitat Zitat von EvilBen Beitrag anzeigen
    also das mit dem element untersuchen klappt nicht, da Firefox dann immer auf google weiterleitet, WARUM AUCH IMMER !??
    hä? dann "Extras"->"Web-Entwickler"->"Inspektor" oder CTRL+SHIFT+C und dann elemente im dom suchen

  12. #12
    EvilBen ist offline Doppel-As
    registriert
    30-08-2015
    Beiträge
    108

    AW: Divs überschneiden sich

    und wie genau suche ich nach diesen Elementen tsseh

  13. #13
    Avatar von kkapsner
    kkapsner ist gerade online Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.701

    AW: Divs überschneiden sich

    Zitat Zitat von EvilBen Beitrag anzeigen
    nein isotope verwende ich nicht
    Was verwendest du dann, um die Elemente initial anzuordnen?

  14. #14
    EvilBen ist offline Doppel-As
    registriert
    30-08-2015
    Beiträge
    108

    AW: Divs überschneiden sich

    @kkapsner ich nutze nur divs die via php schleife ausgegeben werden. Mit bootstrap quasi. Nutze isotope, zerschießt es mir das ganze design, scheint sich mit bootstrap klassen zu beißen

    würde gerne mal wissen, wieso sich das ganze überschneidet... Habe jetzt alles durchsucht, und bin nicht auf den Fehler gekommen^^ habe vermutet dass irgendwo ein </div> fehlt oder so, aber negativ...
    Geändert von EvilBen (04-09-2016 um 20:23 Uhr)

  15. #15
    Avatar von kkapsner
    kkapsner ist gerade online Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.701

    AW: Divs überschneiden sich

    Zitat Zitat von EvilBen Beitrag anzeigen
    Mit bootstrap quasi. Nutze isotope, zerschießt es mir das ganze design, scheint sich mit bootstrap klassen zu beißen
    Dann macht bootstrap da die Positionierung und da muss die Positionierung neu angestoßen werden.
    Zitat Zitat von EvilBen Beitrag anzeigen
    würde gerne mal wissen, wieso sich das ganze überschneidet...
    Diese ganzen Kacheln werden dynamisch per JS positioniert und diese Positionen müssen natürlich neu berechnet werden, wenn sich irgendeine DIV-Größe ändert.

Seite 1 von 3 123 LetzteLetzte

Ähnliche Themen

  1. SideToggle / Divs verschieben sich
    Von hypothenuse im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 16-09-2015, 03:04
  2. 2 Scripte überschneiden sich :-(
    Von thomaspruess im Forum JavaScript
    Antworten: 8
    Letzter Beitrag: 01-12-2011, 18:56
  3. Blocks sollen sich nicht überschneiden
    Von ralfprivat im Forum CSS und (X)HTML
    Antworten: 2
    Letzter Beitrag: 13-12-2009, 11:25
  4. Divs überschreiben sich
    Von Padimi im Forum CSS und (X)HTML
    Antworten: 7
    Letzter Beitrag: 23-09-2008, 22:15
  5. Prüfen ob sich divs berühren.
    Von *chris im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 03-05-2007, 18:37

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •