viralpatel / jquery.shorten Goto Github PK
View Code? Open in Web Editor NEWjQuery plugin to automatically shorten text in a DIV and add "show more" link.
License: Other
jQuery plugin to automatically shorten text in a DIV and add "show more" link.
License: Other
Your Example shows:
$(element).shorten({
showChars: '50',
});
it should be:
$(element).shorten({
showChars: 50,
});
I'm on a page that uses jquery.shorten. The HTML in place is as follows:
<div class="listing__content" data-shorten="150">
<div class="shortcontent">
<p style="margin-bottom: 0px;">Pikachu is a main character in the Magical Pokémon Journey manga series. He is described as rather scatterbrained, doesn't speak human language, but t<span class="ellip">...</span></p>
</div>
<div class="allcontent" style="display: none;">
<p>Pikachu is a main character in the Magical Pokémon Journey manga series. He is described as rather scatterbrained, doesn't speak human language, but the others seem to understand him.</p>
</div>
<span><a href="javascript://nop/" class="morelink">Show More</a></span>
</div>
I go to another page, then press "back" button my browser to return to the page with jquery.shorten and the HTML is messed up (concretely, it gets nested):
<div class="listing__content" data-shorten="150">
<div class="shortcontent">
<div class="shortcontent">
<p style="margin-bottom: 0px;">Pikachu is a main character in the Magical Pokémon Journey manga series. He is described as rather scatterbrained, doesn't speak human language, but <span class="ellip">...</span></p>
</div>
</div>
<div class="allcontent" style="display: none;">
<div class="shortcontent">
<p style="margin-bottom: 0px;">Pikachu is a main character in the Magical Pokémon Journey manga series. He is described as rather scatterbrained, doesn't speak human language, but t<span class="ellip">...</span></p>
</div>
<div class="allcontent" style="display: none;">
<p>Pikachu is a main character in the Magical Pokémon Journey manga series. He is described as rather scatterbrained, doesn't speak human language, but the others seem to understand him.</p>
</div>
<span><a href="javascript://nop/" class="morelink">Show More</a></span>
</div>
<span><a href="javascript://nop/" class="morelink">Show More</a></span>
</div>
Repeating the steps above further nest the HTML
jquery.shorten is not working in IE browser kindly help me out to fix the issue
Thanks,
Rekha G
thanks for this plugin. i have been using it on my site for a while and generally it is fine. i just found a problem though, that i have no idea of the cause of. someone posted a comment to my site that was partially freshly typed text and partially pasted text from another comment she had written. the shorten code correctly shortened the text, but when i click the 'expand' link, the full text is not revealed. the animation is triggered, but there is no more text to read...
edit: i have debugged this a bit now and found that the cause of the problem includes that the text that was pasted into the comment that i am applying the shortening function to... contains a class that had been previously added by the shorten function when it was applied to the source comment.
in other words, the text that the shorten function is being run against already contains an html 'class' definition called 'allcontent' because the user copied and pasted text from an area that already had been shortened previously on the page...
i changed the line:
$this.find(".allcontent").hide(); // Hide all text
to
$this.find(".allcontent:first-of-type").hide(); // Hide all text
to see if that might improve the situation but it didn't provide a quick workaround and instead some of the text was duplicated on the page.
If you have nested elements within the main div. This code doesn't work.
If a content has many links at the end of the "showChars" variable number the code will break meaning if you have content like:
Shouted: Hey check out this link http://www.google.com venue venue2 venue3 fan2 artist3
and the ShowChars variable had like 100 chars then the shorten plugin will fail and the content will be repeated
Custom "more" text returns to default after hiding content again.
Hi, unfortunately i found another strange bug. See:
The first example (bug) has a piece of text that starts with a [br] tag, and has an image somewhere in the text. The text is cut, as expected, but the image is now displayed at the end of the cut text. It does not matter if the [br] tag is at the beginning or somewhere else in the text.
The second example has the same text, but no [br] tag, and there the behaviour is as expected. It seems the [br] tag is causing problems.
Hello, the current 'old school' animate is pretty, but sometime wants something new.
Thank.
Any chances of getting this added to NPM and/or Bower?
I just had this issue, found a quick and easy solution at http://snipplr.com/view.php?codeview&id=65312
Not so much an issue, just a tip and a feature request 👍
Hi, Thank you so much for this, exactly what I was looking for!
One change I hope to make though. I would like to place the "more" link next to the ellipses, inline.
So it reads:
co-founder of an events management ... more
Can you put me in the right direction, please.
It would be great to configure how many lines of text to show, if there are newlines in the text.
For example, if the total content length is less than the showChars, but there are newlines and I only want to see the first line, then a more link to show the remaining lines.
Is it possible for the script to not count the characters that make up the html tag codes itself? As it is now, if the text has 90 characters of html tag code (such as [a href="very long link" title="long title" target=""]), and 20 charcaters of regular text, and you set the ShowChars to 100, it will shorten and only show 10 characters. That will be kind of confusing to the users reading the text :)
ps: i changed the code tags to [] because github was transforming it to a link.
Hi. Unfortunately you chose the name of an existing library, created in 2009. https://github.com/MarcDiethelm/jQuery-Shorten/blob/master/jquery.shorten.js
Even more unfortunately your plugin does a very similar thing and it's confusing people. Not cool!
I suppose you didn't intend to use an existing name. But yeah, you should probably change it. In case you haven't, it's always a good idea to check if a name is already in use!
I have a multi-language web application. It would be handy to be able to localise the values for "Read more" and "Show less".
@viralpatel The animations are not working very good. There are flashes of the text when the animation happens. This makes the whole thing quite uneven.
To illustrate here to versions to compare:
http://staeff.github.io/jquery.shorten/samples/with-animations.html - this shows the bad behaviour
http://staeff.github.io/jquery.shorten/samples/without-animations.html - here it is fixed
If the #37 is accepted, I also would like to ask you kindly to make a new release of the plugin on npm (https://www.npmjs.com/package/jquery.shorten). The background is that I would like to define jquery.shorten as a dependency in website of mine to install it automatically with npm install
.
By the way https://github.com/viralpatel/jquery.shorten/blob/master/src/jquery.shorten.js states that it is version 1.1.0, but the plugin is released with version 1.0.0. on npm.
Thanks.
I am using this on pages where there are many blocks of text to be shortened. These are help texts on a configuration page. It works well, but it would be nice if when a second block of text is opened (click "more") any other already opened block was automatically closed. It would save users needing to click 'less' every time before they open a second (or more) block.
Is this possible?
Perhaps something like:
$this.parent().siblings().find(".comment").slideUp();
I realise that exact code will not work here, but the principle of using sibling elements might??
The current npm release of this plugin is broken. I get an error when i do require('jquery.shorten');
in my script. The Problem is that the current package.json on npm is setting "main": "jquery.shorten.js"
but in fact should be "main": "src/jquery.shorten.js"
.
My last addition to #37 fixes that.
Is it possible to tag the current status as version 1.0.0, as it was released on NPM?
Hi,
I'm using your plugin with datatable and i have added some row with append method. The shorten is not working with those appended elements. Can you have any solution for it.
I was using this plugin and having some problems with tags not being closed, then I realised that you can use the following to get jQuery to close any open tags for you:
var safeShortString = $('<div/>').html(shortString).html();
So, when the string has to be truncated, just pass the truncated shortString as above and jQuery sorts it out for you and you don't need all that char-by-char parsing code.
I've tested this with jQuery 1.7.2
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.