1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How not to slice link displayed in <p> element using jquery?

Discussion in 'jQuery' started by timmack, Nov 28, 2013.

  1. #1
    Hello all!

    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 displayproperly are as follows:

    1.If you are entering long comments with several paragraphs and there's link in it

    2. Mostly, if the link is located at the middle of the first paragraph, the link is not displayed properly.

    3. If you enter long string link

    4. 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...
    $(function(){
    
        var minimized_elements = $('p.minimize');
       
        minimized_elements.each(function(){
            var t = $(this).text();
            if(t.length < 126) return;
           
            $(this).html(
                t.slice(0,126)+'<span>... </span><a href="#" class="more">More</a>'+
                '<span style="display:none;">'+ t.slice(126,t.length)+' <a href="#" class="less">Less</a></span>'
               
            );
           
        });
       
        $('a.more', minimized_elements).click(function(event){
         
            event.preventDefault();
            $(this).hide().prev().hide();
            $(this).next().show();
                       
        });
       
        $('a.less', minimized_elements).click(function(event){
         
            event.preventDefault();
            $(this).parent().hide().prev().show().prev().show();
         
        });
    
    });
    Code (markup):
     
    timmack, Nov 28, 2013 IP