Проблема с раскладкой каменной кладки

Привет,

У меня есть макет кладки, на котором размещено несколько элементов div, называемых «сыщиками». Макет работает нормально, когда все сообщения собираются из MySQL, но возникает проблема с добавлением сообщения в реальном времени.

Добавление публикации в jquery и чистом JavaScript приводит к тому, что страница становится менее широкой.

Кажется, это происходит со всем документом или телом, поскольку навигационная панель также сокращается.

navbar также является первым элементом div в теле, поэтому я думаю, что это происходит с документом, но не знаю, почему. Вот и пример макета почтовая обертка

 


.sleuth-post-date{


margin-top:0.2em;


margin-top:0.2em;


}


#sleuthchannel{


clear:both;


-moz-column-width: 18em;


-webkit-column-width: 18em;


-moz-column-gap: 1em;


-webkit-column-gap: 1em;


}


.sleuth-box{


display: inline-block;


margin: 0.25rem;


padding: 1rem;


width: 100%;


background: white;


border:1px solid #CCC;


}


.sleuth-box-padding{


padding:0.4em;


}


.sleuth-box textarea{


width:100%;


}


.comment{


margin-top:0.5em;


}


.image-column{


width:25px;


float:left;


margin-right:0.2em;


}


.image-column img{


margin-top:0.4em;


}


.charcount{


padding:2px;


background-color:lightred;


display:block-inline;


}


.load-more{


text-align:center;


padding:2px;


display:block;


width:100%;


}


.load-more:hover{


text-align:center;


padding:2px;


background-color:#2882d6;


color:white !important;


display:block;


width:100%;


cursor:pointer;


cursor:hand;


}


.load-more a:hover{


color:white !important;


}


.load-more-link{


display:block;


height:100%;


width:100%; border:solid 1px #EEE;


}


.comment{


margin-bottom:0.5em;


}


.comment-button{


float:right;


margin-bottom:0.5em; background:#89B6DF; border:none; color:#FFF;


}


.comments-count{


margin-left:0.5em;


}

Код (разметка): пример поста

  <div class="sleuth-box"> <div class="sleuth-box-padding"> <iframe width="258" height="192" src="[URL='https://lumtu.com/yti/ewNNweDBodHRwczovL3lvdXR1YmUuY29tL2VtYmVkLzR3Wnl0V0Zt0V0']https://www.youtube.com/embed/4wZytWFm7x0[/URL]" frameborder="0" allowfullscreen></iframe> <span class="block sm-margin-bottom" style="float:left;"><i class="fa fa-pencil"></i> Edit</span> <span style="float:right;"><i class="fa fa-trash"></i> Delete</span> <span class="block sleuth-text sm-margin-bottom clear-fix"><small>By <a>JeremyBenson11</a></small></span> <span><i class="fa fa-heart"></i> </span> <span class="heart-count sm-margin-right">200</span> <span><i class="fa fa-comment"></i> </span> <span>200</span> <div class="comment-box"> <div class="comment clear-fix" style="margin-top:0.5em;"> <div class="image-column" style="width:25px; float:left;margin-right:0.2em;"> <img src="images/profile.jpg" height="25" width="25" style="margin-top:0.4em;" /> </div> <div> <small><a href="#">JeremyBenson11</a> This is my comment.






This is my comment.



This is my comment.



This is my comment.



This is my comment.






This is my comment.</small> </div> </div> <div class="comment clear-fix" style="margin-top:0.5em;"> <div class="image-column" style="width:25px; float:left;margin-right:0.2em;"> <img src="images/profile.jpg" height="25" width="25" style="margin-top:0.4em;" /> </div> <div> <small><a href="#">JeremyBenson11</a> This is my comment.</small> </div> </div> <div class="comment clear-fix" style="margin-top:0.5em;"> <div class="image-column" style="width:25px; float:left;margin-right:0.2em;"> <img src="images/profile.jpg" height="25" width="25" style="margin-top:0.4em;" /> </div> <div> <small><a href="#">JeremyBenson11</a> This is my comment.</small> </div> </div> <br> </div> <span class="charcount" style="padding:2px; background-color:lightred;">420</span> <textarea style="width:100%;" class="ttx" rows="4"></textarea> <button class="comment-button" type="button">Comment</button> </div> <div class="clear-fix load-more"> <span class="load-more-link">Load More</span> </div> </div><div class="sleuth-box"> 

