Convert Traditional Table Codes to Mobile Friendly Table Codes

From Jackrabbit's inception until late 2015, the class listings HTML codes provided were "traditional" codes 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.


Expand each section below for more information on responsive table codes.

Responsive Code Compared to Traditional 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 a large screen

Example - tables viewed on a small screen

Change Traditional Table Code to Responsive Table Code

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 (the path is highlighted below in yellow).

Replace the Script for Your Tables

If you currently script the tables into your own web page, you will need to change the URL path. Replace the URL path Openings.asp?id with the responsive table code path jr3.0/Openings/OpeningsJS?OrgID

Traditional Table Code

https://app.jackrabbitclass.com/Openings.asp?id =XXXXXX&(yourcustomquerystring)


Responsive Table Code

https://app.jackrabbitclass.com/jr3.0/Openings/OpeningsJS?OrgID=XXXXXX&(yourcustomquerystring)

Replace the Link on Your Webpage

If you currently link to an external table from your website, make the following change to the code for the link. Replace the URL path OpeningsDirect.asp?id with this new path jr3.0/Openings/OpeningsDirect?OrgID.

Link Code for Traditional Table

https://app.jackrabbitclass.com/OpeningsDirect.asp?id=XXXXXX&(yourcustomquerystring)


Link Code for Responsive Table

https://app.jackrabbitclass.com/jr3.0/Openings/OpeningsDirect?OrgID=XXXXXX&(yourcustomquerystring)

Replace the XXXXXX with your specific Organization's ID number. Find your Organization ID by going to the Gear (icon) > Account > My Account - it is listed under Organizational Details.


Adjust Table Font Sizes

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;

     }

}



If you have problems converting your tables, contact the Integration Team at onlinereg@jackrabbittech.com. Let us know the exact code you are using and the webpage where the table is located and we will be happy to help.
-->