What is the best way to assign a title to every div element and showcase 5 div items in a single line?

I am using a "for loop" to call getjson multiple times and receive a response to display items on sale inside a div. Currently, my code displays the item name to the right of each frame, but I want the item name to appear below the iframe, similar to the code block below:

Sample div item that I want to output instead of my current code output, but I'm not sure how::

<li>
       <iframe src='http://bsite.com/itemshow.php?pen' height=200 width=200 style='border: none;'></iframe><br>
        <div class="details">
        <div class="title">
          <a href="/pen/">pen</a>
        </div>
        </div>
    </li>   

Could you please help me with adding the item name below each div item (similar to the code block above) and restricting the number of divs to 5 per row?

Part of the code that currently displays the div:

var siteContents2 = "<iframe src='http://bsite.com/itemshow.php?"+itemName' height=200 width=200 style='border: none;'></iframe>"+itemName;

document.getElementById("myDiv").innerHTML += siteContents2;

Full code:

function GetJSONResult(itemName)
{
$.getJSON('http://anyorigin.com/get?url=http://asite.com/checkit.php'+ itemName + '/&callback=?', function(data){

       var siteContents = data.contents;      
  //writes to textarea  
  document.myform.outputtext.value = siteContents ;  

var n=siteContents.search("This item is not on sale");

if(n===-1)
    {
     //alert("This item is on sale. n:"+n);

var siteContents2 = "<iframe src='http://bsite.com/itemshow.php?"+itemName' height=200 width=200 style='border: none;'></iframe>"+itemName;

document.getElementById("myDiv").innerHTML += siteContents2;
};
});  

};

items=["pen","book","paper","ink","tshirt","map"];

for (var i=0;i<items.length;i++)
{
//document.write(i+")"+items[i] + "<br>");

GetJSONResult(items[i]);
}


</script>   
</head>

<body>

  <div id="myDiv"></div>

Answer №1

If you want to replace your iframe with more complex html, you may need to expand your string.

var siteContents2 = "<li>"
   +"<iframe src='http://bsite.com/itemshow.php?"+itemName+"' height=200 width=200 style='border: none;'></iframe><br>"
   +"<div class='details'>"
   +"<div class='title'>"
   +"<a href='/"+itemName+"/'>"+itemName+"</a>"
   +"</div></div></li>";

You can then append these contents to myDiv in a similar way, using jQuery if you prefer.

$("#myDiv").append(siteContents2);

It's worth noting that your myDiv should probably be a UL or OL list, not a DIV if you're appending list items to it.

To display your li items in rows of 5, you can apply CSS styling such as setting them to float:left and adjusting the width of the parent UL element. See this simple demo http://jsfiddle.net/paulitto/Qnbk4/ for an example.

#myDiv{
    width:500px;
}
#myDiv li{
    float:left;
    width:100px;
}

You may need to customize this to suit your own code.

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

Is there a way to determine the currency symbol based on the information provided by ipinfo?

Currently, I am utilizing JavaScript to obtain the currency symbol based on the information provided by ipinfo. I have successfully retrieved the countries' names and other details using the code below. However, I am now faced with the challenge of ut ...

Difficulty building due to uppercase import in NPM dependency

While working on my Angular project, I encountered a dependency that uses Upper Camel Case import. from "./CSSToMatrix" export { parse, parseMat, toMat, getDistElementMatrix, caculateMatrixDist, getElementMatrix, createMatrix, } from "./C ...

Retrieve the properties of an object

I have a JavaScript program where I retrieve values from a JSON file and store them in an array. However, when I attempt to access the elements of this array, it returns nothing. Below is the function that pushes temperatures: temperatures = [] get_info ...

Using Jquery to load a css background image with a loader

I am seeking suggestions on how to display a loader between button clicks while waiting for a background image to fully load. Thank you <html > <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type= ...

Can PushState be used to Ajaxify CSS files?

