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!
