I am using the Fullcalendar library for a project, I followed the documentation but I noticed that on mobile I don't get to see the calendar itself, just the headings (prev, next).
I tried several cases. For instance, when I click on week or day the view loads and it works, it seems like it doesn't load properly on page load.
Here is my index, where I call the required libraries:
Head of index.html
<link rel='stylesheet' href='node_modules/fullcalendar/dist/fullcalendar.css' />
Bottom of the index page
<!-- scripts -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="node_modules/bootstrap-material-design/dist/js/material.min.js"></script>
<script src='node_modules/moment/min/moment.min.js'></script>
<script src='node_modules/fullcalendar/dist/fullcalendar.js'></script>
<script src="js/jquery.sticky-kit.min.js"></script>
<script src="js/script.js"></script>
Any idea on why this is happening?
Related
TL;DR Changing the order (or removing) the Bootstrap JS affects which module works properly.
I have been looking high and low for an answer to this specific question, but nothing has quite remedied the situation..here goes.
On my page, I have the 'hamburger' dropdown menu on the left-hand side and a sign up button (to call a modal) on the right hand side using Bootstrap. Here's the JS order I call at the bottom of my footer.php:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="https://apis.google.com/js/api.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/assets/js/main.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/assets/js/bootstrap.min.js"></script>
By changing the order of the JS, I can get one of the two modules working. Lemme explain:
Situation #1 (using the order above): I click the mobile 'hamburger' menu and the menudrops down BUT when clicked again, it refuses to go back up (you can see it move slightly but it still stays down). I read that this is a multiple jQuery/js issue. So I went ahead and checked my header and footer.php and no other bootstrap javascripts were being called. HOWEVER, when I delete the bootstrap.min.jsthe menu toggle works like a charm. Note: The modal popup works perfectly as well.
Situation #2: By moving the bootstrap.min.jsto the top of the scripts, the menu works as expected, BUT now the signup button, when clicked, will display the modal briefly and then disappear. These issues can be resolved by removing the bootstrap.min.js again....
So my question is, is the bootstrap.js being called by any one of these other scripts? B/c the problem ceases to exist once that file is removed!
Thanks everyone for you help.
Try switching the order of your last two script files to this. Seems like bootstrap is overriding your custom script file because it is declared below it. once your remove bootstrap it seems to work like a charm
<script src="<?php bloginfo('template_directory'); ?>/assets/js/bootstrap.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/assets/js/main.js"></script>
Secondly, you are using bootstrap-css for their classes but you are using main.js for toggling menu.
so both of the script are colliding with each other
either you should change your class that you're calling in main.js or you should use bootstrap.js entirely
like in bootstrap it calls the button with class="navbar-toggle" to toggle the menu
if you are using somethig like $(".navbar-toggle") in your main.js then they would interfere with each other.
For you modal problem: Since it is working for short time, it may be the case tha the modal-toggle is being called by two scripts simultaneously.
Find the modal portion in bootstrap.js and comment it out.
I have got the same issue when all my menu changed colour when I started using a new jquery / bootstrap modal. To sort this issue I have change the order and put all together at menu.php page.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap Menu Stuff-->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!--Bootstrap Modal Stuff-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<link href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" rel="stylesheet"/>
I have quite a bunch of script and libraries that I am using in my website, which takes like 5 to 8 seconds to load.
ex.
<script type="text/javascript" src="../lib_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../lib_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib_components/angular/angular.js"></script>
<script type="text/javascript" src="../lib_components/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="../lib_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="../lib_components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="../lib_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="../lib_components/lodash/dist/lodash.min.js"></script>
<script type="text/javascript" src="../scripts/js/overdo.js"></script>
I want to show a loading bar till all the scripts have been loaded, can anyone guide me on whats needs to be done for that?
There is very simple approach you can use in case when all the scripts you want to load are loaded synchronously (you don't use modules loader, async attributes, etc) - like in your example.
The trick is add progress indicator script the very first on the page, before all your heavy scripts. It is also make sense to inline this script (because it shouldn't be too big ideally):
<script>
// some progress bar implementation progress.show()
console.log('showing progress, loading bar, etc.');
</script>
<script src="../lib_components/jquery/dist/jquery.min.js"></script>
<script src="../lib_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib_components/angular/angular.js"></script>
<script src="../lib_components/angular-resource/angular-resource.min.js"></script>
<script src="../lib_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="../lib_components/angular-cookies/angular-cookies.min.js"></script>
<script src="../lib_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../lib_components/lodash/dist/lodash.min.js"></script>
<script src="../scripts/js/overdo.js"></script>
<script>
// hiding loading bar
console.log('scripts loaded')
</script>
Now, for the implementation of the actual progress bar, it's up to you how and what to render. However, remember that depending on where you put those scripts DOM tree might not be loaded yet (if scripts are in <head>). I would anyway recommend to place scripts before closing </body>. The ideal structure for this approach would be:
<!DOCTYPE html>
<html>
<head>
<!-- some styles, no scripts here -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="assets/styles.css" />
</head>
<body>
<div class="loading" hidden>Loading...</div>
<!-- Some application HTML code -->
<script>
// show/create progress/loading
var loading = document.querySelector('.loading')
loading.hidden = false
</script>
<!-- many script tags ... -->
<!-- ... -->
<script>
// hide/remove progress/loading
loading.parentNode.removeChild(loading)
</script>
</body>
</html>
Apologies if this is an old question. I have spent a few hours searching for an answer but had no luck.
I'm attempting to convert an existing (primarily jQuery) application to use AngularJS. I've hit a problem where a JavaScript file I am including in index.html is being run too early when being included in my AngularJS application. i.e. by using a <script> tag:
<script type="text/javascript" src="/components/js/theme.js"></script>
This file contains a lot of jQuery which needs the rest of the page to have been rendered to have an effect. So is there a way I can include this script and ensure it is only loaded after the rest of the page has finished loading? I have a set of directives on the page and the script is being loaded before these are rendered.
Update:
Here is the structure of my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App Title</title>
<base href="/">
<!-- icons and CSS -->
<link href="/img/ico/favicon.ico" rel="shortcut icon"
type="image/vnd.microsoft.icon">
<link href="/css/bootstrap.min.css" media="screen" rel="stylesheet"
type="text/css">
<!-- External Libraries -->
<script type="text/javascript" src="/external/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/external/angular/angular.js"></script>
<!-- Angular Components -->
<script type="text/javascript" src="/components/services/ui.js"></script>
<script type="text/javascript"
src="/components/navigation/js/navigation.js"></script>
<!-- App set and config -->
<script type="text/javascript" src="/js/app/app.js"></script>
<script type="text/javascript" src="/js/app/config.js"></script>
<script type="text/javascript" src="/js/app/routes.js"></script>
<!-- endbuild -->
<!-- Precompiled HTML templates -->
<script type="text/javascript" src="/js/templates.module.js"></script>
</head>
<body ng-cloak>
<!-- directive -->
<top-nav-bar></top-nav-bar>
<div class="content">
<div class="container">
<!-- directive -->
<side-nav-bar></side-nav-bar>
<!-- angular view -->
<div ng-view></div>
</div>
</div>
<!-- directive -->
<adysis-footer></adysis-footer>
<!-- Bootstrapper -->
<script src='/js/app.bootstrap.js' type='text/javascript'></script>
<!-- JAVASCRIPT FILE WHICH NEEDS TO RUN AFTER PAGE HAS LOADED! -->
<script type="text/javascript" src="/components/js/theme.js"></script>
</body>
</html>
As you can see, the "theme.js" file is the last item of the <body>. I have stopped in the file to ensure it is being loaded. But this is always done before the rest of the page has rendered. Could some other JavaScript be interfering upsetting things? Note that I have not included all of the JavaScript files that are being included.
Update 2:
I've added further break points in the JavaScript functions for the directives you can see in my index.html. Each of them is stopped in after the theme.js is executed. I don't know why this is, so I'm mentioning this in case it gives more clues as to the problem.
Update 3:
The first line of the "theme.js" file is:
jQuery(document).ready(function($)
And then the function contains a long series of jQuery selectors to setup events and so on. My understanding is the point of this line is to wait until the document has been loaded. But could something in my setup, e.g. Angular, be preventing this from happening?
I've tried changing this line to:
angular.element(document).ready(function($)
and whilst this does lead to the content on the function to be run later, it's still not after the whole document has loaded.
Make sure it's at the end of your HTML Body and not in the header section. If it's in the head section it'll load before the page renders.
Ng-grid not appearing in accordion initially (ng-grid is expected to appear immediately below search criteria)
After resizing the browser page ng grid renders correctly (By hitting browser maximize/minimize button)
List of libraries being used:
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<!-- grid v3.1.1 -->
<script src = "http://ui-grid.info/release/ui-grid.js" ></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I referred to this post but in vain - https://github.com/angular-ui/ui-grid/issues/50
I am looking to add charts to sortable portlets in JQuery. I just ran into an issue and was wondering what causes it and how I can fix it or get around it. My original sources were:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Then I added:
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.pie.min.js"></script>
When I added these, the frames and ui functions of each portlet no longer work or are visible, but the text still is. What conflicts are causing this and what is the proper way to add something like a chart to an individual portlet?
You're including jQuery twice:
<!-- here --><script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- and here --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Remove the second line (earlier version) and you should be in business.