Recreating the MLB.com Content Switcher with jQuery and CSS3
By Louis Lazaris on June 1st, 2010
Categories: Markup & Style, Scripting, Web Design Articles | 22 Comments
I’m a huge baseball fan, so a few weeks ago, just for a fun side project, I recreated the MLB.com Flash content switcher using jQuery and CSS3.
My goal with 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.
My version uses CSS3′s border-radius, RGBA colors, opacity, and a small use of a gradient, and still looks acceptable in non-supportive browsers (although the jQuery is not as smooth in IE6 & 7). 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.
Although 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:
One Thing Missing — Can You Add It?
The only thing currently missing from the switcher in comparison to the Flash version on MLB.com is the play/pause and autorun functionality. I will eventually add that to it, but I just didn’t have the time to do it yet (not to mention that I would personally find it difficult to do). If anyone wants to mess around with the code and add the play/pause functionality, please do so and, as a thank you, I’ll feature your code and link back to your website in an upcoming article.
With the play/pause functionality, however, I don’t think it’s possible to do it without using any extra images, so that will be a compromise in comparison to what I’ve created already.
Let me know if you see any bugs or issues (besides the fact that it doesn’t look the same or work as smoothly in Internet Explorer).
Oh, and in case you didn’t know, the Toronto Blue Jays rule. So does Roy Halladay.
22 Responses
Add to the Discussion
Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. Thank you for cooperating.
To Post Code Snippets in Comments: Wrap your code in <code> tags, and make sure you use < and > for HTML, instead of < and >, otherwise your code will not show up properly.
That’s pretty sweet man, nice job! Although you should’ve made it for the Red Sox, but I’ll let it slide (no pun intended)..
Mike
Interesting website of yours. I just bookmarked it for future references. Good stuff.
And GO SOX!!! :)
Nice job! I’m also a huge MLB fan. Go Red Sox!!! :)
I like what you have done here. I honestly don’t understand the fascination of MLB with Flash on things they don’t need it (like this one).
I also believe that MLB websites suck right now as is. Other sports are doing much better than MLB with their online content, like eg. NFL.com and NHL.com. I will love to see MLB.com revamped.
Maybe I can create some mockups, share them with you and discuss. Keep up the good work.
Thanks for the code man..
You should be able to write a javascript function to call your jQuery swapping functions sequentially with an interval and loop until another call interrupts it back into non-looping mode. I don’t know how to do it offhand but I’m fairly certain it’s possible. forEach thing in object wait so many seconds, then do image swap and increment a counter, compare the counter to the max number of images and when the last one is reached reset the counter and start again? (there may be a more elegant solution but I’m still a noob).
Just have the play and pause buttons be DIVs or form buttons that hide themselves when pressed and swap in the opposite button. the pause div can be a square with three vertical 33% width bars and appropriate background colors. I suspect a css3 transform with a hard 50/50 100%alpha/100%color gradient could be used to fake in a triangular play button.
Or you could pull in some SVG for the play/pause buttons and give the finger to IE users. Since you’re designing with CSS3 anyway I’m guessing that’s the plan until IE9 rolls out with 2005′s hottest web tech finally built in.
Go JAYS!!!
Also, great tutorial. While I’m a fan of Flash, I’m also a fan of only using Flash when you need to and in this instance, I think MLB would be smart to move to stuff like this instead of relying on Flash for everything.
Awesome job, but have to disagree with one thing. The Tampa Bay Rays rule! They aren’t playing too hot right now though. Lucky win last night.
Yeah, I’m still seething over that loss. 5-0 lead?? And Wells hit the top of the wall, nearly tying the game in the bottom of the 9th…
Yeah, we’re really off topic now! :)
Nice post, keep up the hard work.
will check out this content switcher.
not a baseball fan by the way,…
thank you nice sharing was expected to share more of my
thanks for sharing, very nice slider indeed!
I recently made a very slick, cross-browser compliant slider for my portfolio. The slider is largely based on the one created by css-tricks.com ( AnythingSlider ).
The results are awesome and easy for me to skin for new clients. Works like a charm in Ie6+, ff2+, safari 3+. opera, chrome, ect. browsers!
Check it out in action here – http://www.curtisscott.com/portfolio.html
I apologize, I was quick to post. I forgot to say I really like your approach to this slider and love how it work cross browser! Great article and demo!
Can you make this script to AUTOPLAY?? Pleaseeee?
I checked your site and its hard to try and combine anything to work together…
Last I checked it has always has been set to autorun (delayed), contact me via the contact form if you need help implementing this slider on your site.
Excellent blog, Keep posting like this.
This is awesome. One of the best.
Can you pleaseee add the autorun function. I do not care about play and pause function as long as it’s got autorun.
Great article. Looking forward to future enhancements.
(go sox)
This is awesome Great article.
Nice article thanks to share with us.
hello, somebody know how to make it autoplay????
thak
Hi
I like this plugin.I have Also 10+ Jquery Style Switchers plugins please see:-
http://jquery13.blogspot.com/2010/08/10-jquery-style-switchers.html
Thanks
Aman