Convert Traditional Table Codes to Mobile Friendly Table Codes

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 - assuming your website is already 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, our 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 webpage!  

Hover mouse over image below to view comparison of traditional versus responsive tables

To see an example "in action" visit this Comparison Page.... then, shrink your screen width smaller and smaller and you will notice the new lower table will "transform" into block style format which is compatible on mobile devices. 

How do I change my current (traditional) table codes to the responsive table codes?

If you want to convert your existing Jackrabbit class listings tables on your webpages over to the responsive version, you will need to log into your website editor, and edit each code that is producing a table  (for example, if you have 8 separate tables, then you will need to edit the code for each of those 8). 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 webpage, 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).

As mentioned above, the domain and your custom query string portions of the code remain the same. Only the path needs to be edited to obtain the benefits of the responsiveness.

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 current table codes into the responsive codes, see Integration Assistance article to contact the Integration Team and let us know exactly the code you are using and the webpage where the table is located, and we will be glad to take a look.

-->