Код (разметка): немного CSS.

 <div id="contentcontainer" style="width:90%; min-width:90%; max-width:90%; margin:auto;"> <div class="row"> <div class="col-lg-12"> <h3 class="clear-fix">Sleuths</h3> <div id="sleuthchannel"> <!-- posts go here --> </div>

Код (разметка):

ах, извини, Бланк.

Я тоже предполагал, что это проблема с компоновкой. Вот JS для публикации: Нажмите обработчик для модальной кнопки публикации.

Он просто проверяет входные данные и вызывает мой почтовый класс.

 <div class="sleuth-box-padding">


<h4><i class="fa fa-link"></i><a> This new documentary about Jeffery Dahmer</a></h4>


<p>This new video about Jeffery Dahmer is pretty cool. Be sure to check it out, and let me know


what you think. This is supper cool, and be sure to check it out.</p>


<span class="block sm-margin-bottom" style="float:left;"><i class="fa fa-pencil"></i> Edit</span> <span style="float:right;"><i class="fa fa-trash"></i> Delete</span>


<span class="block sleuth-text sm-margin-bottom clear-fix"><small>By <a>JeremyBenson11</a></small></span>


<span><i class="fa fa-heart"></i> </span>


<span class="heart-count sm-margin-right">200</span>


<span><i class="fa fa-comment"></i> </span>


<span>200</span>


<div class="comment-box">


<div class="comment clear-fix" style="margin-top:0.5em;">


<div class="image-column" style="width:25px; float:left;margin-right:0.2em;">


<img src="images/profile.jpg" height="25" width="25" style="margin-top:0.4em;" />


</div>


<div>


<small><a href="#">JeremyBenson11</a> This is my comment. This is my comment.


This is my comment. This is my comment. This is my comment. This is my comment.</small>


</div>


</div>


<div class="comment clear-fix" style="margin-top:0.5em;">


<div class="image-column" style="width:25px; float:left;margin-right:0.2em;">


<img src="images/profile.jpg" height="25" width="25" style="margin-top:0.4em;" />


</div>


<div>


<small><a href="#">JeremyBenson11</a> This is my comment.</small>


</div>


</div>


<div class="comment clear-fix" style="margin-top:0.5em;">


<div class="image-column" style="width:25px; float:left;margin-right:0.2em;">


<img src="images/profile.jpg" height="25" width="25" style="margin-top:0.4em;" />


</div>


<div>


<small><a href="#">JeremyBenson11</a> This is my comment.</small>


</div>


</div>


<br>


</div>


<span class="charcount" style="padding:2px; background-color:lightred;">420</span>


<textarea style="width:100%;" class="ttx" rows="4"></textarea>


<button class="comment-button" type="button">Comment</button>


</div>


<div class="clear-fix load-more">


<span class="load-more-link">Load More</span>


</div>

Код (разметка): функция почтового класса

 link: function(title, url, description) { $.ajax({ method: "POST", url: "php/post_link_sleuth.php", dataType: 'json', data: { titleObj: title, urlObj: url, descriptionObj:description} }).done(function( data ) { if(data.message == 'posted') { $('#sleuthchannel').prepend(data.html); $('#textPost').modal('hide'); } }); }

Код (разметка): html, опубликованный скриптом.

Это буквально то, что отражается, я еще не интерполировал значения.

Кроме того, точно такой же HTML-код уже загружается при загрузке страницы.

Вот почему я подумал, что это ошибка стиля.

