Results 1 to 1 of 1

Thread: jsjqrssfader

  1. #1
    Join Date
    Mar 2005
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries

    Default jsjqrssfader

    OK, I decided to make my own. This is an rss handler script which produces a smooth fade-in/out action jQuery slideshow of one or more RSS feeds per page. It employs the latest version (1.4) of SimplePie (tm), a freeware PHP RSS parser, so PHP is required to use this script, and PHP 5.3 plus at that (5.2 might work). But it's great for modern servers/hosts that are using the latest PHP. SimplePie is also well known (at least to me) as handling feeds with non-standard characters gracefully and faithfully. I've set this code up to have many options, yet to function as simply as possible 'out of the box', with the web master not really needing to know anything much more than basic CSS, HTML, and the desired feed URL(s).

    The basic syntax is:

    jQuery(function($){ // sample inits (on document load)
    // Usage: $('#target_element_id).jsjqrssfader('url_to_feed', 'optional_target_for_all_links_in_this_feed');
    	$('#cnn').jsjqrssfader('', '_blank');
    	$('#dd').jsjqrssfader('', '_blank');
    The above would establish two feeds on one page, and should be mostly self explanatory. It's the standard jQuery way of initializing an element to an available function. The person setting this up can choose to add, if desired, data- attributes to the target divs, to change the default delay between items, fadespeed, and cache seconds for a given feed's instance, for example:

    <div id="cnn" data-cachetime="1800" data-fadespeed="2000"></div>
    <div id="dd" data-delay="3000"></div>
    The defaults are (delay: 6000 milliseconds, fadespeed: 1000 milliseconds, cachetime: 3600 seconds, which is an hour). But as I say, these are all adjustable. For those wanting more control, the bridge file (htmlbridge.php), which outputs HTML code, can be edited and is well documented. The main things to determine there are the tags allowed in descriptions, and the actual HTML that will be output. (The htmlbridge.php file is in the simplepie folder of the demo.) Part of the power of this particular script is the css, which is also well documented on the demo index.htm page. The script itself queries the target element and it's children to determine the proper height to set for the target element, taking the guess work out of that. Since feeds frequently change, one can never be sure of that value.

    Link to working demo:

    Link to distribution zip:

    Edit: I'm adding optional controls for any given feed. The script will auto generate them and insert them before the item count in the feed's header if the data-insertcontrols attribute or data insertcontrols data point of the target element is set to true. The various functions (goto item number, backward, forward, pause/resume) are also available as datapoints of the the initial element in case anyone wants to create custom controls. However, I'm still testing and documenting the code, so will not be adding it to the official script for a day or so, perhaps longer.

    Edit: OK, mostly done, some drips and drabs of documentation yet to come, these could be left out for now. To see the demo in its full current glory (if you've already been there earlier), make sure to hit the F5 key while viewing.

    There are some miscellaneous css opportunities not yet documented in the source of the index page. I will update them soon and report that here. For now I would like to add that in its current and most likely final first release version I've added an experimental feature that I feel fairly confident will work in most, if not all cases if employed. Custom link tag. Some feeds provide the actual link tag in an element other than <link>, <permalink>, etc. If you are displaying such a feed and would rather the main link for each item be it's actual link rather than it's teaser link, and you know the tag for that, it can now be specified in the initialization. For example:

    jQuery(function($){ // sample inits (on document load)
    // Usage: $('#target_element_id).jsjqrssfader('url_to_feed', 'optional_target_for_all_links_in_this_feed');
    	$('#cnn').data('customlink', {ns: '', tag: 'guid'}).jsjqrssfader('', '_blank');
    	$('#dd').jsjqrssfader('', '_blank');
    This specifies that SimplePie should look to the 'guid' tag in the CNN feed for the actual permalink for each item, rather than in any of the other possible standard tags it might otherwise search for that information. The ns property is the namespace of said tag (usually a URL, if specified) if not specified, left as an empty string as in this case because it wasn't. For more information (though most of the guesswork for this is now done by the code for this script) see:

    As added information here, the only way one would know if such a thing were even possible or desirable for a given feed would be to see what the default permalinks are for that feed (by running it without this script, or at least without this option in this script) and then determining whether or not the raw source code of the feed URL itself presents any better alternative tag(s) for the main item link.

    All taken care of now. Folks that have downloaded from this page previous to May 12th, 2016 (EDT) may want to refresh their browser and download again for the latest version.
    Last edited by jscheuer1; 05-12-2016 at 03:18 AM. Reason: details/clarity/more info
    - John

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate


Posting Permissions

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