Masonry Layout Problem

Hey,

I've got a masonry layout where a number of divs called "sleuths" are posted. The layout works fine when all the posts are gathered from mysql, but there's a problem with live prepending of a post. Prepending a post in jquery and pure javascript causes the page to become less wide. It seems to be happening to the entire document or body, as the navbar shortens aswell. navbar is the first div set in the body too, that's why I'm thinking it's happening to the document, but not sure why.

Here's and example of the layout

post wrapper

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

Code (markup):

example post

<div class="sleuth-box">
                         <div class="sleuth-box-padding">
                         <iframe width="258" height="192" src="https://www.youtube.com/embed/4wZytWFm7x0" 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">

Code (markup):

Some CSS

.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;
   
}

Code (markup):

 

Where's that part? W/o knowing what you are actually doing, not what's there by default, it'll be quite impossible to tell what's wrong.

 

ah, sorry Blank. I was too assuming on it being a layout problem.

Here's the JS to post:

Click handler for modal post button. It just tests the inputs and calls my post class

// 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
         }
                 
    });    

Code (markup):

post class function

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');
                         
                        }
                     
            });
     
    }

Code (markup):

html posted by script. This is literally what is echoed, I haven't interpolated values yet. Also the exact same kind of html already loaded on page load. That's why I thought it was a style error. There's nothing special happening that I could see.

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

Code (markup):

 

*SIGH* endless pointless DIV for nothing, SMALL around text that wouldn't be de-emphasized, static style in the markup, endless pointless classes for nothing, incomplete/nonexistent form, clearfix asshattery like it is still 2003, highliy unlikely you are actually down to a level 4 heading depth, missing attributes,... much less you would THINK that things like "load more" would be a button or anchor, so why the *** is it a span.

Much less the mental midgetry of using JavaScript to do CSS' job in terms of layout.

I've no clue what you are trying to accomplish with this train wreck of how NOT to write HTML, but I'm pretty sure this isn't how you go about it. ESPECIALLY the scripttardery that seems to be doing the "required" and "maxlength' attributes JOB!

All that said, dimes to dollars if your layout is changing when you innerHTML something -- which is what jQuery's mind-numbingly idiotic dumbass "prepend" does -- there's a bug in that markup being added or what it is added to with a unclosed tag, or an extra closure causing something to be closed too soon.

Again why if you're gonna be AJAXing data around you should be passing JUST the data, and be generating your new page elements on the DOM, not blindly pasting it into the markup where you're triggering the parser again.

That or document.createElement a dummy or replacement div, innerHTML that element instead so the parser runs directly on that new subsection not the whole document, then Element.insertBefore(newDiv, Element.firstChild);

But of course, that's not what the halfwit mouth-breathing ignorant bullshit that is jQuery encourages you to do.

In any case 90%+ of what you're showing for markup belongs in the trash, same can be said for ALL the JavaScript, and the whole thing REEKS of being written with no scripting-off fallbacks... something you should be writing BEFORE you start throwing JavaScript much less AJAX at a page if you care about actual users using the site. Good scripting should ENHANCE existing functionality, not be the only means of providing it!

Particularly in an age where you don't even need JavaScript to do modals anymore!

 

Not sure this would help. I've tried the pure JavaScript method already. It causes the same issue with the document becoming less wide on each post.

Okay, this isn't Google. No one's getting a G Plus drop down post menu today, lol.

"or document.createElement a dummy or replacement div, innerHTML that element instead so the parser runs directly on that new subsection not the whole document"

- There ya go Death Shadow, now you're thinking on my level,

 

Uhm, just noticed. You're setting columnar on a wrapper filled with inline-blocks. That does tend to do what you describe... and part of why using column-width and column-gap on non-flow content can be... unpredictable.

Would really help if you had a live demo of this failing, but with the % width outer container, static style in the markup, and telltales of bootcrap, OF COURSE you're having problems.

Again though, I would double, triple, and quadruple check that the generated content is valid with all the DIV closed that should be closed.