Develop Reference

Setting TH min and max width extremely slow

Given a fixed-header HTML table, I'm trying to line up the header columns with the body row columns. I'm doing this because the CSS I'm using to make the headers fixed results in the headers being out of alignment with the rest of the body.
The javascript I'm using works, but is extremely slow. Any ideas on how I can speed this up?
Here's the fiddle showing the problem. Right now it's taking about 5+ seconds for a relatively small table.
http://jsfiddle.net/w93NU/
Here is the code I'm using:
function fixedHeader($table) {
//This function compares the header row with the first body row and lines up all of the widths
var firstRowTds = $table.children("tbody:first").children("tr:first").children("td");
var headerRowThs = $table.find("th");
for (var i = 0; i < firstRowTds.length; i++) {
var head = headerRowThs[i];
var cell = firstRowTds[i];
var width = (Math.max($(cell).outerWidth(), $(head).outerWidth())) + "px";
//Here are my problem pieces. Setting these values are what kills the perfomanrce
$(cell).css({
"min-width": width,
"max-width": width
});
$(head).css({
"min-width": width,
"max-width": width
});
}
}

Ok, after much trial and error, if you comment out the last item in the style sheet, then it is fast. I don't know why.
Updated fiddle here
/* fixed width for THs */
/* the tbody needs to be 16px less than the thead, for the scrollbar */
/*#readiness-grid tbody td {
width: 242px;
}*/

// changing:
var firstRowTds = $table.children("tbody:first").children("tr:first").children("td");
var headerRowThs = $table.find("th");
// to:
var firstRowTds = $table.children("tbody:first > tr:first > td");
var headerRowThs = $table.find("thead > th");
scopes the node lookup and cuts the time from ~800ms to ~2ms between the start/end times on your sample table.

Restrict SELECT width to width of parent TH

I generate filter SELECTs and INPUTs to the footer TH of my data table. I want these items widths to match width of parent TH (minus some margin).
My TH elements have classes .datainput or .dataselect to know, whether SELECT or INPUT should be generated.
I've created this script, which is called after AJAX data are loaded and inputs are generated:
function fnFixElementsTH() {
// Fix data inputs
$('.datainput').each(function(i) {
var thWidth = $(this).width();
$(this).children().width(thWidth);
});
// Fix data selects
$('.dataselect').each(function(i) {
var thWidth = $(this).width() - 10;
$(this).children().width(thWidth);
});
}
I use following CSS for TH:
padding: 3px 0px 3px 10px;
font-weight: bold;
font-weight: normal;
And for select:
word-wrap: normal;
margin-right: 10px;
In chromium it is working perfectly:
But in firefox, SELECTs have invalid sizes:
I printed widths of THs and SELECTs in chromium and firefox and here are the results for second column in chromium:
And in firefox:
Could you tell me what I am doing wrong, or suggest a better solution?

Problem is in .width() Jquery API. It has some issue with FF. You can use .css to set the width.
$(".dataselect").each(function(i) {
var thWidth = $(this).width() - 10;
$(this).children().css('width',thWidth);
});
Solution Fiddle: jsfiddle.net/vfNRS/1

I've found a solution, outer width of select has to be set:
// Fix data selects
$('.dataselect').each(function(i) {
var thWidth = $(this).width() - 10;
//$(this).children().width(thWidth); THIS WAS WRONG
$(this).children().outerWidth(thWidth);
});
Solution is here: http://jsfiddle.net/gZEc9/12/

HTML/CSS to make an image container the same size as those next to it

I have a row of images and product descriptions. It looks like this:
The image on the right obviously has a smaller height than the two preceding it. I'd like to make it look more like this:
But I'm at a bit of a loss as to how. Here are the caveats:
I don't know the dimensions of the images in advance, these are being called in via AJAX from my database
I don't want a javascript solution, I'd much much prefer a CSS-based solution.
I'm using Bootstrap, if that has any bearing here.
This is built using AngularJS' ng-repeat where one repeat equals one 'product', as in the images above. Thus creating a <tr> which contains the row of images and simply giving them vertical-align="middle" won't work here.
Because of the last factor, I'm assuming it won't be possible to do this without javascript. Here's a JSFiddle which has the code inside:
http://jsfiddle.net/CTVZR/5/
Any ideas/solutions? I'd gladly display them in a table if it were possible but I can't think of a way how.

You can use table and table-cell display.
jsFiddle Demo
.row {
display: table;
}
.col-xs-4
{
display: table-cell;
float: none;
vertical-align: bottom;
}

html solution: not the best for most caes but simple
you can set in the img tag the height or the width (or both) so they will all be the same
ex:
all the images will be resized to heigth="100px" proportionally
(if you set width and height then you will loos the auto proportion)
CSS solution -background
instead of an img tag use a div and set its background to be the image you want.
you can set the position as center or in percent or px. and you can set scaling.
ex:
background: url('the url') no-repeat center;
look at the link: http://www.w3schools.com/cssref/pr_background-position.asp
CSS 3 solution
try to play with the image min-height and min-width (and maybe max)

