hide and show <li> with ng-repeat and condition - css

I have an array of color id and code, I am using ng-repeat in <li> tag to display all colors, but I want to display only colors which have colorCode < 10 and hide the colors which have colorCode >10, and I have '+' button, onClick of this button I want to display colors which are hidden and button show '-'icon, and then again onClick of button hide the colors which have ColorCode >10. Here is my code:
<div class="row py-3 border_bootom_1">
<div class="col-lg-2 align-self-center">
<h4 class="card-title"> Color </h4>
</div>
<div class="col-lg-10 align-self-center">
<ul class="ss_size_general ss_size_general_1">
<li class="pointer" ng-repeat="color in $ctrl.parameters.colors">
<a href="#"
ng-class="{'active': $ctrl.search.colors.indexOf(color.code.toString()) >= 0, 'colorOpen-content': color.code > 10}"
ng-click="$ctrl.setParameter('colors', color.code.toString())" title="{{color.name}}">
<div class="verticle_center"><span>{{color.label}}</span></div>
</a>
</li>
<li>
<a><div class="verticle_center pointer colorbtn"><i class="fa fa-plus"></i></div></a>
</li>
</ul>
</div>
</div>
$('.colorbtn').click(function () {
$('.colorOpen-content').toggle(200);
var child = $(this).children();
if (child.hasClass('fa fa-plus'))
child.removeClass('fa fa-plus').addClass('fa fa-minus');
else
child.removeClass('fa fa-minus').addClass('fa fa-plus');
return false;
});`


Try this
`
<div ng-class="{'active': $ctrl.search.colors.indexOf(color.code.toString()) >= 0}"
ng-style="{{color.code}} >= 10 ? {'display': 'hide !important'} : {'display': 'block !important'}"></div>
`


You can also use filter for this question. Something like this:
var app = angular.module("app", []);
app.controller("MainCtrl", function($scope) {
$scope.lt10 = true;
$scope.colors = [{
code: 1,
name: 'red',
label: 'Red'
},
{
code: 2,
name: 'blue',
label: 'Blue'
},
{
code: 30,
name: 'green',
label: 'Green'
},
{
code: 40,
name: 'yellow',
label: 'Yellow'
}
];
$scope.toggleShow = function() {
$scope.lt10 = !$scope.lt10;
};
$scope.setParameter = function() {
};
$scope.myFilter = function(itm) {
if ($scope.lt10 && itm.code < 10) return true;
if (!$scope.lt10 && itm.code >= 10) return true;
return false;
};
});
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="row py-3 border_bootom_1">
<div class="col-lg-2 align-self-center">
<h4 class="card-title"> Color </h4>
</div>
<div class="col-lg-10 align-self-center">
<ul class="ss_size_general ss_size_general_1">
<li class="pointer" ng-repeat="color in colors|filter: myFilter">
<a href="#" ng-class="{'active': $ctrl.search.colors.indexOf(color.code.toString()) >= 0, 'colorOpen-content': color.code > 10}" ng-click="setParameter('colors', color.code.toString())" title="{{color.name}}">
<div class="verticle_center"><span>{{color.label}}</span></div>
</a>
</li>
<li>
<a>
<div ng-click="toggleShow()" ng-show="lt10" class="verticle_center pointer colorbtn">+ PLUS +</div>
<div ng-click="toggleShow()" ng-show="!lt10" class="verticle_center pointer colorbtn">- MINUS -</div>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>

Related

NVDA and JAWS screen reader is announcing unwanted text when readmore button is activated

NVDA-FF and JAWS-Chrome>, when read more element is activated while traversing through tab navigation then screen reader announces the unnecessary information along with the updated content. When read more element is activated in the arrow key navigation, for the instance, , screen reader announces as “ <> and <>”. Note: same goes with the read less element as well
<div class="pros-cons-block" tabindex="-1">
<div class="pros-block">
<h4>Pros-text</h4>
<div>
eachReview.pros
</div>
</div>
<div class="cons-block">
<h4>cons-text</h4>
<div>
eachReview.cons
</div>
</div>
</div>
<div v-show="eachReview" class="read-more">
<button v-if="eachReview.readMore" class="readless" #click="readMore(eachReview)">
<span aria-live="assertive" aria-atomic="true"></span>
<span v-if="eachReview.readMore">
<span class="phw-visually-hidden">{{eachReview.headline}}
</span>
{{readLessButton.text }}
</span>
</button>
<button v-if="eachReview && !eachReview?.readMore" class="readMoreButton" #click="readMore(eachReview, index)">
<span aria-live="assertive" aria-atomic="true"></span>
<span v-if="eachReview && !eachReview?.readMore">
<span class="phw-visually-hidden">{{ eachReview && eachReview?.headline }}</span>
{{ content.readMoreButton.text }}
</span>
</span>
</span>
</button>
</div>
<script>
const readMore = (eachReview: any, index: number) => {
eachReview.readMore = !eachReview.readMore;
const focusElem = root.value.querySelectorAll('.glassdoorReviews .each-review')[index];
if (eachReview.readMore) {
setTimeout(() => {
const readLessButton = root.value.querySelectorAll('.read-less-button')[index];
readLessButton?.setAttribute('aria-hidden', 'true');
focusElem.querySelector('.pros-cons-block').focus();
readLessButton?.setAttribute('aria-hidden', 'false');
}, 0);
} else {
setTimeout(() => {
focusElem.querySelector('.readMoreButton').focus();
}, 0);
}
};
</script>

Bulma's navbar-buger doesnt connect to menu items in Vue.js 2

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>

Bootstrap carousel shows animation only in first slide

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);
});

fullpage.js seems to loaded twice my page

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

knockout.js modal binding value update

I have the following code in this jsFiddle.
The problem I'm having is that my child items do not update properly.
I can Click "Edit User" with a problem and see the data changing, but when I attempt to add a note or even if I were to write an edit note function, the data does not bind properly
http://jsfiddle.net/jkuGU/10/
<ul data-bind="foreach: Users">
<li>
<span data-bind="text: Name"></span>
<div data-bind="foreach: notes">
<span data-bind="text: text"></span>
Edit Note
</div>
Add Note
Edit user
</li>
</ul>
<div id="userModal" data-bind="with: EditingUser" class="fade hjde modal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>
Editing user</h3>
</div>
<div class="modal-body">
<label>
Name:</label>
<input type="text" data-bind="value: Name, valueUpdate: 'afterkeydown'" />
</div>
<div class="modal-footer">
Save changes
</div>
</div>
<div id="addJobNoteModal" data-bind="with: detailedNote" class="fade hjde modal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>
Editing Note</h3>
</div>
<div class="modal-body">
<label>
Text:</label>
<input type="text" data-bind="value: text, valueUpdate: 'afterkeydown'" />
</div>
<div class="modal-footer">
Save changes
</div>
</div>
​
function Note(text) {
this.text = text;
}
var User = function(name) {
var self = this;
self.Name = ko.observable(name);
this.notes = ko.observableArray([]);
}
var ViewModel = function() {
var self = this;
self.Users = ko.observableArray();
self.EditingUser = ko.observable();
self.detailedNote = ko.observable();
self.EditUser = function(user) {
self.EditingUser(user);
$("#userModal").modal("show");
};
this.addNote = function(user) {
var note= new Note("original")
self.detailedNote(note);
$("#addJobNoteModal").find('.btn-warning').click(function() {
user.notes.push(note);
$(this).unbind('click');
});
$("#addJobNoteModal").modal("show");
}
for (var i = 1; i <= 10; i++) {
self.Users.push(new User('User ' + i));
}
}
ko.applyBindings(new ViewModel());​

Change this:
$("#addJobNoteModal").find('.btn-warning').click(function() {
To this:
$("#addJobNoteModal").find('.btn-primary').click(function() {
You were targetting the wrong button :)

I think the problem after all was that you must bind to "value:" not "text:" in a form input/textarea.

Resources