Wednesday 16 September 2015

Pop-up Chart Windows Upgraded on Golf Predictor

Original pop-up chart window (Microsoft AJAX)

New Pop-up chart window (Twitter Bootstrap)

Loading screen for new pop-up chart window
The "Twitter Bootstrapification" of Golf Predictor has continued with the replacement of the pop-up chart windows on the site. The functional, but not very pretty, Microsoft AJAX pop-ups (as shown in the first screenshot above) have been replaced with their more attractive Twitter Bootstrap equivalents. As can be seen in the second screenshot above, these new pop-ups look much better, with a title row (complete with close button and new title!), rounded corners and a footer row (with main close button). The chart shown above is a comparison of the average finishing positions for the big three (McIlroy, Spieth and Day) ahead of the 2015 BMW Championship FedEx Cup event on the US PGA Tour.

This turned out to be a bigger and more difficult task than originally anticipated. However, with the assistance of the additional eModal helper, I was finally able to get them to look and work as desired. This eModal helper even inserts a loading message and bar while the content loads, as can be seen in the third screenshot above. Some notes on these new pop-up windows:

  1. I have tested them on Chrome, FireFox, IE11 and MS Edge. One of the advantages of using Twitter Bootstrap is better cross browser compatibility. The old pop-ups did not display as well on Chrome as they did on other browsers.
  2. If you are using an older browser, you may experience issues. I have only been able to test this using compatibility settings on IE11, but the only issue appears to be the expected lack of rounded corners on IE7/8. If you are still using a very old version of IE (or any other browser), it is really past time to upgrade or change it!
  3. Golf Predictor is not really designed for mobile devices, but I have also tested these new pop-up windows on Android 5.1.1 and iOS 6.1.3. They work, but like the original pop-up windows, it isn't a perfect experience.
  4. There are hundreds of pop-up chart windows on the site. The main Compare Predictions page alone and its tee-off group equivalent each contain 57 chart pop-ups, for example! It was not feasible to check every single chart, but as the code changes are the same in each case, if one chart works on a page/dropdown choice, they all should work. I have done a considerable amount of testing, but it is possible I missed something. If you experience any issues, please contact me immediately.
  5. You may have to reload a page or empty your browser cache to see the upgraded pop-up window content correctly.

I trust you will agree that these new pop-ups look a lot better. Even though the change is mainly cosmetic, the loading message will help slightly when the pop-up contents are slow to slow for any reason. Just another way to make Golf Predictor a little better!

No comments: