Add ajax RSS pausing scroller to your forum

[Mick.]

Here's a summary of the features of this script:

    * Uses the gAjax RSS Displayer engine and Google Ajax Feed API to host/cache the desired RSS feeds, so you don't have to install or host anything on your own server.
    * Specify multiple RSS feeds to display, with the results intermixed.
    * Sort the results either by "date", "title", or a custom "label" assigned to each feed (ie: "SimpleMachines.org" then "SimpleDesk.net").



Demo: http://www.bluedevilcustoms.com/index.php?action=forum

Download the files and images attached here and upload them to the root where SMF is installed.
#  gfeedfetcher.js 
# gajaxscroller.js

FIRST!
You need a Google API key...... http://code.google.com/apis/maps/signup.html

To use in a portal "Bottom HTML" block:

Code Select Expand

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR GOOGLE API KEY GOES HERE"></script>

<script type="text/javascript" src="gfeedfetcher.js"></script>

<script type="text/javascript" src="gajaxscroller.js">

/***********************************************
* gAjax RSS Pausing Scroller- (c) Dynamic Drive (www.dynamicdrive.com)
* Requires "gfeedfetcher.js" class
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type="text/css">

.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;
}

.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}

#example2{ /*Demo 2 main container*/
width: 925px;
height: 110px;
border: 1px dashed black;
padding: 4px;
background-color: #242424;
}

#example2 div ul{ /*Demo 2 UL container*/
margin: 0;
padding-left: 18px;
}

#example2 div ul li{ /*Demo 2 LI that surrounds each entry*/
margin-bottom: 4px;
}



code{ /*CSS for insructions*/
color: red;
}

</style>

<script type="text/javascript">

var socialfeed=new gfeedpausescroller("example2", "example2class", 4000, "")
socialfeed.addFeed("SimpleMachines.org", "http://www.simplemachines.org/community/index.php?type=rss;action=.xml") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("SimpleDesk.net", "http://www.simpledesk.net/community/.xml/type,rss/") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime") //show the specified additional fields
socialfeed.setentrycontainer("li") //Display each entry as a DIV
socialfeed.filterfeed(20, "label") //Show 15 entries, sort by label
socialfeed.entries_per_page(5)
socialfeed.init() //Always call this last

</script>

Replace:

Code Select Expand

YOUR GOOGLE API KEY GOES HERE
with your own Google API key


In the codes, you can set width, height, RSS URL's.




For those not using portals with RC3 Only....

Open your /Themes/default/index.template.php

Find:

Code Select Expand

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];

Add before:

Code Select Expand

echo'
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR GOOGLE API KEY GOES HERE"></script>

<script type="text/javascript" src="gfeedfetcher.js"></script>

<script type="text/javascript" src="gajaxscroller.js">

/***********************************************
* gAjax RSS Pausing Scroller- (c) Dynamic Drive (www.dynamicdrive.com)
* Requires "gfeedfetcher.js" class
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type="text/css">

.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;
}

.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}

#example2{ /*Demo 2 main container*/
width: 925px;
height: 110px;
border: 1px dashed black;
padding: 4px;
background-color: #ffffff;
}

#example2 div ul{ /*Demo 2 UL container*/
margin: 0;
padding-left: 18px;
}

#example2 div ul li{ /*Demo 2 LI that surrounds each entry*/
margin-bottom: 4px;
}



code{ /*CSS for insructions*/
color: red;
}

</style>';


Open: Themes/default/BoardIndex.template.php

Find at the end:

Code Select Expand

echo '
</div>
</div></div>
<span class="lowerframe"><span></span></span>';


Add before:

Code Select Expand

echo'
<script type="text/javascript">

var socialfeed=new gfeedpausescroller("example2", "example2class", 4000, "")
socialfeed.addFeed("SimpleMachines.org", "http://www.simplemachines.org/community/index.php?type=rss;action=.xml") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("SimpleDesk.net", "http://www.simpledesk.net/community/.xml/type,rss/") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime") //show the specified additional fields
socialfeed.setentrycontainer("li") //Display each entry as a DIV
socialfeed.filterfeed(20, "label") //Show 15 entries, sort by label
socialfeed.entries_per_page(5)
socialfeed.init() //Always call this last

</script>';


Credits: Dynamic Drive

[TheListener]

Can the admins choose the number of items to show?

[Mick.]

Can the admins choose the number of items to show?

Yep.

Code Select Expand


<script type="text/javascript">

var socialfeed=new gfeedpausescroller("example2", "example2class", 4000, "")
socialfeed.addFeed("SimpleMachines.org", "http://www.simplemachines.org/community/index.php?type=rss;action=.xml") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("SimpleDesk.net", "http://www.simpledesk.net/community/.xml/type,rss/") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime") //show the specified additional fields
socialfeed.setentrycontainer("li") //Display each entry as a DIV
socialfeed.filterfeed(20, "label") //Show 15 entries, sort by label
socialfeed.entries_per_page(5)
socialfeed.init() //Always call this last

</script>

In here you can change the speed from 4000 to 5000 or 6000 or 3000.  (theyre seconds).

Code Select Expand

var socialfeed=new gfeedpausescroller("example2", "example2class", 4000, "")

# of entries:

Code Select Expand

socialfeed.entries_per_page(5)
Change 5 to whatever.

[TheListener]

Have got this working at www.mkaware.co.uk

However

The width needs to be minimised and there is no heading.

[Mick.]

Im at the docs office now.   I'll post back once I get home.

[TheListener]

Rather you than me bud.

No rush.

[Mick.]

Find this in your code.... change accordingly.

Code Select Expand

#example2{ /*Demo 2 main container*/
width: 925px;
height: 110px;
border: 1px dashed black;
padding: 4px;
background-color: #242424;
}

[TheListener]

Have tried changing the width.

It doesn't change the width of the scroller tho just the forums theme.

[Mick.]

Have tried changing the width.

It doesn't change the width of the scroller tho just the forums theme.

Wrong place.   The code in my previews post is the one in the rss code in reply #1.

Notice the code has a .css code too?

[TheListener]

That was the one I changed BD.

[Mick.]

That was the one I changed BD.

Make sure you do a hard refresh of your browser.   Hit F5 twice.

[TheListener]

Nope no difference in the scroller box despite two F5s and a file cache empty.

[Mick.]

This changes the width of the scroller...

Code Select Expand

width: 925px;

I just changed mine to fit a picture next to it.

[TheListener]

Gonna try something.

What was the width ya used on yours?

[Mick.]

Mine is at 815px at the moment.

[TheListener]

OK have changed mineto 815 from 925.

No difference.

www.mkaware.co.uk

[Mick.]

OK have changed mineto 815 from 925.

No difference.

www.mkaware.co.uk

Post a copy of the code here....

[TheListener]

Here ya go bud.

[Mick.]

Here ya go bud.

Oh?  you didnt use the "block" method?

[TheListener]

Block Method?