SmoothScroll Content Provider Integration Example

Website Owner News From Moreover.com

[You need a java-enabled browser for this to work.]
Because SmoothScroll features a JavaScript interface that allows the scrolling text to be set dynamically, it is ideal for integrating with an online headline content provider, such as Morover.com. For this particular example, I have chosen to use the Website Owner's News Feed, since this is a site devoted to webmasters. However, if you visit their website, you will see that there are many, many categories available. For practically every website that is devoted to a particular topic for which there are newsworthy events happening, there is a category of news feeds that will be appropriate for enhancing that site, whatever it is devoted to whether it be sports, entertainment, finance, programming, etc. They even have news feeds devoted to particular countries and continents, such as UK and Asia. There are about 250 categories available, including an offbeat news category. So, it should not be difficult to find a good match for your site. I have also put a similar feed devoted to American Football on my NFLPicker webiste.

Here are the steps you need to take to integrate SmoothScroll with the moreover.com online content provider shown here: 

1)     Click here to sign up (free) and get the html from
       the content provider for the particular newsfeed you are interested in,
       i.e. Internet News, American Football News, etc.

2)     Add the html to put SmoothScroll on your page just below the <body> tag:




3)    Modify the code you got from Step 1 as follows:

ADD THE FOLLOWING LINE JUST BELOW THE LINE THAT READS 
"var time = new Array(global_article.length)":    

    var smoothscrolltext = new String('');


ADD THE FOLLOWING LINE JUST BELOW THE LINE THAT READS
"// Print a new category heading"

    smoothscrolltext += '\n';


ADD THE FOLLOWING LINES JUST BELOW THE LINE THAT READS
"// Print out the headline"
 
    strLink= new String(global_article[counter].url);
	strLink = strLink.substring(0, strLink.indexOf('TARGET')-2);
	smoothscrolltext += '\n';
    smoothscrolltext += '\n';
	var nNumCharsPerLine = 35; //modify this if you make the applet wider or narrower
	strText = new String(global_article[counter].headline_text);

	if (strText.length <= nNumCharsPerLine){
		smoothscrolltext += '<u>'+strText + '</u>\n';
		smoothscrolltext += '\n';
		smoothscrolltext += '\n';

	} else if (strText.length <= nNumCharsPerLine *2){ //headline is too long to fit on the 1st line, so we break it over the 1st and 2nd	
		var nLastSpace = strText.lastIndexOf(' ', nNumCharsPerLine);
		smoothscrolltext += '<u>'+strText.substring(0, nLastSpace) + '\n';
		smoothscrolltext += strText.substring(nLastSpace+1, strText.length) + '</u>\n';
		smoothscrolltext += '\n';
	} else {
		var nLastSpace = strText.lastIndexOf(' ', nNumCharsPerLine);
		smoothscrolltext += '<u>'+strText.substring(0, nLastSpace) + '\n';
		var nLastSpaceNextLine = strText.lastIndexOf(' ', nNumCharsPerLine *2);
		smoothscrolltext += strText.substring(nLastSpace+1, nLastSpaceNextLine) + '\n';
		smoothscrolltext += strText.substring(nLastSpaceNextLine+1, strText.length) + '</u>\n';

	}


	smoothscrolltext += '';

ADD THE FOLLOWING LINE JUST BELOW THE LINE THAT READS
"// Print out the source"

	smoothscrolltext += 'Source: ' +global_article[counter].source+ '\n';


ADD THE FOLLOWING LINE JUST BELOW THE LINE THAT READS
"time[counter].setHours(time[counter].getHours() - (time[counter].getTimezoneOffset() / 60 ))"

    smoothscrolltext += time[counter].toString().substring(0,10) + '\n';


ADD THE FOLLOWING JUST BELOW THE LINE THAT READS      
"document.writeln(""
AND JUST ABOVE THE LINE THAT READS
"}//End of article loop"

		smoothscrolltext+='\n';
		smoothscrolltext+= '\n';

ADD THE FOLLOWING LINES JUST BELOW THE LINE THAT READS
"}//End of article loop"

	document.SmoothScroll.setText(smoothscrolltext);
	document.SmoothScroll.go();


3)   Optionally remove the code that puts the headlines on your page via
      html.  (You can leave these lines in if you wish to have both the scrolling
	  headlines and text links to the articles.)

COMMENT OUT EACH LINE BEGINNING WITH:
"document.writeln(" 

by adding 2 slash marks (//) to the beginning of each line.  You may also simply
remove all lines beginning with "document.writeln("
That's it! You've just added an eye-catching headline scroller to your web page! Now, one step remains. You can modify the code to put your own banner image on the bottom of the applet, if you like. (If you've followed along and completed the instructions I've give above, you will currently have a blank space at the bottom of the applet where I have a banner for the content provider.)

To customize this for your own banner ad, edit the first line we added in Step 3: "var smoothscrolltext = new String('');"

The line I used to put the scrolling banner ad in the applet is below:


Back to SmoothScroll Main Page
E-mail me if you have signed up with moreover.com and are having trouble getting SmoothScroll to work with it.