I am trying to implement a navbar for my application whose front end is built using Vue 2.0 and Bulma . It works well on desktops and but on smaller screens its showing the burger icon but it is not showing any elements. Its just present.
<template>
<div class="container is-fluid">
<div>
<nav class="navbar is-dark">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img alt="K R O N O S" height="100px">
</a>
<div class="button navbar-burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-end">
<div class="navbar-item">
<a class="" href="#"> Docs </a>
</div>
<div class="navbar-item ">
<a class="" href="#"> Report </a>
</div>
<div class="navbar-item">
<a class="">More</a>
</div>
<div class="navbar-item">
<a class="">Logout</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</template>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target
var $target = document.getElementById(target)
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active')
$target.classList.toggle('is-active')
})
})
}
})
export default {
name: 'Navbar',
data () {
return {
msg: ''
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
border: 0px solid black;
}
</style>
As you can see I have tried implementing the example code in on which was present here but with no use. Shouldnt Bulma give me responsive navbar out of the box. All the examples and solutions I have found are for the older "nav" class not the newer "navbar". Help would be much appreciated.
So, after a bit of studying the Vue guide and clues from fatman's comments, this is the fix I applied.
The above code works , but this is a more vue-ish way to do the navbar-burger menu.
<template>
<nav class="navbar">
<div class="container">
<div class="navbar-brand is-large">
<a class="navbar-item" href="#">
<img alt="K R O N O S" height="100px">
</a>
<button #click="makeBurger" class="button navbar-burger" data-target="navMenu" v-bind:class="{ 'is-active': activator }">
<span></span>
<span></span>
<span></span>
</button>
</div>
<div class="navbar-menu" id="navMenu" v-bind:class="{ 'is-active': activator }">
<div class="navbar-end">
<div class="navbar-item">
<a class="" href="#"> Docs </a>
</div>
<div class="navbar-item ">
<a class="" href="#"> Report </a>
</div>
<div class="navbar-item">
<a class="">More</a>
</div>
<div class="navbar-item">
<a class="">Logout</a>
</div>
</div>
</div>
</div>
</nav>
</template>
<script>
export default {
name: 'Navbar',
data () {
return {
msg: '',
activator: false
}
},
methods: {
makeBurger () {
this.activator = !this.activator
return this.activator
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
border: 0px solid black;
}
</style>
Hope this helps someone. The show/hide functionality is taken care by Bulma.
This works, but
will not close the menu
will cause router-links not to work
For 1.) I recommend adding #click to navbar-item as well:
<a #click="makeBurger" class="navbar-item">
<router-link to="/login">
{{link1}}
</router-link>
</a>
My bootstrap carousel has 4 slides and all of them have animated charts but the animation is seen only in first slide.
How do I ensure that the chart animations for the rest of the 3 slides are also seen?
Code :
<%# Page Language="C#" AutoEventWireup="true" CodeFile="trycarousel.aspx.cs" Inherits="trycarousel" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css-sheets/bootstrap.css">
<script src="css-sheets/jquery.min.js"></script>
<script src="charts/ChartNew.js"></script>
<script src="css-sheets/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<canvas id="canvas_Pie1c" height="500" width="1000"></canvas>
</div>
<div class="item">
<canvas id="canvas_Pie2c" height="500" width="1000"></canvas>
</div>
<div class="item">
<canvas id="canvas_Pie2c" height="500" width="1000"></canvas>
</div>
<div class="item">
<canvas id="canvas_Pie2c" height="500" width="1000"></canvas>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="color:white"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script>
var mydata2 = [
{
value: 0.39,
color: "#18a5a5 ",
title: "A"
},
{
value: 10.13,
color: "#3f51b5",
title: "B"
},
{
value: 44.29,
color: "#df982f",
title: "C"
},
{
value: 45.19,
color: "#668f4a",
title: "D"
}
];
var startWithDataset = 1;
var startWithData = 1;
var opt1c = {
animationStartWithDataset: startWithDataset,
animationStartWithData: startWithData,
animateRotate: true,
animateScale: false,
animationByData: "ByArc",
animationSteps: 50,
canvasBorders: false,
canvasBordersWidth: 3,
canvasBordersColor: "black",
legend: true,
inGraphDataShow: true,
animationEasing: "linear",
annotateDisplay: true,
spaceBetweenBar: 5,
graphTitleFontSize: 18
}
window.onload = function draw() {
var myPie = new Chart(document.getElementById("canvas_Pie1c").getContext("2d")).Pie(mydata2, opt1c);
var myPie = new Chart(document.getElementById("canvas_Pie2c").getContext("2d")).Pie(mydata2, opt1c);
}
</script>
</form>
</body>
</html>
I tried this :
http://wenda.baba.io/questions/4163645/bootstrap-carousel-start-css-animation-after-slide-is-complete.html
So,I modified my code to this.I am not sure whether that post addresses my question.I just want animation to be shown in each slide which is presently happening only for the first slide.
My modified code according to the above article is :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
<link rel="stylesheet" href="css-sheets/bootstrap.css">
<script src="css-sheets/jquery.min.js"></script>
<script src="charts/ChartNew.js"></script>
<script src="css-sheets/bootstrap.min.js"></script>
<style>
body {padding-top:80px;}
.inactive{opacity:0;}
body {padding-top:80px;} .inactive{opacity:0;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container" style="max-width:900px;">
<div id="carousel-example-captions" class="carousel slide bs-docs-carousel-example">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li class="" data-target="#carousel-example-captions" data-slide-to="1"></li>
<li class="" data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<canvas id="canvas_Pie1c" height="500" width="1000"></canvas>
</div>
<div class="item " id="z1">
<canvas id="canvas_Pie2c" height="500" width="1000"></canvas>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/bootstrap3/bootstrap-master/dist/js/bootstrap.js"></script>
<script>
function transitions() {
var j = 1;
for (var i = 1; i <= 4; i++) {
setTimeout(
function () {
if (!$.support.transition) { $('#z' + i).removeClass('inactive') }
else
{
$('#z' + j).addClass('animated').addClass('fadeInLeft');
$('#z' + j).one($.support.transition.end, function () { $('#z' + i).removeClass('inactive') }).emulateTransitionEnd(2000);
}
j++
},
2000 * (i - 1));
}
}
$('.carousel').carousel();
$(".carousel").on('slid.bs.carousel', function (evt) {
if ($(this).find('.active').index() == 1) {
$(this).carousel('pause');
/* run your transitions */
transitions();
var that = $(this);
/*restart your carousal */
setTimeout(function () {
that.carousel('next');
that.carousel('cycle');
/* hide transitions again */
$("#slide2 [id^='z']").removeClass().addClass('inactive');
}, 2000 * 5);
}
});
</script>
Still not working :/
I may be missing out something very simple/stupid. This is my first try at javascript.Please help.
You are creating the chart animation on window.onload.Copy the same to slid.bs.carousel event. Check the below snippet.
$(".carousel").on('slid.bs.carousel', function (evt) {
var myPie = new Chart(document.getElementById("canvas_Pie1c").getContext("2d")).Pie(mydata2, opt1c);
var myPie = new Chart(document.getElementById("canvas_Pie2c").getContext("2d")).Pie(mydata2, opt1c);
});
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