Js Tabs + only link tab

[ragtek]

Is there a way to have an xenforo tab as an normal link which redirects me to a page, instead of trying to show the content under the tabs?


If you don't know what i mean:
The first tabs should have the normal behaviour and then i want to add a new one, which shouldn't show the content, instead i wish to redirect to a own page

 

[ragtek]

That's what i tried, but didn't work

<ul id="ragtektabs" class="Tabs tabs" data-panes="#ragtek > li">
    <li>
        <a href="#">a</a>
    </li>
    <li>
        <a href="#">b</a>
    </li>
    <li>
        <a href="{xen:link mypage}">This one should redirect to the page instead of tabcontent</a>
    </li>
<li>

 

[guiltar]

Have you tried to bind a redirect to this link using js?

 

[ragtek]

Have you tried to bind a redirect to this link using js?

no^^
i hoped there's a class which i can add to the li element^^
will try it
thx

 

[guiltar]

Js is already binded to '.Tabs' and it seems to always returns false.
Guess, tabs are not designed for it. I would place a link inside most appropriate tab.
But you can also bind another js for redirect.

 

[ragtek]

yea, i've added a id and it works with

$noTab = $("#noTab");
console.log($noTab);
$noTab.bind('click', function(){
window.location = $noTab.data(url);
});

but it takes some time till the redirects works, so i'm seeing the active tab + empty page for ~2 sec

what means that it works, but isn't optimal^^

 

[ragtek]

thx for the idea

 

[Naatan]

yea, i've added a id and it works with

$noTab = $("#noTab");
console.log($noTab);
$noTab.bind('click', function(){
window.location = $noTab.data(url);
});

but it takes some time till the redirects works, so i'm seeing the active tab + empty page for ~2 sec

what means that it works, but isn't optimal^^

You're making things far more complicated than they need to be, you can simply use the following (with the example code given above):

$("#ragtektabs li:last-child a").unbind('click');

For your information, the reason it took a while and you were seeing a blank tab is because you were not canceling the default click event. To fix your code:

$noTab.bind('click', function(e){
window.location = $noTab.data(url);
e.preventDefault();
return false;
});

Also, I realize your code is just a prototype / sample, but I'd recommend you always use "var $noTab" as oppose to leaving out the var, which assigns it as a global variable (practically never a good idea).

 

[guiltar]

Are you sure unbind will work correct if it will be loaded before bind? Last version of jQuery seem to solve this problem.

 

[Naatan]

Are you sure unbind will work correct if it will be loaded before bind? Last version of jQuery seem to solve this problem.

That's relative to when you call unbind of course. But you can fairly easily make sure you do that right either by listening to the relevant ajax request or validating with setInterval. Whereas his original solution would always be problematic as there's no way to guarantee his click event is triggered before the XF one.

 

[Naatan]

Alternative solution:

var originalOnBeforeClick = XenForo.Tabs.prototype.onBeforeClick;
 
XenForo.Tabs.prototype.onBeforeClick = function(e, index)
{
    if ($(this).hasClass('regularLink')) return false;
    return originalOnBeforeClick.call(this, e, index);
}

Then just add class="regularLink" to your link.

Might need a tweak or 2, I haven't tested it.

 

[guiltar]

XF core does nothing except showing a new tab. So it doest'n matter when redirect will happen before or after the tab will be shown.

 

[Naatan]

XF core does nothing except showing a new tab. So it doest'n matter when redirect will happen before or after the tab will be shown.

True but if you don't cancel or bypass the original event you will get a blank tab, which doesn't break anything but it's not pretty / user friendly.