Divs überschneiden sich

**EvilBen** · 31-08-2016, 00:09

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.

**kkapsner** · 31-08-2016, 08:02

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

**EvilBen** · 31-08-2016, 10:42

Doch klar:

snango.de/social/

und dann login:

user: test@test.de
pw: 123456

dann kommt ihr direkt auf die timeline

**tsseh** · 31-08-2016, 10:46

Zitat von EvilBen

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

**EvilBen** · 31-08-2016, 11:33

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.

**tsseh** · 31-08-2016, 11:48

Zitat von EvilBen

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 von EvilBen

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

**EvilBen** · 31-08-2016, 11:55

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*

**tsseh** · 31-08-2016, 12:25

Zitat von EvilBen

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"

**kkapsner** · 31-08-2016, 17:26

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

**EvilBen** · 01-09-2016, 08:56

nein isotope verwende ich nicht kkapsner.

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

**tsseh** · 01-09-2016, 11:20

Zitat von EvilBen

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

**EvilBen** · 01-09-2016, 13:44

und wie genau suche ich nach diesen Elementen tsseh

**kkapsner** · 01-09-2016, 17:07

Zitat von EvilBen

nein isotope verwende ich nicht

Was verwendest du dann, um die Elemente initial anzuordnen?

**EvilBen** · 04-09-2016, 19:14

@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...

**kkapsner** · 05-09-2016, 09:13

Zitat von EvilBen

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 von EvilBen

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.

Thema: Divs überschneiden sich

LinkBack

Themen-Optionen

Anzeige

Divs überschneiden sich

AW: Divs überschneiden sich

AW: Divs überschneiden sich

AW: Divs überschneiden sich

AW: Divs überschneiden sich

AW: Divs überschneiden sich

AW: Divs überschneiden sich

AW: Divs überschneiden sich

AW: Divs überschneiden sich

AW: Divs überschneiden sich

AW: Divs überschneiden sich

AW: Divs überschneiden sich

AW: Divs überschneiden sich

AW: Divs überschneiden sich

AW: Divs überschneiden sich

Ähnliche Themen

SideToggle / Divs verschieben sich

2 Scripte überschneiden sich :-(

Blocks sollen sich nicht überschneiden

Divs überschreiben sich

Prüfen ob sich divs berühren.

Lesezeichen

Lesezeichen

Berechtigungen

json Datei parsen

const prefix

json Datei parsen

json Datei parsen

json Datei parsen

const prefix