I need a carousel on a hybrid app using onsen ui, angular and slick carousel.
I've already added this:
<script src="scripts/index.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/slick-carousel/slick/slick.js"></script>
<script src="bower_components/angular-slick/dist/slick.js"></script>
<script src="js/app.js"></script>
<slick dots="true" infinite="false" speed="300" slides-to-show="5" touch-move="false" slides-to-scroll="1">
<div class="oneConsultor"><img src="img/atendimento/atm1.jpg"></div>
<div class="oneConsultor"><img src="img/atendimento/atm2.jpg"></div>
<div class="oneConsultor"><img src="img/atendimento/atm3.jpg"></div>
<div class="oneConsultor"><img src="img/atendimento/atm1.jpg"></div>
<div class="oneConsultor"><img src="img/atendimento/atm2.jpg"></div>
<div class="oneConsultor"><img src="img/atendimento/atm3.jpg"></div>
</slick>
and it doesnt't work for me :(
Related
I added a paralla code to my page, but the images don't appear, when I remove the class "parallax" from container of the image, images appear but without the parallax effect,
<div class="parallax-container">
<div class="parallax"><img src="content/img/wood.jpg"></div>
</div>
<div class="section white">
<div class="row container">
<h2 class="header">Parallax</h2>
<p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="content/img/wood.jpg"></div>
</div>
<script type="text/javascript">
var elem = document.querySelector('.parallax');
var instance = M.Parallax.init(elem, options);
// Or with jQuery
$(document).ready(function(){
$('.parallax').parallax();
});
</script>
and these are the libraries I added
<script src="app\lib\angular.min.js"></script>
<script src="app\lib\angular-route.min.js"></script>
<script src="app\lib\angular-aria.min.js"></script>
<script src="app\lib\angular-messages.min.js"></script>
<script src="app\lib\angular-animate.min.js"></script>
<link rel="stylesheet" href="app\lib\angular-material.min.css">
<script src="app\lib\angular-material.min.js"></script>
<link rel="stylesheet" href="content/css/styles.css">
<!--Materialize-->
<link href="materialize\css\icon.css" rel="stylesheet">
<link rel="stylesheet" href="materialize/css/materialize.min.css">
<link rel="stylesheet" href="app\lib\Roboto.css">
<script src="app\app.js"></script>
<script type="text/javascript" src="materialize\js\jquery.3.2.1.min.js"></script>
<script src="materialize\js\materialize.min.js"></script>
Your error lies in trying to init the function twice in your Javascript code. Also (well at least on my end), I do occasionally receive errors using vanilla JS while intializing components for materialize. What you could do: (remove the vanilla JS code and add this to the end of your file, preferably below the end of body tag)
<script>
$(document).ready(function(){
$('.parallax').parallax();
});
</script>
Make sure you call the jquery before the materialize script like so:
<script type="text/javascript" src="materialize\js\jquery.3.2.1.min.js">
</script>
<script src="materialize\js\materialize.min.js"></script>
I've installed package angular-grid-enterprise via bower. Version of angular grid is 6.2.1. I'm using angular framework in laravel project. This is content of default.blade.php, where are stored all necessery scripts.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script scr="http://demos.angularcode.com/grid/js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="https://cdn.rawgit.com/esvit/ng-table/1.0.0/dist/ng-table.js"></script>
<script src="/js/dashboard/new.controller.js"></script>
<script src="/bower_components/ag-grid-enterprise/dist/ag-grid-enterprise.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/6.2.1/ag-grid.min.js"></script>
And here is my controller
var kongres = angular.module('kongres', ["agGrid"]);
kongres.controller('NoviController', NoviController);
function NoviController($scope, $http, $timeout) {}
And here is page in witch grid should be displayed
#extends(isset($layout)?$layout:'layout.default')
#section('content')
<div class="page-content-wrapper" ng-controller="NoviController">
<!-- BEGIN CONTENT BODY -->
<div class="page-content">
<div class="row">
<div class="col-lg-12 portlet light bordered">
<div class="portlet-title">
<div class="caption font-dark">
<i class="icon-people"></i>
<span class="caption-subject bold uppercase">Hotel bookings</span>
</div>
</div>
<div class="portlet-body">
#{{ title }}
<div ag-grid="gridOptions" style="height: 600px;" class="ag-blue"></div>
</div>
</div>
</div>
<!-- /.row -->
</div>
</div>
<!-- /.container-fluid -->
#stop
When I try to load page this error shows angular.js:38Uncaught Error: [$injector:modulerr]. My question is how to inject this module properlly?
You have to load the <script src="/js/dashboard/new.controller.js"></script> after loading the ag-grid-enterprise.js references
Reorder them like below,
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script scr="http://demos.angularcode.com/grid/js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="https://cdn.rawgit.com/esvit/ng-table/1.0.0/dist/ng-table.js"></script>
<script src="/bower_components/ag-grid-enterprise/dist/ag-grid-enterprise.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/6.2.1/ag-grid.min.js"></script>
<script src="/js/dashboard/new.controller.js"></script>
DEMO
Also you have to call this before declaring the module,
agGrid.initialiseAgGridWithAngular1(angular);
I am trying to implement an angular material app in reference to the 'Getting started' tutorial.
style
<link href="../node_modules/angular-material/angular-material.css" rel="stylesheet" />
scripts
<script src="../node_modules/angular-animate/angular-animate.js" type="text/javascript" ></script>
<script src="../node_modules/angular-aria/angular-aria.js" type="text/javascript" ></script>
<script src="../node_modules/angular-material/angular-material.js" type="text/javascript" ></script>
<script>
// Include the dependency upon ngMaterial - important !!
angular.module('starterApp', ['ngMaterial']);
</script>
I added a toolbar & button using <md-toolbar> & <md-button> as mentioned below:
<md-toolbar class="md-menu-toolbar">
<div class="md-toolbar-tools">
Toolbar
</div>
</md-toolbar>
<md-button class="md-fab" aria-label="FAB">
button
</md-button>
but what I see is not angular material designs click here.
Did I miss anything?
Here is the answer for your question...
<html lang="en">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script type="text/javascript">
angular.module('starterApp', ['ngMaterial']);
</script>
</head>
<body ng-app="starterApp" ng-cloak>
<md-toolbar class="md-menu-toolbar">
<div class="md-toolbar-tools">
Toolbar
</div>
</md-toolbar>
<md-button class="md-fab" aria-label="FAB">
button
</md-button>
</body>
</html>
I've created a Ionic project in Intel XDK, I started setting up my navigation bar with buttons, I added a status button which will cycle and change the label from available, away and busy when the button is clicked.
I started out small and wanted to insert a string through a scope variable I defined in my JavaScript app.js. I can't seem to get it working. app.js is defined in my head tags and I ng-app inside my div where my button lives. I feel as if the angular.js bundled in ionic is not working for some reason, Here's a section of my code.
HTML:
<!DOCTYPE html>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="xdk/init-dev.js"></script>
<script type="application/javascript" src="ionic/js/ionic.bundle.js"></script>
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="marginal/marginal-position.js"></script>
<script type="application/javascript" src="js/index_init_services.js"></script>
<script type="application/javascript" src="js/index_uib_w_8_popover.js"></script>
<script type="application/javascript" src="js/index_uib_w_10_popover.js"></script>
<script type="application/javascript" src="sidebar/js/sidebar.js"></script>
<script type="application/javascript" src="sidebar/js/swipe.js"></script>
<script type="application/javascript" src="js/app.js"></script>
<script type="application/javascript" src="js/init-app.js"></script>
<script type="application/javascript" src="popup/popup.min.js"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
<script type="application/javascript" src="sidebar/js/hammer.js"></script>
<script type="application/javascript" src="sidebar/js/jquery.hammer.js"></script>
<script type="application/javascript" src="sidebar/js/swipe-hammer.js"></script>
<script type="application/javascript" src="js/index_uib_w_13_popup.js"></script>
<script type="application/javascript" src="ionic/js/ionic.bundle.js"></script>
<script type="application/javascript" src="xdk/ad/ionic_subpage.js"></script>
<body ng-app="myApp">
<div class="upage" id="mainpage">
<div class="upage-outer content-area vertical-col left fixed-header-footer">
<div id="page_28_32" class="upage-content vertical-col left ">
<template class="uib-ionic-popup widget uib_w_13 d-margins" data-uib="ionic/popup" data-ver="0"></template>
</div>
<ion-header-bar class="bar inner-element uib_w_1 bar-balanced bar-header" data-uib="ionic/header" data-ver="0" align-title="center">
<div class="buttons widget-container content-area horiz-area wrapping-col">
<button class="button widget uib_w_2 ion d-margins button-clear ion-android-more icon-right" data-uib="ionic/button" data-ver="0"></button>
<div class="upage" id="mainpage">
<div class="upage-outer content-area vertical-col left fixed-header-footer">
<div id="page_28_32" class="upage-content vertical-col left ">
<template class="uib-ionic-popup widget uib_w_13 d-margins" data-uib="ionic/popup" data-ver="0"></template>
</div>
<ion-header-bar class="bar inner-element uib_w_1 bar-balanced bar-header" data-uib="ionic/header" data-ver="0" align-title="center">
<div class="buttons widget-container content-area horiz-area wrapping-col">
<button class="button widget uib_w_2 ion d-margins button-clear ion-android-more icon-right" data-uib="ionic/button" data-ver="0"></button>
</div>
<h1 class="title">Medroid</h1>
<div class="buttons widget-container content-area horiz-area wrapping-col">
<button class="button widget uib_w_7 ion ion-android-reminder icon-right d-margins" data-uib="ionic/button" data-ver="0" id="notifications"></button>
<button class="button widget uib_w_6 ion d-margins ion-android-forums icon-right" data-uib="ionic/button" data-ver="0" id="inbox" ng-controller="uib_w_8_popover_controller" ng-click="show($event)"></button>
<button ng-app="statusButton" class="button widget uib_w_5 ion d-margins button-large ion-android-data icon-left" data-uib="ionic/button" data-ver="0" ng-controller="statusCtrl" id="status">{{status}}</button>
</div>
JavaScript:
angular.module('statusButton',['ionic'])
.controller('statusCtrl', function($scope){
$scope.status = "hey";
}
});
Here's the Output
Update: I tried several times to get angular controllers to work with no avail, I simply cannot get angular working with this IDE.
I figured out the issue, It appears that angular doesn't work when you use the design view with ionic. I ended up creating a new blank project with app designer disabled and did everything from scratch and it works. If anyone else is having this issue with app designer let me know.
I am using AngularJS and when I began to use routeprovider, if I reload the page occur a infinite load.
It's funny, because when I try to load the main page the first time, the page starts fine.
Here is my code:
var app = angular.module("platwip", []);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/status', {templateUrl: 'resources/views/html_files/status/status.dust', controller: TestCtrl}).
when('/network/wan', {templateUrl: '/resources/viewsAngular/network/wanAngular.html', controller: WanCtrl}).
otherwise({redirectTo: '/status'});
}]);
app.run(function($templateCache,$http){
$http.get('resources/viewsAngular/menus/sideMenu.html', {cache:$templateCache});
$http.get('resources/viewsAngular/menus/topMenu.html', {cache:$templateCache});
});
My Html:
<!DOCTYPE html>
<html ng-app="platwip">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link media="screen" type="text/css" rel="stylesheet" href="/resources/css/estilo.css"></link>
<script src="/resources/js/jquery/jquery-1.8.1.min.js" ></script>
<script src="/resources/js/jquery/jquery.i18n.min.js" ></script>
<script src="/src/controller/main/main.ws/messages" ></script>
<script src="/resources/js/jquery/jquery-ui-1.8.23.custom.min.js" ></script>
<script src="/resources/js/jquery/jquery.input-ip-address-control-1.0.min.js" ></script>
<script src="/resources/js/jquery/jquery.date.format.js" ></script>
<script src="/resources/js/jquery/jquery.address-1.5.min.js" ></script>
<script src="/resources/js/jquery/jquery.maskedinput-1.3.min.js" ></script>
<script src="/resources/js/jquery/jquery.validate.min.js" ></script>
<script src="/resources/js/validator_rules.js" ></script>
<script src="/resources/js/jquery/jquery.tablesorter.min.js" ></script>
<script src="/resources/js/angular/angular.min.js" ></script>
<script src="/resources/js/angular/controllers.js" ></script>
<script src="/resources/js/angular/partials.js" ></script>
<script src="/resources/js/angular/filters.js" ></script>
<script src="/resources/js/dust/dust-full-1.2.0.js" ></script>
<script src="/resources/js/dust/dust-helpers-1.1.1.js" ></script>
<script src="/resources/js/main.js" ></script>
</head>
<body>
<!-- <div id="qunit"></div>
<div id="qunit-fixture"></div> -->
<div id="container">
<div id="cabecalho">
<div id="barraSuperior"></div>
<div id="menuSuperior" ng-include src="'resources/viewsAngular/menus/topMenu.html'"/>
</div>
</div>
<noscript >
{{'Ops!! Seu navegador não está com o JavaScript habilitado. Para utilizar a aplicação você deve habilitar o JavaScript.' | i18n}}
<style type="text/css">
#conteudo { display:none; }
</style>
</noscript>
<div id="conteudo">
<div id="menuLateral" ng-include src="'resources/viewsAngular/menus/sideMenu.html'">
</div>
<div class="content">
<div id="titulo">
<h1></h1>
</div>
<div id='conteudoWeb' ng-view>
<div class='tab'>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Has somebody an idea what is the problem?
Thank you!
Solved.
I have a JS file (main.js) with a function which it was loading in loop my app.
The selector variable, after I have put the Angular, was changing everytime.
The function was:
var browserHistory = function(){
$.address.init().change(function(event){
var selector = "[rel='address:" + event.value + "']";
var link = $(selector);
if(link.length > 0)
loadContent(link);
else
$.address.value("/");
});
};
Dãm.
Bye!