jMar"s Blog DevSmash Developer Portal

Tuesday, February 26, 2008

jTruncate in Action

This is the demonstration page for the jTruncate plugin for jQuery. If you are looking for the jTruncate homepage, go here.

Plain Jane Example

jTruncate is called in the same way that most other jQuery plugins are called. The example below is using the following code, that accepts all the default options.

$().ready(function() {
 $('#example1').jTruncate();
});

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fringilla, purus a ultrices blandit, odio ante scelerisque neque, vitae imperdiet odio velit ac nisl. Sed tortor metus, placerat condimentum, feugiat in, feugiat adipiscing, mi. Donec pulvinar sem vitae leo. Vestibulum eget lectus et ligula hendrerit pharetra. Sed porta justo ac nisl. Aliquam nisi erat, pellentesque sed, sagittis eu, fringilla sit amet, dolor. Nam ac mi. Pellentesque pede purus, mattis aliquet, semper nec, cursus a, orci. Duis bibendum nibh ac massa. Integer eu tortor. Aenean convallis quam at nunc. Nunc mollis tincidunt nisi. Suspendisse mauris odio, iaculis ut, feugiat vitae, ultrices in, tortor. Quisque at elit. In hac habitasse platea dictumst.
jTruncate Options

jTruncate allows you to customize nearly every aspect of the truncation operation. The following options are provided:

length: Defaults to 300
The number of characters to display before truncating.
minTrail: Defaults to 20
The minimum number of "extra" characters required to truncate. This option allows you to prevent truncation of a section of text that is only a few characters longer than the specified length.
moreText: Defaults to "more"
The text to use for the "more" link.
lessText: Defaults to "less"
The text to use for the "less" link.
ellipsisText: Defaults to "..."
The text to append to the truncated portion.
moreAni: Defaults to an empty string
The speed argument for the show() method (as specified here).
lessAni: Defaults to an empty string
The speed argument for the hide() method (as specified here).
Custom jTruncate Example

The following example demonstrates how to override the defaults described above.

$().ready(function() {
 $('#example2').jTruncate({
  length: 200,
  minTrail: 0,
  moreText: "[see all]",
  lessText: "[hide extra]",
  ellipsisText: " (truncated)",
  moreAni: "fast",
  lessAni: 2000
 });
});

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fringilla, purus a ultrices blandit, odio ante scelerisque neque, vitae imperdiet odio velit ac nisl. Sed tortor metus, placerat condimentum, feugiat in, feugiat adipiscing, mi. Donec pulvinar sem vitae leo. Vestibulum eget lectus et ligula hendrerit pharetra. Sed porta justo ac nisl. Aliquam nisi erat, pellentesque sed, sagittis eu, fringilla sit amet, dolor. Nam ac mi. Pellentesque pede purus, mattis aliquet, semper nec, cursus a, orci. Duis bibendum nibh ac massa. Integer eu tortor. Aenean convallis quam at nunc. Nunc mollis tincidunt nisi. Suspendisse mauris odio, iaculis ut, feugiat vitae, ultrices in, tortor. Quisque at elit. In hac habitasse platea dictumst.
Special Considerations

Note that if you override the default animation options, you will notice a "new line" inserted at the point of truncation. This is because the hide/show methods require the animated element to be block level, and thus will begin on its own line.

Also note that jTruncate chooses the split location by starting at the length you specify (or the default) and then finds the next space. This is to prevent truncation in the middle of an html tag. This implies that the text needs to have spaces in it (duh), and that any tags within the truncated text cannot contain a space (i.e. <p id="myP"> = bad).

Thank you for visiting, and if you have any questions/suggestions at all, just let me know in the comments!



94 comments:

Bernardo said...

Nice plugin!!!

Jeremy Martin said...

@Bernardo
Thanks!

Anonymous said...

I dont think it truncates HTML elements..??

Jeremy Martin said...

Can you give a specific example of what you're trying to truncate? Keep in mind that any html elements that have a body have the potential to be split in half. For example, if you were to wrap some text in a span, the script could split the text inside the span body resulting in the page rendering with no closing span.

Fernando Javier said...

Hi.
I really like the main idea of your plugin. Years ago I did a similar solution manually in order to trunk the text which is in a cell within a table (in plain javascript).
But I see a main difference, I needed to trunk the text inside a DIV based on the width the TD have when the page is loaded, so, the text is trunk based on the container size instead of a fixed allowed number of characters.

I'm really new to jQuery, so, and I would really like to use your plugin doing some changes according the description I described above.

¿Do you know whether it's possible to do the trunk based in the container width (which is not fixed, it's relative) instead of fixed chars, with your plugin? or Do you have any idea how can I do it?

I will really appreciate your help, thanks in advance.

Kristin Pishdadi said...

Works great except.. it really does need to ignore anything inside of a HTML tag.

For example, I'm trying to implement this on my blog, but it keeps cutting things that are a href in half.

I'm going to fiddle with it a bit and I'll let you know if I come up with a fix.

Jeremy Martin said...

@kristin
Ya I think you're definitely right. I originally created the plugin with a very limited need, but especially after making it publicly available, it should support safe tag bodies. If you come up with something certainly let me know, otherwise I'll try and dedicate some time to the issue soon.
Thanks for pointing that out!

Karl Swedberg said...

Hi Jeremy,the plugin looks nice! I created a similar plugin called Expander that also handles nested tags, which can get tricky. Feel free to grab any of the code for your own use if you like it. The only limitation is that it truncates only within a block element, not across multiple block elements. Henrik has written HTML Truncator, which handles the multi-block issue well.

Jeremy Martin said...

Well jeez, after seeing that there's hardly a need for this! Thanks for the offer though, I'll most definitely be checking out your code!

Anonymous said...

Great plugin, works like a charm
but how can i float the moreText: "[...]" & lessText: "[...]" float right, instead of the default:left

thanks!

Jeremy Martin said...

One option is to apply the following rule:

.truncate_more_link { float: right; }

...but in some browsers that will cause the link to render outside the parent container.

For now, the better option is to modify the script and add a class to the link's wrapping div. It currently has a class of "clearboth" which, umm... shouldn't be there. So just change that to your own class, and then style it with "text-align: right;".

I'll be fixing that in the next version.

Anonymous said...

I don't get it working, but there is a thing that is much more important. Internet Explorer doenst support it.. when will more recent version be released that supports IE ?

Jeremy Martin said...

@Anonymous
What version of IE are you using? I just retested it in IE6 and IE7 and both seemed fine.

I am already working on the next release that is primarily concerned with supporting nested tag entities. To date I wasn't aware of any IE specific issues...

Anonymous said...

Nevermind, checked again today & now ie does work in IE... but it takes a few sec's to load, what is weird because you use the: ready function

very nice, & thanks!

James Ferguson said...

Hi,

Nice plugin.

I'm definitely having problems with IE6 though. They're intermittent and hard to figure though.

I'm trying to truncate user submissions at a certain length. Most of them work perfectly. However for a few the text that should show doesn't and the truncated text does show. Then the more/less link has no effect.

There's no pattern that I can see yet and no particular character that seems to trigger it.

Check it on this link, just look for comments that look like they start halfway through and then check the source.

Jeremy Martin said...

@James
Thanks for letting me know of this. I'm working on a new algorithm that will also be safe to use with nested tags, and I'll give special attention to this bug. Unfortunately, the cause isn't immediately obvious to me.

