I tried intgrating angular-slidezilla into a web site, but the slider elements do not show.
Observations:
I copied the .js file into the /lib folder and the .css into the /css folder.
the site uses requirejs; I added the source file into the requirements list.
I added the css as a stylesheet link next to the other css files in the index.html file.
To test, I copied the demo page (the entire part) into my HTML page and added $scope.slider1.val etc. variables to the AngularJS controller object. I also added a function which periodically changes the value of the scope variables.
When I deploy the site and load the page, I see the values changing every second (these are shown as text near the sliders). But the sliders themselves do not show.
"Inspect element" function shows a generated piece of DOM (div objects related to the slider), but the slider itself has size 0px*0px.
No errors in javascript console.
Can anyone give me a hint how to investigate further?
Found the solution. The javascript code in angular-slidezilla.js was never executed. As a result the widgets were not initialized and remained in their initial hidden state.
I needed to edit one line of javascript code to get it working:
// app.js
var app = angular.module("app", ['ui.bootstrap', ..., 'angular-slidezilla']);
Related
I have made a basic carousel and and would like to use ng-animate to animate when entering and leaving each index in an array. The templates in Carousel.Data will soon contain html data. I would like to also know what would be the best way of passing html in an array so the user can click next and be presented with the next html template.
I have ng-animate loaded in the DOM with angular version 1.21 but I get an error when I try to inject the dependancy
var App = angular.module('App', ['ngAnimate']);
Here is what I have so far:-
http://codepen.io/anon/pen/wajRog
any help would be much appreciated
It's difficult to tell in CodePen but be sure that angular.min.js is loaded before angular-animate.js. Make sure the order is as follows:
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.9/angular.min.js
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.9/angular-animate.js
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.9/angular-touch.js
You can rearrange the resources in code pen by clicking the hamburger icon near each resources and clicking/dragging to the top. If i got to https://docs.angularjs.org/api/ngAnimate for example and open the plunker for anchoring. If you move angular-animate cdn script tag above angular.min.js, it will give an injection error.
Let me know if that works.
I have a header that is used on every page on my website. This header containers menu items, searches, etc. I have a controller called 'HeaderController' that is used in the menu. I also have another controller that is used for the main content of the page. I have the following code that allows me to use two controllers:
angular.module('customersApp')
.controller('HeaderController', HeaderController)
I run into a problem when I am trying to use this same file on pages outside of the 'customersApp.' For example I have a 'deliveryApp' and when I try to run the top header on a page within the 'deliveryApp' I get an error saying that the 'customersApp' is not available, which I would expect.
I do not want to make a new header and file for each section of my website due to having to make changes to 5 different pages instead of 1. I am looking for a way to include all of my apps in the above code. Thanks.
Create a common module for your header controller:
angular.module("common", [])
.controller("HeaderController", HeaderController);
Then, add this module as a depdendency into other apps.
angular.module("deliveryApp", ["common"]);
and
angular.module("customersApp", ["common"]);
Make sure that the actual js file for common is also included in index.html of each of the apps.
I am adding images to divs with ng-repeat which works fine. The image location data is nested in an array. The images show up as expected. My partial looks like:
<div class="image-wrapper">
<img src={{item.user.img_src}}>
</div>
However, it appears the page is to attempting to retrieve the string before AngularJS is loaded. I get the following console warning:
GET http://localhost:3000/%7B%7Bitem.user.img_src%7D%7D 404 (Not Found)
How do I prevent this?
The src attribute is buggy when Angular markup is used. Use ngSrc instead of src.
Thus, <img ng-src="{{item.user.img_src}}">
When the browser first loads the page it sees your src exactly as you wrote it. It's not until Angular loads and processes the page that it updates your dynamic source. Neither of these is what you want to have happen (especially since you could accidentally create the bad empty src attribute). Instead, use ngSrc directive so that no src will be set until Angular has evaluated your expression:
http://docs.angularjs.org/api/ng/directive/ngSrc
I have a backbone.js CMS of sorts, that accepts html and then renders it in the browser. The following is the template file (in .hamlc) that renders the backbone page object.
%h1.text= #page.get('title')
.text.page-content!= #page.get('content')
This works fine, until I have a <script> tag. I have a script tag for a widget (below)
<script src='http://www.opentable.com/frontdoor/default.aspx?rid=52900&restref=52900&bgcolor=8AA86B&titlecolor=0F0F0F&subtitlecolor=0F0F0F&btnbgimage=http://www.opentable.com/frontdoor/img/ot_btn_black.png&otlink=FFFFFF&icon=light&mode=short&hover=1'></script>
This widget uses document.write (which you can see if you look at the source). First, when I load the page it doesn't show anything (I've tested the widget in an html file by itself and it displays their normal god-awful ). When I inspect the element, it looks like the script tag was removed.
However, when I test with the following:
<script type="text/javascript">
alert(0);
</script>
It runs. Still nothing in the inspector though.
Finally, testing with the following:
<script type="text/javascript">
document.write('test');
</script>
It also runs. However, it completely destroys the page content and just shows 'test'.
According to this article about using document.write for widgets, it says it can't be run after the page load. I'm assuming that's what's happening here is that document.write is being run after page load and destroying all the content, given that's the technique backbone.js uses (appending/replacing elements in the DOM once the page is loaded).
How can I make my Backbone.js CMS accept script tags with document.write widgets without either not showing anything or destroying the entire page?
I cannot reproduce it, the template renders as it should:
$ coffee
coffee> hc = require './src/hamlc'
{ compile: [Function],
template: [Function],
__express: [Function] }
coffee> template = hc.compile ".text.page-content!= #content"
[Function]
coffee> template(content: 'Hello <script>Script</script>')
'<div class=\'page-content text\'>Hello <script>Script</script></div>'
and the script tag is persisted. Do you have the latest version installed?
You're calling document.write after the page has been loaded, so it'll overwrite the whole page. You could try putting the script tag in an iframe, or monkey patch document.write to behave differently after the page has been loaded. See the top answer on this question:
Dynamically added JavaScript overwrite the html page view (not the code)
If I understand correctly, you're trying to include the script tag for the widget inside a template, which means it's being inserted after the initial DOM is ready. That won't work for the reasons you mentioned; when the script executes, it will replace everything in the DOM.
You need to load the script before the initial DOM is complete, that is either in <head> or at the beginning of <body>. That in turn means that you have to include the script tag in your initial HTML as delivered by the server rather than trying to dynamically generate it client-side.
I have problem when I want to use $javascript->link('prototype') in the default.ctp layout. It returns:
Undefined variable: javascript [APP\views\layouts\default.ctp, line 6]
I also added this code into app_controller.php:
<?
class AppController extends Controller {
var $Helpers = array('Html','Javascript','Ajax','Form');
}
?>
The file prototype.js is already in webroot/js folder.
Where is the problem?
I have had this problem many times. It's usually either caused by the controller code being overwritten somewhere or some weirdness happening with Cake's automagic stuff. If you remove all of your helpers and then add them one by one it will probably work eventually.
Another perfectly valid way of generating JavaScript links is by using the following which doesn't access the $javascript variable:
echo $html->script(array('prototype'));
It has to be $helpers instead of $Helpers.
You just open the error console of the Firefox browser (shortcut key ctrl+shift+j).
Find the error and click on it.
After clicking, you will see the head portion.
Note the location of the JavaScript file (*.js) which you want to locate (you will see the location is not correct).
Cut the JavaScript file from webroot and paste it in given location of head block.
Example:
This will show on error console. Map_demo is my project, and in its place your project name will display:
<script type="text/javascript" src="/map_demo/js/test.js"></script>
Cut the JavaScript file from webroot
Make the JavaScript folder in your project application folder, /map_demo/js
Paste test.js (your script file) here
Now your JavaScript function will work.
Just in case somebody else comes across this bug/issue: it was also happening to me, until I commented out the line $session->flash(); in my default layout. Realising that the error was being caused by flash messages, I went back to the controller and noticed that I was using separate layouts for flash messages (e.g. 'message_alert') and that those layouts didn't actually exist in the view folder!
So remember, errors like this could mean that a file is not defined yet. Best of luck.