We Keep Coding

Multiple calculation is not working properly

After type a number in input control, below will display multiplication it is working for when i'm using single row but when i work for multiple row this is not working.
How can i do it?
$(function() {
$('.form-control').keyup(function() {
$('.input-number').text($(this).val());
$('.total').text($('.static-number').text() * $('.input-number').text());
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="type a number">
<div class="row">
<div class="col-3"><span>Static Number</span></div>
<div class="col-3"><span>Multiply</span></div>
<div class="col-3"><span>input number</span></div>
<div class="col-3"><span>Total</span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
</div>
</div>

You need to loop through classes and perform the calculations.
$(function() {
$('.form-control').keyup(function() {
$('.input-number').text($(this).val());
$('.static-number').each(function(){
var currentElement = $(this);
var static_num = currentElement.parent().find('div.static-number').text();
var input_num = currentElement.parent().find('div.input-number').text();
currentElement.parent().find('div.total').text(static_num*input_num)
})
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="type a number">
<div class="row">
<div class="col-3"><span>Static Number</span></div>
<div class="col-3"><span>Multiply</span></div>
<div class="col-3"><span>input number</span></div>
<div class="col-3"><span>Total</span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
</div>
</div>

Issue is that when you have multiple elements, your selector will return a list of elements and .text() will concat all their values.
So if you add 3 in textbox, you will get "33" for .input-number and "22" for .static-number. You will have to fetch only first element for this calculation.
Following is the sample:
$(function() {
$('.form-control').keyup(function() {
const value = $(this).val();
$('.input-number').text(value);
console.log(`Your equation is processed as: ${$('.static-number').text()} * ${ $('.input-number').text() }`, )
$('.total').text($('.static-number:first').text() * value);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="type a number">
<div class="row">
<div class="col-3"><span>Static Number</span></div>
<div class="col-3"><span>Multiply</span></div>
<div class="col-3"><span>input number</span></div>
<div class="col-3"><span>Total</span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
</div>
</div>

You have to iterate through each element for calculating sum of the respective rows.
Try the below code:
$(function() {
$('.form-control').keyup(function() {
$('.input-number').text($(this).val());
$('.row').each((i, obj) => {
$(obj).children('.total').text($(obj).children('.static-number').text() * $(this).val());
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="type a number">
<div class="row">
<div class="col-3"><span>Static Number</span></div>
<div class="col-3"><span>Multiply</span></div>
<div class="col-3"><span>input number</span></div>
<div class="col-3"><span>Total</span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
<div class="row">
<div class="col-3 static-number"><span>3</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
</div>
</div>

$(...)
returns a list of elements matching. The functions, e.g. text know how to behave when that list contains a single element but not when it contains multiple elements. you need to act on them individually.
You'll want to do something like:
$('row').each(elem => {
const sn = $(elem).find('.static-number').text()
const input = $(elem).find('.input-number').text()
$(elem).find('.total').text(sn * input)
});

Add class in row which you want to calculate value row_body and loop through this class.
$(function() {
$('.form-control').keyup(function() {
let inputVal = $(this).val();
$('.input-number').text(inputVal);
$('.row_body').each(function(){
$(this).children('.total').text(parseFloat($(this).children('.static-number').text()) * parseFloat(inputVal));
})
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="type a number">
<div class="row">
<div class="col-3"><span>Static Number</span></div>
<div class="col-3"><span>Multiply</span></div>
<div class="col-3"><span>input number</span></div>
<div class="col-3"><span>Total</span></div>
</div>
<div class="row row_body">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
<div class="row row_body">
<div class="col-3 static-number"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number"><span></span></div>
<div class="col-3 total"><span></span></div>
</div>
</div>
</div>

This is not working because class names conflicting while accessing the values.
Try like this.
js:
$(function() {
$('.form-control').keyup(function() {
for(var i=0;i<$('.row_count').length;i++)
{
$('.input-number_row'+i).text($(this).val());
$('.total_row'+i).text($('.static-number_row'+i).text() *$(this).val())
}
});
});
Html:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="type a number">
<div class="row">
<div class="col-3"><span>Static Number</span></div>
<div class="col-3"><span>Multiply</span></div>
<div class="col-3"><span>input number</span></div>
<div class="col-3"><span>Total</span></div>
</div>
<div class="row row_count" >
<div class="col-3 static-number_row0"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number_row0"><span></span></div>
<div class="col-3 total_row0"><span></span></div>
</div>
<div class="row row_count">
<div class="col-3 static-number_row1"><span>2</span></div>
<div class="col-3"><span>*</span></div>
<div class="col-3 input-number_row1"><span></span></div>
<div class="col-3 total_row1"><span></span></div>
</div>
</div>
</div>

Here is simple solution just edit your javascript
`
<script type="text/javascript">
$('.form-control').keyup(function() {
var static = $(".static-number span").html();
var number = $(this).val();
var total = static * number;
$(".input-number span").text(number);
$(".total span").text(total);
});
</script>
`

Bootstrap 4.1.3 NavBar link doesnt work on mobile

I started doing website now and I've known the bootstrap a little while ago. I'm here because I have a problem with navbar link's.
On the homepage the links work perfectly but on the following pages does not work. the same menu.
If anyone can help, I really appreciate it.
<!DOCTYPE html> <!--Index-->
<html lang="pt">
<head>
<title>Urbisouto - A tua imobiliaria</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" type="image/ico" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,900|Oswald:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<div class="site-wrap">
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner">
<div class="container">
<div class="row align-items-center">
<div class="col-6 col-xl-2">
<h1 class="mb-0 site-logo m-0 p-0">logo</h1>
</div>
<div class="col-12 col-md-10 d-none d-xl-block">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
<li>Inicio</li>
<li>Imoveis</li>
<li>Agentes</li>
<li>Sobre nós</li>
<!-- <li>News</li> -->
<li>Contactos</li>
</ul>
</nav>
</div>
<div class="col-6 d-inline-block d-xl-none ml-md-0 py-3"><span class="icon-menu h3"></span></div>
</div>
</div>
</header>
<div class="site-block-wrap">
<div class="owl-carousel with-dots">
<div class="site-blocks-cover overlay overlay-2" style="background-image: url(images/intro_1.jpg);" data-aos="fade" id="home-section">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-md-6 mt-lg-5 text-center">
<h1 class="text-shadow">123</h1>
<p class="mb-5 text-shadow">321</p>
<p> <a href="#properties-section" class="btn btn-primary px-5 py-3" class="smoothscroll arrow-down" class="nav-link" >go</a></p>
</div>
</div>
</div>
</div>
<div class="site-blocks-cover overlay overlay-2" style="background-image: url(images/intro_2.jpg);" data-aos="fade" id="home-section">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-md-6 mt-lg-5 text-center">
<h1 class="text-shadow">123</h1>
<p class="mb-5 text-shadow">321</p>
<p>go</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section" id="properties-section">
<div class="container">
<div class="row large-gutters">
<div class="col-md-6 col-lg-4 mb-5 mb-lg-5 ">
<div class="ftco-media-1">
<div class="ftco-media-1-inner">
<img src="images/vieira/homepage.jpg" alt="#" class="img-fluid">
<div class="ftco-media-details">
<h3>Vieira do Minho</h3>
<p>Braga</p>
<strong>€1.150.000,00</strong>
</div>
</div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-5">
<h2 class="footer-heading mb-4">Sobre nós</h2>
<p>Fundada em 1998, a Urbisouto caracteriza-se por ser uma agência imobiliária, com uma grande experiência no mercado, empenhada em satisfazer a necessidade de quem nos procura.
Fazemos pesquisas de mercado para garantir o melhor preço.</p>
</div>
<div class="col-md-3 mx-auto">
<h2 class="footer-heading mb-4">Quick Links</h2>
<ul class="list-unstyled">
<li>Sobre nós</li>
<li>Serviços</li>
<li>Testemunhos de clientes</li>
<li>Contactos</li>
</ul>
</div>
</div>
</div>
<!-- <div class="col-md-4">
<div class="mb-4">
<h2 class="footer-heading mb-4">Subscribe Newsletter</h2>
<form action="#" method="post" class="footer-subscribe">
<div class="input-group mb-3">
<input type="text" class="form-control border-secondary text-white bg-transparent" placeholder="Enter Email" aria-label="Enter Email" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-primary text-black" type="button" id="button-addon2">Send</button>
</div>
</div>
</form>
</div> -->
<div class="col-md-3 mx-auto">
<h2 class="footer-heading mb-4">Segue-nos</h2>
</span>
<!-- <span class="icon-twitter"></span>
<span class="icon-linkedin"></span>
<span class="icon-instagram"></span> -->
</div>
</div>
</div>
<div class="row pt-5 mt-5 text-center">
<div class="col-md-12">
<div class="border-top pt-5">
<p class="copyright"><small>© <script>document.write(new Date().getFullYear());</script> Urbisouto - Empreendimentos Copyrigth. Design by Albino Teixeira</small></p>
</div>
</div>
</div>
</div>
</footer>
</div>
<span class="icon-angle-double-up"></span>
<script tpye="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/main.js"></script>
</body>
</html>
I remember than on desktop it works well, just in mobile dont work on second page

Website on mobile is defaulting to search box

When I click a link, ng-view renders a new html page, but its defaulting to the searchbox and zooming in on the page in mobile view.
If you are unsure what I mean, go to http://www.andrewhnovak.com with your phone and you will see what I mean.
How can I have it not default to the search box?
Beef-Recipes.html
<!DOCTYPE html>
<html ng-app="RecipeSite">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.2/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" type="text/css" href="app.css">
<script src="app.js"></script>
<title></title>
</head>
<body>
<div class="container">
<div class="row"> </div>
<div class="row top-buffer"> </div>
<div ng-controller="RecipeController">
<div class="row">
<div class="col-md-offset-5 col-sm-offset-4">
<form class="form-inline">
<input ng-model="query" type="text" class="form-control"
placeholder="Search Beef Recipes" autofocus>
</form>
</div>
</div>
<div class="row">
<div ng-repeat="recipe in BeefRecipes | limitTo: -12 | filter:query | orderBy: 'name' ">
<div class="col-md-3">
<br><br>
<button class="btn btn-warning btn-lg" ng-click="open(recipe)"><img ng-src="{{recipe.image}}" alt="recipeImage" class="recipeImage"/><br>{{ recipe.name }}</button> <br />
</div>
</div>
</div>
</div><!--end recipeController-->
</div><!--end container-->
<!--MODAL WINDOW-->
<div class="container">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h2>Recipe </h2><h3>{{ recipe.name }}</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-3">
<img ng-src="{{recipe.image}}" class="recipeImageModal"/>
</div>
<br>
<br>
<div class="col-md-offset-3 col-md-5 col-sm-offset-1 col-sm-5">
<ul>
<li> {{"Cook Time: " + recipe.cookTime }}</li>
<li> {{"Yield: " + recipe.yield}}</li>
</ul>
</div>
</div>
<div class="row top-buffer"> </div>
<div class="row">
<div class="col-md-offset-2 col-md-6 col-sm-offset-2"><div id="ingredientLabel">Ingredients</div>
</div>
</div>
<div class="ingredients">
<br>
<div class="row">
<div class="col-md-6 col-sm-6">
<ul>
<li>{{recipe.ingredient1}}</li>
<li>{{recipe.ingredient2}}</li>
<li>{{recipe.ingredient3}}</li>
<li>{{recipe.ingredient4}}</li>
<li>{{recipe.ingredient5}}</li>
<li>{{recipe.ingredient6}}</li>
<li>{{recipe.ingredient7}}</li>
<li>{{recipe.ingredient8}}</li>
<li>{{recipe.ingredient9}}</li>
<li>{{recipe.ingredient10}}</li>
<li>{{recipe.ingredient11}}</li>
<li>{{recipe.ingredient12}}</li>
<li>{{recipe.ingredient13}}</li>
<li>{{recipe.ingredient14}}</li>
<li>{{recipe.ingredient15}}</li>
<li>{{recipe.ingredient16}}</li>
<li>{{recipe.ingredient17}}</li>
<li>{{recipe.ingredient18}}</li>
<li>{{recipe.ingredient19}}</li>
<li>{{recipe.ingredient20}}</li>
</ul>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="directionsandlabel"> <div class="directionsLabel">
Directions</div>
<div class="directions">
<ol>
<li> {{recipe.direction1}}</li>
<li>{{recipe.direction2}}</li>
<li>{{recipe.direction3}}</li>
<li>{{recipe.direction4}}</li>
<li>{{recipe.direction}}</li>
</ol>
</div>
</div></div>
</div>
</div>
</div><!--end ingredients class-->
</div>
</div>
</script>
</body>
</html>

jQuery code not working on Browser

I am facing a problem that: I have some JQuery code in my HTML View that works fine on my Google Chrome Browser but on another machine(server) Google Chrome the same code if Published on iiS, jQuery stops working.
jS is enabled in Browser but why is this jQuery code not being picked ? Please advise.
Error in SOURCE HTML while ALL JS/jQuery files arre added in path:
#{
ViewBag.Title = "Show";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
#*<meta http-equiv="Refresh" content="5">*#
<title>Wallboard B</title>
<link type="text/css" rel="stylesheet" href="~/cssNew/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="~/cssNew/style.css">
<link rel="icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<span id="View1">
<section class="gage-wrap">
<div class="container-fluid stretch">
<div class="row no-gutter">
<div class="col-lg-3">
<div class="row no-gutter">
<!----- Avg Handle Meter ------>
<div class="col-lg-12 gage">
<h1>Avg Handle Time (Sec)</h1>
<canvas id="avg_handle_meter" width="285" height="170">
Canvas not available.
</canvas>
<span id="avg_handle_value">#ViewBag.averageHandleTime</span> <!---Print Speed -->
</div>
<!----- Avg Handle Meter End ------>
<!----- Avg Speed Meter ------>
<div class="col-lg-12 gage">
<h1>Avg Speed of Answer (Sec)</h1>
<canvas id="avg_speed_meter" width="285" height="170">
Canvas not available.
</canvas>
<span id="avg_speed_value">#ViewBag.averageSpeedOfAnswer</span> <!---Print Speed -->
</div>
<!----- Avg Speed Meter End ------>
</div>
</div><!--/col-md-3-->
<div class="col-lg-6">
<div class="row no-gutter">
<!----- Service Level Meter ------>
<div class="col-lg-12 gage">
<h1>Service Level %</h1>
<canvas id="service_level_meter" width="580" height="333">
Canvas not available.
</canvas>
<span id="service_level_value">#ViewBag.serviceLevel</span><!---Print Speed -->
</div>
<!----- Service Level Meter End ------>
<div class="col-lg-12 gage time">
<h1>Longest Call in Queue</h1>
<span>#ViewBag.longestCallInQueue</span>
</div>
</div>
</div><!--/col-md-6-->
<div class="col-lg-3">
<div class="row no-gutter">
<!----- Total Calls Meter ------>
<div class="col-lg-12 gage">
<h1>Total Calls in Queue</h1>
<canvas id="total_calls_meter" width="285" height="170">
Canvas not available.
</canvas>
<span id="total_calls_value">#ViewBag.callsInQueue</span><!---Print Speed -->
</div>
<!----- Total Calls Meter End ------>
<!----- Abandoned Rate Meter ------>
<div class="col-lg-12 gage">
<h1>Abandoned Rate %</h1>
<canvas id="abandoned_rate_meter" width="285" height="170">
Canvas not available.
</canvas>
<span id="abandoned_rate_value">#ViewBag.abandRate</span><!---Print Speed -->
</div>
<!----- Abandoned Rate Meter End ------>
</div>
</div><!--/col-md-3-->
</div><!--/row-->
</div><!--/container-fluid-->
</section><!--/gage-wrap--><!--/gage-wrap-->
<footer style="margin-top:8%">
<p>Powered by Expertflow BI Services</p>
</footer>
#*<script type="text/javascript" src=""></script>*#
</span>
<span id="View2">
<div id="div2">
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>High ARPU - H+HVC</h1>
</div>
</div>
</div>
</header>
<section class="the-table">
<div class="container-fluid">
<div class="row no-gutter row-eq-height">
<div class="col-md-2 col-sm-6">
<em><span>Logged In Agents</span></em>
<span><span>#ViewBag.loggedInAgents</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>On Calls</span></em>
<span><span>#ViewBag.onCalls</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Agents In Ready</span></em>
<span><span>#ViewBag.agentsInReadyState</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Agents In Not Ready</span></em>
<span><span>#ViewBag.agentsInNotReadyState</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Agents In Wrapup</span></em>
<span><span>#ViewBag.agentsInWrapup</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Reserved Agents</span></em>
<span><span>#ViewBag.reservedAgents</span></span>
</div>
</div><!--/row-->
<div class="row no-gutter">
<div class="col-md-2 col-sm-6">
<em><span>Calls Offered</span></em>
<span><span>#ViewBag.callsOffered</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Calls Answered</span></em>
<span><span>#ViewBag.callsAnswered</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Calls Abandoned</span></em>
<span><span>#ViewBag.callsAbandoned</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Calls In Queue</span></em>
<span><span>#ViewBag.callsInQueue</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Longest Talk Duration</span></em>
<span><span>#ViewBag.longestTalkDuration</span></span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-md-2 col-sm-6">
<em><span>Abandoned %</span></em>
<span><span>#ViewBag.AbandRate</span></span>
</div>
</div><!--/row-->
</div><!--/container-fluid-->
</section><!--/the-table-->
<section class="the-table wide">
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-12">
<em class="large">Service Level %</em>
<span class="large">#ViewBag.serviceLevel</span>
<div class="clearfix visible-xs"></div>
<em>AHT (Sec)</em>
<span>#ViewBag.averageHandleTime</span>
<em>ASA (Sec)</em>
<span>#ViewBag.averageSpeedOfAnswer</span>
<em>Max Time In Queue</em>
<span>#ViewBag.longestCallInQueue</span>
</div>
</div><!--/row-->
</div><!--/container-fluid-->
</section><!--/the-table-->
<footer>
<p>Powered by Expertflow BI Services</p>
</footer>
</div>
</span>
<script type="text/javascript" src="~/jsNew/bootstrap.min.js"></script>
<script type="text/javascript" src="~/jsNew/service-level-meter.js"> </script>
<script type="text/javascript" src="~/jsNew/avg-handle-meter.js"></script>
<script type="text/javascript" src="~/jsNew/total-calls-meter.js"></script>
<script type="text/javascript" src="~/jsNew/avg-speed-meter.js"></script>
<script type="text/javascript" src="~/jsNew/abandoned-rate-meter.js"></script>
<script type="text/javascript" src="~/js/bootstrap.min.js"></script>
<script type="text/javascript" src="~/js/jquery-latest.min"></script>
<script src="~/js/jquery.min.js"></script>
<script src="~/js/jquery-1.6.2.min.js"></script>
<script src="~/js/jquery-ui-1.8.16.custom.min"></script>
<script>
$(document).ready(function () {
function ToggleFunction() {
$('#View2').hide();
alert("HELLO from VIEW1")
myVar = setTimeout(SecondView, 11000);
}
function SecondView() {
$('#View1').hide();
alert("HELLO from VIEW2")
$('#View2').show();
}
});
</script

Your jquery.min.js put it above all your other js files. Jquery library has to load before the rest of the jquery plugins
<script type="text/javascript" src="~/js/jquery-latest.min"></script> <script src="~/js/jquery.min.js"></script> <script src="~/js/jquery-1.6.2.min.js"></script> <script src="~/js/jquery-ui-1.8.16.custom.min"></script>
Now load the the other js
<script type="text/javascript" src="~/jsNew/bootstrap.min.js"></script> <script type="text/javascript" src="~/jsNew/service-level-meter.js"> </script> <script type="text/javascript" src="~/jsNew/avg-handle-meter.js"></script> <script type="text/javascript" src="~/jsNew/total-calls-meter.js"></script> <script type="text/javascript" src="~/jsNew/avg-speed-meter.js"></script> <script type="text/javascript" src="~/jsNew/abandoned-rate-meter.js"></script> <script type="text/javascript" src="~/js/bootstrap.min.js"></script>

JQuery/CSS Parent-Child Inheritance NIGHTMARE

I am having a problem with trying to implement specific JQuery effects into a Bootstrap framework (with its already HUGE CSS that is creating problems).
I have created a sterile, test file called testjquery.html which works fine, connected to a stylesheet that defines a hidden element, and then activates the fade in of this element via JQuery. Here is CSS:
#homepageframex > div > h1 {
display: none;
width: 250px;
margin; 20px;
z-index:100;
}
And here is the HTML that connects to this CSS which works fine:
<!DOCTYPE html>
<!-- BEGIN HTML Document -->
<!-- BEGIN Head -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link media="all" href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/customstylesheet.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<!-- END Head -->
<!-- BEGIN Body -->
<body>
<p>Fade In</p>
<div id="homepageframex">
<div><img src="images/photo1.jpg" height="2000" width="1014" alt="" class="img-responsive" />
<h1 class="gillsanslight50pt" style="color: #53585f;">Test text here</h1>
</div>
</div>
<script type="text/javascript">
(function( $ ) { // closure to prevent JQuery conflicts
$('.fadein-link').click(function(){
$('#homepageframex div h1').fadeIn(3000);
});
})(jQuery);</script>
</body>
<!-- END Body -->
<!-- END HTML Document -->
</html>
Now this works fine. The problem is when I try to implement this same code into a very complicated Bootstrap layout:
<!-- BEGIN DIV for homepageframe1 -->
<div id="homepageframex" class="pad-section">
<div class="container">
<div class="row-fluid">
<div id="content" class="col-xs-12 text-center">
<h1 class="gillsanslight50pt" style="color: #53585f;">Test text here</h1>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe1 -->
And here is the corresponding JQuery code and CSS code changed for the nested DIV tags - but this doesn't work!! Does anyone know why?
<script type="text/javascript">
(function( $ ) { // closure to prevent
$('.fadein-link').click(function(){
$('#homepageframex div div div h1').fadeIn(3000);
});
})(jQuery);</script>
#homepageframex > div > div > div > h1 {
display: none;
width: 250px;
margin; 20px;
z-index:100;
}
Can anyone help and let me know why this is not working for me? What is it that is conflicting?
Thanks.
And here is the complete code of page that is not working:
<!DOCTYPE html>
<!-- BEGIN HTML Document -->
<!-- BEGIN Head -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link media="all" href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/customstylesheet.css" rel="stylesheet">
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<!-- END Head -->
<!-- BEGIN Body -->
<body>
<!-- BEGIN NAV BAR -->
<div id="navigationbartop" class="pad-section">
<div class="container" style="background-color: #FFFFFF;">
<div class="row">
<div class="col-xs-10 text-center"></div>
<div class="col-xs-1 text-center">
<p class="gillsanslight20pt" style="color: #3c3c3b;">About</p>
</div>
<div class="col-xs-1 text-center">
<p class="gillsanslight20pt" style="color: #3c3c3b;">Contact Us</p>
</div>
</div>
</div>
</div>
<!-- END NAV BAR -->
<!-- BEGIN HEADER -->
<!-- <header> -->
<!-- BEGIN container for HEADER DIV -->
<!-- BEGIN DIV for top header DIVs -->
<div id="headerdivs" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-2 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<span class="logotop"><img src="images/logo.png" height="200" width="168" alt="" /></span>
</div>
<div class="col-xs-2 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<p>Fade In</p>
</div>
</div>
</div>
</div>
<!-- END DIV for top header DIVs -->
<!-- END container for HEADER DIV -->
<!-- </header> -->
<!-- END HEADER -->
<!-- BEGIN DIV for homepageframe1 -->
<div id="homepageframex" class="pad-section">
<div class="container">
<div class="row-fluid">
<div id="content" class="col-xs-12 text-center">
<h1 class="gillsanslight50pt" style="color: #53585f;">Test text here</h1>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe1 -->
<!-- BEGIN DIV for arrow down1 -->
<div id="arrowdownX" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down1 -->
<!-- BEGIN DIV for homepageframe2 -->
<div id="homepageframe2" class="pad-section">
<div class="container">
<div class="row">
<div id="testimage1" class="col-xs-12 text-center">
<img src="images/photo1.jpg" height="2000" width="1014" alt="" class="img-responsive" />
<p id="testtext1" class="gillsanslight40pt" style="color: #FFFFFF;">
Test text here also
</p>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe2 -->
<!-- BEGIN DIV for arrow down2 -->
<div id="arrowdown2" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down2 -->
<!-- BEGIN DIV for homepageframe2 -->
<div id="homepageframe2" class="pad-section">
<div class="container">
<div class="row">
<div id="testimage2" class="col-xs-12 text-center">
<img src="images/photo2.jpg" height="3000" width="1655" alt="" class="img-responsive" />
<p id="testtext2" class="gillsanslight40pt" style="color: #FFFFFF;">
Test text three
</p>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe2 -->
<!-- BEGIN DIV for arrow down3 -->
<div id="arrowdown3" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down3 -->
<!-- BEGIN DIV for homepageframe4 -->
<div id="homepageframe4" class="pad-section">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<img src="images/photo3.jpg" height="3000" width="1655" alt="" class="img-responsive" />
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe4 -->
<!-- BEGIN DIV for arrow down4 -->
<div id="arrowdown4" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down4 -->
<!-- BEGIN DIV for homepageframe5 -->
<div id="homepageframe5" class="pad-section">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<img src="images/photo3.jpg" height="3000" width="1655" alt="" class="img-responsive" />
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe5 -->
<!-- BEGIN DIV for homepageframe7 -->
<div id="homepageframe7" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<img src="images/logo_bottom.png" height="380" width="320" alt="" class="img-responsive" />
</div>
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe7 -->
<!-- BEGIN FOOTER -->
<footer>
<!-- BEGIN container for NEWSLETTER DIV -->
<div class="container">
<!-- BEGIN DIV Newsletter -->
<div id="newsletterX" class="pad-section">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h3 class="gillsanslight28pt">Leave your e-mail address to find out more</h3>
</div>
<div class="col-sm-12 text-center" style="color: red;">
<form class="form-horizontal">
<!-- BEGIN DIV for Form Group Line 2 -->
<div class="form-group">
<div class="col-xs-2">
</div>
<div class="col-xs-7">
<span><input type="email" class="form-control" id="contact-email" placeholder="you#example.com">
</div>
<div class="col-xs-1">
<input type="image" src="images/send.png" height="38" width="52" alt="Send" class="mybutton"></span>
</div>
<div class="col-xs-2">
</div>
</div>
<!-- END DIV for Form Group Line 2 -->
</form>
</div>
</div>
</div>
</div>
<!-- END DIV Newsletter section -->
</div>
<!-- END container for NEWSLETTER DIV -->
</footer>
<!-- END FOOTER -->
<!-- BEGIN JavaScript that WORKS rebuilt from individual parts from above script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/jquery.scrollmagic.js"></script>
<!-- <script src="js/main.js"></script>This causes the Google Map to disappear -->
<!-- END JavaScript that WORKS -->
<!-- BEGIN JavaScript for Font -->
<script type="text/javascript">
var MTUserId='5b20f3d6-ea3d-4870-9117-9e155b029f7b';
var MTFontIds = new Array();
MTFontIds.push("693341"); // Gill Sans® W01 Light
MTFontIds.push("692628"); // Gill Sans® W01 Roman
(function() {
var mtTracking = document.createElement('script');
mtTracking.type='text/javascript';
mtTracking.async='true';
mtTracking.src=('https:'==document.location.protocol?'https:':'http:')+'//fast.fonts.net/lt/trackingCode.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(mtTracking);
})();
</script>
<!-- END JavaScript for Font -->
<script type="text/javascript">
(function( $ ) {
$('.fadein-link').click(function(){
$('#content').fadeIn(3000);
//$('#c div').css({
// width:1000,
// height:1000,
});
});
})(jQuery);</script>
</body>
<!-- END Body -->
<!-- END HTML Document -->
</html>

I just set up a bootply with your code - Bootply - and it's working after removing the
'closure to prevent' comment from
(function( $ ) { // closure to prevent
I've added a <div class="fadein-link">fade in</div> to trigger the fade-in.
Update:
To summarize additional information from comments after the complete html having the issue was added in the OP: jquery was included twice, once in the header (as js/jquery.min.js so it's not possible to know which version), and once in the footer as <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>.
Though it's possible to use different versions of jQuery - for details check http://api.jquery.com/jquery.noconflict/ - it's not recommended and maybe isn't necessary at all. It could be necessary to use 2 different jQuery versions. e.g. if included plugins would only work with a specific version, but this doesn't seem to be the case. Removing one of the jquery.js includes didn't solve the issue.
If not already done, I recommend to check if there are any javascript errors by opening the web developer tools, as previously there must have been some errors because of e.g. additional closing )}; which was already removed.
If unfamiliar with web dev tools, find some details for Firefox here: https://developer.mozilla.org/en-US/docs/Tools/Web_Console and for Chrome here: https://developer.chrome.com/devtools/docs/console
Additional test could be to include the jquery/jquery.ui/bootstrap version from the working bootply instead of the current includes:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
Aside - Because OP is new to SO - extended discussions should be avoided, for details https://meta.stackexchange.com/questions/95937/why-must-we-avoid-discussions-in-comments. It's possible to move such an extending discussion from the comments to chat, but it's necessary to have at least 20 reputation for that. Just as explanation as I'm deleting some of my comments to clean this up (which OP could do, too).