The simplest solution I would think of would be to give height a certain value and position:relative and to images inside them give position:absolute, bottom:0 and max-height the same as height of the container. Give it a try.

With JS, you need to loop and check for the highest and apply this value to the others
$(document).ready(function(){
var maxHeight = 0;
$('.searchImgContainer').each(function(){
if($(this).height() > maxHeight){
maxHeight = $(this).height();
}
});
$('.searchImgContainer').css('height',maxHeight);
});
http://jsfiddle.net/toniweb/CTVZR/14/
-EDIT, the align bottom image-
$(document).ready(function(){
var maxHeight = 0;
$('.searchImgContainer').each(function(){
currentHeight = $(this).height();
if(currentHeight > maxHeight){
maxHeight = currentHeight;
}
});
$('.searchImgContainer').each(function(){
currentHeight = $(this).height();
if(currentHeight < maxHeight){
margin = maxHeight - currentHeight; $(this).find('img').css('marginTop',margin);
}
});
});
http://jsfiddle.net/toniweb/CTVZR/16/
-EDIT, Itay is making me work! ^^ -
function fixImages(){
var maxHeight = 0;
$('.searchImgContainer').each(function(){
currentHeight = $(this).height();
if(currentHeight > maxHeight){
maxHeight = currentHeight;
}
});
$('.searchImgContainer').each(function(){
currentHeight = $(this).height();
if(currentHeight < maxHeight){
margin = maxHeight - currentHeight; $(this).find('img').css('marginTop',margin);
}
});
}
$(document).ready(fixImages);
$(window).resize(fixImages);

CSS table height

I have a problem doing the following in CSS (I want to avoid the extra javascript at page ready):
I have a table with 100 rows, it's size is bigger then the window.
I want to make the table height = winodw height, so that I can insert a scrollbar on the table. The reason for that is that I have to "navigating" divs arround the table(up and down) which I want to be visible when you scroll. It works perfect if I set the container's height to exact pixels, but using %, just spawns the table with a scroll on the page. Is it possible to do this in CSS without javascript?
So my current css for the table:
#mainTable{
width: 100%;
height: 100%;
overflow: auto;
display: block;
}
The thing is this does not give the same result as if I do height=800px, given that the window is 800px, since with % you get a scroll on the page and with px you get a scroll on the table.

var parameter_one = "http: //one.css"; //your css for table
var parameter_two = "http: //two.css" //your css w/o table
if (window.height < somevalue) {
load_me(parameter_one)
} else {
load_me(parameter_two)
}
function load_me(file) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = file;
link.media = 'all';
head.appendChild(link);
}

I wouldn't do width: 100%; because it can sometimes go over the page length, you can try 90%, 80%, or even 70%, or an exact width, or you could try giving it like, margin: 20px; the height, I would just do an exact height like height: 200px; thats probably not the width you want but you know what I mean.
OR
you could do JavaScript like the last guy said. Which is what I would recommend if the CSS doesn't work out. There's just somethings CSS can't do. :/

jQuery Masonry breaking randomly at certain widths

I'm using jQuery Masonry to develop a responsive grid of photos. I'm using a simple CSS proportional grid, and everything works fine (other than the fact that floats don't work vertically). The moment I add masonry this layout breaks.
$(document).ready(function() {
// select container
var $work = $(".work");
// set columns based on window width
var columns = 3,
setColumns = function() { columns = $(window).width() > 768 ? 3 : 2; };
$work.imagesLoaded(function() {
$work.masonry({
itemSelector: '.project',
columnWidth: function(containerWidth) {
return containerWidth / columns;
}
});
$(window).on('resize', function() {
// set columns now that the browser width is different.
setColumns();
$work.masonry('reload');
}).resize();
});
});
A jsfiddle demonstrating the issue can be found here.
Above the 768px breakpoint, things work (albeit with lots of flickering), but below the break point what should be two columns only fits into one.
Fixes I've tried:
Setting columnWidth to 1 fixes it in Safari and Firefox, but not Chrome.
Setting the width of one of the columns to 47.5% instead of 49% (which accounts for one 2% margin), but then my grid doesn't line up visually.
I suspect it's something to do with widths and margins being ever so slightly over, but I've checked my code thoroughly and the numbers should add up to a nice even 100% width. It's only when Masonry comes in that it breaks.
Thoughts? Any help would be greatly appreciated.

Set the margins to 0 and the masonry should fit it all together. Here is a demo:
http://jsfiddle.net/uMgwm/1
/* basic grid structure */
.half, .third, .two-third, .quarter {
float: left;
margin: 0;
}
.two-third + .third, .third:nth-child(3n+0), .quarter:nth-child(4n+0) {
margin: 0 0 0 0;
}
.half:nth-child(2n+0), .third:nth-child(3n+0), .quarter:nth-child(3n+0) {
margin-right: 0;
}