SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Truncating if more than 'n' links in 1 div...?

    I have the following markup:

    Code:
    <div class="main_class">   <span class="foobar">Foobar</span>
    
    
       <div class="content">
    
          <a title="Foobar1" href="/link1">Foobar1</a>
    
    
          , 
    
          <a title="Foobar2" href="/link2">Foobar2</a>
    
    
    
       </div>
    
    
    
    </div>
    I'm trying to figure out a way to truncate if 'N' number of links exist within .content. I have a function that helps me with trimming on word boundaries of individual stings, but I'm kind of lost when it comes to trimming individual links. Do any of you have any links to some tutorials that teach how to do this? How is this done? (I'm using jQuery with all this.)

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    I don't know the answer to this, but for fun, tried it with CSS. The code in red hides all links after number 10:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style media="all">
    .content a {text-decoration: none;}
    .content a:after {content: ", ";}
    .content a:nth-child(n+11){
      display:none;
    }
    </style>
    	
    </head>
    <body>
    
    <div class="content">
    <a href="#">Link1</a> <a href="#">Link2</a> <a href="#">Link3</a> <a href="#">Link4</a> <a href="#">Link5</a> <a href="#">Link6</a> <a href="#">Link7</a> <a href="#">Link8</a> <a href="#">Link9</a> <a href="#">Link10</a> <a href="#">Link11</a> <a href="#">Link12</a> <a href="#">Link13</a> <a href="#">Link14</a> <a href="#">Link15</a> <a href="#">Link16</a> <a href="#">Link17</a> <a href="#">Link18</a> <a href="#">Link19</a> <a href="#">Link20</a> 
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for the late reply, Ralph... Here's what I'm trying to do:

    I have multiple TDs and inside each TD are various pieces of information, but essentially consist 1 title link, 1 or 2 sub-links, and then multiple sub-sub-links. (For example, consider a product directory that displays a product name, it's reps, and the items of servicing a given product handles.)

    Here's what 1 TD element basically looks like:

    Widget 1
    John Doe, Jane Doe, Stephen Spielburg, Tom Hanks, Bill Clinton
    Service 1 Service 1
    Service 2 Service 2
    Service 3 Service 3

    The problem I'm having is when something like this occurs:

    Widget N
    John Doe, Jane Doe, Stephen Spielberg, Tom Hanks, Bill Clinton, Operah Winfrey, Jane Fonda, Mark Hamil, Harrison Ford, Hugh Laurie, Samual Jackson, Olivia Wilde, Marilyn Monroe, Brad Pitt, Gary Oldman
    Service 1 Service 1
    Service 2 Service 2
    Service 3 Service 3

    What I would like is a means to click on a tiny '+' sign-link at the end of, say, the third name whereby when the + sign is toggled, the rest of the names would be exposes inside the div they reside in like so:

    Widget N
    John Doe, Jane Doe, Stephen Spielberg+ <-- Clicking on this would do the following below...
    Service 1 Service 1
    Service 2 Service 2
    Service 3 Service 3

    Widget N
    John Doe, Jane Doe, Stephen Spielberg, Tom Hanks, Bill Clinton,
    Operah Winfrey, Jane Fonda, Mark Hamil, Harrison Ford,
    Hugh Laurie, Samual Jackson, Olivia Wilde, Marilyn Monroe,
    Brad Pitt, Gary Oldman

    Service 1 Service 1
    Service 2 Service 2
    Service 3 Service 3

    I can handle the CSS stuff because I know already how I need to change their floats, etc. The part I'm struggling with is the jQuery to limit the number of links.

    Here's the general markup of a single TD element:
    Code:
    <td class="col-1 col-first">   <div class="views-field views-field-title">
          <a href="" title="">Widget N</a>
       </div>   
       <div class="views-field views-field-field-product-contacts">
          <a href="" title="">John Doe</a>
          <a href="" title="">Jane Doe</a>
          <a href="" title="">Stephen Spielberg</a>
          <a href="" title="">Tom Hanks</a>
          ...
       </div>
    
    
       <div class="views-field views-field-field-product-services-left">
          <a href="" title="">Service 1</a>
          <a href="" title="">Service 2</a>
          <a href="" title="">Service 3</a>
       </div>
    
    
       <div class="views-field views-field-field-product-services-right">
          <a href="" title="">Service 1</a>
          <a href="" title="">Service 2</a>
          <a href="" title="">Service 3</a>
       </div>
    </td>
    Here's where I am with the jQuery:

    Code:
            $('.views-view-grid td').each(function(){                                                                                         //With each TD element...
                total_width = $(this).width();                                                                                                    //Get the width of the given TD container, which currently totals to 218px each.
                $(this).find('.views-field-title').find('a').text(truncate($(this).find('.views-field-title').find('a').text(),20));//Truncate the title to a max number of characters. (The truncate function is left out of this.)
    
                //Now let's limit the number of names we output on the page inside each TD...
                if($(this).find('.views-field-field-product-contacts').find('a').length > 3){                                          //If we have more than 3...
                    //$(this).text(truncate($(this).text(),15));                                                                             //Will eventually truncate the names. Again, truncate() is left out from this Sitepoint post for sake of simplicity.
    
                    var parts = $(this).find('.views-field-field-product-contacts .field-content').text().split(','),i,l;
                    
                    for (i = 0, l = parts.length; i < l; i += 2){
                        if(i<2){
                            console.log(parts[i]);                                                                                                 //This gives me each name in its entirety.
                        }else{
                            if(i=4){
                                console.log('...');                                                                                                  //What this is supposed to do is show me when a group of names has more then 3.
                                break;
                            }
                        }
                    }
    
    
                    //This is where I was before the above FOR loop. I tried to use your idea of nth targeting, and it kind of worked, but I thought that the FOR approach would be more concise (I might be wrong?)
                    //$(this).find('.views-field-field-product-isu-contacts').find('div.field-content').addClass('more');
                    //$(this).find('.views-field-field-product-isu-contacts').find('div.field-content a:nth-child(3)').text('+');
                    //$(this).find('.views-field-field-product-isu-contacts').find('div.field-content a:nth-child(3)').attr('href',$(this).find('.views-field-title').find('a').attr('href'));
                    //$(this).find('.views-field-field-product-isu-contacts').find('div.field-content a:nth-child(3)').attr('class','final');
                }
    
                //Services Left...
                $(this).find('.views-field views-field-field-product-services-left').find('a').each(function(){
                    $(this).text(truncate($(this).text(),10));
                });
        
                //Services Right...
                $(this).find('.views-field views-field-field-product-services-right').find('a').each(function(){
                    $(this).text(truncate($(this).text(),10));
                });
            });
        });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •