I have abround 6000 documents in my mongo collection, which I need to load up into meteor client upon app startup.
In my routes (located under app/client), I have this:
Router.map(function() {
this.route('home', {
path: '/',
template: 'dashboardWrapper',
waitOn: function() {
return Meteor.subscribe('nasdaq');
},
cache: true
});
});
My dashboardWrapper template looks like this:
<template name="dashboardWrapper">
{{#if Template.subscriptionsReady}}
{{> dashboard}}
{{/if}}
</template>
My dashboard template looks like this:
<template name="dashboard">
<div class="container">
<h2>Priority - 1 Incidents Over Time</h2>
<div class="row">
<div id="yearly-bubble-chart" class="dc-chart">
<strong>Yearly Performance</strong> (radius: fluctuation/index ratio, color: gain/loss)
</div>
</div>
<div class="row">
<div id="gain-loss-chart">
<strong>Days by Gain/Loss</strong>
<a class="reset" href="javascript:gainOrLossChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="quarter-chart">
<strong>Quarters</strong>
<a class="reset" href="javascript:quarterChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="day-of-week-chart">
<strong>Day of Week</strong>
<a class="reset" href="javascript:dayOfWeekChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="fluctuation-chart">
<strong>Days by Fluctuation(%)</strong>
<span class="reset" style="display: none;">range: <span class="filter"></span></span>
<a class="reset" href="javascript:fluctuationChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div id="monthly-move-chart">
<strong>Monthly Index Abs Move & Volume/500,000 Chart</strong>
<span class="reset" style="display: none;">range: <span class="filter"></span></span>
<a class="reset" href="javascript:moveChart.filterAll();volumeChart.filterAll();dc.redrawAll();"
style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div id="monthly-volume-chart">
</div>
<p class="muted pull-right" style="margin-right: 15px;">select a time range to zoom in</p>
</div>
<div class="row">
<div>
<div class="dc-data-count">
<span class="filter-count"></span> selected out of <span class="total-count"></span> records | Reset All
</div>
</div>
<table class="table table-hover dc-data-table">
</table>
</div>
<div class="clearfix"></div>
</div>
</template>
The relevant part of Meteor.client looks like this:
if (Meteor.isClient) {
var ndx,data;
Template.dashboardWrapper.onCreated( function() {
var template = this;
template.subscribe("nasdaq");
});
Template.dashboard.onCreated( function() {
data = Nasdaq.find().fetch();
ndx = crossfilter(data);
});
Template.dashboard.onRendered(function(){
var self = this;
self.subscribe("nasdaq", function() {
self.autorun(function() {
data = Nasdaq.find().fetch();
});
});
What I expect from this, is for the dashboard template to wait until all the data from the Nasdaq collection loads up.
What happens is absolutely nothing - no data and no errors.
If I remove ironRounter all together, and refresh, I can get a couple of dozen records (out of 6000 total).
Is there a way reliably force the app to wait until every single document loads up?
Try subscribe right before load the current template, may be it will work.
Router.route('/dashboardWrapper/:_id', {
name: 'dashboardWrapper',
waitOn: function () {
return [
Meteor.subscribe('nasdaq')
];
},
data: function () {
return Nasdaq.findOne(this.params._id);
}
});
I'm trying to use iron:router's yieldTemplatesproperty to render multiple templates on the same layout.
According to this tutorial, we should be abble to do something like this:
template.html
<template name="complexLayout">
<div class="left">
{{> yield region="menu"}}
</div>
<div class="main">
{{> yield}}
</div>
<div class="bottom">
{{> yield region="footer"}}
</div>
</template>
route.js
this.route('home', {
path: '/',
layoutTemplate: 'complexLayout',
yieldTemplates: {
'myMenu': {to: 'menu'},
'myFooter': {to: 'footer'}
}
});
I tried to do it, but the yieldTemplates part doesn't work.
Here is the relevant code:
Router.js
Router.map(function() {
this.route('home', {
path: '/home',
controller: 'homeController'
});
});
Controllers.js
baseController = RouteController.extend({
layoutTemplate: 'baseLayout'
});
homeController = baseController.extend({
yieldTemplates: {
'homeNavTop': {to: 'top'}
}
});
Templates.html
<template name="baseLayout">
<main>
<!-- NAV TOP -->
<div id="nav-top" class="hide-on-large-only light-blue darken-3 white-text">
<div class="row nomargin valign-wrapper hide-on-large-only">
{{> yield region='top'}}
</div>
</div>
<!-- / NAV TOP -->
<!-- BODY -->
<div class="row nomargin">
<div class="col s12">
{{> yield}}
</div>
</div>
<!-- / BODY -->
</main>
</template>
<template name="homeNavTop">
<a href="#" data-activates="slide-out" class="menu button-collapse btn-flat waves-effect">
<i class="material-icons">menu</i>
</a>
</template>
As explained, the BODY part works fine. The top region remains empty.
I have no console errors at all.
Do you have any clue of what is wrong in my code?
Perhaps the syntax has changed since that tutorial was written, but according to the IronRouter guide you should be doing this:
{{> yield 'top'}}
rather than this
{{> yield region='top'}}
I am new to angular. And I am creating a practice project. I am following This tutorial.
Everything is working fine except when I try to put data annotations in my View Model the $resource.save method no more works. Without data annotations, it works fine.
Here is my code:
Home.html:
<!DOCTYPE html>
<html ng-app="movieModule">
<head>
<meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1">
<title>Movie Sample</title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/angular-resource.min.js"></script>
<script src="../Scripts/angular-route.min.js"></script>
<script src="../Scripts/jquery-2.1.1.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script src="../Scripts/movie-module.js"></script>
<script src="../Scripts/Category/category-controller.js"></script>
<script type="text/javascript">
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
});
</script>
</head>
<body>
<div class="container">
<div class="container-fluid">
<div class="well">
<ul class="nav nav-pills">
<li role="presentation" class="active">Home</li>
<li role="presentation">Movies</li>
<li role="presentation">Categories</li>
<li role="presentation">Artists</li>
</ul>
</div>
</div>
<div class="container-fluid">
<div ng-view="">
</div>
</div>
</div>
</body>
</html>
Categories.html:
<div>
<a href="create-category.html" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</a>
</div>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Categories</div>
<!-- Table -->
<table class="table">
<tr>
<th>ID
</th>
<th>Name
</th>
<th>Description
</th>
</tr>
<tr data-ng-repeat="category in categories">
<td>{{ category.id }}
</td>
<td>{{ category.name }}
</td>
<td>{{ category.description }}
</td>
</tr>
</table>
</div>
create-category.html
<div class="row">
<div class="col-md-12">
<h3>Create Category
</h3>
</div>
</div>
<!--<div class="row">-->
<div class="col-md-12">
<div class="form-group">
<label for="id">Id:</label>
<input type="text" ng-model="category.Id" class="form-control">
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" ng-model="category.Name" class="form-control">
</div>
<div class="form-group">
<label for="description">Description:</label>
<input type="text" ng-model="category.Description" class="form-control">
</div>
<button type="submit" class="btn btn-primary" ng-click="save(category)">Create Category</button>
</div>
movieModule.js
var movieModule = angular.module('movieModule', ['ngRoute', 'ngResource']);
movieModule.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/templates/categories.html', { templateUrl: '/templates/categories.html', controller: 'categoryController' }).
when('/templates/create-category.html', { templateUrl: '/templates/create-category.html', controller: 'categoryController' });
$locationProvider.html5Mode(true);
});
category-controller.js
movieModule.controller('categoryController', function ($scope, $resource, $location) {
$scope.categories = $resource('/api/Category').query();
$scope.save = function (category) {
$scope.errors = [];
$resource('/api/Category').save(category).$promise.then(
function () { $location.url('templates/categories.html'); },
function (response) {
$scope.errors = response.data;
});
}
});
CategoryVM.cs
public class CategoryVM
{
[Required(ErrorMessage="Is is required.")]
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
}
The problem is [Required(ErrorMessage="Is is required.")]. Everything works fine without [Required(ErrorMessage="Is is required.")]but the moment I put [Required(ErrorMessage="Is is required.")] it starts giving error:
Here is the snapshot of the error:
Try not to put the [Required] attribute on the Id.
It should work if you put data annotations on your other properties.
[Required] to a value type (int) will cause a 500 error
(string is not a value type)
I'm new Ractive.js user.
I want to make two buttons, cliking on them, the message "allert" appears.
I did as here
Here the body of my page
<body>
<div class="center" id='container'></div>
<script id='template' type='text/ractive'>
<h1><p class="center"> {{logo}} </p></h1>
<p class="center">{{name}}</p>
</script>
<script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>
</div>
<div class="center" id="footer">
<p class="center" ><font color ="ffffff">Footer</font></p>
</div>
<div class="button1">
<button on-click='activate'>Settings</button>
</div>
<div class="button1">
<button on-click='deactivate'>Reports</button>
</div>
<script>
var ractive = new Ractive({
el: 'container',
template: '#template',
data: {
name: 'spatium',
logo: '\\|/' }
});
</script>
<script>
ractive.on({
activate: function () {
alert( 'Activating!' );
},
deactivate: function () {
alert( 'Deactivating!' );
}
});
</script>
</body>
Nothing happend. Can the problem be in conflict between two scripts?
The buttons must be inside your template:
<script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>
<div class="center" id='container'></div>
<script id='template' type='text/ractive'>
<h1><p class="center"> {{logo}} </p></h1>
<p class="center">{{name}}</p>
<div class="center" id="footer">
<p class="center" ><font color ="ffffff">Footer</font></p>
</div>
<div class="button1">
<button on-click='activate'>Settings</button>
</div>
<div class="button1">
<button on-click='deactivate'>Reports</button>
</div>
</script>
<script>
var ractive = new Ractive({
el: 'container',
template: '#template',
data: {
name: 'spatium',
logo: '\\|/' }
});
ractive.on({
activate: function () {
alert( 'Activating!' );
},
deactivate: function () {
alert( 'Deactivating!' );
}
});
</script>
i'm using symfony 2.3 with bootstrap and FullPage.js .
When i load my page, it seems to be loaded twice...
So my width slides in my section is wrong, and the code created is wrong too.
<div class="section active" id="section_admin" data-anchor="admin"">
<div class="slides">
<div class="slidesContainer" style="width: 300%;">
<div class="slides">
<div class="slidesContainer" style="width: 300%;">
<div class="slide active" data-anchor="slide1" style="width:
With the call plugin, my console log return two 'toto', if i remove the plugin my console log return one 'toto'.
Where I am wrong ?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="/bundles/fosjsrouting/js/router.js"></script>
<script type="text/javascript" src="/app_dev.php/js/routing?callback=fos.Router.setData"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/js/tcs.js"></script>
<script type="text/javascript" src="/bundles/ivoryckeditor/ckeditor.js" ></script>
<script type="text/javascript" src="/jQuery-File-Upload/js/jquery.fileupload.js" ></script>
<script type="text/javascript" src="/jQuery-File-Upload/js/jquery.fileupload-ui.js" ></script>
<script type="text/javascript" src="/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="/js/jquery.knob.js"></script>
<script type="text/javascript" src="/js/select2.js"></script>
<script type="text/javascript" src="/js/fullcalendar.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-colorpicker.min.js"></script>
<script type="text/javascript" src="/js/moment.min.js"></script>
<script type="text/javascript" src="/js/daterangepicker.js"></script>
<script type="text/javascript" src="/js/dataDays.js"></script>
<script type="text/javascript" src="/js/dataDaysEnh.js"></script>
<script type="text/javascript" src="/js/dataHours.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/js/jquery.fn.gantt.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="/js/jquery.fullPage.js"></script>
<script type="text/javascript" src="/js/jquery.myAlert.js"></script>
<script type="text/javascript" src="/js/jquery.transit.min.js"></script>
<!-- wysihtml5 parser rules -->
<script type="text/javascript"src="/js/wysihtml5/parser_rules/advanced.js"></script>
<!-- Library -->
<script type="text/javascript"src="/js/wysihtml5/dist/wysihtml5-0.3.0.min.js"></script>
<link rel="stylesheet" href="/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="/css/font-awesome-ie7.min.css" type="text/css"/>
<link rel="stylesheet" href="/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="/css/jquery.ibutton.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui-1.8.20.custom.css" type="text/css" />
<link rel="stylesheet" href="/css/select2.css" type="text/css" />
<link rel="stylesheet" href="/css/wysihtml5.css" type="text/css" />
<link rel="stylesheet" href="/css/gantt.css" type="text/css" />
<link rel="stylesheet" href="/css/datepicker.css" type="text/css" />
<link rel="stylesheet" href="/css/fullcalendar.css" type="text/css" />
<link rel="stylesheet" href="/css/bootstrap-colorpicker.css" type="text/css" />
<link rel="stylesheet" href="/css/daterangepicker-bs3.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery.fullPage.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery.dataTables.css" type="text/css" />
<link rel="stylesheet" href="/css/surcharge.css" type="text/css" />
<link rel="stylesheet" href="/css/surcharge-dataTable.css" type="text/css" />
</head>
<body>
<div class="section" id="section_projet">
<div id="myProject" class="col-lg-12">
<div class="row">
<div id="js-sidebar-projet" class="wrap col-sm-2 col-md-3 col-lg-2" >
<a href="/app_dev.php/todo/projet/add" class="visible-xs col-xs-12 btn btn-primary" style="margin-bottom: 20px;">
<i class="icon-cogs"></i>
<span>Nouveau projet</span>
</a>
<div class="sidebar bg-lighter">
<div class="sub-sidebar" style=" border-bottom: 1px solid #FFF">
<a href="/app_dev.php/todo/projet/" >
<div class="col-xs-10 col-sm-9 col-md-8 col-lg-9"><span>Mes Projets</span></div>
<div class="col-xs-2 col-sm-3 col-md-4 col-lg-3"><i class="icon-cogs"></i></div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadOneProjet(1,8,event)" >
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<span class="visible-xs">Dev</span>
<span class="visible-sm visible-lg">Dev</span>
<span class="visible-md">Dev</span>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="color: #5cb85c;">
<i class="icon-sign-blank"></i>
</div>
</a>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<a class="" href="/app_dev.php/todo/delete/projet/8"onclick="return confirm('Are u sure ?')">
<i class="icon-trash"></i>
</a>
</div>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadOneProjet(1,5,event)" >
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<span class="visible-xs">Projet 2</span>
<span class="visible-sm visible-lg">Projet 2</span>
<span class="visible-md">Projet 2</span>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="color: #b85ca9;">
<i class="icon-sign-blank"></i>
</div>
</a>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<a class="" href="/app_dev.php/todo/delete/projet/5"onclick="return confirm('Are u sure ?')">
<i class="icon-trash"></i>
</a>
</div>
</div>
</div> </div>
<div id="js-load-projet" class="wrap col-sm-10 col-md-9 col-lg-10">
<div id='calendar'class="bg-lighter" style="padding: 10px;"></div>
</div>
</div>
</div>
</div>
<div class="section" id="section_tache">
<div id="wrap" class=" col-lg-12" style="padding-top: 20px;">
<div class="row" style="">
<div class="wrap col-sm-2 col-md-3 col-lg-2" >
<div class="sidebar bg-lighter" >
<div class="sub-sidebar active">
<a href="#" onclick="loadAjaxTaches('getActiveTaches',1,2,event)" title="Mes taches">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-inbox" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9">
<span>Mes taches</span>
</div>
</a>
</div>
<div class="sub-sidebar ">
<a href="#" onclick="loadAjaxTaches('getTodayTaches',1,2,event)" title="Aujourd'hui">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-calendar" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9 ">
<span>Aujourd'hui</span>
</div>
</a>
</div>
<div class="sub-sidebar ">
<a href="#" onclick="loadAjaxTaches('getRecentTaches',1,2,event)" title="Updated">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-refresh" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-10 col-lg-9 ">
<span>Updated</span>
</div>
</a>
</div>
<div class="sub-sidebar ">
<a href="#" onclick="loadAjaxTaches('getMyAssignedTaches',1,2,event)" title="Assignée">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-hand-right" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9 ">
<span>Assignée</span>
</div>
</a>
</div>
<div class="sub-sidebar ">
<a href="#" onclick="loadAjaxTaches('getSQLSharedTaches',1,2,event)" title="Partagée">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-share" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9 ">
<span>Partagée</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getUserlessTaches',1,2,event)" title="Orpheline">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-frown" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9 ">
<span>Orpheline</span>
</div>
</a>
</div>
</div>
</div>
<div id="contenu" class="wrap col-xs-12 col-sm-8 col-md-7 col-lg-8">
<table id="dataTable" class="table table-tache" >
</table>
<div class="modal fade" id="ModalImportance" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Priorité</h4>
</div>
<div class="modal-body">
<table class="table">
<tbody>
<tr>
<td>
<a class=" js-modal-choice icon-3x color-primary" data-dismiss="modal" data-value="1" data-color="color-primary">
<i class="icon-warning-sign"></i>
</a>
</td>
<td>
<a class="js-modal-choice icon-3x color-warning" data-dismiss="modal" data-value="2" data-color="color-warning">
<i class="icon-warning-sign"></i>
</a>
</td>
<td>
<a class=" js-modal-choice icon-3x color-danger" data-dismiss="modal" data-value="3" data-color="color-danger">
<i class="icon-warning-sign"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<h4 class="modal-title">Choisissez ...</h4>
</div>
</div>
</div>
</div>
<script>
jQuery('.js-modal-choice').on('click',function(e){
e.preventDefault();
rate_id = jQuery(e.currentTarget).attr('data-value');
tache_id = myGlobalVar.attr('data-tache');
color = jQuery(e.currentTarget).attr('data-color');
console.log(rate_id);
path = Routing.generate('tcs_todo_ajax_edit_importance');
jQuery.ajax({
type: "POST",
url: path,
data: "tache_id="+tache_id+"&importance_id="+rate_id,
cache: false,
success: function(msg) {
myGlobalVar.attr('class','js-modal '+color);
},
error: function(msg) {
console.log( 'r&té');
}
});
});
</script><script>
jQuery(document).ready(function() {
$('#dataTable').dataTable({
"bPaginate": true,
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bInfo": false,
"bAutoWidth": false,
"bDestroy": true,
"oLanguage": { "sSearch": "" ,
"oPaginate": {
"sFirst": "<i class='icon-fast-backward visible-xs' title='Début'></i><div class='hidden-xs'> Début</div>",
"sLast": "<i class='icon-fast-forward visible-xs' title='Fin'></i><div class='hidden-xs'> Fin</div>",
"sNext": "<i class='icon-forward visible-xs' title='Suivant'></i><div class='hidden-xs'> Suiv.</div>",
"sPrevious": "<i class='icon-backward visible-xs' title='Précedent'></i><div class='hidden-xs'> Préc.</div>",
}
},
"sPaginationType": "full_numbers",
"fnDrawCallback": function( oSettings ) {
//jQuery('tr').removeClass('odd');
//jQuery('tr').removeClass('even');
jQuery('#dataTable_filter').find('input').addClass('form-control input-sm');
jQuery('#dataTable_filter').find('input').attr('placeholder','Recherche');
},
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
//dont apply odd even class, when warning class is present
if (jQuery(nRow).hasClass('alert-warning')){
jQuery(nRow).removeClass('odd');
jQuery(nRow).removeClass('even');
}
}
});
});
/********************************
* FONCTION DE RATING
*******************************/
jQuery('a.js-modal').on('click',function(e){
e.preventDefault();
myGlobalVar = jQuery(e.currentTarget);
//console.log(jQuery(e.currentTarget));
});
/********************************
* PROGRESSION
*******************************/
$(".dial").knob({
'height':48,
'width': 48,
'inline':false,
'inputColor' :'#5cb85c',
'fgColor':'#5cb85c',
'bgColor':'#dff0d8',
'thickness': '.1',
'draw': function(){
var hexa = colored(this.cv);
this.o.fgColor = hexa;
this.$.css('color' ,hexa);
$(this.i).val(this.cv + '%');
if(this.$.data('skin') == 'tron') {
var a = this.angle(this.cv) // Angle
, sa = this.startAngle // Previous start angle
, sat = this.startAngle // Start angle
, ea // Previous end angle
, eat = sat + a // End angle
, r = 1;
this.g.lineWidth = this.lineWidth;
this.o.cursor
&& (sat = eat - 0.3)
&& (eat = eat + 0.3);
if (this.o.displayPrevious) {
ea = this.startAngle + this.angle(this.v);
this.o.cursor
&& (sa = ea - 0.3)
&& (ea = ea + 0.3);
this.g.beginPath();
this.g.strokeStyle = this.pColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
this.g.stroke();
}
this.g.beginPath();
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
this.g.stroke();
this.g.lineWidth = 2;
this.g.beginPath();
this.g.strokeStyle = this.o.fgColor;
this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
this.g.stroke();
return false;
}
},
'change' : function (v) {
/****************************************************************
* ICI J UTILISE UN TIMEOUT POUR DECLENCHER LA MAJ
* LORSQU ON CHANGE LE NIVEAU AVEC LA SOURIS ON A PAS ENVIE
* D AVOIR 5 APPELS AJAX POUR PASSER DE 30 A 35%
* J ATTEND DONC QUE RIEN NE SE PASSE PENDANT 0.3 SEC
****************************************************************/
if(typeof myTimeout != "undefined"){
clearTimeout(myTimeout);
}
var hexa = colored(this.cv);
this.o.fgColor = hexa;
this.$.css('color' ,hexa);
tache_id = this.$.attr('data-id');
myTimeout= setTimeout(function() {
path = Routing.generate('tcs_todo_add_ajax_progression_tache');
jQuery.ajax({
type: "POST",
url: path,
data: "value="+v+"&tache_id="+tache_id,
cache: false,
success: function(msg) {
},
error: function(msg) {
console.log( 'r&té');
}
});
}, 400 );
},
});
</script> </div>
<div class="wrap col-sm-2 col-md-2 col-lg-2">
<div class="sidebar bg-lighter">
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getPublicActiveTaches',16,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/agra" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">agra</span>
<span class="visible-lg">agra</span>
<span class="visible-md">agra</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getPublicActiveTaches',1,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/blebris" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">blebris</span>
<span class="visible-lg">blebris</span>
<span class="visible-md">blebris</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getPublicActiveTaches',44,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/chapou" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">chapou</span>
<span class="visible-lg">chapou</span>
<span class="visible-md">chapou</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getPublicActiveTaches',15,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/clement" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">clement</span>
<span class="visible-lg">clement</span>
<span class="visible-md">clement</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getPublicActiveTaches',46,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/userless.jpg" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">le_nom_le_plus_long_du_monde_...</span>
<span class="visible-lg">le_nom_le_plus...</span>
<span class="visible-md">le_nom_le_...</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getPublicActiveTaches',17,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/redero" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">redero</span>
<span class="visible-lg">redero</span>
<span class="visible-md">redero</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="section_admin">
<div class="slide active" data-anchor="slide1">
<div class="col-lg-12">
<div class="row">
<div class="wrap col-sm-2 col-md-3 col-lg-2" >
</div>
<div class="wrap col-sm-10 col-md-9 col-lg-10">
<div class="panel panel-default">
<div class="panel-heading">Groupes</div>
<div class="panel-body">
<ul class="list-unstyled">
<li></i> Voir les groupes</li>
<li></i> Ajouter un groupe</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Utilisateurs</div>
<div class="panel-body">
<ul class="list-unstyled">
<li></i> Voir les utilisateurs</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">A.C.L.</div>
<div class="panel-body">
<ul class="list-unstyled">
<li></i> Donner des droits</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slide" data-anchor="slide2">
<div class="col-lg-12">
<div class="row">
<div class="wrap col-sm-2 col-md-3 col-lg-2" >
</div>
<div class="wrap col-sm-10 col-md-9 col-lg-10">
<div class="panel panel-default">
<div class="panel-heading">Groupes</div>
<div class="panel-body">
<ul class="list-unstyled">
<li></i> Voir les groupes</li>
<li></i> Ajouter un groupe</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Utilisateurs</div>
<div class="panel-body">
<ul class="list-unstyled">
<li></i> Voir les utilisateurs</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">A.C.L.</div>
<div class="panel-body">
<ul class="list-unstyled">
<li></i> Donner des droits</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function() {
console.log('toto');
$.fn.fullpage({
verticalCentered: false,
resize : true,
slidesColor : ['transparent', 'transparent','transparent'],
anchors:['projet','tache','admin'],
scrollingSpeed: 700,
easing: 'easeInQuart',
menu: false,
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
slidesNavigation: false,
slidesNavPosition: 'bottom',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
autoScrolling: true,
scrollOverflow: false,
css3: false,
//events
onLeave: function(index, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction){}
});
});
</script>
<div id="sfwdt4d109a" class="sf-toolbar" style="display: none"></div><script>/*<![CDATA[*/ Sfjs = (function() { "use strict"; var noop = function() {}, profilerStorageKey = 'sf2/profiler/', request = function(url, onSuccess, onError, payload, options) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); options = options || {}; xhr.open(options.method || 'GET', url, true); xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.onreadystatechange = function(state) { if (4 === xhr.readyState && 200 === xhr.status) { (onSuccess || noop)(xhr); } else if (4 === xhr.readyState && xhr.status != 200) { (onError || noop)(xhr); } }; xhr.send(payload || ''); }, hasClass = function(el, klass) { return el.className.match(new RegExp('\\b' + klass + '\\b')); }, removeClass = function(el, klass) { el.className = el.className.replace(new RegExp('\\b' + klass + '\\b'), ' '); }, addClass = function(el, klass) { if (!hasClass(el, klass)) { el.className += " " + klass; } }, getPreference = function(name) { if (!window.localStorage) { return null; } return localStorage.getItem(profilerStorageKey + name); }, setPreference = function(name, value) { if (!window.localStorage) { return null; } localStorage.setItem(profilerStorageKey + name, value); }; return { hasClass: hasClass, removeClass: removeClass, addClass: addClass, getPreference: getPreference, setPreference: setPreference, request: request, load: function(selector, url, onSuccess, onError, options) { var el = document.getElementById(selector); if (el && el.getAttribute('data-sfurl') !== url) { request( url, function(xhr) { el.innerHTML = xhr.responseText; el.setAttribute('data-sfurl', url); removeClass(el, 'loading'); (onSuccess || noop)(xhr, el); }, function(xhr) { (onError || noop)(xhr, el); }, options ); } return this; }, toggle: function(selector, elOn, elOff) { var i, style, tmp = elOn.style.display, el = document.getElementById(selector); elOn.style.display = elOff.style.display; elOff.style.display = tmp; if (el) { el.style.display = 'none' === tmp ? 'none' : 'block'; } return this; } } })();/*]]>*/</script><script>/*<![CDATA[*/ (function () { Sfjs.load( 'sfwdt4d109a', '/app_dev.php/_wdt/4d109a', function(xhr, el) { el.style.display = -1 !== xhr.responseText.indexOf('sf-toolbarreset') ? 'block' : 'none'; if (el.style.display == 'none') { return; } if (Sfjs.getPreference('toolbar/displayState') == 'none') { document.getElementById('sfToolbarMainContent-4d109a').style.display = 'none'; document.getElementById('sfToolbarClearer-4d109a').style.display = 'none'; document.getElementById('sfMiniToolbar-4d109a').style.display = 'block'; } else { document.getElementById('sfToolbarMainContent-4d109a').style.display = 'block'; document.getElementById('sfToolbarClearer-4d109a').style.display = 'block'; document.getElementById('sfMiniToolbar-4d109a').style.display = 'none'; } }, function(xhr) { if (xhr.status !== 0) { confirm('An error occurred while loading the web debug toolbar (' + xhr.status + ': ' + xhr.statusText + ').\n\nDo you want to open the profiler?') && (window.location = '/app_dev.php/_profiler/4d109a'); } } ); })();/*]]>*/</script>
</body>
I would try it by adding the scrips as well as the scrips initializations at the header, where it is suppose to be. Right now fullpage initialization is at the bottom.
That would be the proper semantic way to do it, but nowadays the recommendation is to do it like you were doing it,at the bottom of the site, just before </body>. The problem is that right now the plugin operates over the body of the site instead over a wrapper and that's the why. I will try to fix it in future versions