I have a jquery code used to show more or less link for the comments displayed from my database. I noticed that this jquery code can’t display the link properly that is queried from the database and some can display well. Some instances that the link won’t display properly are as follows:
1.If you are entering long comments with several paragraphs and there’s link in it
Mostly, if the link is located at the middle of the first paragraph, the link is not displayed properly.
If you enter long string link
Lastly, if you enter all several links in a vertical order, the last link won’t display as link when the ‘show more’ link is clicked.
I suspect that it has something to do with my jquery code because it can only display the link properly when the link is located at the first line of the paragraph and anywhere in the second paragraph. I noticed on that jquery code below that if the link is located within the range of 0- 126 characters it will be displayed fine as a link, but if the link will go beyond 126th character where it cuts, then the link from the database is now ruined and not displaying as a link where it should supposed to be. I could hardly figure out how to do this on jquery…Any idea? Anybody can give me a jquery code that would handle in displaying links on the page where ever the links is located in any paragraph? Or help me modify my codes perhaps…Here’s my jquery code for ‘More Less’ link. Thanks for any help…
The problem you’re having is because “slice 126” chops the string without taking tag pairs into account.
Not only could this break links, but is likely to cause invalid mark-up as well. eg. “…</sp”, “<div>…”
The only way I can think to do it is to parse the string for tag pairs before slicing it and then either shorten or lengthen the slice point. i.e. instead of “126” use a variable determined from the parse results.
That is the big question I’m facing now because I don’t know how to modify my jquery codes to parse the string from tag pairs before slicing it. Can you give me an idea on how do I use a variable determined from the parse result cause I’m new to jquery and not yet too fluent with this language…Thanks I hope you can help me.
Writing your own parser could be gnarly, hopefully someone knows about something I don’t know about. I’ll look through my jquery book for ideas in the meantime and try to post back after I get some sleep.
slice(0, length_of_string_that_has_well-formed_markup) from this line: length_of_string_that_has_well-formed_markup? is how to determine that in jquery? Also I guess I need to identify the <a>Links within the paragraph</a> from bypassing in slicing then so they won’t be broken in the paragraph. Still not sure how to do this…
Since all the data that are displayed in the <p> element are user inputs that were saved from the database then I’m
presumptous that the content inside the <p> element are all pure strings and <a>link</a>. Try to imagine this tag as it displays. Hope this gives clue for you…
I think this is close to the right code for the right output. So I tried to apply that code given above to my original jquery code but I’m not sure if I did the right modification since I’m still new to this language so it turned out something like this…
I tried to use var t = $(this).html(); but still giving same output. I’m not sure if I did the right data structuring or algorithm in my code. I guess on this kind of scenario is not possible for jquery but I was wondering why FB’s comment options and status updates are perfectly programmed in which even if you attached any links in any of your paragraph and goes beyong their limits then it will automatically generates 'See more" link without ruining any links inside the paragraph. I think FB uses another techniques for this besides jquery.