How can we use jQuery Expander plugin to expand/collapse according to number of lines rather than characters?

Question

5.00/5 (1 vote)

See more:

I have checked the following links

http://stackoverflow.com/questions/1779764/jquery-expander-with-max-lines-property

http://stackoverflow.com/questions/1671621/how-to-get-first-2-lines-or-200-characters-from-p-using-jquery?lq=1

but in these its not possible to predict the line height if your div contains headings and text of different font sizes

eg.

<div class='info'>
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare cursus elementum.
    Mauris et sem vitae dui vehicula lobortis a non orci. In tortor lacus,
    vehicula id placerat nec, pharetra non nunc. Aliquam id ipsum quis orci
    posuere pellentesque et vel urna. Vestibulum mattis sem ornare neque fermentum vel
    imperdiet nunc eleifend. Suspendisse potenti. Nam scelerisque sodales porttitor. Vestibulum cursus
    lobortis magna, id vehicula justo faucibus iaculis. Proin facilisis facilisis mauris. Pellentesque ultrices
    pharetra diam. Fusce a eleifend quam. Aenean eu odio dolor. Mauris augue leo, fringilla eu sagittis at, fermentum
    vitae dui. Maecenas scelerisque mi at erat posuere vitae porta metus tempor. Vivamus at ante id velit rutrum
    aliquet eget sit amet purus. Proin sed vehicula elit. Aenean a viverra nunc.</p>
</div>

Posted 29-Apr-13 19:53pm

AakashGupta

Updated 30-Apr-13 9:09am

Richard C Bishop

v2

Add a Solution

Comments

MuhammadUSman1 30-Apr-13 4:46am

In above div what you want to collap/expand.

AakashGupta 30-Apr-13 5:44am

i want the div with class = info to expand/collapse so that collapsed text may contain only two lines

MuhammadUSman1 30-Apr-13 6:04am

try this
http://jqueryui.com/accordion/

AakashGupta 30-Apr-13 6:11am

Thanks for replying soon,
I want something like this that can be used with the number of lines instead of charachters.
http://plugins.learningjquery.com/expander/demo/index.html
I appreciate your help.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Brian A Stephens · Answer 1 · 2013-04-30T08:59:00

I don't think there's a straightforward solution, but try this.

If you parse the contents of the div, marking each word with a <span> (just split on whitespace), then you can detect the position().top value of each span you added. Each distinct value is a new line - some may be 16px lower than the previous, some may be 24px, etc., but you'll know exactly how many lines there are.

When you have reached the max number of lines to show, set the height of the div to the next distinct position().top value to hide the remaining lines.