Make HTML Table height equal to the middle TD elements height - javascript

I have a HTML table with 1 row. In that row there are 3 cells(td elements). The centre cell contains p elements & all the main content of the page. The left & right td elements contain an img element; they are images of the left & right sides blue column.
My Problem: I am trying to make the height of the table be equal to the height of the centre td element only. And the left & right images will scale up & down according to the dimensions(height) of the centre td element. But right now, the table is always 1200px in height & thats because the left & right images are 1200px in height.
I hope this makes sense & that you understand what I am attempting to do :P So I am tryinging to make the table height equal to the height of the centre td cell only.
Is there a way to do this in pure HTML & CSS. If not javascript will do it wont it?
.contentTable { height: inherit; }
.tableTopPanel { height: 6.25%; }
.tableBottomPanel { height: 6.25%; }
.tableLeftPanel { width: 6.25%; padding: 0; margin: 0; }
.tableRightPanel { width: 6.25%; padding: 0; margin: 0; }
.tableCentrePanel { background-color: #FFFFFF; }
.pageContent { border-color: #99CCFF; border-width:thin; border-style:solid; border-right-width:thick;
border-bottom-width:thick; padding-top: 0.5em; border-top: 0; }
<table class="contentTable" id="test">
<tr>
<td class="tableLeftPanel"><img src="../Images/contentLeftBk.png" alt=""/></td>
<td class="tableCentrePanel">
<img class="pageHeading" src="Images/coursesHeading2.png" width="100%" alt=""/>
<div class="pageContent" id="coursesContent">
<p>Kazcare cooperates with WEA Illawarra to offer a range of educational courses.</p>
<p>Some of the courses held at Kazcare Education Facilities include: </p>
<ul class="leftCol">
<li>Front Line Management Courses</li>
<li>Cert 4 Training & Assessment</li>
<li>Environment Courses</li>
<li>Music Appreciation</li>
<li>Craft Classes</li>
<li>Candle Making</li>
</ul>
<ul class="rightCol">
<li>Art Classes</li>
<li>Drawing Classes</li>
<li>Yoga</li>
<li>Dancing</li>
<li>Exercise Classes</li>
<li>Art History Classes</li>
</ul>
<br/>
<p class="a">
To view the full range of WEA Illawarra courses held at KazCare please visit WEA Illawarra Courses.
</p>
</div>
</td>
<td class="tableRightPanel"><img src="../Images/contentRightBk.png" alt=""/></td>
</tr>
</table>

If I were implementing a layout like this, I would likely rely on pure CSS instead of using a table. There are numerous examples of three column layouts online, here's one example:
http://www.manisheriar.com/holygrail/index.htm
If you want to use the table, I suppose it depends on what the contents of your images look like - should they be vertically tiled if the page gets too long? Does it need to be a certain width? There are a few options here, but having an idea of what you're trying to build would help. Here are a few options:
Use the background-image property of CSS - http://www.w3schools.com/cssref/pr_background-image.asp
Set a fixed width on the outer TD elements, and set overflow to hidden: http://www.w3schools.com/cssref/pr_pos_overflow.asp
Hope this helps, happy coding!

Related

In CSS How to layout a row of pictures with various aspect ratio so that they take up all the available space in the row

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>

How to set all DIVs to same height to all DIVs in same table row?

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.

<ul> tag image list exceeds borders when float right

I am trying to add some animations on image list using this javascript:
<script>
$(function () {
$('#rotate1').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 4000,
type: 'sequence',
containerheight: 'auto'
});
});
</script>
Here is my html code where I'm using <ul> tag image list to for the animation:
<div style="text-align:right; vertical-align: top; float: right; margin-top: 40px; margin-left: 20px; margin-right: 20px">
<ul id="rotate1" style="list-style: none; width: 100%">
<li><img src="~/Images/logo11w.png" alt="1" style="border:8px solid #d6d6d6;">first image text</li>
<li><img src="~/Images/movies1.png" alt="1" style="border:8px solid #d6d6d6;">first image text</li>
</ul>
</div>
When I set the id id="rotate1" on the <ul> the image list goes out of the border of my page since while float is right. When I don't set id="rotate1" it stays in the border of my page even when float right is set.
If there's only one image in <ul> tag then image stays in borers.
If float right is removed from styles, image stays in borders.
image below is how I want it to be
and this is how it is using id="rotate1"
edit: created a fiddle:
http://jsfiddle.net/naveedshr/7t7csaz0/
Observe the problem with your text. It is not adjusting with your image. The image is set float and the text goes at the back. The image will come in front of text. So, use div for the text and try to set the text also to float - left, right wherever you want.
And for the image, I would recommend using position: absolute instead of float and then specify left and right.
<div style="text-align:right; vertical-align: top; position:absolute; left:100; right: 100">
<!--All the other code here-->
</div>
I hope it works perfectly!

