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>
View all entries in this series: PaulGrenier-JQuery for Everyone»
Entries in this series:
- JQuery for Everyone: Accordion Left Nav
- JQuery for Everyone: Print (Any) Web Part
- JQuery for Everyone: HTML Calculated Column
- JQuery for Everyone: Dressing-up Links Pt1
- JQuery for Everyone: Dressing-up Links Pt2
- JQuery for Everyone: Dressing-up Links Pt3
- JQuery for Everyone: Cleaning Windows Pt1
- JQuery for Everyone: Cleaning Windows Pt2
- JQuery for Everyone: Fixing the Gantt View
- JQuery for Everyone: Dynamically Sizing Excel Web Parts
- JQuery for Everyone: Manually Resizing Web Parts
- JQuery for Everyone: Total Calculated Columns
- JQuery for Everyone: Total of Time Differences
- JQuery for Everyone: Fixing Configured Web Part Height
- JQuery for Everyone: Expand/Collapse All Groups
- JQuery for Everyone: Preview Pane for Multiple Lists
- JQuery for Everyone: Preview Pane for Calendar View
- JQuery for Everyone: Degrading Dynamic Script Loader
- JQuery for Everyone: Force Checkout
- JQuery for Everyone: Replacing [Today]
- JQuery for Everyone: Whether They Want It Or Not
- JQuery for Everyone: Linking the Attachment Icon
- JQuery for Everyone: Aspect-Oriented Programming with jQuery
- JQuery for Everyone: AOP in Action - loadTip Gone Wild
- JQuery for Everyone: Wiki Outbound Links
- JQuery for Everyone: Collapse Text in List View
- JQuery for Everyone: AOP in Action - Clone List Header
- JQuery for Everyone: $.grep and calcHTML Revisited
- JQuery for Everyone: Evolution of the Preview
- JQuery for Everyone: Create a Client-Side Object Model
- JQuery for Everyone: Print (Any) Web Part(s) Plugin
- JQuery for Everyone: Minimal AOP and Elegant Modularity
- JQuery for Everyone: Cookies and Plugins
- JQuery for Everyone: Live Events vs. AOP
- JQuery for Everyone: Live Preview Pane
- JQuery for Everyone: Pre-populate Form Fields
- JQuery for Everyone: Get XML List Data with OWSSVR.DLL (RPC)
- Use Firebug in IE
- JQuery for Everyone: Extending OWS API for Calculated Columns
- JQuery for Everyone: Accordion Left-nav with Cookies Speed Test
- JQuery for Everyone: Email a List of People with OWS
- JQuery for Everyone: Faster than Document.Ready
- jQuery for Everyone: Collapse or Prepopulate Form Fields
- jQuery for Everyone: Hourly Summary Web Part
- jQuery for Everyone: "Read More..." On a Blog Site
- jQuery for Everyone: Slick Speed Test
- jQuery for Everyone: The SharePoint Game Changer
- JQuery For Everyone: Live LoadTip
Thanks so much, this is great. How does one go about determining the WebPartWPQ number associated with a web part?
Either Firebug the blog to see the webpart zone, or do a view source on the page and you’ll see it listed.
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!
Can you please post the example Blog site URL so I can view it?
@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.
@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?
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
@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.
there should not be any need to pick a web part number
div.ms-PostBody should suffice ??
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!!!
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!
@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.
Thank you!! Any comments on my post#11?
@Jephthah,
I actually didn’t want to do this, but here you go :)
Great Work!
BTW, I could only get post 14 to work by removing rel=”nofollow”.
Thank you to both. It started working after I removed that as Robin mentioned
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
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
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.
@James,
Try this (changing the h = variable will change the threshold for the read more link):
Thank you! This works great! Exactly what I needed!
This is great, thank you
Is there a way when you click read more that you see the top of the post containg the Title?
Thanks
@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.
@ 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
Hi there,
Is it possible to use this script on a announcement list? That would be great!
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… :)
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