We Keep Coding

Display JSON Objects vertically on a web page using table/flexboxes/divs and javascript?

I have a JSON with multiple products. All these products are defined by data. I would like to loop through this JSON and place these products side by side on a web page to compare them together. I think of a structure first organized in columns and then rows :
So far I can do this easily with HTML divs and flexboxes. Something like :
<div style="display:flex">
<div id="Sidebar">
<div class="Data_1">...</div>
<div class="Data_2">...</div>
<div class="Data_3">...</div>
<div class="Data_4">...</div>
...
</div>
<div id="Product_A">
<div class="Data_1">...</div>
<div class="Data_2">...</div>
<div class="Data_3">...</div>
<div class="Data_4">...</div>
...
</div>
<div id="Product_B">
<div class="Data_1">...</div>
<div class="Data_2">...</div>
<div class="Data_3">...</div>
<div class="Data_4">...</div>
...
</div>
<div id="Product_C">
<div class="Data_1">...</div>
<div class="Data_2">...</div>
<div class="Data_3">...</div>
<div class="Data_4">...</div>
...
</div>
</div>
But, if one of the product features contains a long string, I would like the height of all adjacent cells of the other products and the sidebar to fit also in height.
I know I can achieve a such structure with an HTML table, but it's not convenient to dynamically add/remove products or make them draggable as tables are first organized in rows. I would like to be able to add products, remove products, drag them, filter them, sort them... I think that a table structure is not suitable.
My questions :
If using tables, is there a way to first organize a table in columns then rows?
If using divs or flexboxes, how can I align all the product lines in height?
Any other good idea to structure such content or use javascript to achieve this easily?

You can achieve this with using max-height and iterate products in div or ul>li.
Show code to get more help.

Probably put a min-height on the product container and then iterate through your json with something like.
products.map(product =>
<div>
<span> product.name </span>
</div>
)
The product container div should adapt its own contents if the json data is longer than what you are waiting.

Reorder the contents of div and its elements

I am looking to reorder the contents of the div in a particular order. The contents inside of the div comes dynamically from CMS content. I have 2 paragraph elements that come from CMS, and one image inside of a div. Now my requirement is I want to show them in a particular order. I don't want to use flex display and give an order. Is there any other way I can achieve this?
Since it is a dynamic content, I am posting a sample markup of how it is going to look.
Sample Code:
These 2 div and its contents below are coming from CMS.
<div class="order-class">
<div>
<p> Some sample content </p>
</div>
<div>
<p> Some other sample content </p>
</div>
</div>
Here in my JSP I have another div with an image in it. Sample below
Sample Code:
<div class="koh-release-content-section">
<hst:html hippohtml="${pressRelease.content}" /> //This is the sample content mentioned above
<div class="koh-press-release-detail-image order-class">
<tag:imagePressRealeasetag image="${pressRelease.image}"/>
</div>
</div>
I am not able to figure out how to reorder these elements. Any help is appreciated.

Angular switch Outer Div based on boolean

I am using Angular 1.4.7 and need to do the following
<div ng-if="varIsTrue">
<div ng-if="!(varIsTrue)" my-custom-directive>
A lot of content
</div>
So basically, if the div is set only the proper div shows up. I tried do a few variations of this with ng-if and ng-show but I believe because how the browser renders the dom it is messing it up with the multiple divs, but that is the concept I am going for. Does anyone know how I can accomplish this?

You cannot do this you should have 2 closing tags
<div ng-if="varIsTrue">
</div>
<div ng-if="!(varIsTrue)" my-custom-directive>
A lot of content
</div>
or you will have to switch in my-custom-directive

HTML Paginated Two-Column layout

I have a two-column page (<p> tags after the first half are moved to column 2 with javascript).
My problem is that I want to break it up into "pages" like you'd see if you were reading a PDF.
Is there a neat way to do this? Or do I need to check if each page is overflowing programmatically as I fill them? Would that even work?

A possible way to do it is to make all different div's with all the copy in it and then with scrollTop go to the according page/collumn.
Something like:
<div id="page1" class="page">
<div id="p1_column_1" class="column">Here all the copy</div>
<div id="p1_column_2" class="column">Here all the copy</div>
</div>
<div id="page2" class="page">
<div id="p2_column_1" class="column">Here all the copy</div>
<div id="p2_column_2" class="column">Here all the copy</div>
</div>
Then css give it a height a width and overflow hidden and then with javascript/jquery something like:
var curr_col = 0;
var col_height = $('.column').height();
$('.column').each(function() {
$(this).scrollTop(col_height*curr_col);
curr_col++;
})
Edit
Check this fiddle to see the result: http://jsfiddle.net/taPjR/3/ .
In the example I copied the text with jQuery from the first div.
And I know it's very a dirty way, but I'm not sure if there is another keeping different fonts/font sizes and the images in the copy in mind.
Maybe a pdf generator like LaTex (http://www.latex-project.org/) could also be interesting?
Hope I could help.

How a Javascript Accordion Works?

I would like to create my own accordion component without using any AJAX toolkits, mostly for learning purposes. I am not sure quite where to start with this one. I'm assuming I would begin by creating div's for each section in the accordion. Perhaps each div would contain a header, which would be the actual button selected to move the accordion to that section. I am not sure the correct approach to take once an accordion's section button is selected though. Would I use the z-order, so that each section is of a higher z-order? Any help is appreciated.
Thanks

I would highly recommend picking up a book such as John Resig's Pro JavaScript techniques that will give you some ideas and initial thoughts about how to approach bulding your own client-side solutions.
Essentially, you would have an element to act as a header, for example <h1> or <div> under which you would have a <div> with an initial style of display: none;. Set up an event handler on the click event of the header to change the style of the div below to display: block and ensuring that any other content <div>s are hidden (do this by using a CSS class on each content <div> for example).
I'll leave the smooth animation to you as an exercise for how it might be accomplished. As a hint, I would recommend looking at how a JavaScript library like jQuery handles animation, by checking out the source.

The best way to order it would be like this
<div id="accordion">
<h3 class="accordion title">Title</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 2</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 3</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 4</h3>
<div class="accordion section">
Section Content
</div>
</div>
You would want to avoid z-order entirely because it is a compatibility mess. Instead you would have the accordion titles be what you would click to open the accordion. You would want to set all of the accordion section <div>'s to visibility:hidden; by default, and then, when one of them is clicked, change it's visibility, and hide all the others. If you want it to work with any amount of accordion sections, you would have it count each <h3 class="accordion title"> and each <div class="accordion section">, and pair those up into an array. When a title is clicked, show it's corresponding div. Alternatively you could give each one a separate ID, but the first way would be much more useful.
Actually, it might be display:none; instead of visibility:hidden;, I would try both.
In addition it's worth mentioning that the animation is usually handled by changing things like the size of the div, so if you were hiding a section, you would make the height smaller and smaller until it reaches 0 and is hidden.

See this question, you will notice my answer contains a demo with the basic workings that should get you started. It was only asked a few minutes ago!
It uses jQuery.