Question

I have a time line feature in my site, on a certain year the text maybe very long on some it may only be 1 line, i want to resize the page so that when a user clicks on the next year the page isnt really long with one line on it?

im using timeliner js from
http://www.csslab.cl/ejemplos/timelinr/latest/js/jquery.timelinr-0.9.5.js

 <ul id="dates">
<li><a href="#1940s">1940s</a></li>
<li><a href="#1950s">1950s</a></li>   
</ul>
<ul id="issues">
<li id="1940s"><img src="/timeline/1950.jpg" />
<h1>1940's</h1>
<p>RonaldertreRonaldertreRonaldertrevRonaldertre Ronaldertre RonaldertreRonaldertre Ronaldertre Ronaldertre Ronaldertre Ronaldertre Ronaldertre Ronaldertre Ronaldertre vkv RonaldertreRonaldertre kRonaldertre Ronaldertre Ronaldertre Ronaldertre Ronaldertrekv Ronaldertre RonaldertreRonaldertre Ronald &ldquo;Eddy&rdquo; Edmonson a qualified architect and surveyor joined the Royal Artillery in WW2. At the end of vre RonaldertreRonaldertre Ronald &ldquo;Eddy&rdquoWar he found himself stationed in Turin, and became interested in a nearby factory where the Germans held early experiments in plastic injection moulding. After being re RonaldertreRonaldertre Ronald &ldquo;Eddy&rdquo; Edmonson a qualified architect and surveyor joined the Royal Artillery in WW2. At the end of the War he found himself stationed in Turin, and became interested in a nearby factory where the Germans held early experiments in plastic injection moulding. After being re RonaldertreRonaldertre Ronald &ldquo;Eddy&rdquo; Edmonson a qualified architect and surveyor joined the Royal Artillery in WW2. At the end of the War he found himself stationed in Turin, and became interested in a nearby factory where the Germans held early experiments in plastic injection moulding. After being the War he found himself stationed in Turin, and became interested in a nearby factory where the Germans held early experiments in plastic injection moulding. After being Demobbed back at home, Eddy took this interest further and on 18th October 1946 set up plastic moulding company, Plastiers Limited (Lewisham). He is pictured (right) manning his first commercial production run! RonaldertreRonaldertreRonaldertreRonaldertreRonaldertrevRonaldertreRonaldertre test test test.</p>
</li>
<li id="1950s"><img src="/timeline/1960.jpg" />
<h1>1950's</h1>
<p>Eddy.</p>
</li>

</li>
</ul>

Example here :

http://jsfiddle.net/uzi002/sEFQS/1/

EDIT:

jquery ive attempted:

$("#dates li a").click(function () {
        $('#issues').css("height", $("#" + $(this).html()).height());
    });

Answer 1

Use CSS width & height

If you want it to be dynamic use js to check the length and update the CSS width when text changes

Edit:

This example is for the width. Check your page elements for a good container that will give you the height you are looking for.

for width you can do something like

/* Give your paragraph an Id to be able to get them  <p id="paragraph"></p> */
var text = document.getElementById("paragraph").innerHTML;
//alert(text.length );
$('#issues').width( text.length)
//$('#issues').height( /* preferred height goes here */)

then find a good measure to set the width, not necessarily the same as the string’s length.

If you find a container that has the right height, just grab its height and update the other elements.

if you want to figure the height based on the text, that means you will have to predict the number of lines broken on the page. That depends on the page layout/screen size and resolution. So, pick a number for a screen width (maybe 1024) then check on the layout how many lines it takes to break. You can go even more by checking all that dynamically and doing the calculations. IMO, it should not be a complex solution, but that depends on how critical it is to you.

Sometimes, having height as 100% and putting it in place will make it take care of it self.