Using JavaScript, the list of items (images) will be displayed and placed into HTML panels

Below is the layout structure on my website:

<div class="panel-heading"><h3 class="panel-title">Suggestions</h3></div>
<div class="panel-body">
    <div class="col-md-7">
        <h3><span class="label label-default">Provide Suggestions for users</span></h3>
        Need to insert information here
    </div>
</div>

</div>

I've implemented Bootstrap based on advice I found on Stack Overflow. I will be sending a list of images from the back-end, and I need to render these images inside the "panel_body" as depicted in the wireframe below.

What would be the most effective way to achieve this? Although I lack knowledge in JavaScript, I believe it might be necessary for this task. If someone can guide me towards a similar example, I could try to figure it out on my own. I think JavaScript could handle this, but I'm uncertain about what specifically to search for.

javascriptjquerycsstwitter-bootstrap

Answer №1

Have you checked how your data is being returned? It's important to know if it's a JSON object or an array before moving forward with any solutions.

To populate multiple rows within the panel_body, you can utilize a for loop along with a function to create each row dynamically.

var createRow = function(i) {
    //create panelCol
    var panelCol = document.createElement("div");
    panelCol.className = 'col-md-' + i ;
    panelCol.innerHTML = '<h3><span class="label label-default">Provide Suggestions for users</span></h3>Need to put information';

    //append to panelBody
    var panelBody = document.querySelector('.panel-body');
    panelBody.innerHTML += panelCol.outerHTML;
}

For reference, I created a sample example here: http://jsfiddle.net/3rqC7/5/

Answer №2

When it comes to organizing the layout, following these steps should lead you in the right direction. If the images you want to showcase are static, utilize basic img tags and indicate the appropriate server path for each image.

<div class="panel-heading"><h3 class="panel-title">Suggestions</h3></div>
<div class="panel-body">
    <h3><span class="label label-default">Offer Suggestions for users</span></h3>
    <div class="row">
        <div class="col-md-4">
            <img src="someImage.jpg"/>
        </div>
        <div class="col-md-4">
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac quam consequat, tempus nisi nec, finibus erat. Curabitur auctor varius libero at dapibus. Nulla facilisi. Etiam convallis, nulla id malesuada accumsan, velit purus vehicula dui. Fusce scelerisque </p>
            <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
        </div>
        <div class="col-md-4">
            <p>Some text here</p>
        </div>
    </div>
</div>

If your images are dynamic, then familiarize yourself with Javascript for implementation.

Answer №3

Utilizing the open-source, free version of Kendo UI, I integrated a ListView control into my project. Within the ListView template, I defined the rows and columns to meet my needs. This control can easily bind to a JS array or JSON data and has the capability to communicate with the server remotely. It seamlessly filled the client-side gap while maintaining compatibility with the bootstrap framework.

If you're interested in learning more, feel free to visit this blog post for additional information. It's a straightforward read.

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

What is causing justifyContent: space-between not to function properly?

