I have a set of scripts that I have inherited on a project and am having some issues as I am not a javascript developer in any way.
What I need to do is to abstract this script so that each of my tab objects on a single page aren't actually affecting each other and I don't have to add block after block of script to have another tab work. Specifically looking at tabs, nothing else.
I'm completely lost and not even sure where to start as this one script actually has a bunch of functions and methods that I really don't want to screw up.
any help or pointer in the right direction would be much appreciated.
$(document).ready(function(){
//Go up
$('.footer-up-icon, .going-up').click(function() {
$('body,html').animate({
scrollTop:0
}, 800, 'easeOutExpo');
return false;
});
//Tabs
$('.tab-but-1').click(function(){
$('.tab-but').removeClass('tab-active');
$('.tab-but-1').addClass('tab-active');
$('.tab-content').hide(100);
$('.tab-content-1').show(100);
return false;
});
$('.tab-but-2').click(function(){
$('.tab-but').removeClass('tab-active');
$('.tab-but-2').addClass('tab-active');
$('.tab-content').hide(100);
$('.tab-content-2').show(100);
return false;
});
$('.tab-but-3').click(function(){
$('.tab-but').removeClass('tab-active');
$('.tab-but-3').addClass('tab-active');
$('.tab-content').hide(100);
$('.tab-content-3').show(100);
return false;
});
$('.tab-but-4').click(function(){
$('.tab-but').removeClass('tab-active');
$('.tab-but-4').addClass('tab-active');
$('.tab-content').hide(100);
$('.tab-content-4').show(100);
return false;
});
$('.tab-but-5').click(function(){
$('.tab-but').removeClass('tab-active');
$('.tab-but-5').addClass('tab-active');
$('.tab-content').hide(100);
$('.tab-content-5').show(100);
return false;
});
};
HTML:
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/GRD/images/splash/splash-icon.png" />
<link rel="apple-touch-startup-image" href="/GRD/images/splash/splash-screen.png" media="screen and (max-device-width: 320px)" />
<link rel="apple-touch-startup-image" href="/GRD/images/splash/[email protected]" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" sizes="640x1096" href="/GRD/images/splash/[email protected]" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="/GRD/images/splash/splash-screen-ipad-landscape" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="/GRD/images/splash/splash-screen-ipad-portrait.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)" />
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/GRD/images/splash/splash-screen-ipad-portrait-retina.png" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"/>
<link rel="apple-touch-startup-image" sizes="1496x2048" href="/GRD/images/splash/splash-screen-ipad-landscape-retina.png" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"/>
<title>Get-Er-Done Team</title>
<link href="/GRD/styles/animate.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/GRD/styles/colorbox.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/GRD/styles/font-awesome.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/GRD/styles/framework.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/GRD/styles/owl.carousel.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/GRD/styles/owl.theme.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/GRD/styles/style.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/GRD/styles/swipebox.css" media="screen" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="/GRD/scripts/jquery.js"></script>
<script type="text/javascript" src="/GRD/scripts/jqueryui.js"></script>
<script type="text/javascript" src="/GRD/scripts/wow.js"></script>
<script type="text/javascript" src="/GRD/scripts/owl.carousel.min.js"></script>
<script type="text/javascript" src="/GRD/scripts/jquery.swipebox.js"></script>
<script type="text/javascript" src="/GRD/scripts/colorbox.js"></script>
<script type="text/javascript" src="/GRD/scripts/snap.js"></script>
<script type="text/javascript" src="/GRD/scripts/countdown.js"></script>
<script type="text/javascript" src="/GRD/scripts/contact.js"></script>
<script type="text/javascript" src="/GRD/scripts/custom.js"></script>
<script type="text/javascript" src="/GRD/scripts/framework.js"></script>
<script type="text/javascript" src="/GRD/scripts/framework.launcher.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script></head>
<body >
<div id="preloader">
<div id="status">
<p class="center-text">
Loading the content...
<em>Loading depends on your connection speed!</em>
</p>
</div>
</div>
<div class="header">
<a class="deploy-navigation going-up" href="#">
<i class="fa fa-navicon"></i>
</a>
<a class="header-logo" href="#"><img src="/GRD/images/logo.png" alt="img"></a>
</div>
<div class="header-clear"></div>
<div class="page-navigation full-bottom">
<div class="nav-clear"></div>
<div class="nav-item">
<a href="index.html">
<i class="fa fa-home"></i>
Homepage
<i class="fa fa-angle-right"></i>
</a>
</div>
<div class="nav-item">
<a href="appointment">
<i class="fa fa-calendar"></i>
Schedule an Appointment
<i class="fa fa-angle-down"></i>
</a>
</div>
<div class = "nav-item">
<a class = "submenu-deploy" href = "#">
<i class = "fa fa-navicon"></i>
User Navigation
<i class = "fa fa-angle-down deploy-navigation-active"></i></a>
<div class = "submenu-items submenu-items-active">
<a href="/GRD/dashboard/customers"><i class="fa fa-users"></i>Customers<i class="fa fa-circle"></i></a><a href="/GRD/dashboard/projects"><i class="fa fa-wrench"></i>Projects<i class="fa fa-circle"></i></a><a href="/GRD/dashboard/invoices"><i class="fa fa-money"></i>Invoices<i class="fa fa-circle"></i></a><a href="/GRD/dashboard/users"><i class="fa fa-users"></i>Users<i class="fa fa-circle"></i></a><a href="/GRD/dashboard/company"><i class="fa fa-building-o"></i>Company Info<i class="fa fa-circle"></i></a></div></div> <div class="nav-item">
<a class="submenu-deploy" href="#">
<i class="fa fa-camera"></i>
Gallery
<i class="fa fa-angle-down"></i>
</a>
<div class="submenu-items">
<a href="gallery-thumb.html"><i class="fa fa-th-large"></i>Thumb Gallery<i class="fa fa-angle-right"></i></a>
<a href="gallery-wide.html"><i class="fa fa-navicon"></i>Wide Gallery<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="nav-item">
<a class="submenu-deploy" href="#">
<i class="fa fa-picture-o"></i>
Portfolio
<i class="fa fa-angle-down"></i>
</a>
<div class="submenu-items">
<a href="portfolio-one.html"><i class="fa fa-list"></i>One Column<i class="fa fa-angle-right"></i></a>
<a href="portfolio-two.html"><i class="fa fa-th-large"></i>Two Columns<i class="fa fa-angle-right"></i></a>
<a href="portfolio-three.html"><i class="fa fa-th"></i>Three Columns<i class="fa fa-angle-right"></i></a>
<a href="portfolio-video.html"><i class="fa fa-video-camera"></i>Video Embeds<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="nav-item">
<a href="contact.html">
<i class="fa fa-envelope"></i>
Contact
<i class="fa fa-angle-right"></i>
</a>
</div>
<div class="nav-item">
<a href="#" class="close-navigation">
<i class="fa fa-times"></i>
Close
<i class="fa fa-angle-up"></i>
</a>
</div>
</div>
<div class="nav-clear"></div><div class="lia">Welcome Vikingblooded. <a href="/GRD/auth/logout">(Logout)</a></div>
<div class="content">
<div class="container">
<div class="dashcharts">
<div id="chartPrj" class="chartImg"></div>
<div id="chartInv" class="chartImg"></div>
<div id="chartTasks" class="chartImg"></div>
</div>
<div class="toggle-2">
<a href="#" class="deploy-toggle-2">Projects by Status<em><strong></strong></em></a>
<div class="toggle-content">
<div class="tabs">
<a href="#" class="tab-but tab-but-1 tab-active">Estimate</a><a href="#" class="tab-but tab-but-2 ">In-Progress</a><a href="#" class="tab-but tab-but-3 ">In Review</a><a href="#" class="tab-but tab-but-4 ">Complete</a> </div>
<div class="tab-content tab-content-1">
</div><div class="tab-content tab-content-2">
</div><div class="tab-content tab-content-4">
</div> </div>
</div>
<div class="toggle-2">
<a href="#" class="deploy-toggle-2">Tasks by Status<em><strong></strong></em></a>
<div class="toggle-content">
<div class="tabs">
<a href="#" class="tab-but tab-but-10 tab-active">Unassigned</a><a href="#" class="tab-but tab-but-11 ">Assigned</a><a href="#" class="tab-but tab-but-12 ">In-Progress</a><a href="#" class="tab-but tab-but-13 ">In-Review</a><a href="#" class="tab-but tab-but-14 ">Verified</a> </div>
<div class="tab-content tab-content-10">
</div><div class="tab-content tab-content-11">
</div><div class="tab-content tab-content-12">
</div><div class="tab-content tab-content-13">
</div><div class="tab-content tab-content-14">
</div> </div>
</div>
<div class="toggle-2">
<a href="#" class="deploy-toggle-2">Invoices by Status<em><strong></strong></em></a>
<div class="toggle-content">
<div class="tabs">
<a href="#" class="tab-but tab-but-15 tab-active">Design</a><a href="#" class="tab-but tab-but-16 ">Submitted</a><a href="#" class="tab-but tab-but-17 ">Paid-In-Full</a><a href="#" class="tab-but tab-but-18 ">Paid-Partial</a><a href="#" class="tab-but tab-but-19 ">Overdue</a> </div>
<div class="tab-content tab-content-15">
</div><div class="tab-content tab-content-16">
</div><div class="tab-content tab-content-17">
</div><div class="tab-content tab-content-19">
</div> </div>
</div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var prjData= google.visualization.arrayToDataTable([
['Status','Count'],
['Estimate',1],
['In-Progress',1],
['In Review',1],
['Complete',2],
]);
var options = {
legend: 'left',
title: 'Projects by Status',
is3D: true,
width: 350,
height: 200
};
var chart = new google.visualization.PieChart(document.getElementById('chartPrj'));
chart.draw(prjData, options);var invData= google.visualization.arrayToDataTable([
['Status','Count'],
['Design',2],
['Submitted',2],
['Paid-In-Full',1],
['Paid-Partial',2],
['Overdue',1],
]);
var options = {
legend: 'left',
title: 'Invoices by Status',
is3D: true,
width: 350,
height: 200
};
var chart = new google.visualization.PieChart(document.getElementById('chartInv'));
chart.draw(invData, options);var tasksData= google.visualization.arrayToDataTable([
['Status','Count'],
['Unassigned',5],
['Assigned',4],
['In-Progress',0],
['In-Review',5],
['Verified',9],
]);
var options = {
legend: 'left',
title: 'Tasks by Status',
is3D: true,
width: 350,
height: 200
};
var chart = new google.visualization.PieChart(document.getElementById('chartTasks'));
chart.draw(tasksData, options); }
</script>
</div>
</div><div class="content">
<div class="decoration"></div>
<div class="footer-section">
<p class="footer-text">
Copyright 2014.<br>
All rights reserved.
</p>
<div class="footer-icons">
<a href="#" class="footer-facebook-icon"><i class="fa fa-facebook"></i></a>
<a href="#" class="footer-google-icon"><i class="fa fa-google-plus"></i></a>
<a href="#" class="footer-twitter-icon"><i class="fa fa-twitter"></i></a>
<a href="#" class="footer-up-icon"><i class="fa fa-angle-up"></i></a>
</div>
</div>
</div></body>
</html>
CSS:
.tabs div{
overflow:hidden!important;
}
.tabs a{
color:#343434;
text-transform:uppercase;
}
.tab-content{
overflow:hidden;
display:none;
}
.tab-content p{
margin-bottom:0px;
}
.tab-content-1{
display:block;
}
.tab-active{
background-color:#bee7cf!important;
}
.actve-green{
background-color:#67c68f!important;
}
.tab-but{
font-size:13px;
float:left;
background-color:#f9f9f9;
margin-right:2px;
margin-bottom:2px;
padding-left:10px;
padding-right:10px;
padding-top:5px;
padding-bottom:5px;
}
.tab-content{
background-color:#eeeeee;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
}
Unless you have an actual need to style each of those tab buttons differently, there's no reason to give them individual numbered classes. And on the tab content areas, same deal - use
idif you need individual identifiers to automate.I'd add a
data-attribute to each button, identifying the number of the content to which it relates. You can retrieve that and use it in the ID selector of the content you wish to show.