This is what im doing:
- I have a list of CD tracks (im using a table for tabular data)
- The lyrics for each track is hidden below the name of the track, inside a div
- when i click the track, the lyrics pops up, right to the name of the track
The issue i'm having is with the width of an absoulte element inside a relative element. For some reason, the width of the absolute element is the max width of the relative element.
In my case, the width of the lyrics popup is the max width of the relative cell data.
What i want is for the absolute element width to flow naturally without any defined width constraint. This way the lyrics line breaka are ok... I could define a width for the lyrics popup, but then some lyrics will have an ugly empty right space... I want my project to be perfect!!
Any ideas how to do this? Thanks
my html:
<table class="tbl-track">
<tbody>
<tr>
<td>1</td> //width: 20px
<td class="track-name"> //width: 350px
<a class="track" href="">track 1</a>
<div class="lyrics" style="display:none;">
lyrics goes here<br />
line 1<br/>
line 2<br />
...<br />
</div>
</td>
<td>duration</td> //width: auto
<td>play button</td> //width: 20px
</tr>
</tbody>
</table>
this is my css:
.tbl-track td.track-name {position:relative;}
.lyrics {position:absolute; left:0; top:-20px; background:#000; padding:20px; z-index:999}
this is my jquery:
$('a.track').click(function(e) {
var w = $(this).width();
var this_lyrics = $(this).next('.lyrics');
var duration = 200;
// hide opened lyrics before displaying a new one
$('.lyrics').fadeOut(100);
this_lyrics.hide().css({left:w + 20}).fadeIn(duration);
e.preventDefault();
});
