This my html file. I am adding this file to ng-view. But the drop down does not seem to work.
<button style="background-color: transparent; border: none" class="dropdown-toggle" data-toggle="dropdown" type="button">Admin
<span class="caret"></span>
<ul class="dropdown-menu">
<li><a role="menuitem" tabindex="-1" href="#">Logout</a></li>
</ul>
</button>
These are the necessary css and js files needed for my application. I have a single page application so I am adding above html code to this using ng-view
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
<script src="/javascripts/vendor/angular-route.js"></script>
<script src="/javascripts/app.js"></script>
<script src="/javascripts/commons/constants.js"></script>
<!-- Directives scripts -->
<script src="/javascripts/directives/passwordpattern.js"></script>
<script src="/javascripts/directives/passwordstrength.js"></script>
<!-- Scripts for authentication-->
<script src="/javascripts/services/AuthService.js"></script>
<script src="/javascripts/controllers/AuthController.js"></script>
<!-- Scripts for Trucks -->
<script src="/javascripts/services/TruckService.js"></script>
<script src="/javascripts/controllers/TrucksController.js"></script>
<!-- Scripts for customers -->
<script src="/javascripts/services/CustomerService.js"></script>
<script src="/javascripts/controllers/customersController.js"></script>
<!-- Scripts for Admin -->
<script src="/javascripts/controllers/AdminController.js"></script>
<!--<script data-main="/javascripts/main.js" src="/javascripts/vendor/require-2.2.0.js"></script>-->
<!-- Stylesheets -->
<link rel='stylesheet' href='/stylesheets/style.css'/>
<link rel="shortcut icon" href="https://cdn1.iconfinder.com/data/icons/smallicons-logotypes/32/amazon-16.png"/>
<!-- <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"/>-->
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css"/>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.material.min.css" />
<!-- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>-->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script>
As reported from "Libor Zahrádka" you need to include the bootstrap javascript library:
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
<script src="/javascripts/vendor/angular-route.js"></script>
<script src="/javascripts/app.js"></script>
<script src="/javascripts/commons/constants.js"></script>
<!-- Directives scripts -->
<script src="/javascripts/directives/passwordpattern.js"></script>
<script src="/javascripts/directives/passwordstrength.js"></script>
<!-- Scripts for authentication-->
<script src="/javascripts/services/AuthService.js"></script>
<script src="/javascripts/controllers/AuthController.js"></script>
<!-- Scripts for Trucks -->
<script src="/javascripts/services/TruckService.js"></script>
<script src="/javascripts/controllers/TrucksController.js"></script>
<!-- Scripts for customers -->
<script src="/javascripts/services/CustomerService.js"></script>
<script src="/javascripts/controllers/customersController.js"></script>
<!-- Scripts for Admin -->
<script src="/javascripts/controllers/AdminController.js"></script>
<!--<script data-main="/javascripts/main.js" src="/javascripts/vendor/require-2.2.0.js"></script>-->
<!-- Stylesheets -->
<link rel='stylesheet' href='/stylesheets/style.css'/>
<link rel="shortcut icon" href="https://cdn1.iconfinder.com/data/icons/smallicons-logotypes/32/amazon-16.png"/>
<!-- <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"/>-->
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css"/>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common-material.min.css"/>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.material.min.css"/>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="dropdown">
<button style="background-color: transparent; border: none" class="dropdown-toggle" data-toggle="dropdown"
type="button">Admin
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a role="menuitem" tabindex="-1" href="#">Logout</a></li>
</ul>
</div>
Use it this way:
<div class="dropdown">
<button style="background-color: transparent; border: none" class=dropdown-toggle" data-toggle="dropdown" type="button" >Admin
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a role="menuitem" tabindex="-1" href="#">Logout</a></li>
</ul>
</div>
Related
i am trying to find out why when i use a moblile device or resize the screen to small, when you press the toggle button the links come but no background color??
I am using bootstrap, any idea on how to fix this?
If you would like to see for yourself visit https://www.makeyourweb.co.uk/
The code in my head is:
<head>
<script data-ad-client="ca-pub-1761720526329589" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Required meta tags -->
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="lib/typed.js" type="text/javascript"></script>
<script src="assets/demos.js"></script>
<link href="assets/demos.css" rel="stylesheet"/>
<link href="assets/css/contan.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-175922448-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-175922448-1');
</script>
<meta name="description" content="We offer innovate and agile website solutions to local businesses to allow them to have a professional web presence. We offer flexible and bespoke solutions!">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="./assests/css/linearicons.css" />
<link rel="shortcut icon" href="./assets\img\icons\favicon.ico" />
<link rel="stylesheet" href="./assets/css/animate.css" />
<link rel="canonical" href="https://makeyourweb.co.uk/">
<link rel="stylesheet" href="./assets/css/price.css">
<link rel="stylesheet" href="./assets/css/totop.css">
<link rel="stylesheet" href="./assets/css/linearicons.css" />
<link rel="stylesheet" href="./assets/css/magnific-popup.css" />
<link rel="stylesheet" href="./assets/css/jquery-ui.css" />
<link rel="stylesheet" href="./assets/css/nice-select.css" />
<link rel="stylesheet" href="./assets/css/main.css" />
<link href="./assets/img/icons/MetroUI_OS_Apple.png" rel="apple-touch-icon" />
<link href="asset/demos.css" rel="stylesheet"/>
<link href="lib/typed.js" rel="javascript">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>
var typed3 = new Typed('#typed3', {
strings: ['standard websites', 'premium websites', 'email accounts'],
typeSpeed: 45,
backSpeed: 75,
smartBackspace: true, // this is a default
loop: true
});
</script>
<title>Make Your Web | Get a website today | No hidden costs</title>
</head>
and my nav bar code is
<!-- navbar -->
<?php //include('database/connection.php')?>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-theam text-white">
<div class="container">
<a class="navbar-brand m-0 p-0" href="/">
<img src="./assets/img/logos/logo.png" alt="picture" class="img-fluid" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav text-uppercase ">
<li class="nav-item">
<a class="nav-link active" href="/">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://makeyourweb.co.uk#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://makeyourweb.co.uk#services">Services</a>
</li>
<li class="nav-item pl-3">
<a class=" btn btn-outline-warning" href="/quote">Get a quote</a>
</li>
</ul>
</div>
</div>
</nav>
if you can help out that would be great thanks!
Why not try giving it background color in your css
.navbar-collapse {
background: #444;
}
Have you tried something like that?
div.navbar-collapse{
background: "your color";
}
You can add an !important to crush the predefined bootstap styles if needed...
div.navbar-collapse{
background: "your color" !important;
}
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>
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.
Once upon a time my single page rails app showed a nice d3.js graph. This was derived from a database and showed all the users in the app.
Then I applied devise. The intention was for the same d3.js svg (called graph.js in the app) to show up in all users screene
I changed the users table so that it accommodated the devise fields as well as my own.
Now the d3.js won't show and I don't know why.Everything else shows on the page however including other javascript files in the same assets folder does show up. Debugging in the chrome browser shows there are no javascript errors. I'm not sure where to begin with finding out why the javascript doesn't show up
The code for the page:
<!DOCTYPE html>
<html>
<head>
<title>Graph</title>
<link data-turbolinks-track="true" href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/dcsns_dark.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/dcsns_light.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/dcsns_wall.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/transition.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/alert.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/modal.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/dropdown.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/scrollspy.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/tab.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/popover.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/collapse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/carousel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/affix.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/d3.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bchart.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/d3.v3.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/graph.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/user.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="jACMIxlQrneyrGGgGKtYZaK587ab6/W6KKQD7YyU+Es=" name="csrf-token" />
</head>
<body>
<div class="container-full">
<div class="row">
<div class="col-lg-12 text-center v-center">
<h1>big.f</h1>
</div>
</div>
</div>
<p class="navbar-text pull-right">
Logged in as <strong>sebastiz#example.com</strong>.
<a class="navbar-link" href="/users/edit">Edit profile</a> |
<a class="navbar-link" data-method="delete" href="/users/sign_out" rel="nofollow">Logout</a>
<script src="/assets/javascripts/d3.v3.min.js" charset="utf-8"></script>
<script> $(".alert").addClass("in").fadeOut(4500);
/* swap open/close side menu icons */
$('[data-toggle=collapse]').click(function(){
// toggle icon
$(this).find("i").toggleClass("glyphicon-chevron-right glyphicon-chevron-down");
});
//initializeGraph();
</script>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<div class="col-md-8">
<div id="chart"><script src="/assets/graph.js?body=1"></script></div>
</div>
</div>
<div class="span4">
<div class="col-md-2">
<div class="well">
<h2>Profile</h2>
<p>
<a class="btn" href="#">View details »</a>
<div class='profile-content'></div>
<div id="FBDiv"></div>
</p>
</div>
<div id="chart_1"><script src="/assets/bchart.js?body=1"></script></div>
</div>
</div>
</div>
</div>
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