overflow div area with many unordered list items

I have a div that contains a ul with a lot of li's. The div's height is smaller than the height the li's cover so I have overflow auto on the css for div.
sample html
<div class="points-area">
<ul class="points-list">
<li class="point selected" id="startPoint">Start</li>
<li class="point" id="endPoint">End</li>
<li class="point" id="N">Nasion</li>
<li class="point" id="S">Stella center</li>
<li class="point" id="P">Porion</li>
<li class="point" id="ar">Artikulare</li>
<li class="point" id="T1">T1</li>
<li class="point" id="Me">Me</li>
<li class="point" id="Gn">Gnathion</li>
<li class="point" id="T2/MT1">T2/MT1</li>
</ul>
</div>
css
.points-list{
list-style: none;
padding: 0;
margin-top: 0;
}
li.point{
border-bottom: 1px solid black;
padding: 0.1em;
}
.points-area{
overflow: auto;
height: 20em;
border: 1px solid black;
}
li.point.selected,
li.point:hover{
background-color: blue;
}
I have some javascript that when something user adds a circle on a kineticjs stage the next li gets selected (toggled selected class).
if (! $("li.point.selected").is(":last-child")){
prevLi = $("li.point.selected");
prevLi.next().toggleClass('selected');
prevLi.toggleClass('selected');
toBeAdded = prevLi.next();
}
so in my javascript code after a circle is added it toggles the 'selected' class name on the next li.
My problem is that because points are more than div's hieght can handle, the scrollbar doesnt move when I move down the li's. So e.g
scroll area reaches as far as li with text value porion. All li's bellow that are not shown cause of scrollbar. I need when changing from Porion Artikulare (toggling selected class) the overflow to scroll down a bit so that the li can appear on the div area. How can this be achieved?
It is very simple. all you need to know is 'you div height', 'li height', scrolltop and scrollto functions in JS / JQ.
calculate the scrollTop using number of li's u need to scroll, and use scrollTo inorder to scroll to particular position on scroll bar!!
if you have your codes in plnkr / JSFiddle etc.. please share it, i can help you with it
I think I got it! This is the updated fiddle
I added this piece of code
var divHeight, liHeight, lisPerScrollPage;
divHeight = $(".points-area").height(); //caluclate divs height
liHeight = $("li.point").outerHeight(true);// calculate li's height with padding margin etc
lisPerScrollPage = parseInt(divHeight / liHeight); //calculate how many li's fits a scroll page
Then I just checked to see if the li i am selecting is inside the scroll area and if its not move the scroll area as much ase needed. If the scroll area is allready lower and it can be shown don't do nothing (in case user manually used the scrollbar)
index = $("li.point").index(toBeAdded) + 1;
if ($(".points-area").scrollTop() < liHeight *(index - lisPerScrollPage))
{
$(".points-area").scrollTop(liHeight *(index - lisPerScrollPage));
}
I think it works as I want to.

Sizing an <ul> in a table cell