I want to display Text1Text2Text3Text4Text5Text6Text7 at the top with text alignment using justifyContent: 'space-between'. However, when I tried to do so, all texts ended up at the top. <div style={{display: 'flex-item', flex: 1, ...

htmlcssflexbox

Is it possible to close a JavaScript IFRAME using code?

Is there a way to close iframes using self.close()? It seems to not work since they are not considered popups, but is there another solution that can be used? ...

jquery

Adjust the text color of ASP.Net Label based on the presence of a hyphen

I need help changing the text and font color of my ASP.net label based on its content. The label displays a percentage change, and I want negative numbers to be shown in green and positive numbers in red. However, when I try to implement this, I keep enc ...

javascriptasp.net

axios does not distinguish between response and error in its return value

I have created a React component that contains a function called onFormSubmit. This function calls another function from a separate component, which in turn makes a POST request using axios. I want the ability to return a response if the POST request is su ...

javascriptreactjspromiseaxios

Utilizing a lone div for clearing a float

For a long time, my go-to method for clearing floats has been using <div style="clear:both;"></div>. However, I recently began wondering if in HTML as XML, could I simply use <div style="clear:both;" /> since they essentially serve the sa ...

htmlcssxml

Angular 1: Handling Multiple Conditions and Exclusions Based on Other Conditions

I have currently added an additional span to accommodate one condition. <div ng-repeat="(key, resultLinks) in resultGroup.resultLinks"> <div ng-if="key < 4 || viewMore" ng-repeat="(subKey, linksWrap) in resultLinks.linksWrap"> & ...

javascriptangularjs

Exploring the compatibility of Next.js with jest for utilizing third-party ESM npm packages

Caught between the proverbial rock and a hard place. My app was built using: t3-stack: v6.2.1 - T3 stack Next.js: v12.3.1 jest: v29.3.1 Followed Next.js documentation for setting up jest with Rust Compiler at https://nextjs.org/docs/testing#setting-up-j ...

javascripttypescriptnext.jsjestjs

Issue with ExpressJS Twig module: inability to execute async functions even after adjusting settings as needed

Currently, I am facing an issue while trying to load an array from mongoose into a twig rendered list. An error message keeps popping up: TwigException: You are using Twig.js in sync mode in combination with async extensions. I have made sure to care ...

javascriptexpresstwig.js

Solving the issue of .css being blocked due to MIME type while building tailwind is a common problem faced by

https://i.stack.imgur.com/nrDgJ.png While working on my tailwind CSS project, I ran npm run build. However, upon opening the built index.html file, I noticed that the CSS file was not loading properly. How can I resolve this issue? I am unsure of what st ...

cssnpmtailwind-cssweb-development-servernpm-publish

JavaScript Polling Based on Time

I am currently working on developing an alarm clock feature using the Date() object. My aim is to have a function trigger when the time from the date object matches the time set by the user. Users set their alarms by selecting a specific time, but I' ...

javascripthtmltimer

Unlock the Potential of Bootstrap5 Carousel: Mastering Icon Movement

I'm utilizing the carousel from Bootstrap 5, and here is the image. https://i.sstatic.net/dpmjf.jpg The previous and next icons are overlapping with the text. I would like to reposition them, if possible, just above the upvote/downvote buttons. Howe ...

cssbootstrap-5

retrieving the file directory from a folder with the help of ajax

I am having trouble retrieving a list of files from a specific URL that lists files inside a folder: https://i.sstatic.net/VH22b.png In order to obtain this list of files using JavaScript, I have written the following code: $.ajax({ url: &ap ...

javascriptjqueryajax

Tips for aligning two elements in a row using Bootstrap 4 Flex

I am facing a challenge with positioning an H2 element and a Dropdown button on the same line using bootstrap 4 flex. Here is what I have: https://i.sstatic.net/kV45k.png This is what I am trying to achieve: https://i.sstatic.net/Owt5j.png Below is my ...

cssbootstrap-4

ways to disrupt a timeout

I am attempting to incorporate a functionality similar to this example: https://www.w3schools.com/jsref/met_win_cleartimeout.asp On my personal website: If you enter certain characters in the input field, select one of them, and then pause for 5 seconds, ...

javascriptjquery

"Design the website with a WYSIWYG editor while preventing users from disrupting the page's

I am considering using an HTML WYSIWYG editor like CKEditor, but I am concerned about the possibility of users submitting HTML code that could alter the layout of the page when rendered. Here is a comparison between two posts: <p><b>This is m ...

javascriptphpjqueryhtmlckeditor

Displaying text as the Ajax call loads

My knowledge of Javascript/Jquery/Ajax is limited, and I'm struggling to figure out how to show 'Loading...' text while waiting for an ajax call. This is the code I have so far, which seems to be working fine: $.get("sum.php", { userid: "& ...

jqueryajax

A method for determining the quantity of <li> elements within a <ul> container while applying specific conditions

I am currently using document.querySelectorAll('ul > li').length to count the total number of items in my list. However, I am wondering if there is a way to count only those items that meet a specific condition. For example: <ul> < ...

javascripthtmlreactjs

employing async/await in the function of a backend API

I'm facing an issue with the following code snippet: service.js module.exports = { getUser }; async function getUser({ data }) { return new Promise((resolve, reject) => { const id = data["id"]; const doc = await db.colle ...

javascriptnode.jsexpressasync-await

Implementing multiple dropdown menus with Material UI in a navigation bar

I am currently working on designing a navigation bar that consists of multiple material UI dropdown menus. However, I have encountered an issue that has proven to be quite challenging for me to resolve. Whenever I click on a navigation bar item, all the dr ...

javascriptreactjsmaterial-ui

Create your own unique Semantic UI themes using the Semantic UI theme builder, complete with support for Font Awesome classnames and the ability to preview them with the

My admiration for Semantic UI and Semantic UI React knows no bounds. Not only are they phenomenal libraries, but their documentation is truly a work of art. Yet, crafting and keeping up with themes for these components can be quite the challenge. The task ...

javascriptreactjsthemessemantic-uisemantic-ui-react