Chris Essig

Walkthroughs, tips and tricks from a data journalist in eastern Iowa

How To: Using jQuery tabs with Friday night preps coverage

leave a comment »

At the Courier, we are lucky to have a group of sports reporters that tweet from every high school prep game they can. Iowa high school football also have a dedicated hashtag (#iahsfb) that reporters and fans alike use every Friday night to update the world and what is going on in their game. The only problem from a readers standpoint is if you want to follow several of our local reporters and everybody across the state that uses the #iahsfb hashtag, you’ll have to open several Twitter pages to follow everything at once. Using simple Javascript, we can fix this problem. Here’s a rundown on how I use jQuery tabs (shown above) to fit all of the live coverage on one page. The final product will look like this.

1. For those unfamiliar with the jQuery UI, I suggest reading through their Documentation page to get the basics. You don’t need to know much code (I don’t) to get the feature working so don’t be intimidated. Then either download a theme or color-code your own. I worked our site’s blue into the theme before downloading a copy. You don’t need any programming skills for this and best of all, jQuery shows you on the fly what the final product will look like before you download it. Now download the files and unzip them.

2. The folder you just downloaded will include the necessary Javascript (located in the js folder) and CSS (you guessed it…in the CSS folder) for the project. It also includes an index.html page that shows you some of components you can use. Now put all of the files on the web somewhere. I put all mine in wcfcourier.com/app/special/.

3. Open up or create a new HTML page. In between the <head></head> tags, link to three files: the jQuery javascript file, the jQuery UI javascript file and the CSS file. My coding looks like this, although yours might vary slightly depending on what you downloaded:

<link type=”text/css” href=”ENTER_URL/css/custom-theme/jquery-ui-1.8.15.custom.css” rel=”Stylesheet” />
<script type=”text/javascript” src=”ENTER_URL/js/jquery-1.6.2.min.js“></script>
<script type=”text/javascript” src=”ENTER_URL/js/jquery-ui-1.8.15.custom.min.js“></script>

4. Calling the tabs function is just as easy. Here’s the code (from the jQuery UI site). Stick this under the code above and above the </head> tag.

<script>
$(function() {
$( “#tabs” ).tabs();
});
</script>

5. That’s all the Javascript we need to run this fairly complicated task! Now move to the body of the HTML file. Basically the tabbed links at the top of the page (in this case, the games we are covering) is an unordered list:

<div id=”tabs”>
<ul>
<li><a href=”#tabs-1“>Cedar Falls v. Wloo West</a></li>
<li><a href=”#tabs-2“>W Dela v. Waverly-SR</a></li>
<li><a href=”#tabs-3“>Columbus v. N Hamp</a></li>
<li><a href=”#tabs-4“>All games</a></li>
</ul>

The number of tabs will vary depending on how many pages you have. In this example, our sports reporters are covering three different games plus I want a tab to link to a Twitter widget that uses the #iahsfb hashtag. So I have a total of four tabs. The text between the link tags is the text that the reader will see and click on to open each page. In this example, it’s high school games.

6. Next, we need to create four divs to be linked to. For this example, I need four Twitter widgets. The basic structure of each div is very, very simple:

<div id=”tabs-1″></div>
<div id=”tabs-2″></div>
<div id=”tabs-3″></div>
<div id=”tabs-4″></div>

Note these divs go inside the <div id=”tabs”> created above. After the final div tab (in this case number four), we want to make sure we include a </div> tag. The bare bones code looks like this:

<div id=”tabs”>
<ul>
<li><a href=”#tabs-1“>Cedar Falls v. Wloo West</a></li>
<li><a href=”#tabs-2“>W Dela v. Waverly-SR</a></li>
<li><a href=”#tabs-3“>Columbus v. N Hamp</a></li>
<li><a href=”#tabs-4“>All games</a></li>
</ul>
<div id=”tabs-1“></div>
<div id=”tabs-2“></div>
<div id=”tabs-3“></div>
<div id=”tabs-4“></div>
</div>

7. The tabs function should be working by now. But each time you click on a tab, nothing shows up. Let’s fix that: Inside each of these four divs will be the individual Twitter widgets that will show up when a reader clicks the tab. We went ahead and made the reporters’ Twitter widgets by going to Twitter’s webpage. Twitter gives you the code to copy and paste between <div id=”tabs-4″></div> tags.

I also added a quick sentence above each Twitter widget telling the reader which game the reporter is covering. The final output for one Twitter widget looks like so:

<div id=”tabs-3″>
<p>Sports Reporter Carson Tigges (<a href=”http://twitter.com/CarsonTigges” target=”_blank”>@CarsonTigges</a>) is covering the Columbus v. North Hampton game:</p>
<br />
<p align=”center”>
<script src=”http://widgets.twimg.com/j/2/widget.js”></script&gt;
<script>
new TWTR.Widget({
  version: 2,
  type: ‘profile’,
  interval: 6000,
  title: ‘Tweets from Carson Tigges‘,
  subject: ”,
  width: 580,
  height: 650,
  theme: {
    shell: {
      background: ‘#001952’,
      color: ‘#ffffff’
    },
    tweets: {
      background: ‘#ffffff’,
      color: ‘#444444’,
      links: ‘#1985b5’
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: ‘all’
  }
}).render().setUser(‘CarsonTigges‘).start();
</script>
</p>
</div>

Amazing and all contained with a div.

8. Basically all we need to do now is replicate that Twitter widget three more times (four total), which is really easy. Just change the bolded text for each reporter you’ll be using. Now copy and paste the new Twitter widget code in between another div tag. Do the same for the others until you have all four Twitter widgets on the page. The final code is long but far from complicated.

– I uploaded the final product so take a peak and copy any of it that is helpful.

NOTE: If you look at the final product, you will see the following code. Ignore it. This is automatically added by our CMS and shouldn’t have any use for you:

<script type=’text/javascript’ src=’http://stats.townnews.com/shared-content/stats/common/tracker.js’></script&gt;
<script type=’text/javascript’>
<!–
 if (typeof(TNStats_Tracker) !== ‘undefined’ && typeof(TNTracker) === ‘undefined’) { TNTracker = new TNStats_Tracker(‘wcfcourier.com’); TNTracker.setTrackerDomain(‘stats.townnews.com’); TNTracker.trackPageView(); }
// –>
</script>

Advertisements

Written by csessig

October 6, 2011 at 7:44 pm

Posted in Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: