Tabbed Interface Using jQuery

[siobhyb]

I have been using this tutorial on -

http://net.tutsplus.com/tutorials/javascript-ajax/create-a-tabbed-interface-using-jquery/

 

I want my output to look similar to the video selector here -

http://d2o0t5hpnwv4c1.cloudfront.net/042_jQueryUITabs/demo/index.html

 

The application I'm coding allows users to input a query and retrieve the top results from youtube from this. 

 

This is the code to retrieve the youtube videos:

 

    // youTubeQuery is the user query
          $feedURL = "http://gdata.youtube.com/feeds/api/videos/-/{$key[youtubeQuery]}?orderby=viewCount&max-results=10";
                
          // read feed into SimpleXML object
          $sxml = simplexml_load_file($feedURL);

          // iterate over entries in resultset
          // print each entry's details
          foreach ($sxml->entry as $entry) {
          // get nodes in media: namespace for media information
          $media = $entry->children('http://search.yahoo.com/mrss/');
                  
          // get video player URL
          $attrs = $media->group->player->attributes();
          $watch = $attrs['url']; 
                  
          // get video thumbnail
          $attrs = $media->group->thumbnail[0]->attributes();
          $thumbnail = $attrs['url'];
                  
          // get <yt:duration> node for video length
          $yt = $media->children('http://gdata.youtube.com/schemas/2007');
          $attrs = $yt->duration->attributes();
          $length = $attrs['seconds'];
                 
          // get <gd:rating> node for video ratings
          $gd = $entry->children('http://schemas.google.com/g/2005'); 
          if ($gd->rating) {
          $attrs = $gd->rating->attributes();
          $rating = $attrs['average'];
          } else {
          $rating = 0;
          }

 

...and this is the code to display it:

 

echo "<div class='fvid' id='vid-1'><object width='270' height='219'><param name='movie' value=\"{$thumbnail}\"></param><param name='allowFullScreen' value='true'></param><embed src=\"{$thumbnail}\" type='application/x-shockwave-flash' allowfullscreen='true' width='270' height='219'></embed></object></div>";

echo "<ul class='vidselector'><li><a href='vid-1'><span>\"{$media->group->title}\"</span></a></li></ul>";

 

The output is the videos and a video name all in a single column as opposed to the tabbed format I was hoping for. 

 

Any advice in how I could create the tabbed view with this type of youtube feed would be greatly appreciated.  Thank you in advance.

[jcanker]

Offhand, I'd start with the fact that your last <ul> isn't placed within a div. Specify <div>s for each section and place the appropriate code in each specific div