Grow your CSS skills. Land your dream job.

Javascript interfering with other javascript

  • # December 29, 2012 at 10:37 pm

    Currently [on a test site](http://projectrain.boots3pots.com/profile.html “test site”), I’ve used javascript tutorials to attempt to create a content area which both has tabbed navigation as well as custom javascript scrollbars. However, when both applied, they interfere with eachother and the content area doesn’t show any content. The area which I’m referring to on the live page is on your right-hand side (guides/posts/comments).

    After trivial testing, I’ve found that [jscrollpane.min.js](http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js “jscrollpane.min.js”) is what’s interfering with tabs.js: function resetTabs(){
    $(“#tab_content > div”).hide(); //Hide all content
    $(“#tabs a”).attr(“id”,””); //Reset id’s
    }

    var myUrl = window.location.href; //get URL
    var myUrlTab = myUrl.substring(myUrl.indexOf(“#”)); // For mywebsite.com/tabs.html#tab2, myUrlTab = #tab2
    var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab

    (function(){
    $(“#tab_content > div”).hide(); // Initially hide all content
    $(“#tabs li:first a”).attr(“id”,”current”); // Activate first tab
    $(“#tab_content > div:first”).fadeIn(); // Show first tab content

    $(“#tabs a”).on(“click”,function(e) {
    e.preventDefault();
    if ($(this).attr(“id”) == “current”){ //detection for current tab
    return
    }
    else{
    resetTabs();
    $(this).attr(“id”,”current”); // Activate this
    $($(this).attr(‘name’)).fadeIn(); // Show content for current tab
    }
    });

    for (i = 1; i < = $("#tabs li").length; i++) {
    if (myUrlTab == myUrlTabName + i) {
    resetTabs();
    $(“a[name='”+myUrlTab+”‘]”).attr(“id”,”current”); // Activate url tab
    $(myUrlTab).fadeIn(); // Show url tab content
    }
    }
    })()

    Being a complete javascript noob, this could very well be a noob fix, but I’ve included what files are involved just in case. Thanks in advance for any help!

    # December 30, 2012 at 4:37 am

    since it seems im to stupid to post code here :)

    http://codepen.io/flocko/pen/pcGyg

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".