I have to generate a dynamic table where the user will specify the number of rows and cols and spacing between them and margin. The interface also has a preview pane. The preview will display the user about the currently set options indicating rows cols spacing margin.
I have designed a dynamic table but I am unable to maintain the size of the table as fixed. Since the preview pane is fixed.
How do I maintain a fixed size preview pane where the user can see the upcoming changes before generating table
Say when the user selects rows as 4 and cols as 2 and margin as 0 and spacing as 10 it should display the preview proportionately to the specified size
I have tried with
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
table{width:300px;height:10px;}
td{
width:100px;
height:10px;
overflow:hidden;
word-wrap:break-word;
background-color: #f0f0f0
}
</style>
</head>
<body>
<script>
var rows = 4;
var cols = 5;
var table = $('<table border=1 cellspacing="10" cellpadding="10"><tbody>');
for(var r = 0; r < rows; r++)
{
var tr = $('<tr>');
for (var c = 0; c < cols; c++)
$('<td> </td>').appendTo(tr);
tr.appendTo(table);
}
table.appendTo('body');
</script>
</body>
</html>
Just remove the width property of you td. The table element has it's fixed width, so if you don't specify a width to the td, it will be divided equally between all the cells.
You can set width and height programmatically rather than in style. That would allow you to calculate the required width and height given the user's input.
var table = $(`<table border=1 cellspacing="10" cellpadding="10" style='width: ${width}px; height: ${height}px;'><tbody>`);
You could also just not set width and height of .table and it would just be the size of the contents...
You can do this very simple through Bootstrap. It will handle everything.
You can add a bootstrap styles to your page.
You can add class as
<table class="table">
and you can specify the height and width in % so it will be responsive as per your need.
<table class="table" style="width:90%; height:90%">
Even If you add any number of rows and columns the table will remain same responsive as per your view.
Related
On my html/css/js webpage I have a row of 5 pictures such as this:
They have varying aspect ratios. The html looks like this:
<div id="row1">
<img src='img1.jpg'/>
<img src='img2.jpg'/>
<img src='img3.jpg'/>
<img src='img4.jpg'/>
<img src='img5.jpg'/>
</div>
I would like to ensure that they always take up as much horizontal space in their container (here row1) as they can, under the given conditions:
their height is the same for all photos in the given row
they don't get stretched
they don't get cropped or overlap
In short, their height must be tweaked so that their combined width will fill up their parent container's width.
I was looking into css flexbox and masonry type library, but I didn't manage to find a successful implementation.
I would rather like a pure CSS solution, but a simple javascript would be nice. My current solution involves calculating the row height in js from the pictures' widths, and updating the style for each. (It is not very scalable, nor reliable, and quite jerky as the js updates the row heights. I expect to have thousands of these rows on the page)
We don't have to do the calculation for every image - the system will do that for us in the sense if we set the row with the images at row height (any height will do) we can get the width. This gives us a width/height ratio.
Then knowing the final width we want the row to be we can calculate the final height.
let row = document.querySelector('#row');
function sizeRow() {
row.style.height = '100px'; // any height will do - we just want to get a proportion
row.style.height = 'calc(var(--requiredWidth) * ' + 100 / row.offsetWidth + ')';
row.style.opacity = 1;
}
window.onload = sizeRow;
window.onresize = sizeRow;
* {
margin: 0;
padding: 0;
}
#row {
--requiredWidth: 100vw;
white-space: nowrap;
display: inline-block;
opacity: 0;
/* just so we dont see a flashing while resizing */
font-size: 0;
/* remove white space between images */
}
#row img {
height: 100%;
display: inline-block;
}
<div id="row">
<img src='https://picsum.photos/id/1015/200/300' />
<img src='https://picsum.photos/id/1016/300/300' />
<img src='https://picsum.photos/id/1018/300/200' />
<img src='https://picsum.photos/id/1019/1000/200' />
<img src='https://picsum.photos/id/1021/200/1000' />
</div>
Here's my code:
$('body').append('<section id="test" style="position:fixed;bottom:0;margin:0 auto;text-align: center;width: 100%;"><div style="width:100%;height:250px;background:#f00;margin: 0 auto;">some fixed text</div></section>');
for (var i = 0; i<Math.random()*5000; i++) {
$('#content').append('<li>test node (need to be displayed)</li>');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="content"></ul>
My problem is if there are many contents that makes the screen needs to scroll, the fixed div will block the content. How do I make sure that all the contents are displaying? I can add body{margin-bottom:1000px;} but how can I make that value adjusted according to the real height of its content, rather than a fixed 1000px?
As height of your fixed div is 250px, simply give your body a margin-bottom of any value greater than 250px that is suitable for you. In jQuery, you have to write in this way:
$('body').css('margin-bottom','260px');
So, the complete code goes like this:
$('body').append('<section id="test" style="position:fixed;bottom:0;margin:0 auto;text-align: center;width: 100%;"><div style="width:100%;height:250px;background:#f00;margin: 0 auto;">some fixed text</div></section>');
$('body').css('margin-bottom','260px');
for (var i = 0; i<Math.random()*5000; i++) {
$('#content').append('<li>test node (need to be displayed)</li>');
}
$('#content').append('<li>THIS IS THE LAST NODE</li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="content"></ul>
Here's the jsfiddle: http://jsfiddle.net/3s19Lkry/24/
I have a html table with three columns. Each table cell contain DIVs with different content and one of them contain an image. I have a small JS function that sets the height of the images DIV containers to one of 2 possible heights.
Image natural height is < 60px == container DIV is 60 px high
Image natural height is > 60px = container DIV is 104 px high
Now I need to figure out how to set all three image DIVs to the same height on each table row.
Row with only small images = all three image DIVs should be set to 60px.
Row with one or more large images = all three image DIVs should be set to 104px.
This is my js snippet:
$('div.givarbild img').each( function() {
var container = $(this).closest('div.givarbild');
$("<img>").attr("src", $(this).attr("src")).load(function(){
var picHeight = this.height;
console.log(picHeight);
if(picHeight < 60){
container.height(60);
}else{
container.height(104);
}
});
});
HTML
<tr>
<td>
<div class="givarbild"">
<img width="100" height="50" src="image path">
</div>
</td>
<td>
<div class="givarbild"">
<img width="150" height="50" src="image path">
</div>
</td>
<td>
<div class="givarbild"">
<img width="90" height="90" src="image path">
</div>
</td>
</tr>
My jquery/JS function only sets the current image DIV to 60 or 104 px, so that these container DIVs can have different heights on each row. But as I wrote above, I need to set the same value to all three image containers on each row.
In the HTML example above all DIVs should be 104 px high, since one of the images is over 60px. How can I modify my code snippet to do what I want?
EDITED:
I cannot use 100% height for the DIV with the class .givarbild because I also want the images to be vertically centered in the DIVs on each row. The vertical centering is obtained with this css (in order to use max-height: 100% the container must be set to a px value:
div.givarbild {
height:100px; /*this value is overridden by my JS*/
min-width:190px;
position: relative;
margin:10px 0px;
}
.givarbild img {
max-height: 100%;
width:auto;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
I looked at Flexbox, but it seems a bit over the top for this task? I will investigate further though, thanks for the suggestion.
Going the same way you are already going... in the html you can set the height of each div to be 100%. Better yet, set the class givarbild to have a height property of 100%. That will size them to the size of the cell they are contained in. The cells will autosize to the size of the biggest image, so all of them will be the same height.
To modify the database format SQL uses two functions called PIVOT and UNPIVOT. I was wondering, is there a way of achieving the same thing using a script on the client side?
Let's take this table for example:
Rowa. pro_img#1|${product.name}|${product.price}|${product.description}
Rowb. prod_img#2|${product.name}|${product.price}|${product.description}
Rowc. prod_img#3|${product.name}|${product.price}|${product.description}
Rowd. pro_img#4|${product.name}|${product.price}|${product.description}
As you already know, every html table with dynamic data will print rows. What i'm trying to do is having an html table with dynamic data printing columns so I can display a nice product listing like in this example:
Product_img#1| Product_img#2| Product_img#3|
Product_name| Product_name| Product_name|
Product_price| Product_price| Product_price|
Product_description| Product_description| Product_description|
I'm trying to display 3 objects per row. Is there a way of doing this with a simple javascript?
I'm trying to achieve exactly the same thing as Vans (example here)!
Edited New code
<div id="product_container">
<c:forEach var="product" items="${categoryProducts}" varStatus="iter">
<div id="product_image"><a href="viewProduct?${product.id}">
<img class="img" alt="" src="${initParam.productImagePath}${product.id} (1).jpg" /></a></div>
<div id="product_name">${product.name}</div>
<div id="product_price">${product.price}</div>
<div id="add_toList"><form id="wishlistForm" action="addToWishlist" method="post">
<input name="productId" value="${product.id}" type="hidden">
<input class="submit" value="<fmt:message key='AddToWishlist'/>" type="submit">
</form></div>
<div id="add_toCart"><form id="cartForm" action="addToCart" method="post">
<br>
<br>
<input name="productId" value="${product.id}" type="hidden">
<input class="submit" value="<fmt:message key='AddToCart'/>" type="submit">
</form></div>
</c:forEach>
</div>
jsfiddle DEMO
This function takes an HTML table and returns a table which has the given table's rows and columns swapped.
Example input:
----------------
A1 | A2 | A3
----------------
B1 | B2 | B3
----------------
Output:
---------
A1 | B1
---------
A2 | B2
---------
A3 | B3
---------
Javascript:
function convertTable(tbl) {
var rows = tbl.rows.length;
var cols = tbl.rows[0].cells.length;
var tbl2 = document.createElement('table');
for (var i = 0; i < cols; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < rows; j++) {
var td = document.createElement('td');
var tdih = tbl.rows[j].cells[i].innerHTML;
td.innerHTML = tdih;
tr.appendChild(td);
}
tbl2.appendChild(tr);
}
return tbl2;
}
You could create custom divs for each object:
function generateProductDiv(product) {
return
'<div class="product">' +
'<img src="' + product.image + '">' +
'...' +
'</div>';
}
Create a div for each product put them in a parent divs and style them with css (the CSS property display: table; and table-* might be of interest to you if you want to do it this way, another possibility is to use libraries).
The easier solution is just to put those divs inside the cells of a table although you should only use tables if you really want to display tabular data.
You seem to have JSP code, not Javascript, here is how to generate the forms in JSP (btw. JSP is the same as Java Servlets, just another way of writing it, simply put: JSP = html with Java, Servlet = Java with html). Using forms instead of divs because that seems to be what you want:
<c:forEach var="product" items="${categoryProducts}" varStatus="iter">
<form id="wishlistForm" action="addToWishlist" method="post">
...
<a href="viewProduct?${product.id}">
<img class="img" alt="" src="${initParam.productImagePath}${product.id} (1).jpg" />
</a>
...
</form>
</c:forEach>
The best (easiest, most maintainable, most semantic) way to do this is pure CSS. You shouldn't have to change the markup at all.
And it's actually pretty easy.
You just have to get the browser to stop treating it like table data. The key is the display: CSS property.
display defaults to table-row for <tr> elements and table-cell for <td> elements, which makes sense. You have to "break" that property.
tr, td {
display: block;
}
In other words, you're telling the browser to "display table row and table data elements just like any other block-level element (like a div, for example)".
This gets you almost all the way there. Now you have to get the table "rows" (which are now being laid out like divs) to stack next to each other, instead of on top of each other.
tr {
float: left;
}
Now, you end up with the possibility of the new "rows" not being the same height. If, for example, your product images are not all the same height, or if your descriptions are different lengths, you'd end up with the table being way out of alignment.
So, you need to give your <td>s all the same height.
td{
height: 150px; /*or whatever height you want*/
}
So, the full CSS code looks like this:
tr {
display: block;
float: left;
}
td {
display: block;
height: 150px;
}
Obviously, this is only the most basic code to get your foot in the door. In the real world, you'd give each type of <td> its own height, something like:
td.product-image {
height: 150px;
}
td.product-description {
height: 70px;
}
td.product-price {
height: 40px;
}
Here's a codepen that puts it all together: table data pivoted
Also, here's some more info on the CSS display property if you're interested.
Best of luck. Feel free to ask in comments if you have any further questions.
I have a table where I need fixed td sizes and as such I have the appropriate table-layout: fixed, white-space: nowrap, overflow:hidden, etc etc on the table and td's. It was working great until I had to dynamically resize it by basically adding a row at runtime
Basically I use javascript to add a row
<tr>
<td style="max-width:50px; min-width:50px; width:50px"> </td>
<td style="max-width:50px; min-width:50px; width:50px"> </td>
<td style="max-width:50px; min-width:50px; width:50px"> </td>
</tr>
It didn't work because some of the table td's are overflowing now. Well it turns out the td's even after this row somehow inherit asmax-width: none. When I manually add max-width:50px to an offending overflow td in firebug, the layout gets fixed.
Why is it ignoring the rules I set on the first tr and how can I set all td's to obey?
edit:
here is the fix width code as requested (there are two tables in the tableDiv):
fixWidths : function(tableDiv)
{
var headerTable = tableDiv.find('.headertable');
var widths = [];
headerTable.find("th").each(function(){
widths.push($(this).width());
});
var tr = tableDiv.find('.fixwidth');
for (var i = 0; i < widths.length; ++i)
{
var td = $(document.createElement('th'));
td.css('width', widths[i]);
td.css('min-width', widths[i]);
td.css('max-width', widths[i]);
td.html(' ');
tr.append(td);
}
/* */
}