I need to add popover/tooltip functionality to my page and I can't get it to work. I don't get any console errors, the popup just does not show up. I've tried reordering my scripts and putting them every part of my code. I tried basically every form of the activation script I could find as you will see here. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="au theme template">
<meta name="author" content="Hau Nguyen">
<meta name="keywords" content="au theme template">
<!-- Title Page-->
<title>Company</title>
<!-- New Tab Favicon -->
<link rel="icon" href="images/favicon_tranparent.png">
<script src="/jquery-3.4.1.min.js" language="JavaScript" type="text/javascript"></script>
<!-- <script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script> -->
<script>
$(function(){
$("#generatedTable").load("<%= table %>");
});
</script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<script>
$(function () {
$('#popover').popover({
container: 'body'
})
})
</script>
<script>
$(function () {
$('.popover').popover({
container: 'body'
})
$('.popover-dismiss').popover({
trigger: 'focus'
})
})
</script>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<script>
jQuery(document).ready(function () {
jQuery('[data-toggle="tooltip"]').tooltip();
});
</script>
<p id="noSpaceName" hidden><%= noSpaceName %><p>
<p id="CSV" hidden><%= CSV %><p>
<script>
function dynamic_file() {
var folder = document.getElementById("noSpaceName").innerHTML
var file = document.getElementById("CSV").innerHTML
console.log("data/" + folder + "/" + file)
return "data/" + folder + "/" + file;
}
function download_file(name) {
var dlink = document.createElement('a');
var currentTime = new Date();
dlink.download = document.getElementById("noSpaceName").innerHTML.concat("-" + currentTime.toDateString().split(' ').join('-'));
dlink.href = name;
dlink.onclick = function(e) {
// revokeObjectURL needs a delay to work properly
var that = this;
setTimeout(function() {
window.URL.revokeObjectURL(that.href);
}, 1500);
};
dlink.click();
dlink.remove();
}
</script>
<!-- Fontfaces CSS-->
<link href="/font-face.css" rel="stylesheet" media="all">
<link href="/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
<link href="/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all">
<link href="/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
<!-- Bootstrap CSS-->
<link href="/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all">
<!-- Vendor CSS-->
<link href="/animsition/animsition.min.css" rel="stylesheet" media="all">
<link href="/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all">
<link href="/wow/animate.css" rel="stylesheet" media="all">
<link href="/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all">
<link href="/slick/slick.css" rel="stylesheet" media="all">
<link href="/select2/select2.min.css" rel="stylesheet" media="all">
<link href="/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all">
<!-- Main CSS-->
<link href="/theme.css" rel="stylesheet" media="all">
<link href="/custom.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="#" />
<script src="/jquery-3.2.1.min.js"></script>
<script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script>
<script src="/bootstrap-4.1/bootstrap.min.js"></script>
</head>
<body class="animsition">
<div class="page-wrapper">
<!-- MENU SIDEBAR-->
<aside class="menu-sidebar d-none d-lg-block">
<div class="logo">
<a href="">
<img src="temp_logo.png" alt="Company Name" />
</a>
</div>
<div class="menu-sidebar__content js-scrollbar1">
<nav class="navbar-sidebar">
<ul class="list-unstyled navbar__list">
<li>
<a class="js-arrow" href="/">
<i class="fas fa-table"></i>Arrest Records</a>
</li>
<li>
<a href="/analytics">
<i class="fas fa-chart-bar"></i>Analytics
</a>
</li>
</ul>
</nav>
</div>
</aside>
<!-- END MENU SIDEBAR-->
<!-- PAGE CONTAINER-->
<div class="page-container">
<!-- HEADER DESKTOP-->
<header class="header-desktop">
<div class="section__content section__content--p30">
<div class="container-fluid">
<div class="header-wrap">
<div></div>
<div class="custom_title">
<h2><font color="#666666"><%= fullName %></font></h2>
</div>
<div class="flex-box">
<!-- <a id="csv" href="" download=""> -->
<a id="popover" data-trigger="hover" data-toggle="popover">Popover</a>
<button onclick='download_file(dynamic_file())' class="btn btn-download"><i class="fa fa-download"></i> Download</button>
<script> $('[data-toggle="tooltip"]').tooltip()</script>
<!-- </a> -->
<!-- Log Out User -->
<form class="form-header" action="/logout?_method=DELETE" method="POST">
<button type="submit" class="btn btn-lightish"><i class="zmdi zmdi-power"></i> Log Out</button>
</form>
</div>
</div>
</div>
</div>
</header>
<!-- END HEADER DESKTOP-->
<!-- MAIN CONTENT-->
<div class="main-content">
<div class="section__content section__content--p30">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="table-responsive table--no-card m-b-30">
<div id="generatedTable"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="copyright">
<p>Copyright © 2020 Company. All rights reserved.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Jquery JS-->
<!-- <script src="/jquery-3.2.1.min.js"></script> -->
<!-- Bootstrap JS-->
<!-- <script src="/bootstrap-4.1/popper.min.js"></script> -->
<script src="/bootstrap-4.1/bootstrap.min.js"></script>
<script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script>
<!-- Vendor JS -->
<script src="/slick/slick.min.js">
</script>
<script src="/wow/wow.min.js"></script>
<script src="/animsition/animsition.min.js"></script>
<script src="/bootstrap-progressbar/bootstrap-progressbar.min.js">
</script>
<script src="/counter-up/jquery.waypoints.min.js"></script>
<script src="/counter-up/jquery.counterup.min.js">
</script>
<script src="/circle-progress/circle-progress.min.js"></script>
<script src="/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="/chartjs/Chart.bundle.min.js"></script>
<script src="/select2/select2.min.js">
</script>
<!-- Main JS-->
<script src="/main.js"></script>
</body>
</html>
<!-- end document-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Related
I need to copy the .container element without using innerHTML.
here the index.html
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/test.css">
<!-- Utilitats CSS i icones Bootstrap CDN -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="js/test.js"></script>
</head>
<body>
<div class="text-center">
<div class="card-header bg-info row">
<div class="col-sm-4">
<img src="https://pbs.twimg.com/profile_images/1046722856929947649/hytXqKH0_400x400.jpg" height="80">
</div>
<div class="col-sm-4">
<h3 class="display-4">Agenda IOC</h3>
<h4 class="text-warning">Consulta tots els esdeveniments</h4>
</div>
<div class="col-sm-4">
<h5 class="card-title">Elegeix la data:</h5>
<input id="data" type="date">
<button id="cerca">Cerca</button>
</div>
</div>
<div class="container">
<div class="card">
<div class="card_image-container">
<img class="card-image" src="http://agenda.cultura.gencat.cat/content/dam/agenda/articles/2018/07/03/033/Esculturas.jpg" alt="">
</div>
<div class="card-body">
<h3 class="card-title">Title</h3>
<p>Description</p>
Go
</div>
</div>
</div>
</div>
<!-- Utilitats js de Bootstrap CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Copy the element and show it when click in the button.
I need to create a function that I can change the values of each element created.
I can not get the values from an HTML page using document.getElementById ("ID"),is returning Null, in all the rest of the code everything works perfectly
Something so simple is driving me crazy, because in other parts of the code identically everything works perfectly
HTML:
<div id="childTemplateNotice" class="col-md-12">
<div class="headerNews col-md-12">
<h1 class="titleNotice"></h1>
<p class="subTitle"></p>
<div class="row">
<span class="date"></span>
</div>
JavaScript:
function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
HTML INDEX:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title></title>
<link rel="stylesheet" type="text/css" href="notice.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/coments/coments.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/header/header.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/footer/footer.css" media="screen" />
<!-- Bootstrap e Jquery -->
<link rel="stylesheet" type="text/css" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" media="screen" />
</head>
<body>
<div class="col-md-12">
<?php include "../../components/header/header.html"; ?>
<div id="noticeFather"class=" col-md-12">
<div class="ads col-md-12 top">
</div>
<div class="headerNews col-md-12">
<h1 class="titleNotice"></h1>
<p class="subTitle"></p>
<div class="row">
<span class="date"></span>
</div>
</div>
<div class="row">
<div class="right col-md-3"></div>
<div class="midle col-md-6">
<p class="body"></p>
<span class="linkTitle"></span>
<a class="linkUrl"></a>
<!-- Coments -->
<div class="comentsDiv col-md-12">
</div>
</div>
<div class="left col-md-3"></div>
</div>
</div>
</div>
<div class="col-md-12">
<?php include "../../components/coments/coments.html" ?>
</div>
<?php include "../../components/footer/footer.html"; ?>
</div>
<!-- Scripts js -->
<script type="text/javascript" src="../../node_modules/moment/min/moment.min.js"></script>
<script type="text/javascript" src="../../node_modules/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../components/header/header.js"> </script>
<script type="text/javascript" src="../../service/esmiucado-service.js"></script>
<script type="text/javascript" src="../../repositorio/repositorio.js"> </script>
<!-- Requisição DataBase -->
<script>
postNotice()
getComents(noticeCod)
</script>
</body>
</html>
I already try:
$(document).ready(function() {
function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
});
and:
window.onload = function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
and they did not work
OBS: the files javascript and html are in different directories
UPDATE:
When I call the function of another page everything works fine, so the problem is when I call this specific page, but I have not yet identified which problem
in document.ready function either remove the function inside it or call the function. First one is also working fine you just have to call the function. window.onload is working perfectly
function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
postNotice();
$(document).ready(function() {
console.log(document.getElementById('childTemplateNotice'))
});
window.onload = function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="childTemplateNotice" class="col-md-12">
<div class="headerNews col-md-12">
<h1 class="titleNotice"></h1>
<p class="subTitle"></p>
<div class="row">
<span class="date"></span>
</div>
The problem was happening simply because I was not calling the html element on the main page.
Can't get ng-click="speakOut()" to work, it is not calling speakOut function, however ng-click="getCalories()" works perfectly. Any ideas what am I doing wrong?
angular.module('watson', ['ngSanitize'])
.controller('textcntr', function($scope, $http) {
$scope.speakOut = function() {
$scope.text = document.getElementById("speak").value;
$http.get('https://stream.watsonplatform.net/text-to-speech/api/v1/synthesize?username=xxx&password=xxx=Your search term').success(function(data) {
console.log(data);
})
.error(function(data, status) {
console.error('Repos error', status, data);
})
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ICP 3</title>
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js" type="application/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- Flexslider -->
<link rel="stylesheet" href="css/flexslider.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<script src="js/respond.min.js"></script>
</head>
<body>
<div class="fh5co-loader"></div>
<div id="page">
<nav class="fh5co-nav" role="navigation">
<div class="container-wrap">
<div class="top-menu">
<div class="row">
<div class="col-xs-2">
<div id="fh5co-logo">ICP 3</div>
</div>
</div>
</div>
</div>
</nav>
<div class="container-wrap">
<aside id="fh5co-hero">
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(images/1.jpg);">
<div class="overlay-gradient"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-md-pull-3 slider-text">
<div class="slider-text-inner">
<h1>Find out calories and serving weight in grams</h1>
<div ng-app="food" ng-controller="foodctrl">
<p><button class="btn btn-primary btn-demo" href="#" ng-click="getCalories()"></i> Search</button></p>
<form style="font-size: large;font-family: Chalkduster">
<input style="font-size: large" type="text" name="food" id="calories" placeholder="Search">
</form>
<p class="currentConditions" ng-bind-html="outputCalories.html" style="font-size: 20px; color: black; font-family: Chalkduster"> </p>
</div>
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/2.jpg);">
<div class="overlay-gradient"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-md-push-3 slider-text">
<div class="slider-text-inner">
<h1>App can speak out the searched keyword</h1>
<!--<h2>Free html5 templates Made by freehtml5.co</h2>-->
<div ng-app="watson" ng-controller="textcntr">
<p><button class="btn btn-primary btn-demo" href="#" ng-click="speakOut()"></i> Speak Out</button></p>
<form style="font-size: large;font-family: Chalkduster">
<input style="font-size: large" type="text" name="textToSpeach" id="speak" placeholder="Speack out">
</form>
<p class="currentConditions" ng-bind-html="currentweather.html"></p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>
<div class="gototop js-top">
<i class="icon-arrow-up2"></i>
</div>
<script src="js/watson.js"></script>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Flexslider -->
<script src="js/jquery.flexslider-min.js"></script>
<!-- Magnific Popup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<!-- Counters -->
<script src="js/jquery.countTo.js"></script>
<!-- Main -->
<script src="js/main.js"></script>
</div>
</div>
</body>
</html>
angular.module('food', ['ngSanitize'])
.controller('foodctrl', function($scope, $http) {
$scope.getCalories = function() {
$scope.foodName = document.getElementById("calories").value;
//$scope.stateCode = document.getElementById("CodeId").value;
// abbrState(stateCode, 'name');
$http.get('https://api.nutritionix.com/v1_1/search/' + $scope.foodName + '?results=0:1&fields=*&appId=xxx&appKey=xxx').success(function(data) {
console.log(data);
calories = data.hits[0].fields.nf_calories;
weight = data.hits[0].fields.nf_serving_weight_grams;
$scope.outputCalories = {
html: "Result: " + $scope.foodName + ' contains: ' + calories + ' calories and serving weight in grams is: ' + weight + '.'
}
})
.error(function(data, status) {
console.error('Repos error', status, data);
})
}
});
I was following this and more articles:
How to display a loading html page while site content loads?
and this here: my favourite:
`https://codepen.io/mimoYmima/pen/fisgL`
My problem is that if I copy and paste it 1:1 my loading page doesn't fade away but if the site is already in cache it doesn't show it.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="Dexter" content="">
<title>Code-Unknown</title>
<!-- ============ GOOGLE FONTS ============ -->
<link href='font-awesome/fonts/Raleway.css' rel='stylesheet' type='text/css'>
<link href='font-awesome/fonts/Open+Sans.css' rel='stylesheet' type='text/css'>
<link href='font-awesome/fonts/Iceberg.css' rel='stylesheet' type='text/css'>
<!-- CSS -->
<!-- Animate css -->
<link rel="stylesheet" type="text/css" href="css/animate.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
<!-- Custom styles CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Bootstrap v3.3.1 -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Favicons -->
<link rel="shortcut icon" href="images/Code-Unknown.ico">
<!-- Css 2.0 -->
<link rel="stylesheet" href="client-login/assets/css/form-elements.css">
<link rel="stylesheet" href="client-login/assets/css/style.css">
<link rel="stylesheet" type="text/css" href="client-login/assets/css/sweetalert.css">
<link href="assets/css/please-wait.css" rel="stylesheet">
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="client-login/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="client-login/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="client-login/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="client-login/assets/ico/apple-touch-icon-57-precomposed.png">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader"></div>
<!-- HEADER -->
<header id="top">
<canvas id="constellation"></canvas>
<div class="welcome">
<div class="logo"><img src="images/logo.png" width="190" height="190" alt=""> </div>
<h1>WELCOME</h1>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 social-login">
<div class="social-login-buttons">
<a class="btn btn-link-2" href="">
<i class="fa fa-steam"></i> Steam
</a>
<a class="btn btn-link-2" href="">
<i class="fa fa-server"></i>
</a>
<a class="btn btn-link-2" href="">
<i class="fa fa-list-alt"></i>
</a>
<a class="btn btn-link-2" href="">
<i class="fa fa-list-alt"></i>
</a>
</div>
</div>
</div>
<p> </p>
</div>
</header>
<!-- END HEADER -->
<!-- END FOOTER -->
<!-- Javascript files -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Backstretch -->
<script src="js/jquery.backstretch.min.js"></script>
<!-- CountDown -->
<script src="js/jquery.countdown.js"></script>
<!-- Validate form -->
<script src="js/jquery.validate.js"></script>
<!-- Scroll Reveal -->
<script src="js/scrollReveal.js"></script>
<!-- Youtube Player -->
<!-- Smooth-scroll -->
<script src="js/smooth-scroll.js"></script>
<!-- Ajax chimp -->
<script src="js/jquery.ajaxchimp.js"></script>
<!-- TweenLite -->
<script src="js/TweenLite.min.js"></script>
<!-- EasePack -->
<script src="js/EasePack.min.js"></script>
<!-- rAF -->
<script src="js/rAF.js"></script>
<!-- Constellation -->
<script src="js/constellation.js"></script>
<!-- Custom -->
<script src="js/main.js"></script>
<!-- right click off -->
<script src="js/rightclickoff.js"></script>
<!-- loading -->
<script src="js/loading.js"></script>
</body>
</div>
</html>
Try this one
$(function() { // waiting for the page to bo be fully loaded
$('#preloader').fadeOut('slow', function() { // fading out preloader
$(this).remove(); // removing it from the DOM
});
});
#preloader {
width: 100vw; /* viewport width */
height: 100vh; /* viewport height. You can use percents, though. It requires your html and body to be 100% x 100% too */
position: fixed;
background: #333 url(http://files.mimoymima.com/images/loading.gif) center no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader"></div>
We also need your markup to narrow down your issue.
Hi I was advised to use ui-router due to having problems with nested views.
I'm trying to create a form like this to go in the middle of my page.
the form
However it doesn't work and it's made my website not being able to load properly. I cannot view anything from the header down. The logo and the header works...but No body and no footer. Form pages are in partials/form.html etc. The body and footer loaded fine before I edited the code to include the forms.
Here's my plunker my app
here's index.html
<html ng-app="financeApp">
<head>
<meta charset="utf-8">
<!-- 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/style.css" rel="stylesheet" type="text/css" />
</head>
<header>
<div class="wrap">
<!-- logo -->
<img class="logo" src="img/logo.png" />
</div>
<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">Form</a>
</li>
<li ng-class="{active: isState('contact') }">
<a ui-sref="contact">Contact</a>
</li>
</ul>
<h3 class="text-muted">Demo Page</h3>
<br>
<div ui-view=""></div>
</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="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.min.js"> </script>-->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"> </script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"> </script>
<script src="js/script.js"></script>
<!--<script src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>-->
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"> </script>
<script src="https://code.jquery.com/jquery-git2.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/directives/directives.js"></script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Thanks