The jQuery NHL Scoreboard Live provides complete coverage of NHL game scores live, and displays it in a sleek score card; in both sidebar (or vertical) and headerbar (or horizontal) formats.
Most notable is that it does not require the need for any 3rd party API keys and thereby the data is delivered free of charge! That's right no monthly fees, no membership dues, nothing ... its inherent features add intrinsic value, quality, and versatility to any web page.
The Demo above shows both types of NHL Scoreboards that can be added to your webpage. The sidebar (or vertical type) and the headerbar (or horizontal type).
The Sandbox to the left allows you to play around with the various different options available when initiating the NHL Scoreboard plugin.
Once you have made changes to options ... click the init button to see your changes take effect. The Plugin Events block shows the different events of each rendered NHL Scoreboard above in the demo.
Please note that the settings for type, height, width, and maxGames are limited and controlled in the demo for display purposes.
For further definition of all plugin elements, options, events, and methods, use the navigation menu above or scroll down and continue reading.
All NHL logos and marks and NHL team logos and marks depicted herein are the property of the NHL and the respective teams and may not be reproduced without the prior written consent of NHL Enterprises, L.P. © NHL 2017. All Rights Reserved.
The logos and marks displayed by this product are for visual effect only and in no way suggests that their respective and rightful owners endorse it.
Game details, including teams and scores are obtained by periodically polling a
3rd party web service. The jQuery scoreBoard by Bitbenderz.com can not guarantee the status of the provider′s servers.
So as not to unnecessarily burden the service provider′s network; the periods at which this product attempts to acquire data is dependent on several different factors, and can be delayed by as much as two minutes.
Data is provided for your convenience, and use of such data and any reliance upon any materials, including any action taken by you because of such use or reliance, is at your sole discretion and risk. Neither Bitbenderz.com nor information providers, licensors, employees, distributors or agents is responsible or liable for, or makes any representations or warranties as to any representations, guarantees, promises, recommendations or inducements that may be made by or through any party (including vendors) found at, on, through or from the data; the timeliness, accuracy, reliability, completeness, legality, copyright compliance or decency of the data.
The NHL Scoreboard is compatible with most modern browsers and markup languages.
** jQuery 1.11.x and 1.12.x contain AJAX bugs that prevent proper operation **
Each NHL Scoreboard consists of several individual elements, Scorecard, Timer, and Brand Tab. They are described in the paragraphs below.
Each game, or Scorecard if you will, displays both away and home team's trademarked logo; Their respective scores; and the game status.
The game status may display the current game period and time remaining in that period, or the game's final status if it has finished, or the date and time of the game if it has not yet started or gameDay is set for a future date.
In the upper right corner of each Scoreboard, whether vertical or horizontal, is a small rotating circle depicting the time until the next data update.
The timer may be displayed in one of two colors ... green which denotes good communication with the data server ... or red which means there was an unknown problem with the data received from the server. Not to worry! In the case of the latter; the Scoreboard will try again in 5 seconds.
The timer may not appear to be moving. Rest assure that it is. If no games on the Scoreboard have started yet, the timer will not attempt a data fetch until 2 minutes before the earliest game.
Moreover; the timer may not appear at all. If all games on the Scoreboard have finished for the given gameDay there is no reason to fetch any further data, so the timer will disappear.
The Brand Tab below the Scoreboard is displayed, or not, based on the
tab option setting. It consists of 1 configurable object and 3 static objects.
The textual object is defined by the
brand option setting at Scoreboard instatiation and may contain valid HTML entities. It is however, limited to a single line and can cause the width of the Brand Tab to exceed that of the Scoreboard.
The help button, when clicked, displays a help bubble below the tab. The help bubble displays the Scoreboard version, some contact information, and, for legal reasons, much of the text seen above in the
About section. The help bubble will remain visible until the associated close button is clicked.
The play button, when clicked, causes the Scoreboard to scroll 1 Scorecard, or game, up or left, depending on Scoreboard
type, once every 3 seconds.
Contrary to its name and icon, the pause button, in fact, acts like a stop. It stops the scrolling of the Scoreboard that was set in motion by the play button.
NHL Scoreboard options are given as object pairs and are applied when instantiating the scoreboard element.
Which type of element to render.
@ values : vertical, horizontal
@ default : "vertical"
Date of games to display in Scoreboard.
@ values : null, valid date (given as ... yyyy-mm-dd)
@ default : null (current date)
Number of days to display in Scoreboard. Including gameDay.
@ values : 1 through 7
@ default : 1
Foreground (text) color for the Scoreboard.
@ values : valid html styled color
@ default : "#000000"
Background color for the Scoreboard.
@ values : valid html styled color
@ default : "#FFFFFF"
Border color for the Scoreboard.
@ values : valid html styled color
@ default : "#AAAAAA"
Height for the Scoreboard. Applies to vertical type only.
@ values : "auto", valid integer
@ default : "auto"
! Note ! the bottom tab adds 24px to height value.
Width for the Scoreboard. Applies to horizontal type only.
@ values : "auto", valid integer
@ default : "auto"
Maximum number of games to show in Scoreboard.
@ values : valid integer
@ default : 0
! Note ! Set > 0 overrides height and width settings.
Show or hide the bottom tab of the Scoreboard.
@ values : true, false
@ default : true
Provide visual feedback when game data is refreshed. Each game or scorecard element fades slightly out and in.
@ values : true, false
@ default : true
Rounds the corners of the Scoreboard.
@ values : true, false
@ default : true
Automatically scroll the Scoreboard 1 game every 3 seconds.
@ values : true, false
@ default : false
Adds an icon to each scorecard that when hovered over will display game comments in a help bubble.
@ values : true, false
@ default : false
Adds an icon to each scorecard that when hovered over will display game odds from several Sports Book websites in a help bubble.
@ values : true, false
@ default : false
Content to display in brand tab at bottom of the Scoreboard.
@ values : text including valid HTML
@ default : "© Bitbenderz.com"
The NHL Scoreboard exposes a 4 of its events for monitoring. Event trapping should be setup before Scoreboard instantiation.
Fired when the Scoreboard has been created, but before rendering.
Fired when the Scoreboard has been rendered and all its elements have been added to the DOM.
Fired on subsequent data updates from service provider's server.
Fired when the Scoreboard and all its elements have been removed from the DOM.
The NHL Scoreboard provides the following methods for asychornous use.
Forces the Scoreboard to fetch new data from the service provider's server and posts it to the individual games.
Removes the Scoreboard and all of its elements from the DOM.