WolfTech Billboard Scroller
The new WolfTech Billboard Scroller is a jQuery plugin. The best way to add the plugin to your page is by inserting the following lines of code into your browser.
<script type="text/javascript" src="http://billboard.ncsu.edu/bb_app/public/v3/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://billboard.ncsu.edu/bb_app/public/v3/slideEvents.js"></script>
<script type="text/javascript">
function slideStarting(){
$.Scroller();
}
</script>
<script type="text/javascript" src="http://billboard.ncsu.edu/bb_app/public/v3/scrollingText.js"></script>
This will include a working version of jQuery, the WolfTech Billboard Slide Events code, and the Scrolling Text JavaScript.
Usage note: Since these slides are designed to work within Billboard, I suggest adding an onclick event to your webpage that will trigger the slideStarting function. For example: <body onclick="slideStarting();"> This will allow easier testing.
Getting Your Text To Scroll
The Scroller plugin is set to convert all instances of DIVs with the class name "scrollingText" into scrollable content. In order for your content to scroll properly, you will also need to assign certain CSS properties to each DIV you'd like to scroll (generally done within the CSS of scrollingText.
.scrollingText {
position: [user selectable];
top: [user selectable];
left: [user selectable];
width: [user selectable];
height: [user selectable];
overflow: hidden;
}
When the script runs, it will place a wrapper around your DIV and the scroll the content inside of it if scrolling is necessary. If the page does not need to scroll, it will not.
Special Features
Like in the old WolfTech scroller.js file, the Scroller plugin can resize a page's title to fit within a confined text box if necessary. The script automatically takes whatever is in the <title> tag of the page and inserts it into a DIV with the ID "title" (
). If this DIV has a width specified, the script will shrink the text size until it comfortably fits in the box (Note: there is a user selectable minimum to how low the font size will drop, at which point the title is shortened with an ellipsis until it fits in the box).
The $.Scroller() command can be passed an object that accepts the following pairs.
- className - The name of the class that the Scroller should replace; defaults to "scrollingText"
- minTitleSize - When shrinking titles to fit in <div id="title"></div> this is the minimum font size (in px) that text should shrink to
- autoNext - When combined with the WolfTech Billboard Slide Events code, the Scroller can advance to the next slide after scrolling has completed. Setting this option to 1 enables it; 0 disables.
- delayStart - Number of seconds between the screen being loaded and when scrolling begins. Default is 10
- delayEnd - If autoNext is set to 1, this is the number of seconds before the slide sends the signal to Billboard to advance. Default is 10
- titleNode - Changes the id of the title element. Default is "title"
- duration - When scrolling, how long it takes the scroller to move 100px. Default is 5000.
Example:
Set the starting delay to 15 seconds and populate <div id="pageTitle"></div> with the page's title.
<script type="text/javascript">
function slideStarting(){
$.Scroller({
'delayStart' : 15,
'titleNode' : 'pageTitle'
});
}
</script>