In the meantime, let me refer you to this comment by Karl Swedberg (http://blog.jeremymartin.name/2008/02/jtruncate-in-action.html?showComment=1205269680000#c1644222719693441130) where he mentions a couple alternatives to jTruncate.

Anonymous said...

I'm curious, is there any way to expand upwards instead? :D

Jeremy Martin said...

@Anonymous
Well if the truncated text is being rendered as normal, then it's going to simply push the following content lower. However, if you styled it with absolute positioning and set it's position using the bottom attribute (as opposed to top), then I should think it would do what you're describing. I'm a little crunched for time right now, but if you're not too familiar with CSS or if you run into other problems, let me know!

andy said...

Hi,

Nice plugin.

I wondered if there is any way to have a link that will open all truncated elements on the page?

Reg said...

I love the power of this truncator (stronger than HTML Truncator, in case you are still looking for a reason for continuing) but it does have a problem that is killing it for me...

I want to truncate divs that contain break and blockquote tags, and it seems that this routine recognizes the overall length is too long to show, but truncates an internal portion of the div, i.e., rather than starting at the end of the entire item.

I have gathered some details and put them at http://www.secondpersonplural.ca/jtruncateproblems.doc

Hope this helps,

Thanks for a great plugin

Reg

Drew Shapter said...

Not sure if anyone else has mentioned this, but I get funny text when revealing more in IE7, I believe it is because the text isn't rendered with cleartype, any ideas if this can be fixed??

Jeremy Martin said...

@Drew
Which font are you using? I've noticed that when I use bold-face fonts that it repaints badly if the animation length is greater than 0 (in which case the opacity is faded in). I believe that it is the changing of opacity that causes it - does that sound consistent with what you're seeing?

Drew Shapter said...

I'm using a large em size arial, I changed the speeds to 0 and as you said the problem miraculously disappeared, thanks for the prompt reply.

Jeremy Martin said...

@Drew
No problem - that's an annoying behavior, but I haven't discovered a way around it thus far. I hope the 0 animation length will work for your purposes.

Jeremy Martin said...

@Reg
Thank you for taking the time to examine jTruncate. I'm generally pretty trusting, but I'm hesitant to open any foreign documents on my work computer - would you mind placing the information in a .txt or in html format? Sorry for the inconvenience....

pkg said...

great content nice
hamropalo

Vdub said...

I am trying to format the truncate_more_link class but i do not seem to be able to achieve this.

When i view the source code of the HTML page there does not appear to be any additional/appended code from
obj.append in my HTML source code

Vdub said...

ignore above re CSS, i have just seen post

.truncate_more_link { float: right; }

Jeremy Martin said...

@VDub
I'm glad you found your answer - let me know if you have any more questions!

Anonymous said...

i am experiencing a problem IE7 not displaying the first part of text before its truncated. See here for example

Viewed in FireFox all is ok, but with IE7 the first part of the text that should be displayed doesnt show , its only the second part which should actually be hidden/truncated

Anonymous said...

worked great for me in FF3, thanks!

Anonymous said...

gracias por Compartir tu idea bro¡
W4¡

admin said...

thank's, nice plugin!!

hidden_wonder said...

Is it possible to use images instead of the [see all] and [hide extra] text?

AdWorks Webdesign said...

Excellent plugin. Just save some hours of custom php development. Thanks you!

DJ Anael said...

pt-BR Language:

Oi!
Não escrevo bem em inglês, desculpe. Eu gostaria de implementar seu script no meu blogspot aka blogger, poderia me dar instruções passo a passo? Sou leigo...

Abraços!

Vini said...

Hey,Hey! Nice plugin, i`ll use this in my projects, Thanks!

Shaid said...

Cool!
I just take a look on it...
i was used another option for truncate but now its added as my another choice.

Thank you.
Scholarships solutions

Rémiz said...

Thank's a lot, you rocks :)

Brett said...

@anonymous RE: IE6 and IE7 not working

I was running into the same problem. Try removing the "- 1" from the end of line 26 (where str2 is declared). That did it for me, and it still works in other browsers.

Ozan Kılıç said...

hi there.. when i try to insert unsorted list into this truncated code, it says "truncated" after 6th row, and shows rest of all codes also... is it possible to use lists instead of the regular text?

thank you

Artvin said...

Güzel bir çalışma olmuş tebrikler.

Andrew Turner said...

I not get this to work, I guess I am doing something wrong. I have copied the jquery.jtruncate.js file to my server and entered the script code in the html page, then wrapped the text I want to show/hide in the relevant dv - is there more I should be doing?

NextMint said...

Have you activated the function after page load?

$().ready(function() {
$('#your-element').jTruncate();
});

FreeMaN said...

Hi, good plugin. But I have problems in ie8 with html5. Using this constraction to make html5 working:

FreeMaN said...

< script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">

Anonymous said...

I'd like to use this script in a template but cant seem to use " <div id="jTruncate_example1> more than once on a page... Is there a way to call the same function multiple times on the page?

Anonymous said...

@Anonymous

Use a class attribute instead of id. Then do $(".class").jTruncate()

An id can only be used once, so even if you do put it in multiple times it only considers one of them as the 'real' one.

Anonymous said...

it helps me a lot
thanks your awesome plugin

very nice work

Ian said...

hi, it's a great plugin! I'd like to modify it to truncate text located on another page in the same website. What do I need to change '#example 1' to make it work. I've tried a few things but none work. Needless to say that I'm new to this.

$().ready(function() {
$('#example1').jTruncate();
});

Andy Bell said...

Hi, I love this plugin. It works really well!

The only issue I am having is big white line appears at the bottom of the browser window once I click the truncating link.

Is this something to do with display:block?

Jorge Zapata said...

Nice plugin, but in fact i have a problem. When i use 'moreAni' and 'lessAni' options the plugin adds a newline after the truncated text, any idea how to solve this? This doesn't happen if I don't use these options

Dolf said...
This comment has been removed by the author.
Dolf said...
This comment has been removed by the author.
Dolf said...

Really nice plugin! I do have a problem though in IE 8 and 9 (at least, don't have IE7 and 6 to try here). When the text in the paragraph to be truncated contains <BR />tags, the text doesn't get truncated. The links for truncating/showing appear ok, clicking it just doesn't do anything, except change the link text. The full text is always shown. The problem isn't there in FF4.

Buttmonkey said...

Hey..when i expand the truncated the text, the last characted doesn't show up. Why is that?

suppose the original text is "Hello World" and i use jtruncate..when i click for it to reveal the whole message it show "Hello Worl"

Mike Barcroft said...

Hi Jeremy, great plugin!

I noticed I had a problem when truncating text with multiple paragraphs, and also when the plugin is called more than once (I know the latter isn't the best practice).

I modified the file I have here to work with the above, is there somewhere I can post the mods?

Anonymous said...

$().ready(function() {
$('#example1').jTruncate();
moreText: "[see all]",
lessText: "[hide extra]",
});

It forgives me for the English, he is Brazilian, it wants to know as to add to an image in moreText on the contrary of the value see all and in lessText instead of hide extra.

Since already I am thankful…

Anonymous said...

Thanks for this, but there are massive problems with how it works, like only one instance per page..

I'll fork and re-write this sometime.

Anonymous said...

oldie but goodie : ) thanks a lot !

Ali Hammad Baig said...

After testing 3 other similar plugins, your's worked in all situation. Thank you so much, you saved my day.

Anonymous said...

Hi
I have a problem when the plugin is applied to a piece of text containing multiple paragraphs, the truncation works on the first paragraph and the remaining paragraphs are shown below the truncated first paragraph and the more is underneath all, please if you have a fix let me know, thank you.

Arne said...

Works great! Thanks for the good explanation, the plugin fits my most recent project perfectly.
Greets, Arne

Matthijs said...

Nice plugin!

It all works fine but I have one small issue:

After clicking "read more" once, then truncating again by clicking "read less", and then clicking "read more" again, the part of text that was hidden is displayed on a new line. Somehow the style: inline block; is added to the "truncate_more" span class automatically...

This is only after expanding the text for the second time.

Like I said: Not a big issue, but if anyone knows hows to solve this yor help is appreciated!

Thanks!

Matthijs said...

Fixed this litte issue by adding:

moreContent.css("display", "inline")

after moreContent.show(options.moreAni); (around line 45 of jquery.jtruncate.js

Thanks anyway!

Anonymous said...

Hi,

I just wanted to say that the form submission code:
$('form').submit(function() {
$('#select2 option').each(function(i) {
$(this).attr("selected", "selected");
});
});

Won't work under jquery 1.10.1. You will have to use the "prop" function instead as follows:

$('form').submit(function() {
$('#select2 option').each(function(i) {
$(this).prop("selected", "selected");
});
});

See a working JSFiddle here:
http://jsfiddle.net/jakecigar/a8qaC/2

Best regards
Josef

Anonymous said...

Sorry, please delete my previous comment about the "submission code" and also this one. I posted in the wrong article.

Best regards
Josef

jui fardin said...

WOW, it's a nice post. and nice plugin. Thanks for sharing a nice post
photo masking

Makayla Charleston said...

It is very informative post so i like this post very much.
clipping path

Micheal Adams said...

Wow! It's awesome blog post here.... really very interesting for reading.....
clippingpath

Jens C. Kruse said...

Good work !!! I got good informative details from this post. If one need more such ideas then you can move to thesis writing service from online.

Alex C said...

Love your plugin! It works great and with all the flexibility and animation you could ever want. Thanks for putting this together! Just extolled its virtues on a blog post.

Kumar said...

Happy Ganesh Chaturthi
Happy Ganesh Chaturthi SMS in Hindi
Happy Ganesh Chaturthi Quotes, Messages in Hindi, Quotes in Marathi
Ganesh Chaturthi Images Wallpaper, HD Images, Facebook Images
Ganesh Chaturthi Wishes In Marathi, SMS in Marathi, Quotes in Marathi

Kunal Vijan - Move Around the World With Me!! said...

Can I change more/less text to show/hide images?

Mamta Singh said...

pirate kings hack I loved this blog, nice information given as well. I am looking to read more posts from your website.

Badan Singh said...

​Technic Technic desk Publish Blogging tips, Seo tips, Adsense tips, Computer technique. If you need those tips or other's information then visit technic desk.

Badan Singh said...

delhi escorts This is a website for all delhi escorts for pleasure and fun for time pass getting a girlfriend for sometime etc etc... this website provides all services in www.nancydelhiescort.in all delhi escorts in delhi escort in delhi and other areas like gurgoan faridabad noida etc etc...

Badan Singh said...

Toronto Escorts Toronto Escorts Agency Euro Dolls Escorts. Premier Toronto Russian Escort Service.

Badan Singh said...

luxury villas mauritius Mauritius is the holiday destination with a panoply of accommodation like the Clos Du Littoral Villas Mauritius and other self catering holiday rentals. We have visited the island and it’s a real beauty.

Badan Singh said...

vagina tightening pills How to tighten vaginal walls fast. Curcuma comosa herb for vagina tightening, tighten vaginal muscles, tighten prolapsed bladder, tighten loose vagina, tighten prolapsed uterine without vaginal rejuvenation surgery.

Patricia Tabor said...

I don't have better knowledge about jTrucate and how it allows to customize the different aspects of truncation operation. But, the way you describe the ideas is effective. Best essay writing service

Katherine Hayden said...

I liked the idea of plugin. Got good knowledge about jTruncate plugin for jQuery. I wanted say that coursework writing service will help the student in their writing process.

Alice Denny said...

Welcomes to google underwater keep sharing such ideas in the future as well. google mirror this was actually what i was looking for,and i am glad to came here!
elgoog Hi! I’ve been reading your blog for a while google gravity I want you to thank for your time of this wonderful read!!! google terminal now and finally got the courage to go ahead and give youu a shout out from Austin Texas!
google pacman Just wanted to tell you keep up the fantastic work!my weblog: google guitar I definately enjoy every little bit of it and I have you bookmarked to check out new stuff of your blog a must read blog! google snake
Amazing insight you have on this, Happy wheels it's nice to find a website that details so much information about different artists... Age of war 2 This article always blew me... Earn to die For how many times I have read this.
slither io
slitherio
big farm

Essay Writing Services said...

I am looking j truncate for j query and it is very helpful for me. I tried the j truncate described here and it was a nice experience for me.Thanks for sharing.

Buy essays online

Dissertation Writing said...

writing skills improvement. In academic study essay writing and dissertation writing etc are good tasks for analyzing our writing skills. Scholarship essay writing service. I am a writer> our services helps student for their academic writing.

Lisa Kelley said...

This information is very interesting and useful. Thanks for this. I like to work with essay and when I want to relax, I go there

ladwasur said...

appnana hack
appnana hack
appnana hack
appnana hack
appnana hack
appnana hack
appnana hack
appnana nanas hack
appnana nanas hack
appnana nanas hack
appnana nanas hack
appnana nanas hack
appnana nanas hack
appnana nanas hack
appnana nanas hack
appnana nanas hack
appnana nanas hack
appnana nanas hack
appnana nanas hack
appnana nanas hack
appnana nanas hack
appnana nanas hack
appnana nanas hack
appnana nanas hack
appnana nanas hack
appnana nanas hack

Giải Trí Tổng Hợp said...

Welcomes to google terminal from Austin Texas! google snake
Amazing insight you have on this, Happy wheels it's nice to find a website that details so much information about different artists... Age of war 2 This article always blew me... Earn to die For how many times I have read this.
slither io Hi! I’ve been reading your blog for a while slitherio it's nice to find a website that details so much big farm

WorstRider said...

Hungry Shark Evolution Hack
Hungry Shark Evolution Hack
Hungry Shark Evolution Hack
Hungry Shark Evolution Hack
Hungry Shark Evolution Hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack

Satyajit Yamura said...

hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack

Chand Khilnani said...

simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack

Dyutana Nishit said...

simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack

Kevala Pratima said...

hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack
hungry shark evolution hack

Vasantha Mista said...

simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buildit hack
simcity buidlit hack
simcity buildit hack
simcity buildit hack