CODEWITHSUNDEEP
javascriptjquery
Funk
Funk

Reputation: 73

Clickable #hash

I am using this code for "See More" function

http://pastebin.com/SCfneG96

And executing code like

<p class="trunc">Lorem <a href="test.html">ipsum</a> 
  dolor sit amet, consectetur adipisicing elit. 
  Hic, similique obcaecati quam aspernatur.
</p>
<script>
  $(".trunc").trunc(10);
</script>

But "ipsum" it's not clickable, where is the problem ??

Upvotes: 2

Views: 126

Answers (4)

JohanVdR
JohanVdR

Reputation: 2878

For a CSS only solution you could do this but depends on the width in pixels you want to truncate not on the length of characters.

.trunc {
    text-overflow: ellipsis;
    width: 300px;
    white-space: nowrap;
    overflow: hidden;
}
.trunc:after {
    content: "Read more";
    float: left;
}
.trunc:active:after {
    content: "";
}
.trunc:active {
    text-overflow: auto;
    white-space: normal;
    overflow: visible;
    width: auto;
}

See a js fiddle I did here: http://jsfiddle.net/6SNsn/70/

Upvotes: 0

JohanVdR
JohanVdR

Reputation: 2878

It is clickable but does not behave as a normal link. The truncation script gets only text and not HTML, adds the expand link to show the full text. It adds a read more link with a hash sign. When clicking that link the method expand() shows the full text and that is it. 

function expand() {
   me.text(original);
   return false;
}

function collapse() {
   me.text(truncated + "... ");
   var link = $('<a href="#" id="seemore">See more</a>');
   link.click(expand);
   me.append().append(link).append();
   return false;

}

See here the full script: http://jsfiddle.net/9dsr7/4/

If you want to keep the html when truncating you need to check for opening and closing tags with regular expressions like here: https://github.com/bezoerb/htmlsave/blob/master/lib/htmlsave.js To achieve your goal to keep the HTML preserved you need to take a similar approach. This would require to extend the truncate method you use now.

Upvotes: 0

Akhlesh
Akhlesh

Reputation: 2399

 (function($) {
    $.fn.trunc = function(numWords) {
        this.each(function() {
            var me = $(this);
            var original = me.html();
            var truncated = original.split(" ");
            if (truncated.length <= numWords) {
                return;
            }
            while (truncated.length > numWords) {
                truncated.pop();
            }
            truncated = truncated.join(" ");
            collapse();

            function expand() {
                me.html(original);
                return false;
            }

            function collapse() {
                me.html(truncated + "... ");
                var link = $('<a href="#" id="seemore">See more</a>');
                link.click(expand);
                me.append().append(link).append();
                return false;
            }
        });
    };
     $(".trunc").trunc(10);
        })(jQuery);

Fiddle- http://jsfiddle.net/qdhe5/

Upvotes: 1

Samuel Cook
Samuel Cook

Reputation: 16828

The issue is in the trunc() function on this line:

var original = me.text();

Whereas the code is only getting the text and not the actual HTML. So all HTML tags would be stripped from the sentence, whether it be a link, strong, em, etc.

Upvotes: 2

Related Questions