Currently, I am in the process of developing a basic website and have decided to incorporate the Ajaxify library for seamless page transitions. One challenge I have encountered involves the combination of global CSS files (applied throughout the entire sit ...

Troubleshooting: Dealing with ng-click and invalid functions

Prior to resolving the issue, I encountered a component (within an HTML template) containing a ng-click that was invoking a nonexistent function. Is there a method to enable a strict mode (similar to 'use strict' in JS) or something equivalent t ...

Comparing prevProps and this.props in React Native Redux: What is the most effective method?

Does anyone know how to efficiently handle triggering a function in my React Native app only when a specific prop has changed? This is the current implementation I have: componentDidUpdate(prevProps) { if (prevProps.a !== this.props.a) { <trigger ...

Ways to update div content following a successful AJAX call

I have a form that utilizes AJAX requests, and when the input fields are not filled correctly and the submit button is clicked, error messages are displayed without refreshing the page. While this functionality works, a problem arises when the form is subm ...

Modify the value of a CSS property through JavaScript

Hey there, I'm wondering how to change a CSS value of the document itself, rather than targeting a specific element. I've already looked into solutions like Change :hover CSS properties with JavaScript, but they all involve adding CSS rules. I a ...

What is the best way to showcase a single <ul> list in an infinite number of columns?

Utilizing Django on the backend, I aim to showcase the list below in an unlimited number of columns with overflow-x: auto. <ul class="list"> {% for i in skills %} <li>{{i}}</li> {% endfor %} </ul> Example Result: 1 7 ...

Sync JSON object modifications with the DOM using jQuery (or potentially other libraries)

I am working on developing a web application that would be able to update the HTML elements based on changes in a JSON object. For instance, I have an unordered list with data attributes: <ul data-id="elements"> <li data-id="01">Element 01< ...

Unexpected behavior encountered when using TypeScript type declarations

I am currently working on a Gatsby side project incorporating Typescript for the first time. I initially expected Typescript to behave similarly to PHP type declarations, but I have encountered some unforeseen issues. Despite feeling confident in my Typesc ...

1. "Ensuring the URL of a New Tab Using WDIO"2

During my testing scenario: Navigate to link1 Click a button Open a new tab with link2 How should I verify the link2? I attempted using assert(browser).toHaveUrlContaining(''), but it only verified the link1, causing my test to fail. ...

Sending data with a post request using Ajax in ASP.NET MVC 3

Hey everyone, I'm working on an ajax login call. I'm serializing the form data and sending it to the server to get a redirect URL link. However, I'm running into an issue where my URL after the post ends up looking like http://localhost:508 ...

Conceal two DIV elements if one of them is empty

My slideshow has thumbnails connected to each slide. There are 10 DIVs representing the slides like this... <div class="SSSlide clip_frame grpelem slide" id="u751"><!-- image --> <?php while ($row = mysql_fetch_array($query ...

My code gets disrupted when I use classes instead of IDs

My HTML code works fine when I use IDs and select them in my javascript with getElementByID. However, if I switch to using classes instead of IDs, my code stops working. I want to switch to using classes because I am collaborating on a project with someon ...

Is compiling inline sass possible with npm?

Looking for a simple method to achieve this task? I've experimented with sass, node-sass, and tinysass without success. My goal is to compile inline sass in JavaScript, much like the code snippet below: import sassPkg from 'sass-pkg' const ...

What is the proper method for attempting to implement Response.Redirect?

Is there a better way to handle redirect failures than using a try-catch block? Typically, a redirect always throws an exception which can be caught as a ThreadAbortException. However, is this the most effective approach? EDIT: My goal is to redirect to ...

Top method for organizing an array based on an object's property and displaying the outcome

I encountered a problem for which I couldn't find an immediate solution. I have an array of objects representing products, with each product having a category property. My goal is to group these products by their categories. After some trial and error ...

Incorporate MUX Player (Video) into Angular versions 14 or 15

Mux offers a video API service with its own player: MUX Player I am interested in integrating this npm package specifically into a component in Angular 14/15. The JavaScript should only be loaded when this particular component is rendered. Integration Th ...