Text loaded dynamically is not remaining within the div

I am experiencing an issue with dynamically loaded content where Images work fine, but Links and Text are not displaying properly.

For reference, you can view the problem in this JSFiddle: http://jsfiddle.net/HRs3u/1/

I suspect that it might be related to text caching or lack of caching?

Here is the section of code responsible for appending the content:

function findpost(timestamp, blog){
    //console.log(blog);
    var length = blog.length;
    for(var e=0; e<length; e++){
        var type = blog[e+1];
        if(timestamp === blog[e]){
            if(type === 0){
                $("#content").append("\
                    <div class='post photo'>\
                    <img src='"+blog[e+2]+"' width='400px'/>\
                    </div>"
                );
            } else if(type === 1){
                $("#content").append("\
                    <div class='post video'>\
                    "+blog[e+2]+"<br>\
                    "+blog[e+3]+"\
                    </div>"
                );
                console.log("Video");
            } else if(type === 2){
                $("#content").append("\
                    <div class='post link' />\
                    <a href='"+blog[e+2]+"' target='_blank'>"+blog[e+3]+"</a>\
                    </div>\
                ");
                console.log("Link!");
            } else if(type === 3){
                var title = blog[e+3];
                var text = blog[e+2];
                $("#content").append("\
                    <div class='post text' />\
                    <h2>"+title+"</h2>\
                    "+text+"\
                    </div>\
                ");
                console.log("Text!");
            } else if(type === 4){
                $("#content").append("\
                    <div class='post tweet' />\
                    "+blog[e+2]+"\
                    </div>\
                ");
                console.log("Tweet!");
            } else {
                console.warn("ERROR!");
            }
        }
    }
}

Here is the CSS associated with the post divs:

/*___Post Divs*/
.post{
    display     : inline-block;
    float       : left;
    line-height : 0;
    margin      : 5px;
    overflow    : hidden;

    border      : 1px solid #000;

    width       : 400px;
    height      : 400px;

}

.post.photo{
    background-color: #ccc;
}

.post.video{
    background-color: #0f1;
}

.post.link{
    background-color: #ff4;
}

.post.text{
    background-color: #c0f;
}

.post.tweet{
    background-color: #f44;
}

Answer №1

The reason for the issue lies in the way some of the append methods are closing the div prematurely. It would be helpful to review the script specifically where the type is equal to 2, 3, or 4.

