SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation How to create the "More" link button to display rest of the text

    i want doing a project then i need something similiar like the "more" link

    I have a long text but i want to display only a certain number of text if i click on the "More" this link it will appear those text that is being hide
    Like those people have a very long comment, Facebook will appear a short text and it use the "More" link to display the rest of the text
    So how to create using JavaScript language ?
    Urgently need help in this!!!!!!!!!!!!!!!!!!!!!!!!!

  2. #2
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's a couple of ways you can do this, depending on the length of the content, how many items are displayed and the type of content it might be better to limit the text through PHP and then request the rest through AJAX.
    Since I guess this is a few steps too far and probably not needed, this is how you do it with pure jQuery.

    (If you aren't using jQuery yet, download it from jquery.com, it improves javascript by a lot and you'll need it to use the following code)

    Imagine your HTML looks like this:

    Code HTML4Strict:
    <div class="item">
     
        This is the first part of the text, the part that will be seen originally.<br/>
        <a href="#" class="read_more">Read More</a><br/>
     
        <span class="more_text">
            This is the extra text, that will be shown after pressing the link above.
        </span>
     
    </div>

    What we're going to do through jQuery is find all 'a' elements with the read_more class, and bind those to an event that will show the span.more_text that is next to it.

    Code JavaScript:
    $(function(){ /* to make sure the script runs after page load */
     
        $('a.read_more').click(function(event){ /* find all a.read_more elements and bind the following code to them */
     
            event.preventDefault(); /* prevent the a from changing the url */
            $(this).parents('.item').find('.more_text').show(); /* show the .more_text span */
     
        });
     
    });

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  3. #3
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, you could take it a step further if you really want to be lazy with the HTML.
    Simply use this HTML:

    Code HTML4Strict:
    <div class="item">
        Text goes in here.
    </div>

    With this jQuery (explanations inside the code again):

    Code JavaScript:
    $(function(){ /* to make sure the script runs after page load */
     
    	$('.item').each(function(event){ /* select all divs with the item class */
     
    		var max_length = 150; /* set the max content length before a read more link will be added */
     
    		if($(this).html().length > max_length){ /* check for content length */
     
    			var short_content 	= $(this).html().substr(0,max_length); /* split the content in two parts */
    			var long_content	= $(this).html().substr(max_length);
     
    			$(this).html(short_content+
    						 '<a href="#" class="read_more"><br/>Read More</a>'+
    						 '<span class="more_text" style="display:none;">'+long_content+'</span>'); /* Alter the html to allow the read more functionality */
     
    			$(this).find('a.read_more').click(function(event){ /* find the a.read_more element within the new html and bind the following code to it */
     
    				event.preventDefault(); /* prevent the a from changing the url */
    				$(this).hide(); /* hide the read more button */
    				$(this).parents('.item').find('.more_text').show(); /* show the .more_text span */
     
    			});
     
    		}
     
    	});
     
     
    });

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, just want to ask the javascript code can don't use jquery like pure javascript...cause i need to hide long text and show a shorter version ...so i have the below cause...what code should i add to count the text so that the extra words are hide and a show more link is presented to user.
    function ShowHide(divId)
    {
    if(document.getElementById(divId).style.display == 'none')
    {document.getElementById(divId).style.display='block';}
    else{document.getElementById(divId).style.display = 'none';}
    }
    </script>
    i need something like what you comment in your second comment but i cannot use jquery

  5. #5
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why can you not use jQuery, there is absolutely no reason not to.

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because i am going to use this in the infowindow as i doing project related to map, and i am not sure how to use the jquery into the infowindow....or do you know how to incooperate with the infowindow

  7. #7
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, I haven't tried using jQuery inside google maps before so sadly enough I won't be able to help you with that (doesn't it just work if jQuery is included on the page as well?).

    I also never write Javascript without jQuery, so I wouldn't know how to do it in pure Javascript either

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh okay
    but i saw this code but it don't work for firefox
    <script language="JavaScript">
    function truncate() {
    var len = 100;
    var p = document.getElementById('truncateMe');
    if (p) {
    var trunc = p.innerHTML;
    if (trunc.length > len) {


    trunc = trunc.substring(0, len);
    trunc = trunc.replace(/\w+$/, '');

    /* Add an ellipses to the end and make it a link that expands
    the paragraph back to its original size */
    trunc += '<a href="#" ' +
    'onclick="this.parentNode.innerHTML=' +
    'unescape(\''+escape(p.innerHTML)+'\');return false;">' +
    '<span style="font-size: 10px;">[ more ... ]</span><\/a>';
    p.innerHTML = trunc;



    }



    }
    }
    </script>


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
  •