conflict tab and smooth scroll scripts

[chechu]

Hey all.
There seems to be a conflict between these two scripts on the same page.

This is the tab script

$('#myTabs a').click(function (e) {
	e.preventDefault()
	$(this).tab('show')
})

And this is the smooth scroll script

$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html,body').animate({
                 scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});

Can anyone help me out so I can have the two scripts running on the same page, please?
Thanks!

[mlegg]

do they use the same javascript version?

[chechu]

Hey, thanks for replying.
I would suppose they do, as both are uploaded on the same webspace, trying to run it at the same page.
The tabs code works; the smooth scroll is what I'd like to add. So I found the smoothscroll code online, trying to implement it.
But then the tabs stopped working.

[styxlawyer]

The second script appears to be overriding the first as both are using <a> tags.

It's difficult to know without seeing your real page, so this is just a guess. You could try removing all the <a> tags in the section with the id "myTabs" and replace them with a set of <div> or <span> tags with a common classname such as "tabsToOpen", then change the first script to the following:

$('#myTabs .tabsToOpen').click(function (e) {
	e.preventDefault()
	$(this).tab('show')
})

[jscheuer1]

Not enough there to tell really. What's the href of a typical tab? If it's a hash, that might be the trouble. If it is and doesn't need to be, make it something else. But if it has to be a hash, and if that's the problem, you pretty much would have to change one of the scripts, probably in a major way.

But as I say, I can't tell from that little bit of code.

Can you provide a link to the page with both scripts on it, even if only one of them works?

[chechu]

Hey John, this is the url
You an see three buttons "houtsoorten" "beglazing" "deuren" beneath the header visual: they perfectly work well with smoothscroll
But at the bottom of the page, there's the tab content "onze zes pijlers" (expertise, opvolging, afspraken) that chokes.

Here's the code of the tabs (line 81) and the smoothscroll.js
Hope you can work it out.
Thanks.

[jscheuer1]

Well let's see - that's not the tab code. There are no $('#myTabs a'). But there does appear to be a conflict. Focus only on the 9 scroll links for the scroll initialization. Use this (three additions/changes - red) instead of the current smoothscroll.js:

$('a.drill-btn-tab[href*=#]:not([href=#])').click(function(e) {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html,body').animate({
                 scrollTop: target.offset().top
            }, 1000);
            e.preventDefault();
        }
    }
});

The browser cache may have to be cleared and/or the page refreshed to see changes.



Notes: The preventDefault() method is preferable to return false as it will not prevent other events from working on these elements (that was the main problem). However, assigning both behaviors to the bottom tabs has other undesirable consequences. USE ONLY ONE FIX OR THE OTHER FOR THIS, but alternatively one could eliminate the other hash links (might be preferable if other scroll links with different class name(s) are used in the future):

$('a[href*=#]:not(.service-name, [href=#])').click(function(e) {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html,body').animate({
                 scrollTop: target.offset().top
            }, 1000);
            e.preventDefault();
        }
    }
});

[chechu]

Works perfectly, thanks!!