1,804 articles and 14,561 comments as of Monday, February 7th, 2011

EndUserSharePoint has combined resources with NothingButSharePoint.com. You can now find End User (Mark Miller), Developer (Jeremy Thake) and IT Pro SharePoint (Joel Oleson) content all in one place!

This site is a historical archive and is no longer being updated. Please update your favorites, bookmarks and RSS feeds.

NothingButSharePoint.com
Thursday, June 4, 2009

jQuery for Everyone: “Read More…” On a Blog Site

Based on Walter’s comment in a previous article, I applied the “Read more…” link concept to a standard WSS Blog site.

It only seemed appropriate to make you click “Read more…” to get the code :)

<script type="text/javascript">
if(typeof jQuery=='undefined'){
	var jQPath = 'https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'
	document.write('<script src="',jQPath,'" type="text/javascript"><\/script>');
}
</script>
<style type="text/css">
.collapseText 	{height:26px;overflow:hidden}
</style>
<script type="text/javascript">
function collapseText(){
	var html = "<div class='ms-PostFooter'><a class='expand' href='#'>Read more...</a><div>";
	$("div.ms-PostBody","#WebPartWPQ1").addClass("collapseText")
		.after(html);
	$("a.expand","#WebPartWPQ1").click(function(event){
		$(event.target).parent().hide().prev().removeClass("collapseText");
		$("html,body").scrollTop(event.pageY);
		return false;
	});
}
$(function() {
	collapseText();
});
</script>

Paul Grenier

View all entries in this series: PaulGrenier-JQuery for Everyone»
Entries in this series:
  1. JQuery for Everyone: Accordion Left Nav
  2. JQuery for Everyone: Print (Any) Web Part
  3. JQuery for Everyone: HTML Calculated Column
  4. JQuery for Everyone: Dressing-up Links Pt1
  5. JQuery for Everyone: Dressing-up Links Pt2
  6. JQuery for Everyone: Dressing-up Links Pt3
  7. JQuery for Everyone: Cleaning Windows Pt1
  8. JQuery for Everyone: Cleaning Windows Pt2
  9. JQuery for Everyone: Fixing the Gantt View
  10. JQuery for Everyone: Dynamically Sizing Excel Web Parts
  11. JQuery for Everyone: Manually Resizing Web Parts
  12. JQuery for Everyone: Total Calculated Columns
  13. JQuery for Everyone: Total of Time Differences
  14. JQuery for Everyone: Fixing Configured Web Part Height
  15. JQuery for Everyone: Expand/Collapse All Groups
  16. JQuery for Everyone: Preview Pane for Multiple Lists
  17. JQuery for Everyone: Preview Pane for Calendar View
  18. JQuery for Everyone: Degrading Dynamic Script Loader
  19. JQuery for Everyone: Force Checkout
  20. JQuery for Everyone: Replacing [Today]
  21. JQuery for Everyone: Whether They Want It Or Not
  22. JQuery for Everyone: Linking the Attachment Icon
  23. JQuery for Everyone: Aspect-Oriented Programming with jQuery
  24. JQuery for Everyone: AOP in Action - loadTip Gone Wild
  25. JQuery for Everyone: Wiki Outbound Links
  26. JQuery for Everyone: Collapse Text in List View
  27. JQuery for Everyone: AOP in Action - Clone List Header
  28. JQuery for Everyone: $.grep and calcHTML Revisited
  29. JQuery for Everyone: Evolution of the Preview
  30. JQuery for Everyone: Create a Client-Side Object Model
  31. JQuery for Everyone: Print (Any) Web Part(s) Plugin
  32. JQuery for Everyone: Minimal AOP and Elegant Modularity
  33. JQuery for Everyone: Cookies and Plugins
  34. JQuery for Everyone: Live Events vs. AOP
  35. JQuery for Everyone: Live Preview Pane
  36. JQuery for Everyone: Pre-populate Form Fields
  37. JQuery for Everyone: Get XML List Data with OWSSVR.DLL (RPC)
  38. Use Firebug in IE
  39. JQuery for Everyone: Extending OWS API for Calculated Columns
  40. JQuery for Everyone: Accordion Left-nav with Cookies Speed Test
  41. JQuery for Everyone: Email a List of People with OWS
  42. JQuery for Everyone: Faster than Document.Ready
  43. jQuery for Everyone: Collapse or Prepopulate Form Fields
  44. jQuery for Everyone: Hourly Summary Web Part
  45. jQuery for Everyone: "Read More..." On a Blog Site
  46. jQuery for Everyone: Slick Speed Test
  47. jQuery for Everyone: The SharePoint Game Changer
  48. JQuery For Everyone: Live LoadTip
 

Please Join the Discussion

28 Responses to “jQuery for Everyone: “Read More…” On a Blog Site”
  1. Walter says:

    Thanks so much, this is great. How does one go about determining the WebPartWPQ number associated with a web part?

  2. eric says:

    Either Firebug the blog to see the webpart zone, or do a view source on the page and you’ll see it listed.

  3. Jephthah says:

    Hello – Is this something that will make every Blog post to have few lines with a “Read More …” to read the whole article. If so I’ve been looking for it for sometime. I’ve tried adding a CEWP to and post your code. But nothing seem to work. What is that I am missing. Any help would be great

    Thank you!

  4. Jephthah says:

    Can you please post the example Blog site URL so I can view it?

  5. AutoSponge says:

    @Walter,

    On a standard blog site, the blog web part is #1. Anything you add to the site will come after #1, so it should not need modification unless you did some serious editing of the blog template. However, this was tested on WSS, not MOSS and the templates may differ.

  6. AutoSponge says:

    @Jephthah,

    Yes, I did intend for this to work on all blog articles on the default page of a blog site. In my tests, that’s what happened.

    The site I used is not public, so I can’t show it. Do you have WSS or MOSS? Are you using a standard blog site template?

  7. Jephthah says:

    MOSS. I’ve few CEWP on the blog site. What I Am wondering is do I need to add “Read More …” text on my blog post? or what do I need to do beside creating a CEWP and posting the code? The instructions are not very clear. Please help

  8. AutoSponge says:

    @Jephthah,

    You don’t need to change your blog articles. The CEWP and the code should do everything. I don’t have a MOSS blog to look at but I think they’re the same. So the only thing to check is to see if your content area is still id=’WebPartWPQ1′. Or see if one of the other scripts is interfering with it.

  9. bazztrap says:

    there should not be any need to pick a web part number

    div.ms-PostBody should suffice ??

  10. Jephthah says:

    I’ve found the Post content is posted under the Id=WebPartWPQ6. So, once I changed it worked! This is very helpful little script! One more question, what do I need to do to make the first 5 lines or paragraph shown and the “Read more” is shown immediately after those lines? This way readers get a preview of the content. This is how most other blogs provide the read more… So wondering if that would be feasible!?

    Thank you!!!

  11. Jephthah says:

    Currently, when this is implemented the user gets 1 expand option. So, it is possible to extend the script to expand and collapse? i.e. after the reader completes reading he’ll click “close …” and the expanded area contracts to post expansion view. This will make it really cool and interactive to choose and read and collapse much like an accordion but for the Blog posts.

    Thank you!

  12. AutoSponge says:

    @bazztrap,

    You’re right, I should not have forced the WP# in the code, but I didn’t think it was possible to have a Blog site without the blog being WP#1.

    @Jephthah,

    The height of the article is set in the CSS: {height:26px;overflow:hidden}. Change the px height there until it fits your needs. If you use an em size, I think it will scale with your font better.

  13. Jephthah says:

    Thank you!! Any comments on my post#11?

  14. AutoSponge says:

    @Jephthah,

    I actually didn’t want to do this, but here you go :)

    
    
    
    
    
  15. Robin says:

    Great Work!
    BTW, I could only get post 14 to work by removing rel=”nofollow”.

  16. Jephthah says:

    Thank you to both. It started working after I removed that as Robin mentioned

  17. larry says:

    I love all the work you have done. I continually come back to see if you have posted anything new. I have a javascript that reads and writes RSS feeds. currently I have it pointed to a SP announcement post. I like the functionality and formatting it offers. As you know many announcements are much to long, just like a blog. so I have been trying to create something like this so only the first couple of lines are displayed. When I came across this script I thought it was in the bag. I am not sure what I am doing wrong but the onclick event is not firing. It writes the Read more.. to the body of each announcement, but when I click read more.. nothing happens, no error, no event.

    I know it would probable be easier to see both scripts so here they are:
    RSS reader – http://8201.freesharepoint2007.com/Lists/Announcements/DispForm.aspx?ID=5

    your script with minor changes to fit this:
    http://8201.freesharepoint2007.com/Lists/Announcements/DispForm.aspx?ID=6

  18. Tanja says:

    Thank you so much for this jQuery
    You just made my day!!!

    After I searched so long for such a read more feature. I’m just happy now.

    ^___________________________^

    With best regards,
    Tanja

  19. James says:

    This is working great! Thanks for the post. Is there any way to set a condition based on height? Specifically, show the Read More/Collapse if the posting is longer than 100px? I am new to JQuery and can’t seem to get it to accept the variable in the condition.

  20. AutoSponge says:

    @James,

    Try this (changing the h = variable will change the threshold for the read more link):

    
    if(typeof jQuery=='undefined'){
    	var jQPath = 'https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'
    	document.write('');
    }
    
    .collapseText 	{height:26px;overflow:hidden}
    
    function collapseText(){
    	var h = 100,
    		html = "Read more...",
    		divs = $("div.ms-PostBody"),
    		i = divs.length, d;
    	while (i--) {
    		d = divs[i];
    		if (d.offsetHeight > h) {
    			$(d).addClass("collapseText").after(html);
    		}
    	}
    	$("a.expand").click(function(event){
    		$(event.target).parent().hide().prev().removeClass("collapseText");
    		$("html,body").scrollTop(event.pageY);
    		return false;
    	});
    }
    $(function() {
    	collapseText();
    });
    
  21. James says:

    Thank you! This works great! Exactly what I needed!

  22. John says:

    This is great, thank you

  23. John says:

    Is there a way when you click read more that you see the top of the post containg the Title?
    Thanks

  24. AutoSponge says:

    @John,

    If you use something other than the default CSS, you may need to change this line:
    .collapseText {height:26px;overflow:hidden}

    Play with the height number until it looks right.

  25. John says:

    @ AutoSponge

    Thank you. Yes I increased the height to reveal more rows OK. But when I click Read More I see the Body text below these rows, so you lose sight of the Title and the first few rows.
    J

  26. Sietse van der Haar says:

    Hi there,

    Is it possible to use this script on a announcement list? That would be great!

  27. Sietse says:

    hi there,

    I want to use the read more functionality on a announcement list. How can i make this possible?
    I’m not really a progammer… :)

  28. Sandhya.P says:

    I tried adding the content editor webpart below the post webpart in a new sharepoint blog site. It works very well when i change id to Id from Id=WebPartWPQ1 to Id=WebPartWPQ6. But after testing this out in the new site I wanted to implement the same in the actual blog site where I already have an the following

    1. an image webpart linked to an image
    2. a contetn editor webpart with some links to blogging policy
    3. Blog posts webpart

    Now I tried adding the CEWP webpart in this blog site below posts webpart. It doesnt adda ny read more link and basically I see no change in the site. But when I tried it in a new blog site it worked fine. Why not here..Can somebody help me out. in this blog site i have 33 posts already published and I have limited the number of items to display as 1-10 in a single page. Is this causing a problem. Also what is WebPartWPQ1? how do i check for this or what shud i make changes in the code. Is it not working becuase I am using it in an already existing blog site?

    Sandhya


Notify me of comments to this article:


Speak and you will be heard.

We check comments hourly.
If you want a pic to show with your comment, go get a gravatar!