Vertical Scroller new and improved, written completely in javascript Options

[habman]

I have reworked the vertical scroller code entirely in javascript.

(This is similar to the marquee except it scrolls up and down not left to right)

What are the benefits of this:
- No iframes
- Less bandwidth usage for my site
- Quicker loading and uses less of MFL's resources
- Easier to implement for the end user
- Two row display (header row & scrolling row) or one row display
- Reloading bugs in old iframe scroller have been corrected


The first few lines of the code have variables that you can change.

A little further down is a CSS section where you can add some customization if you want.


Just copy and paste the code into a home page message
(turn off your advanced editor)


Here is the code for those interested:

Last modified: September 11, 2008

CODE

<script language="JavaScript" type="text/javascript">
<!--

//FYI: Script update as of September 11, 2008

//Start scroller manually
   var scrollerClickToStart = false;

//SET THE #OF NEWS ITEMS TO DISPLAY 0=all; -1=none;
var scrollerNews = 10;

//SET THE #OF WEEKLY YARDAGE LEADERS TO DISPLAY 0=all; -1=none;
var scrollerLiveLeaders = 10;

//SET THE MODULES WOULD LIKE TO DISPLAY (true or false);
var scrollerScoreboardModule = true;
var scrollerWeeklyLeadersModule = true;
var scrollerSeasonLeadersModule = true;
var scrollerDraftResultsModule = false;

//Scroller Dimensions width either % or px; height only px
  var scrollerWidth  = "100%"
  var scrollerHeight = "200px"
  var headerHeight   = "14px"


//Seconds to pause on new message
  var pauseScrollerOnNewMessage = 0;

//Scroller speed (larger is faster 1-10)
  var scrollerSpeed=2

//Separate Header and Body (false for header line)
  var separateScrollerHeader = true;

//Display scroller on home page only (useful if scroller is in the header)
   var scrollerHomeOnly = true;

//OTHER SETTINGS
//Personal Message #1 (appears as first message scrolled)
   var scrollerTitle1 = "";
   var scrollerMessage1 = "";

   var scrollerTitle1a = "";
   var scrollerMessage1a = "";

   var scrollerTitle1b= "";
   var scrollerMessage1b = "";

   var scrollerTitle1c = "";
   var scrollerMessage1c = "";

//Personal Message #2 (appears as last message scrolled)
   var scrollerTitle2 = "";
   var scrollerMessage2 = "";

   var scrollerTitle2a = "";
   var scrollerMessage2a = "";

//Set the home field advantage here
   var homeFieldAdvantageScroller = 0;

//Set the number of decimal places
   var scrollerDecimals = 0;

//Hide ties when displaying (W-L-T)
   var hideTiesInRecord = false;

//Hide point spreads for upcoming games
   var hideScrollerSpread = false;

//# of top players to display
   var scrollerWeeklyTopPlayers = 10;
   var scrollerSeasonTopPlayers = 10;

//Top Player Settings (use setting 0,1,2,3,4 or 5 for scrollerTopPlayerMode)  
   // 0: show all players starters/nonstarters/rostered/free agents
   // 1: show rostered players/FA's in separate scroll
   // 2: show only rostered players whether started or benched
   // 3: show only free agent players
   // 4: show only rostered players but separate starters and bench
   // 5: show rostered players/FA's in seperate scroll; separate starters/bench
   var scrollerTopWeeklyMode = 5;
   var scrollerTopSeasonMode = 1;

//Draft Display Settings (use setting 0,1,2,3 or 4 for scrollerDraftFilter
   // 0: show all;
   // 1: show upto and including last pick
   // 2: show upto and including last pick + next pick
   // 3: show upto and including last pick + next 2 picks
   // 4: show only rounds indicated by start and end variables
   var scrollerDraftFilter = 0;
   var scrollerDraftStart = 1;
   var scrollerDraftEnd   = 1;

//-->
</script>


<style type='text/css'>

#scrollerheader {
   background-color: white;
   color: brown;
   font-style: italic;
   font-weight: bold;  
}

#scrollerbody, #scrollerbody a:link, #scrollerbody a:visited, #scrollerbody a:active {
   background-color: orange;
   font-weight: bold;
   color: white;
   text-decoration: none;
}

#scrollerbody a:hover {
   color: blue;
}

#scrollertable {
  border: 1px solid black;
}

</style>

<script language="JavaScript" type="text/javascript" src="http://www.habman.com/mfl/apps/js/habman_common.js"></script>

<script language="JavaScript" type="text/javascript" src="http://www.habman.com/mfl/apps/js/scroller.js"></script>

September 11th:

Player News Added: To control the items to display or hide it all together add this bit of code

CODE

//SET THE #OF NEWS ITEMS TO DISPLAY 0=all; -1=none;
var scrollerNews = 10;

October 3rd:
Live Weekly Yardage Leaders added: To control the items to display or hide it all together add this bit of code

CODE

//SET THE #OF WEEKLY YARDAGE LEADERS TO DISPLAY 0=all; -1=none;
var scrollerLiveLeaders = 10;

[Polekat]

Thanks, now how do I get a tab at the top of this script?

[habman]

Thanks, now how do I get a tab at the top of this script?

I will add an option to add this later but for now I am going to watch some football.

[Polekat]

Thanks, now how do I get a tab at the top of this script?

I will add an option to add this later but for now I am going to watch some football.

Nevermind. I figured it out from one of your other script threads. Now I'm gonna watch some football too. Thanks for all your hard work Habman

