Apologies for the simple question, I am new to web design and couldn't find a solution even after extensive googling and searching.
The issue I am facing is that when clicking on "EX5" or "EX6" in my navbar, it shifts to the left side of the screen instead of staying at the top.
Here is a snippet of my code:
Navbar:
<!DOCTYPE html>
<html ng-app='sampleApp'>
<head>
<link data-require="bootstrap-css" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6a7a8a1b3aaa7b4e8acb586f7e8f2e8be">[email protected]</a>" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbbab5bcaeb7baa9f5b1a89beaf5eff5a3">[email protected]</a>" src="https://code.angularjs.org/1.4.9/angular-route.js" data-semver="1.4.9"></script>
<script src="../js/script.js"></script>
<script src="../js/headerController.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default" ng-controller="HeaderController">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">JS</a>
</div>
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/')}"><a href="#/ex1">EX1</a></li>
<li ng-class="{ active: isActive('/ex2')}"><a href="#/ex2">EX2</a></li>
<li ng-class="{ active: isActive('/ex3')}"><a href="#/ex3">EX3</a></li>
<li ng-class="{ active: isActive('/ex4')}"><a href="#/ex4">EX4</a></li>
<li ng-class="{ active: isActive('/ex5')}"><a href="#/ex5">EX5</a></li>
<li ng-class="{ active: isActive('/ex6')}"><a href="#/ex6">EX6</a></li>
... <!-- Other list items -->
</ul>
</div>
</nav>
</header>
<ng-view></ng-view>
</body>
</html>
Exercise 6 Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../styles/stylesheet.css">
<title>Exercise 6</title>
<script src="../js/script.js"></script>
</head>
<body>
<div>
<h2>Add an image, upon clicking, change the image</h2>
<hr>
<img onclick="changeImg()" id="sourceImg" src="../styles/images/diluc.jpg" alt="diluc">
</div>
</body>
</html>
JavaScript Function:
// JavaScript function to change image
var currentImage = "../styles/images/diluc.jpg"
function changeImg(){
if(currentImage == "../styles/images/diluc.jpg"){
document.getElementById("sourceImg").src="../styles/images/venti.jpg";
currentImage = "../styles/images/venti.jpg"
}else{
document.getElementById("sourceImg").src = "../styles/images/diluc.jpg"
currentImage = "../styles/images/diluc.jpg"
}
}
/////Navigation Bar
(function () {
var app = angular.module('sampleApp',['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl:'../exercises/ex1.html'
})
.when('/ex2',{
templateUrl:'../exercises/ex2.html'
})
... <!-- Other route configurations -->
.otherwise({ redirectTo:'/'});
});
})();
Header Controller:
(function () {
var headerController = function ($scope, $location)
{
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
};
angular.module('sampleApp').controller('HeaderController',headerController);
}());
CSS Styling:
#sourceImg{
width: 500px;
}
I would greatly appreciate your assistance as I am struggling to resolve this issue on my own. Thank you!