Submit your widget

Recreating the MLB.com Content Switcher with jQuery and CSS3

Created 9 years ago   Views 17126   downloads 2913    Author Author
Recreating the MLB.com Content Switcher with jQuery and CSS3
View DemoDownload 584.8 KB
125
Share |

This project was to try to recreate the switcher without any extraneous images or other non-essential elements that tend to make stuff less maintainable.

This version uses CSS3′s border-radius, RGBA colors, opacity, and a small use of a gradient, and still looks acceptable in non-supportive browsers (). Be sure to look at the real version on MLB.com for comparison; there are quite a few small differences, but generally speaking, aside from one major thing missing (see below), mine is basically the same.

this is not a step-by-step tutorial, for those interested in the JavaScript/jQuery used, I’ve provided extensive commenting in the JavaScript file, so you can see exactly what each line does. The data is contained in a JavaScript object in order to keep the code clean, and to separate it from the main code. Normally, the data would be pulled from a database, and/or accessed via Ajax 

In order to illustrate which parts are done with CSS3, here is an infographic that points those elements out: