Develop Reference

how to align html text using css when headings are different lengths

I have some span tags which I am using to style some headings and some text on the same line.
However I want to style the text in the award class so that it is lined up after the length of the longest sub_heading (which is Date Awarded at 12 characters. Is there a javascript library or css trick to do this?
<span class="sub_heading">Award<span class="award">Award Name</span></span>
<span class="sub_heading">Date Awarded<span class="award">2009</span></span>
It would end up:
Award:..............Award Name (without periods obviously).
Date Awarded: 2009

In my opinion, the best thing to do is to change the markup, you can do that in multiple ways, this is an example:
Example using tables
<table style="width:100%">
<tr>
<td>Award</td>
<td>Award name</td>
</tr>
<tr>
<td>Date awarded</td>
<td>2000</td>
</tr>
</table>

If you change your markup a bit you can use display: table to achieve this effect.
#wrapper {
display: table;
}
.row {
display: table-row;
}
span {
display: table-cell;
}
.award {
text-align: right;
}
<div id="wrapper">
<div class="row"><span class="sub_heading">Award</span><span class="award">Award Name</span></div>
<div class="row"><span class="sub_heading">Date Awarded</span><span class="award">2009</span></div>
</div>

You can use css or table to setup a layout. I think it is a easier way and has better performance. But I would also like to provide you with another way with javascript, and you can figure out which will be the best way for your case. Here is the working example: https://jsfiddle.net/b8063z7c/
The main code is this:
(function() {
var maxWidth = 0;
$.each($(".sub_heading"), function() {
maxWidth = Math.max(maxWidth, $(this).width());
})
$.each($(".sub_heading"), function() {
$(this).css("padding-right", maxWidth - $(this).width());
})
})();
Hope this will help.

Create a Tooltip Out from arbitrary HTML Table

I am trying to create a tooltip on a web page. I want the user to be able to roll over a link, and when they do, display arbitrary html. In this case, its a simple table, containing some meta data. I have tried using jquery.tools, but I am not sure how to use it correctly. Here is the idea:
<a id="foo">FOO</a>
<div id="tooltip-content">
I am visible when the user hovers over FOO
<table>
<tr>
<td>Name</td>
<td>Foo</td>
</tr>
<tr>
<td>Value</td>
<td>Waka waka</td>
</tr>
....
</table>
</div>
When the user hovers over the link text FOO, I want the div and its content to become visible, floating near the mouse, I don't care if its above, below, left or right of the link text. It just needs to work. What is the simplest / best way to do this? I don't think I can use the title attribute of the link since I want to support an html table, is that correct? How do I do this?

Basic stuff, really. Here's a fiddle: http://jsfiddle.net/MqcMM/. The reason the table and the link are wrapped in a container is to allow hovering over the table once it is displayed.
HTML:
<div id = "container">
<a id="foo" href = "#">FOO</a>
<table>
<tr>
<td>Name</td>
<td>Foo</td>
</tr>
<tr>
<td>Value</td>
<td>Waka waka</td>
</tr>
</table>
</div>
CSS:
body {
padding: 50px;
}
#container {
position: relative;
display: table;
}
#container > table {
position: absolute;
white-space: nowrap;
border-collapse: collapse;
display: none;
}
#container > table td {
border: 1px dotted #000;
padding: 2px;
}
#container:hover > table {
display: table;
}

Force row height in HTML for ng-animation