I'm building an HTML view consisting of a <table>, with each cell containing only a single <ul> element, with a variable number of <li>. For readability reasons, my rows have a min-width: 100px;, but expand based on the contents of the <ul>. But in the other cells (which a lower number of <li>). I want my <ul> to use 100% of the cell's height. At the moment, they keep the 100px height and are verticaly centered.
My view can be summed up to that :
<table>
<tr>
<td>
<ul>...</ul>
</td>
<td>
<ul>...</ul>
</td>
<td>
<ul>...</ul>
</td>
</tr>
<tr>
<td>
<ul>...</ul>
</td>
<td>
<ul>...</ul>
</td>
<td>
<ul>...</ul>
</td>
</tr>
</table>
My reason for this, is that each <li> can be dragged & dropped between every <ul>, but the fact they are not resizing make dropping on an empty list kind of hazardous, because you don't "see" them, and have to guess where they are. It would be a lot easier if they were using the full cell dimensions.
I have made a lot of tries using developer tools, but could not find the right combination of CSS and Javascript.
Technicals prerequisites :
Javascript DOM manipulation is OK, I already do it to resize my table. I use ExtJS, but I'm OK with porting jQuery or pure JS code.
Compatibility with IE8 is a must (75% of final users are on IE. Gotta love the corporate world...)
Thanks for any advice !
EDIT : Here's a Fiddle that represents my code as closely as possible (NDA prevents me from sharing the original code)
For height: 100% to work as expected the container must have its height set. I have a solution below that uses JavaScript to set the height of all the ul's, it can be used as a function that runs every time it changes if needed:
function fixDimensions() {
var table = document.getElementById('table');
var trs = table.getElementsByTagName('tr');
for(var i = 0; i < trs.length; i++){
var tds = trs[i].getElementsByTagName('td');
for(var g = 0; g < tds.length; g++){
var ul = tds[g].getElementsByTagName('ul')[0];
ul.style.height = (tds[g].clientHeight - 12) + 'px';
}
}
}
The - 12 on the height is for the padding and border. JSFiddle.
You could use td themselves to draw the borders : http://jsfiddle.net/P5h8d/2/
table {
width: 100%;
background:black;
border-spacing:1px;
}
tr {
min-height: 50px;
width: 100%;
}
tbody th, tbody td {
border: 3px dotted red;
}
th, td {
width: 20%;
background:white;
}
You might not need a table if:
you use display:table instead <table> to turn <ul> visually into a cell.
DEMO
<section>
<div>
<ul>
<li> itelm</li>...
</ul>
<ul>
<li> itelm</li>...
</ul>
<ul>
<li> itelm</li>...
</ul>
</div>
<div>
<ul>
<li> itelm</li>...
</ul>
<ul>
<li> itelm</li>...
</ul>
<ul>
<li> itelm</li>...
</ul>
</div>
</section>
CSS
section {
display:table;
border-spacing:5px;
}
section > div {
display:table-row;
}
section>div>ul {
display:table-cell;
background:red;
min-width:100px;
}
you use display:flex;
DEMO
basic CSS used :
tr {
display:flex;/* reset display:defaut*/
}
td {background:gray;
display:flex;/* here again display reset */
flex-direction:column;/* make sure we draw content from top to bottom */
margin:2px;
}
ul {
padding:0;
margin:5px;;
min-width:100px;
background:red;
flex:1;/* fills or shares whole height of its flex box*/
}
Not to pollute my first answer, added here the drag and drop js
No matter the height of the ul , li drops in !
here is a CSS way to extend area around an element to increase area where it can catch mouse events.
IE8 understands :before/:after , so we use them. and set them in absolute position on top and bottom of your ul.
DEMO
the CSS used:
td {overflow:hidden;/*keep ul:pseudos inside */}
ul {
position:relative;
}
ul:before,
ul:after {
content:'';
position:absolute;
height:200px;/* whatever you need or think it is safe */
left:0;
width:100%;
}
ul:before {
bottom:100%;
}
ul:after {
top:100%;
}
added to the demo basic HTML5 drag and drop (attributes and js) since it was missing from your fiddle.
function allowDrop(ev){ev.preventDefault();}
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}
function drop(ev){ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));}

Categories