From Jackrabbit inception until late 2015, the class listings html codes provided were "traditional" codes which displayed with table borders. These codes were not mobile-friendly (meaning they didn't display well on mobile devices).
In 2015 Jackrabbit developed new responsive codes that automatically transform to vertical display when viewed on small devices (website must be optimized for mobile viewing).
The codes given in this Help Center are the responsive codes. This means that if you are using these codes, and your site is mobile optimized, then the tables will work correctly on cell phones, ipads, etc.
Not sure if your website is optimized to be mobile friendly? Contact your webmaster. Your website may require site modifications and CSS changes to work optimally with the responsive tables. Jackrabbit can not advise how, nor update your website to be, mobile-optimized.
What is the difference in appearance between the traditional code and the new responsive code?
When viewed on a large screen, the difference is simply the borders and shading. However, the traditional tables do not work well when viewed on smaller screens.
The responsive codes produce a table that automatically adjusts to a mobile-friendly view when viewed on a mobile-friendly web page.
Example - tables viewed on large screen
Example - tables viewed on small screen
How do I change my traditional table codes to the responsive table codes?
If you want to convert traditional Jackrabbit class listings tables on your web pages over to the responsive version, you will need to log into your website editor, and edit each code that is producing a table, i.e. if you have 8 separate tables, you will need to edit the code for each of those 8 tables.
The domain and the custom query strings remain the same, but the "path" is different. The path is the only part you will need to edit:
1. If you currently script the table into your own web page, make the following edits to each code:
https://app.jackrabbitclass.com/Openings.asp?id=XXXXXX&(yourcustomquerystring) |
Replace the url path (highlighted above) with this new path (highlighted below).
https://app.jackrabbitclass.com/jr3.0/Openings/OpeningsJS?OrgID=XXXXXX&(yourcustomquerystring) |
Replace the XXXXXX with your specific Organization's ID number. Find yours by going to Tools > Online Web Registration - it is shown in blue.
2. If you currently link to an external table, make the following edits to each code:
https://app.jackrabbitclass.com/OpeningsDirect.asp?id=XXXXXX&(yourcustomquerystring) |
Replace the url path (highlighted above) with this new path (highlighted below).
https://app.jackrabbitclass.com/jr3.0/Openings/OpeningsDirect?OrgID=XXXXXX&(yourcustomquerystring) |
Replace the XXXXXX with your specific Organization's ID number. Find yours by going to Tools > Online Web Registration - it is shown in blue.
Is it possible to adjust the font size in the tables?
The font size is 9 pt in both the traditional tables and responsive tables; however, the responsive tables may not respond to your CSS rules dictating a different font size. If you need to dictate a different font size for the larger version of the responsive tables, your webmaster should use something like this in the CSS:
@media (min-width: 62em) {
.jr-container .responsive-table {
font-size: 12px;
}
}