Divs überschneiden sich

**tsseh** · 05-09-2016, 09:32

Zitat von kkapsner

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.

nein, das funktioniert natürlich rein über css, nur wenn man die jquery plugins von bootstrap nutzt muss man nachträglich noch über js aktualisieren.

**EvilBen** · 05-09-2016, 11:33

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?!

**tsseh** · 05-09-2016, 12:44

Zitat von EvilBen

Wie macht man das am besten?

wie machst du was, ich hab jetzt nicht verstanden was du eigentlich vorhast. willst du wissen wie man das accordion initialisiert? JavaScript · Bootstrap

Zitat von EvilBen

Hat jemand nen Beispiel?!

mach du doch mal ein beispiel und beschreibe was wie gehen soll

**EvilBen** · 05-09-2016, 14:36

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!

**tsseh** · 05-09-2016, 14:59

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

**EvilBen** · 05-09-2016, 15:18

Also . . .

das funktioniert prinzipiell sehr gut !
Logge dich doch einfach mal mit dem Test User ein und probiere das kommentieren mal, dann siehst du was passiert.

user: test@test.de
pw: 123456

snango.de/social/

das ist der entsprechende JS teil, der bei mir die ganze Arbeit übernimmt

Code:

   $(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>"));
    });

function writeit(id){
	
	$.get('timeline_comment_write.php?id='+id+'&commi='+document.getElementById('comment_'+id).value+'&type='+document.getElementById('type').value, function(){ 
	 
			$('#timelineausgabe').load('timeline.php?sended=true&id='+id).fadeIn("3000");

	document.getElementById('comment_'+id).value = "";	
//window.location = "index.php?";

	
	});
}

und so sind die Divs angeordnet, die den Beitrag und die Kommentare ausgeben (Php teilweise weg geschnitten)

Code:

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

timeline_comments_comment.php

Code:

					
                    <div class="view-all-comments">
                      <a type="button"  role="button" data-toggle="collapse" href="#weitere_<?php echo $sqlid; ?>" aria-expanded="false" aria-controls="collapseBeispiel">
                        <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 }* 
					
					  ?>
					  

							<div class="collapse" id="weitere_<?php echo $sqlid; ?>">
  <div class="well">
    ...
  </div>
</div>
                         <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>

**tsseh** · 05-09-2016, 15:25

Zitat von EvilBen

Also . . .
das funktioniert prinzipiell sehr gut !

dann mach doch mal ein beispiel wo es nicht geht.

Zitat von EvilBen

Logge dich doch einfach mal mit dem Test User ein und probiere das kommentieren mal, dann siehst du was passiert.

nee, das mache ich grundsätzlich nicht

**EvilBen** · 05-09-2016, 16:44

Bildschirmfoto 2016-09-05 um 16.41.50.jpg Bildschirmfoto 2016-09-05 um 16.42.24.jpg

Bild eins, normales output.
Bild zwei, nach dem kommentieren. Erstens schreibt er das gesetzte Kommentar unter jedem Beitrag (in der Datenbank ist es aber richtig eingetragen, und nach F5 wird auch alles richtig angezeigt) und zweitens, ist es halt nicht so angeordnet wie auf dem 1. Bild.

**tsseh** · 05-09-2016, 17:25

Zitat von EvilBen

Erstens schreibt er das gesetzte Kommentar unter jedem Beitrag (in der Datenbank ist es aber richtig eingetragen, und nach F5 wird auch alles richtig angezeigt)

das würde bedeuten, du lädst nach absenden des kommentars alle beiträge neu und nicht nur den einen?! außerdem bedeutet das, dass dein php-script die kommentare unter jeden beitrag schreibt wenn du es mit den parametern aufrufst.

die unterschiede in der struktur findest du ganz einfach, indem du das dom für das element mit id="timelineausgabe" vor und nach F5 vergleichst(und nicht per hand, sondern per tool)

**EvilBen** · 05-09-2016, 19:11

Zitat von tsseh

das würde bedeuten, du lädst nach absenden des kommentars alle beiträge neu und nicht nur den einen?! außerdem bedeutet das, dass dein php-script die kommentare unter jeden beitrag schreibt wenn du es mit den parametern aufrufst.

JA! Das ziel ist natürlich dass eben nur dieser Beitrag aktualisiert wird, wo wir wieder zum JS/Jquery kommen. Beruhigenderweise sagt dein Tool schonmal, dass es angeblich keine Unterschiede gibt in den Dateien!

Jetzt weiß ich nicht so richtig ob ich das mit dem DOM richtig verstanden habe ... Kann ja eigentlich nicht sein, dass beides gleich ist. Kann mir jemand kurz erklären wie genau ich das mache ?!

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

Zitat von EvilBen

Kann mir jemand kurz erklären wie genau ich das mache ?!

Unbenannt.png
du gehst auf das element timelineausgabe, das wird auch hervorgehoben und wählst inneres oder #äußeres html kopieren
fügst das in eine datei ein, speicherst diese und vergleichst sie mit der nach F5

**EvilBen** · 05-09-2016, 21:05

ahhhhh ^^

das sieht schon anders aus....

also ich habe folgendes gefunden:
--FEHLER 1--

Datei 1: vor dem absenden

Code:

<div id="timelineausgabe" name="timelineausgabe">
              
                <!-- Status Box -->
 <div class="timeline row" data-toggle="isotope" style="position: relative; height: 877px;">
              <div class="col-xs-12 col-md-6 col-lg-4 item" style="position: absolute; left: 0px; top: 0px;">

Datei2: nach dem absenden

Code:

<div id="timelineausgabe" name="timelineausgabe">  <!-- Status Box -->
 <div class="timeline row" data-toggle="isotope">
              <div class="col-xs-12 col-md-6 col-lg-4 item">

--FEHLER 2--
Datei1

Code:

Datei 2

Code:

            </div></div>

Eigentlich sind das ja nur Fehler in den style angaben ?! hat das so großen Einfluss auf das design ?!

**tsseh** · 05-09-2016, 21:52

Zitat von EvilBen

--FEHLER 2--

ist gleich

Zitat von EvilBen

Eigentlich sind das ja nur Fehler in den style angaben ?! hat das so großen Einfluss auf das design ?!

ähhh ja? suchen wir nicht fehler im style?

Zitat von EvilBen

data-toggle="isotope"

und was ist das?

**EvilBen** · 05-09-2016, 21:57

Fehler 2 ist gleich, ja ich wollte es nur anmerken . . .

zu 2 - ich weiß nicht was das sollte - ist schon zu spät um genauer nachzudenken

zu 3 - ich weiß nicht wo das her kommt ?!?!?! im quellcode steht es nicht

**kkapsner** · 05-09-2016, 22:37

Zitat von tsseh

nein, das funktioniert natürlich rein über css

Doch - siehe Fehler 1.

Zitat von tsseh

und was ist das?

Deswegen hatte ich oben über Isotope spekuliert.

Thema: Divs überschneiden sich

LinkBack

Themen-Optionen

Anzeige

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

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