Как изменить размер UL, Div P в JQuery

Question

У меня есть функция временной шкалы на моем сайте, в определенный год текст может быть очень длинным, в некоторых это может быть только 1 строка, я хочу изменить размер страницы так, чтобы, когда пользователь нажимает на следующий год, страница не действительно долго с одной строкой?

я использую timeliner js из 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>

Пример здесь:

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

EDIT:

jquery ive попытался:

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

Answer 1

Использовать ширину и высоту CSS

Если вы хотите, чтобы оно было динамическим, используйте js, чтобы проверить длину и обновить ширину CSS при изменении текста

Редактировать:

Этот пример для ширины.Проверьте элементы страницы на наличие хорошего контейнера, который даст вам высоту, которую вы ищете.

для ширины вы можете сделать что-то вроде

/* 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 */)

, а затем найти хорошую меру, чтобы установить ширину, не обязательно совпадает с длиной строки.

Если вы нашли контейнер с правильной высотой, просто возьмите его высоту и обновите другие элементы.

, если вы хотите измерить высоту на основе текста, это означает, что у вас будетпредсказать количество разорванных строк на странице.Это зависит от макета страницы / размера экрана и разрешения.Итак, выберите число для ширины экрана (возможно, 1024), затем проверьте на макете, сколько строк требуется, чтобы разорвать.Вы можете пойти еще дальше, проверив все это динамически и выполнив вычисления.ИМО, это не должно быть сложным решением, но это зависит от того, насколько это важно для вас.

Иногда, имея высоту 100% и устанавливая ее на место, она сама о себе позаботится.

Answer 2

Ваша проблема не очень ясна. Почему бы просто не применить к нему некоторые стили, чтобы ограничить его ширину?

p {
    width: 200px;
    height: 200px;
    overflow: hidden; //or other value to suit your needs
}

Вот ваша обновленная скрипка: http://jsfiddle.net/sEFQS/2/