function retrievePostContent(timestamp, blogData){
    var dataLength = blogData.length;
    for(var index=0; index<dataLength; index++){
        var postType = blogData[index+1];
        if(timestamp === blogData[index]){
            if(postType === 0){
                $("#content").append("\
                    <div id='post' class='photo'>\
                    <img src='"+blogData[index+2]+"' width='400px'/>\
                    </div>"
                );
            } else if(postType === 1){
                $("#content").append("\
                    <div id='post' class='video'>\
                    "+blogData[index+2]+"<br>\
                    "+blogData[index+3]+"\
                    </div>"
                );
                console.log("Video");
            } else if(postType === 2){
                $("#content").append("\
                    <div id='post' class='link'>\ 
                    <a href='"+blogData[index+2]+"' target='_blank'>"+blogData[index+3]+"</a>\
                    </div>\
                ");
                console.log("Link!");
            } else if(postType === 3){
                var title = blogData[index+3];
                var textContent = blogData[index+2];
                $("#content").append("\
                    <div id='post' class='text'>\
                    <h2>"+title+"</h2>\
                    "+textContent+"\
                    </div>\
                ");
                console.log("Text Content!");
            } else if(postType === 4){
                $("#content").append("\
                    <div id='post' class='tweet'>\
                    "+blogData[index+2]+"\
                    </div>\
                ");
                console.log("Tweet Content!");
            } else {
                console.warn("ERROR OCCURRED!");
            }
        }
    }
}​

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Are you looking for a demonstration of "Creative Loading Effects" that triggers when the page is loaded?

I came across this demo for a preloader on my website called Creative Loading Effects, specifically the "3D Bar Bottom" effect, which I find very exciting. However, I noticed that it only loads when we press the button, and not automatically when the page ...

Tips for showing placeholder text on Safari

I'm having an issue with the placeholder attribute in Safari. It seems to be working fine in all other browsers, but not in Safari. <textarea class="concerncommentArea" placeholder="Place your comment here"></textarea> Does anyone know h ...

Is it possible to customize the color of the placeholder and clear-icon in the ion-search bar without affecting

I am working with two ion-search bars and I need to customize the placeholder and clear icon color for just one of them. <ion-searchbar class="search-bar" placeholder="search"></ion-searchbar> My goal is to target a specific i ...

IE8 not displaying background-image in Zen Subtheme of Drupal 7

I've been struggling to get my website to display properly across all browsers. Everything looks great except for IE8 and below. I'm not sure if it's a problem with Drupal, Zen, IE, or CSS (although the CSS code seems correct). Here is the C ...

A JQuery function linked to the click event of the body element triggers another click event right away

$().ready(function(){ $("#move-to").click(function(){ $("body").bind("click",function(){ alert("foo"); }); }); }); Why do I receive an alert message of "foo" immediately after clicking on "move-to"? When I bind the " ...

How to style text alignment and create a toggle button using HTML and CSS

My attempt at creating a custom toggle button using an HTML input checkbox and custom CSS has resulted in a misalignment between the text and the toggle button itself. Despite my efforts to adjust margins, padding, and heights, I have been unable to resolv ...

What are the various ways to send data using Ajax to multiple elements?

script.js $(document).on("click", ".send", function (event) { $.ajax({ url: "update.php", data: { id: id, }, type: "POST", success: function (da ...

What are the steps for adding JQuery UI to a Blazor WebAssembly project?

I am delving into the world of Blazor and attempting to migrate a project from .NET Core MVC to Blazor WebAssembly. I have successfully configured basic HTML and CSS design, with everything functioning as expected. However, I have encountered an issue on a ...

What methods are available for implementing hover effects within attributes using a JavaScript object?

const customPanelStyle = { 'background-color': 'red', 'border': '1px solid green', ':hover'{ 'background': 'blue' } } class some extends React.Component{ rende ...

In order to check a checkbox, you need to ensure that the scrolling div has been scrolled to the very

I have a situation where I need to ensure that a user has scrolled to the bottom of a disclaimer before they can acknowledge it by checking a checkbox. Our legal department requires this extra step for compliance reasons. Here is an example of how the mark ...

Creating dynamic styles with Material-UI's useStyles

Attempting to implement the same logic using material-ui's useStyle feature <div className={'container ' + (state.unlocked ? 'containerUnlocked' : '')}> I thought it might look like this: <div className={`${clas ...

Padding in Bootstrap 4 columns in a vertical alignment when breaking the layout

I created a customized form-group to accommodate both large and small screens. The structure looks like this: <div class="form-group row"> @Html.LabelFor(model => model.ValidFrom, "Valid from", htmlAttributes: new { @class = "col-lg-3 ...

Retrieve information from specific dates by using a datepicker tool

Hey there, I'm trying to implement a datepicker calendar that allows me to select two dates and then click a button to display all the data between those dates. Here is my code snippet... <?php include_once 'header.php'; $con = mysqli_ ...

Help! My express.js query is not functioning properly

I am facing an issue with a query in express.js. Citta_p and Citta_a are two arrays, and I need my query to return all the IDs for cities. However, it seems that only the last value is being returned, as if my cycle starts from var i = 1 and skips the valu ...

Leveraging the jQuery live() function to optimize heavy usage of Ajax on a website

Trying to ensure that all scripts are properly executed as content is loaded and removed from the page using jQuery load has been a challenge. The most effective approach so far has been the live function, but I have encountered difficulties in getting it ...

eliminate the script and HTML comment from a designated division

Here is the default code that I need to modify using JavaScript to remove scripts, comments, and some text specifically from this div: I came across this script that removes all scripts, but I only want to remove specific ones from this div: $('scri ...

Bootstrap 5 introduces a new feature where col-sm-6 will take precedence over col-md

When using Bootstrap 5, I encountered an issue where the columns were not sizing evenly in a row. Specifically, on small screens, I wanted them to be exactly size 6. In this case, the columns should have been size 3 for screens larger than md, but they end ...

jQuery Drag Drop Sorting Feature Fails to Work when Moving Items from List to Table Cell

I need assistance with creating a sortable list that can have its items dragged into a table cell, where the items can then be sorted within that cell. The process involves: Dragging a list item into the table cell. Sorting the list item in the secon ...

Create a new class in the body tag using Javascript

If the operating system is MAC, I set a variable and then based on a condition, I want to add a new class in the body tag. Check out my code snippet: <script type="text/javascript" language="javascript"> var mac = 0; if(navigator.userAgent.index ...

How can we reduce the use of !important in SCSS when working with React and Material UI?

In my current project, I am developing a Select component in React with Material UI. The CSS styling for the component is managed through an external SCSS sheet imported into the script file. While working on restyling the component, I found it challengin ...