Hi I have an angular app. It runs great. I've decided that I want it to animate between views. In this case...when the person clicks on a link on a navbar...the view slides to a different view.
I got the idea from this: Sliding between viewsThis works! but the footer has shot up in the middle of the screen and the navbar is behind the sliding view. The location of this code is definitely the culprit:
<div ui-view class="slide"></div>
I have no idea where to put it. I've tried putting it above the navbar...not surprisingly...it makes the navbar slide...so I moved it below the navbar...it works...but the whole view slides top of header and behind the footer! as opposed to it sliding with the footer still at the bottom and header at the top where it should be.
This is what it SHOULD look like:
instead it looks like this:
Any help would be greatly appreciated thanks.
<html ng-app="financeApp">
<head>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<
<link href="css/higgidy_carousel.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<!-- HEADER AND NAVBAR -->
<header>
<div class="wrap">
<!-- logo -->
<a href="#!"><img class="logo" src="img/logo.png" /></a>
<h7>Change the way you save
into your investments<h7>
</header>
<body>
<ng-controller = "demoCtrl">
<ul class="nav nav-pills pull-right">
<li ng-class="{active: isState('home') }">
<a ui-sref="home">Home</a>
</li>
<li ng-class="{active: isState('form') }">
<a ui-sref="form">Join Us</a>
</li>
<li ng-class="{active: isState('about') }">
<a ui-sref="about">About</a>
</li>
<li ng-class="{active: isState('invest') }">
<a ui-sref="invest">Investments</a>
</li>
<li ng-class="{active: isState('contact') }"> </div>
<a ui-sref="contact">Contact</a>
</li>
</ul>
<h3 class="text-muted"> </h3>
<br>
</div>
<div ui-view class="slide"></div>
<!-- Loading the Footer -->
<div id="footer" ng-include="'partials/footer.html'"></div>
<!-- App JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="js/script.js"></script>
<script data-require="[email protected]" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"> </script>
<script src="js/controllers/controllers.js"></script>
<script src="js/directives/directives.js"></script>
<script src="js/higgidy_carousel.js"></script>
<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>
</body>
</html>
I read your post twice but could not exactly understand your problem. But from what I understood you have to do proper style. What I usually do:
position:relativeposition:absoluteto both views containers.That will not push another view to the bottom and also change position of other elements on your page.