• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Divs überschneiden sich

E

EvilBen

New member
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">×</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.
 
EvilBen schrieb:
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.
Zum Vergrößern anklicken....
dann erstellst du beim direkten aktualisieren mit jquery eine andere struktur als beim laden der seite. vergleich mal beide
 
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.
 
EvilBen schrieb:
Aber in wie fern meinst du das, die Struktur ist ja immer die gleiche
Zum Vergrößern anklicken....
anscheinend nicht, sonst würde es sich ja nicht anders aussehen


EvilBen schrieb:
lediglich die Div wird "neu gefüllt" mit dieser Datei, bzw aktualisiert.
Zum Vergrößern anklicken....
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
 
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*
 
Zuletzt bearbeitet:
Verwendest du da isotope? Das musst du natürlich refreshen, da sonst die Positionen nicht aktualisiert werden.
 
nein isotope verwende ich nicht kkapsner.

also das mit dem element untersuchen klappt nicht, da Firefox dann immer auf google weiterleitet, WARUM AUCH IMMER !??
 
@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...
 
Zuletzt bearbeitet:
EvilBen schrieb:
Mit bootstrap quasi. Nutze isotope, zerschießt es mir das ganze design, scheint sich mit bootstrap klassen zu beißen
Zum Vergrößern anklicken....
Dann macht bootstrap da die Positionierung und da muss die Positionierung neu angestoßen werden.
EvilBen schrieb:
würde gerne mal wissen, wieso sich das ganze überschneidet...
Zum Vergrößern anklicken....
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.
 
Also ich habe jetzt mal alles neu aktualisieren lassen nach dem antworten.
Ich hätte da natürlich eleganter, so dass halt alles ohne reload aktualisiert wird.
Wie mache ich das am besten?!
Das Problem ist ja auch, dass ich nur die 3 neusten Kommentare ausgeben lassen, und dann per bootstrap accordion welches, sich unterhalb der neusten drei ausfährt, die weiteren auszugeben.

Dann habe ich natürlich ähnliches Problem und müsste die Divs neu anordnen.
Wie macht man das am besten? Hat jemand nen Beispiel?!
 
okay das habt ihr falsch verstanden.

das accordion geht wunderbar, aber wie realisiere ich, dass die Divs nach dem ausfahren des Accordions neu angeordnet werden ?! Der Fokus soll dabei auf dem Div sein welches verändert wird.
Auch wenn ein neues Kommentar geschrieben wird sollen die Divs neu angeordnet sein, aber der Fokus eben auf dem Div sein, welches kommentiert wurde.

Kleines Beispiel:
Div mit der Id 5 wird kommentiert, dann sollen alle anderen Divs um dieses herum neu angeordnet werden, so dass sich das Div 5 eben den "Platz nimmt den es braucht". Das gleiche wenn das Acordion ausfährt.
Das ist ja das eigentliche Problem. Alles andere funktioniert ja wunderbar.

Ich habe es bisher so gelöst, dass ich einfach die ganze Seite aktualisiere, bzw wieder auf sie weiterleite. Dann werden aber alle Beiträge neu angezeigt, obwohl ich ja auf dem kommentierenden Beitrag bleiben möchte.

Wenn ich jetzt kommentiere, dann überschneiden sich die Divs und es ist nicht mehr lesbar!
 
prinzipiell geht das
Code: 
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="vendor/jquery/jquery.js"></script>
    <script>
    $(function()
    {
      $(".container").append($("<div class='row'><div class='col-md-4'>3</div><div class='col-md-4'>4</div><div class='col-md-4'>5</div></div>"));
    });
    </script>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-8">1</div>
        <div class="col-md-4">2</div>
      </div>
    </div>
  </body>
</html>
mach einfach mal so ein beispiel wo es bei dir nicht geht
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben