I'm using the following directive https://github.com/d-oliveros/ngSmoothScroll to make stuff in this project smoothly scroll to the selected element.
Here's my code:
...
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->
<script src="bower_components/ngSmoothScroll/dist/angular-smooth-scroll.min.js"></script>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/initcontroller.js"></script>
<!-- endbuild -->
<script src="scripts/libs/materialize.min.js"></script>
<script src="scripts/libs/angular-materialize.js"></script>
</body>
...
That's where the script is included (~/angular-smooth-scroll.min.js) and inside my app.js file I have:
angular
.module('sccateringApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.materialize',
'smoothScroll'
])
'smoothScroll' being the actual dependency inclusion to the project. Following the instructions inside the link given at the beginning of this post this is what I do inside my view:
<li>Contáctame</li>
...
<section class="service-info" id="service-info">
<h1 class="sofia-font">Detalles de Servicio</h1>
...
However, there is no smooth scroll happening and also, there are no warnings/errors given by either the console or jslint on my grunt serve task.
Any idea what I might be doing wrong? I'm VERY new to angular and I'm still trying to find my way through it.
I'm not sure but it may be because you are using the container-id on a link and not a non-anchor tag. I'm using this to scroll to an element in my footer. My code is:
//the anchor link in my nav
Click Me
...
//the element I want to scroll to
<div id="footer"></div>
...
The minified version wasn't working for me so my scripts go as follows:
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-aria/angular-aria.js"></script>
<script src="/bower_components/angular-messages/angular-messages.js"></script>
<script src="/bower_components/angular-material/angular-material.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="/bower_components/ngSmoothScroll/lib/angular-smooth-scroll.js"></script>
<script src="/js/app.module.js"></script>
<script src="/js/app.controller.js"></script>
<script src="/js/app.service.js"></script>
And for the module:
angular
.module('glasser', [
'ngMaterial',
'ngSanitize',
'smoothScroll'
])
It didn't work for me either, try Angular-Scroll instead. It has a live demo to test in your browser first.
It also has a 'spy' directive so you can add classes to elements that are in view.
Related
So a friend of mine asked me if I knew why one of his old sites (made in 2014) wasn't working anymore. Googling a bit, I found out it's because of Chrome 61 version implemented the smooth scroll by default and if u try to load a script instead, it will break the browser behaviour.
On his site, I found he's using this script: https://github.com/themicon/smoothscroll/blob/master/smoothscroll.js
He has a menu with some buttons, each of them has a line of code that looks like this:
ABOUT US
And it should bring to a line of code that looks like this:
<section id="about">
<div class="container">
<div class="row">
</div>
</div>
</section>
The site still works perfectly with Firefox and other browser, so I don't know honestly would I would need to change, I tryed to search for an updated version of the script where maybe the author fixed the issue and found this:
https://github.com/galambalazs/smoothscroll-for-websites/blob/master/SmoothScroll.js
As you notice, the script hasn't been updated for quite long time, indeed even the latest version is prior to the Chrome 61 version update so I doubt that would solve the problem.
On the very end of site, these are the scripts loaded:
<!-- Bootstrap -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Animation -->
<script type="text/javascript" src="js/animation/jquery.appear.js"></script>
<!-- AJAX Contact Form -->
<script type="text/javascript" src="js/contact/contact-form.js"></script>
<!-- Lightbox -->
<script src="lightbox/ekko-lightbox.js"></script>
<!-- Isotope -->
<script src="js/isotope/jquery.isotope.min.js"></script>
<script src="js/isotope/custom-isotope.js"></script>
<!-- Slider Revolution 4.x Scripts -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.js"></script>
<script>
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
fullScreen:"on",
forceFullWidth:"on",
minFullScreenHeight:"320",
videoJsPath:"rs-plugin/videojs/"
});
}); //ready
</script>
<!-- Custom -->
<script src="js/custom.js"></script>
<!-- Parallex -->
<script src="js/parallex/script.js"></script>
<!-- ScrollTo -->
<script src="js/nav/jquery.scrollTo.js"></script>
<script src="js/nav/jquery.nav.js"></script>
<!-- Sticky -->
<script type="text/javascript" src="js/sticky/jquery.sticky.js"></script>
<!-- Donut Chart -->
<script type="text/javascript" src="js/progress-bars/jquery.donutchart.js"></script>
<script>
$("#donutchart1").donutchart("animate");
$("#donutchart2").donutchart("animate");
$("#donutchart3").donutchart("animate");
$("#donutchart4").donutchart("animate");
$("#donutchart5").donutchart("animate");
$("#donutchart6").donutchart("animate");
$("#donutchart7").donutchart("animate");
$("#donutchart8").donutchart("animate");
</script>
<!-- Owl Carousel -->
<script src="owl-carousel/owl-carousel/owl.carousel.js"></script>
<!-- SmoothScroll -->
<script type="text/javascript" src="js/SmoothScroll/SmoothScroll.js"></script>
<!-- Retina -->
<script type="text/javascript" src="js/retina/retina.js"></script>
<!-- FitVids -->
<script type="text/javascript" src="js/jquery.fitvids.js"></script>
I have used grunt and following is the current structure:
<!-- build:js scripts/vendors.min.js -->
<!-- bower:js -->
<script src="../file/path.js"></script>
<script src="../file/path2.js"></script>
<script src="../file/path3.js"></script>
<script src="../file/path4.js"></script>
<script src="../file/path5.js"></script>
<script src="../file/path6.js"></script>
<script src="../file/path7.js"></script>
<script src="../file/path8.js"></script>
<!-- endbower -->
<!-- endbuild -->
As defined it gives the output file vendors.min.js, But I want to get output files as follows:
vendors1.min.js
vendors2.min.js
vendors3.min.js
Is there a way to get this done?
The full error
Error: [$injector:unpr] Unknown provider: FIREBASE_URLProvider <- FIREBASE_URL <- Post
The local server spun up a working app just a couple of days ago. Now when I start it, app is blank and throws up this error. Anyone knows the issue?
Im following a online lesson and perhaps the versions are outdated?
The error link leads to this page. ERROR LINK PAGE IN ANGULARJS but my definitions are ok since they were working previously?
Attached is my index.html scripts.
<!-- build:js scripts/vendor.js -->
<!-- <script src="vendor/someContribJs.js"></script> -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/ionic/release/js/ionic.js"></script>
<script src="bower_components/ionic/release/js/ionic-angular.js"></script>
<script src="bower_components/lodash/dist/lodash.compat.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/firebase-simple-login/firebase-simple-login.js"></script>
<script src="bower_components/angularfire/angularfire.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<!--all the scripts for the app -->
<!-- endbuild -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
This is just a wild guess, but try placing the angularfire.js script before the firebase-simple-login.js
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/ionic/release/js/ionic.js"></script>
<script src="bower_components/ionic/release/js/ionic-angular.js"></script>
<script src="bower_components/lodash/dist/lodash.compat.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/angularfire/angularfire.js"></script>
<script src="bower_components/firebase-simple-login/firebase-simple-login.js"></script>
Another guess would be to check if there is a missing configuration concerning the firebase url.
I solved it.
I had another Var X = angular.module(myapp, []) line hidden somewhere in the app.js codes.
Not sure how it got there but removing that did the trick. So the error message was correct.
I am using a theme which references 4 javascript/jquery files and I am using a slider image which is referencing 3 javascript/jquery files. However, they are conflicting with each other.
What files are conflicting with each other and how can I fix this issue?
Thanks
<!-- Code for theme -->
<script src="js/libs/modernizr-2.6.2.min.js"></script>
<!-- Code for sliding banner -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- Code for theme -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.0.min.js">\x3C/script>')</script>
<script src="js/main.js"></script>
1) .min is just minified version of file.
2) don't use both.
3) either use .min or normal jquery library.
<!-- Code for sliding banner -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- Code for theme -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script src="js/main.js"></script>
<script src="js/libs/modernizr-2.6.2.min.js"></script>
You don't need to add these:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.0.min.js">\x3C/script>')</script>
Because you are loading jQuery1.10+ above all other scripts, so why do you need to add jQuery.min.js and jQuery.1.9.0.
As this code comment says:
<!-- Code for theme -->
For a theme you don't need multiple jQuery libs to be loaded in a single page.
I'm not sure but have you tried $.noConflict() ?
I'm trying to implement the angular-wizard module.
I have a angular app generated by yeoman. I used bower install angular-wizard to get the module and referenced it in my index.html right above the app.js script tag with the other modules, like angular-resource, angular-cookies etc.
The main view loads fine until I add the mgo-angular-wizard reference to the controller dependencies, when added the page loads blank with no errors in the console.
eg:
'use strict';
angular.module('merlinApp', ['mgo-angular-wizard']) // this is where everything breaks
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
My index.html has the following scripts included in this order:
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- build:js scripts/modules.js -->
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-wizard/dist/angular-wizard.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
Lodash (or Underscore) dependency ?
If still not working, try adding wizard directive in your html page.