• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Js Tabs + only link tab

R

ragtek

Guest
#1
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
link.PNG
 
R

ragtek

Guest
#2
That's what i tried, but didn't work
Code:
<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

Well-known member
#5
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.
 
R

ragtek

Guest
#6
yea, i've added a id and it works with
Code:
$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^^
 

Naatan

Well-known member
#8
yea, i've added a id and it works with
Code:
$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):

Code:
$("#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:

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

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

Naatan

Well-known member
#10
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

Well-known member
#11
Alternative solution:

Code:
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

Well-known member
#12
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

Well-known member
#13
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.