viralpatel / jquery.shorten Goto Github PK

@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'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

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.

Is it possible to tag the current status as version 1.0.0, as it was released on NPM?

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.

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.

Any chances of getting this added to NPM and/or Bower?

Hello, the current 'old school' animate is pretty, but sometime wants something new.
Thank.

Your Example shows:
$(element).shorten({
showChars: '50',
});

it should be:

$(element).shorten({
showChars: 50,
});

Custom "more" text returns to default after hiding content again.

Hi, unfortunately i found another strange bug. See:

http://jsfiddle.net/dcA8Q/4/

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.

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

If you have nested elements within the main div. This code doesn't work.

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.

1. undefined is misspelled here:
   ** IE 7 has a "bug" It is returning underfined when trying to reference string characters in this format
2. weren't is missing the apostrophe here:
   ** I've also added brackets where they *werent *

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.

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??

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

jquery.shorten is not working in IE browser kindly help me out to fix the issue

Thanks,
Rekha G

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 have a multi-language web application. It would be handy to be able to localise the values for "Read more" and "Show less".

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!