Ничего особенного я не увидел.

 // post link sleuth $(document.body).on( 'click', '.postlinksleuthbutton', function(event){ var title = $('#linkPost #linktitle').val(); var url = $('#linkPost #linkurl').val(); var description = $('#linkPost #linkdescription').val(); if(url === '') { // show error in div $('#linknotice').html(''); $('#linknotice').html('url must not be blank.'); }else{ //post the image if(url.includes('www.')) { // post the video if(title === '') { $('#linknotice').html(''); $('#linknotice').html('title must not be blank.'); }else if(description === '') { $('#linknotice').html(''); $('#linknotice').html('description must not be blank.'); }else if(title !== '' && description !== ''){ // test if title or description too long if(title.length > 52) { $('#linknotice').html(''); $('#linknotice').html('title must be less than 52 characters.'); } if(description.length > 456) { $('#linknotice').html(''); $('#linknotice').html('title must be less than 456 characters.'); } if (description.length < 456 && title.length < 52) { // post the article sleuth SleuthPost.link(title, url, description); // end post article sleuth } } }else{ $('#linknotice').html(''); $('#linknotice').html('url must be valid.'); } // end embed video } }); 

Код (разметка):

ВЗДОХ бесконечный бессмысленный DIV ни за что, МАЛЕНЬКИЙ текст вокруг текста, который не будет преуменьшен, статический стиль в разметке, бесконечные бессмысленные классы даром, неполная/несуществующая форма, херня Clearfix, как будто это все еще 2003 год, очень маловероятно, что вы так и есть.

на самом деле вплоть до глубины заголовка 4-го уровня, отсутствующих атрибутов.

тем более вы ДУМАЕТЕ, что такие вещи, как «загрузить больше», будут кнопкой или привязкой, так какого черта это интервал.

Гораздо меньше умственной хитрости использования JavaScript для выполнения работы CSS с точки зрения макета.

Я понятия не имею, чего вы пытаетесь достичь этой крушением поезда о том, как НЕ писать HTML, но я почти уверен, что вы это делаете не так.

ОСОБЕННО сценарий, который, похоже, выполняет РАБОТУ с атрибутами «required» и «maxlength»!



Все это говорит о десятицентах за доллары, если ваш макет меняется, когда вы что-то вписываете в HTML — что и делает ошеломляюще идиотский «prepend» jQuery — в этой добавляемой разметке есть ошибка или в том, к чему она добавляется с незакрытым тег или дополнительное закрытие, из-за которого что-то закрывается слишком рано.

Опять же, почему, если вы собираетесь обрабатывать данные AJAX, вам следует передавать ТОЛЬКО данные и генерировать новые элементы страницы в DOM, а не слепо вставлять их в разметку, где вы снова запускаете парсер.

Это или document.createElement - фиктивный или заменяющий div, вместо этого - внутренний HTML, чтобы синтаксический анализатор работал непосредственно над этим новым подразделом, а не со всем документом, а затем Element.insertBefore(newDiv, Element.firstChild);

Но, конечно, это не то, к чему вас призывает полоумная невежественная чушь, которой является jQuery.

В любом случае более 90% того, что вы показываете для разметки, относится к мусору, то же самое можно сказать и обо ВСЕМ JavaScript, и все это ПАХЕТ написанием без каких-либо резервных вариантов сценария.

то, что вам следует написать ПРЕЖДЕ ЧЕМ вы начнете использовать JavaScript, а тем более AJAX, на странице, если вы заботитесь о реальных пользователях, использующих сайт.

Хороший сценарий должен УЛУЧШАТЬ существующую функциональность, а не быть единственным средством ее обеспечения! Особенно в эпоху, когда вам даже не нужен JavaScript для создания модальных окон!

Хорошо, это не Google.

Сегодня ни у кого не будет раскрывающегося меню сообщений G Plus, лол.

«или document.createElement - это фиктивный или заменяющий div, вместо этого внутренний HTML-элемент, чтобы синтаксический анализатор запускался непосредственно в этом новом подразделе, а не во всем документе»

- Вот и Смертельная Тень, теперь ты думаешь на моем уровне,

Хм, только что заметил.

Вы устанавливаете столбчатый формат в оболочке, заполненной встроенными блоками.

Это имеет тенденцию делать то, что вы описываете.

и отчасти поэтому использование ширины столбца и зазора столбца для контента, не связанного с потоком, может быть.

непредсказуемым.

Было бы очень полезно, если бы у вас была живая демонстрация этого сбоя, но с внешним контейнером % ширины, статическим стилем в разметке и признаками буткрапа, КОНЕЧНО, у вас возникают проблемы.

Опять же, я бы дважды, трижды и четырежды проверил, что сгенерированный контент действителен со всеми закрытыми DIV, которые должны быть закрыты.