NBA Playoffs bracket: How’s it work?
Here’s a quick rundown of how my NBA Playoffs bracket automatically updates itself, and how it is designed.
First, my little PHP script goes and checks out the NBA standings over at ESPN.com. It grabs the team name (Detroit Pistons,) team slug (det,) that team’s conference seed, wins and losses. So then I make a list on the Playoffs page of all 15 teams from each conference. They are listed according to the order they appear in the standings. Of course this page is made up of 100% valid XHTML 1.0 Strict.
Using the wonderness of CSS, I use a background image to display the bracket/tree, and then absolutely position each list item in the correct spot. Only the top 8 teams in each conference are displayed, the rest are hidden from view but are still there if you View Source. I then replace the text of each team with their logo (again with CSS.) All of this happens automatically, and not by me, by the page itself.
There are two links at the bottom: One to show/hide the Seedings for the playoff tree, and one to show/hide each team’s record. This is done with quick and easy Javascript.
The comments link directs people to the associated Wordpress post where they can leave a comment.
Finally, my latest addition shows the progress of the current NBA season. This is done by PHP, which divides the number of days into the season we are by the total number of days in the season as a whole (somewhere within Oct. 29, 2007 and Apr. 17, 2008.) I made a little chart to display in the background to show some benchmarks/milestones (the correct term escapes me right now.) The graph expands thanks to a CSS “width:” property.
And that’s it. Absolute magic, I know. When the playoffs start, I’ll be adding wins and advancing the logos along the playoff tree just like I’ve done ever since 2004. And I’m always looking for suggestions!
Just wanted to say thank you for taking the time to do this. Be blessed! If you don’t believe in God, forgive me. I do not mean to offend.
i accidentally stumble thumbed this page instead of the actual bracket page. now that i’ve stumble thumbed the bracket page 3 days ago, there are a TON of comments. wow! go stumble. go brad. keep up the good work :)
oh yeah and DEEETROIITTTT BASKETBAALLLLLLLL!!!
I Love the numbers, keep it going.
Love your brackets!
I liked the green arrows best, though. But that’s democracy. LOL.
Keep up the good work!
Like the numbers. Would like to see colored numbers to indicate home game win vs road win.
numbers are definetly better than the arrows! keep up the good work
You could have the time, place, and network of the next game in each series
And GO CAAAAVVVVSSS
The series ending games for the Western Conference do not show the game score when the curser is placed over them. Other than that, this looks great!
disregard last comment, turns out they work fine.
Thanks again everyone for all of your great comments. I’m very happy that you all are enjoying the bracket, AND taking the time to leave a comment or suggestion.
@Steve McCoy: I like your suggestions about the home and road games. I might try a different color number for road wins and see how it looks.
Everyone else, as you can see I’ve added the next upcoming games to the bracket in the form of TV logos. Hovering over that will show the date and time. The logo will appear in line with who is hosting the game.
Oh yes. I am absolutely loving the network icons. xD
On an *extremely* nitpicky note, the numbers show up closer to the icons in the Eastern Conference than in the West.
@Jesse Gunsch: Yes, the positioning of the bracket is all out of whack (it’s held together now by band-aids all over the place.) I’m planning an overhaul very soon to tighten things up. Thanks!
Great site. Its the first place I go to check the playoff status. I could only suggest quicker updates, if you have the time. Thanks again buddy
I would like an option for the arrows or a combination of the two ideas as someone previously suggested. I did not like the numbers only at first, although they have grown on me some. If not, an option for the network indicators would be great. It seems to be giving the bracket a less consistent look overall. Also some combination of the numbers inside the arrows might also provide more consistency with brackets from previous years. I appreciate what your doing with this and keep up the good work. Thank you and god bless!
I really like the upcoming games icons. They help a lot. Thanks!
lakers win the whole thing and no ?’s about it
thanks for putting this up I like the icons!!
Excellent bracket design. By far the best I’ve seen. Thank you!!!
Band-aids, eh? Gotta love CSS sometimes. >.<
Another great addition with the upcoming games icon. Keep up the great work!!
This is an awesome website!!! The network icons are brilliant
Wow, I’m impressed! You actually took my suggestion and used numbers instead of those arrows! You rock!
Oh bummer! I was so excited to see the numbers I sent you a quick note about that. Then I went to print it because it has every thing on it I want to take home for the TV Room. Alas, the bracket prints but as a bare bracket without any of the updates filled in. What’s up with that? I took a screen-shot and printed it but it’s not the same?
nicely done. love the improvements…
Thanks so much for the bracket! I complained to ESPN that they don’t have something as elegant and easy to read. Of course they didn’t reply. This is a great view of the NBA playoffs. Thanks again!
I like just the arrows, If your a true fan you know what games your team won. I agree that it looks more slick with just the arrows. I have it as my home page at work so I can point out to my co workers who root for the other teams that My team is Kicking butt. It makes me happy every day I log on to the internet at work!! Mahalo
I like the new one better. Even when it has the numbers in the arrows. And it is Awesome!
Glad to see the arrows are back!
Everything looks nice and neat again! :)
Good job!