Lumx animation not working

Question

I am using Django, angularJS and lumx to create a website. I am pretty new to this framework and I am trying to get the basic lumx functionality to work. I installed lumx using the instructions http://ui.lumapps.com/getting-started/installation (using "bower install lumx"). Django is setup to handle the static files correctly.

I have my base.html file that I want to test (should only show a dropdown box):

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="{% static 'browse/js/script.js' %}"></script>
    <link rel="stylesheet" href="{% static 'browse/bower_components/lumx/dist/lumx.css' %}">

    <script src="{% static 'browse/bower_components/jquery/dist/jquery.js' %}"></script>
    <script src="{% static 'browse/bower_components/velocity/velocity.js' %}"></script>
    <script src="{% static 'browse/bower_components/moment/min/moment-with-locales.js' %}"></script>
    <script src="{% static 'browse/bower_components/angular/angular.js' %}"></script>
    <script src="{% static 'browse/bower_components/lumx/dist/lumx.js' %}"></script>

</head>
<body>

    <lx-dropdown over-toggle="true">
        <button class="btn btn--m btn--black btn--flat" lx-ripple lx-dropdown-toggle>
            Dropdown toggle
        </button>

        <lx-dropdown-menu>
            <ul>
            <li><a class="dropdown-link" ng-click="dropdownAlert()">Notification</a></li>
            <li><a class="dropdown-link">Another action</a></li>
            <li><a class="dropdown-link">Another action</a></li>
            <li><a class="dropdown-link">Another action</a></li>
            <li><a class="dropdown-link">Something else here</a></li>
            <li class="dropdown-divider"></li>
            <li><span class="dropdown-link dropdown-link--is-header">Header</span></li>
            <li><a class="dropdown-link">Separated link</a></li>
            </ul>
        </lx-dropdown-menu>
    </lx-dropdown>
</body>

However the animation does not work, I am not sure what is wrong. None of the lumx animation work (like button ripple) but I am able to call the icons they have. The server logs show all of my css and js files are getting called.

Are you running this locally? Can you open a web-inspector to check if there are any errors when you load this page? — djq, Feb 07 '16 at 11:22
@djq I am running it locally with "python manage.py runserer" like normal. The web-inspector is now showing an errors in the files, the JS files are found but I don't they are getting used. — dtptw6, Feb 07 '16 at 22:46
It's very hard to say what's going wrong with this, from here. I would suggest commenting out all libraries, and loading each library one by one, and outputting something in your browser using `console.log()`. For example, it could be a timing issue (are the libraries loaded when visting the page?), or many other issues. — djq, Feb 08 '16 at 05:37

score 0 · Accepted Answer · answered Feb 10 '16 at 17:21

I think this is because you did not initialize Angular correctly. You need to:

Declare your app with ngApp directive
Declare lumx as a dependency of your app (maybe you did in script.js?)
Make sure you call angular after the library is loaded. Right now your script.js is before the load of all libraries.

So a fixed version of your head might be like:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="{% static 'browse/bower_components/lumx/dist/lumx.css' %}">

    <script src="{% static 'browse/bower_components/jquery/dist/jquery.js' %}"></script>
    <script src="{% static 'browse/bower_components/velocity/velocity.js' %}"></script>
    <script src="{% static 'browse/bower_components/moment/min/moment-with-locales.js' %}"></script>
    <script src="{% static 'browse/bower_components/angular/angular.js' %}"></script>
    <script src="{% static 'browse/bower_components/lumx/dist/lumx.js' %}"></script>
    <script src="{% static 'browse/js/script.js' %}"></script>

</head>

With something like this in script.js:

angular.module('myApp', ['lumx']);

That explains a lot, I did have angular.module('myApp', ['lumx']); decaled but I didn't fully understand how to use "ng-app" at the time. Thank you! — dtptw6, Feb 11 '16 at 19:00

Lumx animation not working

1 Answers1