[mowgli]

Habman I can't seem to get the proper background color on your new scroller. Look at League 45614. Note the difference b/t the two modules (countdown and vert scroller) at the top. The hex code is e5e5e5 (for light gray) but when I place it, all I get is black. Also, what is the proper CSS to eliminate the border for the little tables that hold the data.

Thanks...and as usual, excellent application/add-on.

[onei0087]

Its a D'OH mistake...you forgot to put a # in front of e5e5e5...only color names can be put in without a #.

The table border is being controlled by your Elite2.css file:

CODE

.report td,.report th{border: 1px solid white;}

Overwrite with:

CODE

#scrollerbody.report td,#scrollerbody.report th{border: none;}

[mowgli]

D'OH is right! Thanks.

[thanson]

Great new scroller Habman. I would like to change the size of the font though. I didn't see anywhere to do this. I would like to change the font size in both the main window and in the header. Can you help with this? TIA

[onei0087]

To change your font size change:

CODE

#scrollerheader {
   background-color: white;
   color: brown;
   font-style: italic;
   font-weight: bold;  
}

#scrollerbody, #scrollerbody a:link, #scrollerbody a:visited, #scrollerbody a:active {
   background-color: orange;
   font-weight: bold;
   color: white;
   text-decoration: none;
}

to

CODE

#scrollerheader {
   background-color: white;
   color: brown;
   font-style: italic;
   font-weight: bold;
   font-size: 10pt;  
}

#scrollerbody, #scrollerbody a:link, #scrollerbody a:visited, #scrollerbody a:active {
   background-color: orange;
   font-weight: bold;
   color: white;
   text-decoration: none;
   font-size: 10pt;
}

I just added font-size, you can raise and lower the 10pt as needed.

[habman]

Great new scroller Habman. I would like to change the size of the font though. I didn't see anywhere to do this. I would like to change the font size in both the main window and in the header. Can you help with this? TIA

In the CSS portion just add font-size to the #scrollerheader and #scrollerbody id's

Example

font-size: 10px;

will set the font to 10 pixels.

EDITED TO ADD

Never mind. Look above. onei0087 has beat to it and with a much better explanation.

[thanson]

To change your font size change:

CODE

#scrollerheader {
   background-color: white;
   color: brown;
   font-style: italic;
   font-weight: bold;  
}

#scrollerbody, #scrollerbody a:link, #scrollerbody a:visited, #scrollerbody a:active {
   background-color: orange;
   font-weight: bold;
   color: white;
   text-decoration: none;
}

to

CODE

#scrollerheader {
   background-color: white;
   color: brown;
   font-style: italic;
   font-weight: bold;
   font-size: 10pt;  
}

#scrollerbody, #scrollerbody a:link, #scrollerbody a:visited, #scrollerbody a:active {
   background-color: orange;
   font-weight: bold;
   color: white;
   text-decoration: none;
   font-size: 10pt;
}

I just added font-size, you can raise and lower the 10pt as needed.

I almost had it. I added everything but the "pt" part. Thanks!

[mowgli]

Its a D'OH mistake...you forgot to put a # in front of e5e5e5...only color names can be put in without a #.

The table border is being controlled by your Elite2.css file:

CODE

.report td,.report th{border: 1px solid white;}

Overwrite with:

CODE

#scrollerbody.report td,#scrollerbody.report th{border: none;}

Just a follow up .. this didn't work after all. I haven't looked at it much more due to other problems I'm sorting through but if you have others ideas they're certainly welcome.

[onei0087]

Its a D'OH mistake...you forgot to put a # in front of e5e5e5...only color names can be put in without a #.

The table border is being controlled by your Elite2.css file:

CODE

.report td,.report th{border: 1px solid white;}

Overwrite with:

CODE

#scrollerbody.report td,#scrollerbody.report th{border: none;}

Just a follow up .. this didn't work after all. I haven't looked at it much more due to other problems I'm sorting through but if you have others ideas they're certainly welcome.

OK try this then

CODE

#scrollertable tr td {
    border: none;
}

It works, I tested using CSS Edit on your homepage...then again so did the last one. Please leave the CSS in and let me know if it doesnt work

[habman]

I have updated the code so that you can break down how the weekly leaders are displayed.

You can display:
- All weekly leaders
- You can separate out players on a roster and free agents
- You can display only rostered players
- You can display only free agent players
- You can display only rostered players but separate the starters and benched players
- You can display all players but separate out starters, benched and free agents.

All you need to do is look for and set this parameter in the code:

CODE

//Top Player Settings (use setting 0,1,2,3,4 or 5 for scrollerTopPlayerMode)  
   // 0: show all players starters/nonstarters/rostered/free agents
   // 1: show rostered players/FA's in separate scroll
   // 2: show only rostered players whether started or benched
   // 3: show only free agent players
   // 4: show only rostered players but separate starters and bench
   // 5: show rostered players/FA's in seperate scroll; separate starters/bench
   var scrollerTopPlayerMode = 0;

The lines with the "//" are just comments that explain the various settings. The important line is the last one and that is what you need to set.


Note: this is an addition so if you are using old code you will have to re-copy the updated code or just add this code yourself into the code you already have.

[mowgli]

I had the vertical scroller working and configured the way I wanted (size, color, no borders) but now the vertical scroller is all messed up again. I haven't changed anything to cause this - just opened up my browser this morning and that's what was there. This applies to both of my 2007 Leagues (45614 and 44736).

Thanks