I have an AngularJS module with a page that shows a table of topics and subtopics. Each topic is a tbody element with 2 rows: one representing the topic name, and one containing a nested table where the rows are the subtopics. Each topic has an expand / collapse button that controls the subtopics, i.e. ng-shows / hides the row where the subtopics table is:
<table>
<tbody ng-repeat="topic in topics">
<tr>
<td>{{topic.name}}</td>
<td class="toggle-subtopics" ng-click="toggleSubtopics(topic)">Expand / collapse</td>
</tr>
<tr class="test-height" ng-show="topic.expanded">
<td colspan=2>
<table>
<tr ng-repeat="subtopic in topic.subtopics">
<td>{{subtopic.name}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
I'd like the subtopics row to appear / disappear with ng-animation, but the main problem is that no matter what I do, I can't seem to control the height of this row.
Fiddle

In order to control a td height you need to work on the line-height instead of height
Fiddle
Code Snippet:
.test-height {
line-height: 40px !important; /* This doesn't affect the height of the row */
}
Option 1:
Updated Code:
.table > tbody > tr >td {
line-height: 40px !important;
}
Updated Fiddle Option 1
Option 2:
If you do not want to mess with bootstrap global space you can create your own class and assign that to individual td
Updated Code:
.fixed-height {
line-height: 40px !important;
}
Updated Fiddle Option 2

Try This:
.test-height {
height: 3px;
overflow:hidden;
display:block;
}

How to align <tr> element based on the other <tr> element that is above

So I have 20 tags or so and they all have absolute position. They are dynamically generated based on the response I get from an XML and they currently are aligned next to each other.
How can I align them to be 4 on each row, but with the 5th tag to be exactly under the 1st tag, the 6th tag to be under the 2nd and so on. Every tag has a different height.
Normally, the first 4 should not require any aligment.
Here is the structure:
<table>
<tbody>
<tr>
<tr>
<tr>
........
<tr>
<tr>
</tbody>
</table>
Here is my CSS for the tags:
.innerContent tr {
background: none repeat scroll 0 0 #F3F3F3;
border-radius: 5px 5px 5px 5px;
float: left;
height: auto;
margin: 0 5px 25px;
padding: 0;
position: absolute;
transition: all 1s ease 0s;
z-index: 5;
}
I doubt this can be achieved with CSS so I'm thinking JQuery. Everything I tried only made them all overlap 4 by 4.

As I mentioned in my comment above, I would HIGHLY recommend AGAINST using a table for this. It doesn't seem like you are populating it with tabular data, so you are just using it as a layout tool. And for what you want to do that is a very bad tool.
Since you mentioned Twitter Bootstrap above, I would recommend you utilize their scaffolding grid system. To give a a very basic example, take a look at this jsFiddle on how I would approach this.
For completion sake, here is the HTML I used in the jsFiddle. This will line up 4 columns per row with a width of 220px each (based on their container width of 940px). If you want a different container size, you just need to tweak the width slightly.
Of course this requires the use of the Bootstrap CSS:
<div class="row">
<div class="span3">Hotel 1</div>
<div class="span3">Hotel 2</div>
<div class="span3">Hotel 3</div>
<div class="span3">Hotel 4</div>
<div class="span3">Hotel 5</div>
<div class="span3">Hotel 6</div>
</div>

i think You need stuff like this:
jQuery
$(document).ready(function () {
$mt = $('<table>').attr('id', 'myTable');
for (var y = 0; y < 5; y++) {
var $row = $("<tr>").appendTo($mt);
for (var x = 0; x < 4; x++) {
$row.append($('<td/>').text(y * 4 + x + 1).appendTo($mt));
}
$mt.append($row);
}
$("#myTable").html($mt);
});
HTML
<table id="myTable">
</table>
DEMO
http://jsfiddle.net/673tG/1/

How can I do image wrapping in the div area of the table cell?

I do an exercise to write an image gallery w/o using any libraries or jquery. I put an image into a table cell. I have functions in javascript moveLeft() and moveright().
The bug that images moves out of the cell area. I want user will see only the part of the image when it passes cell border.
The css code:
#moving_image {
background-image: url(picture/13.jpg);
background-repeat: no-repeat;
position: relative;
border:1px solid red;
width: 130px;
height: 100px;
left: 10px;
}
The html code for cell:
.....
<tr height="130">
<td width ="420" height="130">
<div id= "moving_image">
</div>
</td>
</tr>
Javascript code for moveRight() ,{as example. I also has moveLeft()}:
<script language=javascript type="text/javascript">
var x=10;
function moveRight()
var layerElement = document.getElementById("moving_image");
x+=10;
layerElement.style.left=x;
}
....
</script>
So, what I do in order to wrap an image in the table cell? Thanks

Try using z-index for table row and the div containing your image
or give to table rows CSS parameter "overflow:hidden"

try wrapping with another div and apply that css to the wrapping div like:
<td>
<div style="position:relative;overflow:hidden">
<div id= "moving_image">
</div>
</div>
</td>

The solution is simply to make chaneg the background-position instead of moving the div.
function moveRight()
var layerElement = document.getElementById("moving_image");
x+=10;
layerElement.style.background-position=x;
}