I'm implementing a site that is using Videogular to play the videos as it integrates nicely with the rest of the AngularJS within the site. Every file that is needed appears to be in the correct location in the path but the end result is only the total time, the elapsed time, and the elapsed time bar are shown.
Now I now the controls are there as if I hover over where the volume control should be the volume appears.
I'm testing in Chrome Version 32.0.1700.107. I think I followed the demo to the letter.
This is how I"m referencing the specific style sheets
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/offcanvas.css">
<link rel="stylesheet" href="css/videogular/videogular.css">
<link rel="stylesheet" href="css/app2.css"/>
This is how I'm pulling in the js files. Not shown are inclusion of jquery, bootstrap, and offcanvas js files.
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="js/videogular/videogular.js" type="text/javascript"></script>
<script src="js/videogular/plugins/controls.js" type="text/javascript"></script>
<script src="js/videogular/plugins/overlay-play.js" type="text/javascript"></script>
<script src="js/videogular/plugins/buffering.js" type="text/javascript"></script>
<script src="js/videogular/plugins/poster.js" type="text/javascript"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
I even used the same config as the demo
$scope.config = {
width: 640,
height: 360,
autoHide: false,
autoPlay: true,
responsive: true,
theme: {
url: "css/videogular/videogular.css",
playIcon: "",
pauseIcon: "",
volumeLevel3Icon: "",
volumeLevel2Icon: "",
volumeLevel1Icon: "",
volumeLevel0Icon: "",
muteIcon: "",
enterFullScreenIcon: "",
exitFullScreenIcon: ""
}
Finally my directory structure is this:
app
css
videogular
fonts
icomoon.eot
icomoon.svg
icomoon.ttf
icomoon.woff
videogular.css
img
js
videogular
plugins
buffering.js
controls.js
overlay-play.js
poster.js
videogular.js
lib
partials
videos
views
videogular
plugins
buffering
buffering.html
controls
controls.html
full-screen-button.html
mute-button.html
play-pause-button.html
volume-bar.html
overlay-play
overlay-play.html
index.html
Now I'm certain I'm missing something but I can't see it. Any help?
So I figured it out. Based on the comment from elecash to the question that everything looked correct I compared everything to the demo. As it turns out my mistake was getting the icomoon font from the icomoon website and not the demo. Without the unicode definitions defined in the icomoon.svg it had no means of knowing the correct glyphy to display eventhough it was correctly defined in the config correctly. A quick download of the font files and restarting of the server and everything rendered correctly.
Related
I directly copied and pasted the source code, from this webpage, onto my compiler: http://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/basic/first-example
I included the following source files within my HTML file :
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
<script src="../dist/angular-leaflet-directive.min.js"></script>
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
<script src="http://tombatossals.github.io/angular-leaflet-directive/bower_components/angular/angular.min.js"></script>
<script src="http://tombatossals.github.io/angular-leaflet-directive/bower_components/leaflet/dist/leaflet.js"></script>
<script src="http://tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script>
<link rel="stylesheet" href="https://angular-ui.github.io/ui-leaflet/bower_components/leaflet/dist/leaflet.css"/>
The map doesn't load, as seen in this image below:
Before using angular-leaflet-directive, you must include some files to your project (.css and .js).
Try to follow those steps :
I'm trying to use Datepicker Popup (angularjs 1.6.6), from angular ui
I've use the example Plunker. All works perfectly but in my project the result is this:
I've had checked the follogin things:
The files that reference to the .js.
Example:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
My proyect:
<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-bootstrap/ui-bootstrap-tpls.js"></script>
The style css, maybe here is the problem, but I'm not sure:
Example:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
My project:
#import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
How can I resolve this? I need to fix the pattern of the date and
I have the module : "angular-bootstrap": "^2.5.0".
Installing bower install bootstrap, not works
Thanks in advance for your help
P.S: I hope this time the question is in the good format and way of the directives of stackoverflow.
I am working on an application that uses AngularJS and Angular (2+). In the new version, I am using system.js to import the Angular app. Without the system.js import the calendar works fine, but with system.js there is a problem to initialize.
I have tried the trick below with calendar = $(elm); with no luck.
https://github.com/angular-ui/ui-calendar/issues/267
Even trying var calendar = $('#calendar’).
The problem does not seem to be in recognizing that there exists a calendar element. From what I can infer logging the framework’s source code, when working correctly, the calendar element has these classes when initializing.
div#calendar.calendar.ng-pristine.ng-untouched.ng-valid.ng-isolate-scope.fc.fc-cursor.fc-ltr.fc-unthemed
Currently the initialize is trying to use this as the calendar element which throws the angular.min.js:117 TypeError: calendar.fullCalendar is not a function error, it still finds the correct element but does not append the classes to it.
div#calendar.calendar.ng-pristine.ng-untouched.ng-valid.ng-isolate-scope
script.ejs
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<—-! All the AngularJS -—>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-sanitize.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- Moment -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" integrity="sha256-1hjUhpc44NwiNg8OwMu2QzJXhD8kcj+sJA3aCQZoUjg=" crossorigin="anonymous"></script>
<!-- ui calendar -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/1.0.0/calendar.min.js" integrity="sha256-DBa6dvjY39GU4NQ2Ia2CIPVFszxgZ4N3JccyPvJNPLI=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.js"></script>
AngularJS only app, index.ejs :
<body>
<div id="shell" data-ng-app="app" data-ng-controller="shellController">
…
</div>
<%- include partials/scripts %>
</body>
Hybrid app index.ejs :
<body class="full-width">
<div id="shell" data-ng-controller="shellController">
…
</div>
<%- include partials/scripts %>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) { console.error('ERR from import: ’,err); });
</script>
</body>
I am using v 2.7.1 of fullcalendar, and v 1.0.0 of angular-ui-calendar. Any help to what might be the cause of this problem would be extremely appreciated, I’ve been looking at this for days!
I found the answer with this post.
How to import fullcalendar v.3.0.1 with systemjs?
Turns out the problem lay in the moment.js file not being within the meta property within the system.js config.
relevant code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"
And,
$mdDialog.show(
$mdDialog.alert()
.clickOutsideToClose(true)
.title('Please Login')
.textContent('Please use facebook to login to Afsheen before making a purchase.')
.ok('Got it!')
.targetEvent(event)
);
Any idea whats going on ?
You are using both bootstrap and material css together, which is causing the issue, Check the material versions are same,
Here is the working App
I'm going through some starter React.js courses to become more familiar with React, and the ES6 format. Unfortunately, the courses were created during 0.13 when the JSX Transformer was available, and I do not want to setup a node.js environment with each and every exercise file. It also seems that babel-browser was discontinued, and babel-standalone needs much more than a type in the script properties to compile, so neither seems to be a solution (Unless I misunderstood standalone).
Is there anything out there that handle transforms as simply as the JSX Transformer once did?
Thanks in advance!
The react site tutorial (http://facebook.github.io/react/docs/tutorial.html) seems to use babel dynamically.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="scripts/example.js"></script>
<script type="text/babel">
// To get started with this tutorial running your own code, simply remove
// the script tag loading scripts/example.js and start writing code here.
</script>
</body>
</html>