[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 854
  • Last Modified:

tabs based on jquery ui: select a tab from a text link instead of clicking a tab itself?

Hi I am using a tabs in a layout (based on the jquery ui but I think it may have been edited).
Tabs working fine but I need to open a tab from another link instead of clicking the link itself.

I have seen on jquery ui an example of code but I can't get it to work:
var $tabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});

Open in new window


The link I have is in the first tab container and needs to open the second tab container.
I have tried a few ideas and have managed to open the tab but had a second issue that it opens as an anchor and shifts the content up the viewing window which isn't desireable and/or I am using @font-face for some text and in some attempts this has completely disappeared on the 2nd tab opening from my link (also unacceptable).

Best you see all as is rather than me copying loads of code you'll get an idea what I want to achieve here: my page.
This is the page I want this to work on and on the first tab "What we do" the 1st image in the tab container should open the 2nd tab container as if I had clicked the tab.

Really need this sorted asap so 500,
0
boxhedge
Asked:
boxhedge
  • 5
  • 4
  • 3
1 Solution
 
leakim971PluritechnicianCommented:
check this : http://validator.w3.org/check?uri=http%3A%2F%2Fwww.hrbullets.co.uk%2Ffacebook-sws%2Findex.php&charset=%28detect+automatically%29&doctype=Inline&group=0

$('#my-text-link').click(function() { // bind click event to link
    $('#example').tabs('select', 2); // switch to third tab
    return false;
});
0
 
leakim971PluritechnicianCommented:
the code to select the tab 2 is the right one

not sure where you put line 1
not sure about your html
0
 
MacAnthonyCommented:
The id selector '#my-text-link' doesn't match any elements. Is the image supposed to have that id?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
boxhedgeAuthor Commented:
I'll look in the the validation. thx.

Ok I'm still not sure how to get this to work (as the code I posted).
I have just attempted to give my  link the id:

<a href="#your-tab-id-2" title="Swimming Lessons one to one" class="front" target="_self" id="my-text-link">

Then the code you posted I changed: #example to first: .tabs_holder then #content_holder

Neither worked.

Can you look at my code and give your idea.



0
 
boxhedgeAuthor Commented:
MacAnthony agreed, as someone without any javascript expertise I really need a full solution based on the code you see on the page.
Otherwise I am filling in the gaps with my own logic, which could be dangerous ;)
0
 
MacAnthonyCommented:
Ok, I misunderstood. I thought the code you provided was used on the page, but it's the example from the jquery-ui documentation. Where is the code that sets up the tabs? Is it that skinable_tabs_min.js?

Once I know that, i should be able to figure out what modifications we need to make to the jquery-ui example to get yours to work.

Do you have the jquery-ui exmaple on the page anywhere?
0
 
boxhedgeAuthor Commented:
Yes , as far as I know, then just a little a the end of my doc to choose the skin/effect from skinable_tabs_min.js and I think it works without the jquery ui (as long as you don't want effects).
0
 
leakim971PluritechnicianCommented:
ok use this hack :


$('#my-text-link').click(function(e) { // bind click event to link
    e.preventDefault();
    $(".your-tab-id-2-tab_header").trigger("click"); // switch to second tab
});
0
 
MacAnthonyCommented:
The skinableTabs plugin is different than the jquery-ui tabs so the jquery-ui example won't work. According to it's documentation, you should only have to change the href to be href="#tab-2" and that should automatically select the 2nd tab.
0
 
MacAnthonyCommented:
The href of the desired source link, that is.
0
 
boxhedgeAuthor Commented:
Thanks to both, as this was first question I am not sure if I should split but this is definitely the answer I needed even if it is a hack. So all points I guess..not sure of the etiquette
0
 
MacAnthonyCommented:
If leakim971's solution worked for you, it's fine that he got the points. I'm glad you got it working.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now