DotDragnet
May 24, 2012, 09:57:37 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: follow us on twitter @dotdragnet
 
   Home   Help Search Login Register  
Pages: [1]   Go Down
  Print  
Author Topic: jQuery tabs from original content  (Read 301 times)
SLEE
Hero Member
*****
Posts: 824



View Profile WWW Awards
« on: February 03, 2012, 05:15:56 PM »

I want to try and create tabs from a current html page without changing the html of the page.

The content is structured with a H3 and then a table this repeats x amount of times.
I want to grab the h3 name the tab using the h3 text then get the table following it and make that the tabs content.

simples?dry?

Here is my code:

Code:
(function($){
 
 
  $.fn.tabify = function(){
    $('#your-profile').prepend('<div class="wpt-ui-tabs-wrapper"/>');
$('.wpt-ui-tabs-wrapper').prepend('<ul class="wpt-ui-tabs-nav"/>');

return this.each(function(i){

        var tabList = $('.wpt-ui-tabs-nav');
       
var panelContents = $(this).next().detach();

var tabName = $(this).detach();
        $(tabList).append('<li><a href="#ui-tab-panel' + i +'">' + tabName.text() + '</a></li>');
 
 
        var thisPanel = $('<div id="ui-tab-panel' + i +'" class="wpt-ui-tabs-panel"/>');
        $(thisPanel).prepend(panelContents.html());
       
        $('.wpt-ui-tabs-wrapper').prepend(thisPanel);
        $('.wpt-ui-tabs-wrapper').prepend(tabList);
        $('.wpt-ui-tabs-wrapper').tabs();
     
      });
 
  };
})(jQuery);

$(document).ready(function(){
  $('h3').tabify();
});

can anyone spot where i am going wrong?
« Last Edit: February 03, 2012, 05:29:19 PM by SLEE » Logged

SLEE - still the most confusing ddner...

Follow me on Twitter
SLEE
Hero Member
*****
Posts: 824



View Profile WWW Awards
« Reply #1 on: February 06, 2012, 11:22:53 AM »

fixed!

I had ot move the   $('.wpt-ui-tabs-wrapper').tabs(); to after the call in the documetn.ready

all working thank goodness
Logged

SLEE - still the most confusing ddner...

Follow me on Twitter
Pages: [1]   Go Up
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2006-2008, Simple Machines Valid XHTML 1.0! Valid CSS!