ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

[SOLUTION] Looking for a way to count Magpie plugin items for use with jQuery Show/Hide

August 21, 2008 2:55am

Subscribe [2]
  • #1 / Aug 21, 2008 2:55am

    Shane Robinson

    55 posts

    The Magpie plugin is great and so very easy to use. I’d like to dress up the output a bit and am trying to use jQuery to Show/Hide the Item’s Summary. So basically when the template loads there will be a list of the 10 most recent titles from a given RSS feed. Clicking on the titles will Show/Hide/Toggle the Summary tag which is initially hidden.

    That requires that each Item has an unique ID that I can target when clicking the Title. If this were a regular weblog:entries tag I would just use {entry_id}.

    Is anyone doing this using Magpie or another RSS parser in EE templates?

  • #2 / Aug 21, 2008 3:39am

    iseem

    41 posts

    not sure, but maybe id=“entry{count}”

    also, perhaps you could use the jQuery next() method without any id. Something like:

    $(document).ready(function(){            
        $('.summary').hide();
        $('.title').click(function() {
            $(this).next().toggle();
               });
         });
  • #3 / Aug 21, 2008 11:14am

    Shane Robinson

    55 posts

    Thanks iseem!!

    Your suggestion of using the next() function put me in the right direction. Google helped with the rest!!

    For those interested in the solution, here’s the full code that works. No attention paid to CSS styling yet except the pointer.

    NOTE: You’ll obviously have to change the path to your jQuery file and replace the URL of the feed you want to use.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html >
    <head>
        <title>RSS Slider Test</title>
        <meta name="generator" content="BBEdit 8.7" />
    
    [removed][removed]
    
    <!-- jquery for this page -->
    [removed]
    $(document).ready(function(){
        $('.items li p').hide();
        $(".items li h3").click(function() {
            $(this).next("p").slideToggle();
        });
    });
    [removed]
    
    <style type="text/css">
    .items h3 { cursor:pointer; }
    </style> 
    
    </head>
    <body>
    
    {exp:magpie url="http://feeds.feedburner.com/BareFeetBlog" limit="10" refresh="720"}
    <ul>
    <div class="items">
    {items}
    <li><h3>{title}</h3><p>{description}</li><br />
    {/items}<br />
    </div><br />
    </ul><br />
    {/exp:magpie}</p>
    
    <p></body><br />
    </html>

  • #4 / Aug 22, 2008 12:52am

    iseem

    41 posts

    You’re welcome! Glad you got it working. -i

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases