Reprise du message précédent :

 
Bienvenue dans la matrice  Flexbox

moi c'est l'inverse, les floats c'est logique par contre flexbox j'ai pas encore trop buché dessus mais ça m'a l'air chaud    
 
 
Sinon moi qui cherchais un plugin jquery de lightbox/gallery moderne, je viens de tomber sur http://www.frescojs.com/ Il m'a conquis !! surtout la fonction Zoom
 
edit: licence  

En JS, on peut ajouter un évènement à un élément qui en possède déjà un ? Dans ce script "Fresco", j'aimerai enlever une classe du body quand je ferme la lightbox. Mais ça ne fonctionne pas, j'ai essayé un .on("click",..) de tous les divs qui permettent de fermer la lightbox, aucun d'entre eux ne déclenchent mon console.log

Il y a des chances pour que l'évènement ne soit pas propagé et/ou que tu n'ais pas attaché ton event handler sur le bon élément.

Pour une animation HTML5 plein écran utilisant un canvas, vous placeriez toutes les images sur le canvas, ou certaines (notamment celles qui ne vont pas subir d'animation, le "décor" ) par-dessus avec CSS ?
Ou je me prends la tête à me poser la question, y'a pas vraiment de différence ?
 
Mais y'a pas un "risque" (surtout pour la rapidité/fluidité de l'animation) à surcharger un canvas alors qu'on peut faire autrement ?

 
je pencherai pour la première solution du coup.. même si je comprends pas grand chose  
 
car j'ai testé tous les éléments qui ferment le lightbox (la croix en haut à droite), aucun ne déclenchent l'évent..
 
on peut remédier à ce que l'évènement ne soit pas propagé ou c'est dans la conception du script ?

Tu peux toujours encapsuler ton icone de fermeture dans un autre objet invisible (un span par ex) et trigger ce truc.
 
Tiens d'ailleurs, comment on peut savoir si un event n'est pas propagé ? (j'veux dire si c'est le cas, trouver l'endroit où se trouve le stoppropagation)

 
tout est généré lorsqu'on clique sur l'image  
y'a ces callbacks dans le script qui servent exactement à faire ce que je veux mais c'est dans la version "pro", je l'achèterai si ils veulent vmt cette fonctionnalité.
 
 
ça m'intéresse bien aussi, même si je risque de rien comprendre dans la console de Chrome y'a un onglet Event Listeners, apparemment ça affiche tous les évènements actif de la page non ?

 
Alors si tout est généré quand on clique sur l'image, tu as bien un holder par défaut qui accueille tout ce qui est généré, à partir de là, tu fais un delegate
 
sinon oui dans Chrome il y a un eventListener, mais c'est un peu fouilli, et ça n'affiche que les trucs pour l'elm selectionné (ou la page si rien), à confirmer

Effectivement si c'est généré par le script, il faut y coller un événement délégué sur un élément parent qui n'est pas généré (ou du moins qui est présent quand tu bind ton évènement). Sinon effectivement ton bind sur l'élément qui n'est pas encore présent va se faire dans le vent

Personne ? Ma question est si con que ça ?  

Le cout du canvas n'augmente pas trop en fonction du nombre d'objet, mais plutôt en fonction des zone a repeindre.  
Donc je ferai plutôt un seul canvas avec une redessin intelligent ( il existe des libs pour ça)

J'ai vu pas mal de gens qui faisaient plusieurs canvas (potentiellement les uns sur les autres), comme ça il ne repeignent que les canvas nécessaires (et peuvent tenter de faire du smart à l'intérieur, mais faut repeindre par dessus l'ancienne position des trucs qui ont bougés, et c'est pas nécessairement simple ou possible)

Genre soundslice utilise 9 canvas (timebar, playhead, base, annotations, scrollbar, scroll head, selection, vertical scroll et mouse target)

Merci de vos réponses  Pour l'instant j'utilise un seul canvas dont le dessin est géré avec jcanvas, mais comme j'avais des trucs un peu chelou niveau animation (genre des gros GROS ralentissements quand j'applique une ombre portée à un des dessins, un bête rectangle en plus… ), je me méfiais de ce que ça pouvait donner si je continuais à trop charger le canvas avec d'autres images.
Au pire je ferai plusieurs canvas effectivement.
 
Le but de la question était aussi de savoir s'il y avait une pratique plus répandue qu'une autre (tout dans le canvas vs. les images "statiques" dans le CSS). A priori non

Une idée de ce que je pourrais faire pour faire marcher ce plug-in d'upload drag & drop html à Mootools sur IE 11 ?
http://aryweb.nl/projects/mootools [...] pload.html
 
Je l'ai dans tous mes backoffices, et je sens que tous mes clients IE vont m’appeler les 1 après les autres...
C'est clairement au dessus de mes comps de trouver ce qui bug.
 
Déjà que j'ai le TinyMCE à changer (mais bon pour ça une simple mise à jour vers la dernière version de la branche 3. règle le problème, faut juste que je vérifie mon plug-in à ma médiathèques).

Si ya des motivés pour m'aider à corriger un bug de transition CSS sous Android : http://stackoverflow.com/questions [...] roid-4-1-x

http://stackoverflow.com/questions [...] in-firefox
hep les jeunes, en SVG, pour appliquer un fill pattern par CSS, on doit référencer l'élément du pattern par une url :

sauf que si on est dans une CSS séparée, l'URL est relative à la CSS, pas au document. Y'a une feinte pour référencer un élément du document courant dans une CSS externe ?

edit: techniquement j'aurai aimé mettre le pattern lui-même dans la CSS, mais je crois pas que ce soit possible.

j'aime assez l'idée que sous chrome le debugger vit dans la même boucle d'évènements que le process qu'il débugge. y'a 0% de chance de pouvoir debugger un worker de calcul

les outils de debug es workers sont ( mais si ca peut te rassurer, c'est a peine mieux sur d'autres technos comme webrtc)
 
Et sinon, une liste de truc louches en css/html http://wtfhtmlcss.com/

C'est pas terrible, mais comparé à la concurrence, c'est royal..

moi j'ai encore jamais réussi à utiliser un outil intelligent sur un worker. Je fais soit du console.log (qui n'a pas de stacktrace ni de formatage intelligent dans les workers) soit j'essaye d'exécuter le code dans la boucle principale et j'utilise les outils normaux.

Le seul truc spécial que j'utilise c'est regarder le nombre de workers vivants dans le panneau "sources".

Tu peux mettre des points d'arrêt dans ton worker, c'est toujours mieux que du console.log.

pas con, j'y avait pas pensé.
pour le prochain bug.

Dans l'onglet Sources, tu as une catégorie Workers,  faut cocher l'option pause on start.

je fais du javascript et je déteste ma vie

Faudrait que tu fasse de l'algo, je dis

http://blog.jetbrains.com/webstorm [...] ebstorm-8/ webstorm 8 sort  
support d'angularjs , de grunt et de plein d'autres choses

remote debugging pour FF , y compris depuis android https://t.co/o8HPbKRFD8

Vous connaissez une petite librairie qui gère le touchmove, pour que je puisse déclencher des trucs (ajout de classes) sur le touch move up/down... j'ai essayé de le faire moi meme en JS mais ça marche pas bien
 
J'en ai regardé pas mal, j'ai pas besoin d'avoir le tap, double tap, swip, 2 / 3 fingers etc... juste une détection solide du touchmove  

Hammer.js

http://nraynaud.github.io/webgcode/text.html est-ce que quelqu'un peut m'expliquer pourquoi sous FF l'élément SVG ne reste pas dans la taille de son parent ?
j'arrive pas à le forcer à rentrer exactement dans la place dispo. en flex si possible.

J'avais un peu sous estimé la puissance d'angular. Pour m'entrainer, je fais un chat.

dans scripts/directive/chat.js

'use strict';
 
angular.module('testyoangularApp')
    .directive('chat', function () {
        return {
            templateUrl: 'views/chat.html',
            restrict: 'E',
            link: function postLink(scope, element, attrs) {
                scope.messages = [
                    {text: "hello",fromOther:true},
                    {text: "hello"},
                    {text: "hello"},
                    {text: "hello"}
                ];
                scope.post = function (message) {
                    scope.messages.push(angular.copy(message));
                    message.text = ''; //empty text box
                };
                // element.text('this is the chat directive');
            }
        };
    });

dans views/chat.html

<div class="bubble-container">
    <div
            ng-repeat="message in messages "
            class="talk-bubble tri-right  " ng-class="!!message.fromOther ?  'right-in' :'left-in'">
        <div class="talktext">
            <p>{{message.text}}</p>
        </div>
    </div>
</div>
<form role="form" novalidate ng-submit="post(newMessage)">
    <textarea placeholder="Tapez votre message" class="form-control" ng-model="newMessage.text"></textarea>
    <button
            type="submit"
            class="btn btn-default btn-block"
            ng-disabled="newMessage.text==undefined || newMessage.text.length==0"
            >
        Envoyer
    </button>
</form>

Le service de synchro par des websocket est a peine plus complexe

 
Je viens de tester avec le drag Up et drag Down, ça marche nickel  
 
 
Sinon question générale à propos de cache, j'ai une meme image, une appelée par foo.jpg et l'autre foo.jpg?123456789 (géré par SASS dans le CSS)
Est-ce que le browser va la télécharger 2 fois ?

oui

'use strict';
 
angular.module('testyoangularApp')
    .directive('chat', function () {
        return {
            templateUrl: 'views/chat.html',
            restrict: 'E',
            link: function postLink(scope, element, attrs) {
                scope.messages = [
                    {text: "hello",fromOther:true},
                    {text: "hello"},
                    {text: "hello"},
                    {text: "hello"}
                ];
                scope.post = function (message) {
                    scope.messages.push(angular.copy(message));
                    message.text = ''; //empty text box
                };
                // element.text('this is the chat directive');
            }
        };
    });

<div class="bubble-container">
    <div
            ng-repeat="message in messages "
            class="talk-bubble tri-right  " ng-class="!!message.fromOther ?  'right-in' :'left-in'">
        <div class="talktext">
            <p>{{message.text}}</p>
        </div>
    </div>
</div>
<form role="form" novalidate ng-submit="post(newMessage)">
    <textarea placeholder="Tapez votre message" class="form-control" ng-model="newMessage.text"></textarea>
    <button
            type="submit"
            class="btn btn-default btn-block"
            ng-disabled="newMessage.text==undefined || newMessage.text.length==0"
            >
        Envoyer
    </button>
</form>

 
Tu as moyen de faire un jsbin fonctionnel avec ca ? Je serais curieux de comparer avec Ember.js.

Ca va etre un peu compliqué, j'use et j'abuse des générateurs, il y a pas mal de fichiers. Ca va me faire pas mal de taf pour en extraire juste le coeur, et j'ai encore pas mal de choses à faire ce soir.
 
mais je pense qu'il existe des masses de jsfiddle sur el sujet

 
merci  

Comment se fait-il qu'un scale CSS fasse apparaître des éléments placés en dehors (i.e. à des coordonnées négatives) de l'écran ?
Exemple
 
Y'a moyen de contourner ça ?

Je fais souvent des captures de this dans mes closures:

var self = this;
            text.getText('Seymour One', t, 30).then(function (textOutline) {
                self.set('textOutline', textOutline);
                Ember.run.debounce(self, self.computePocket, 2000);
            }).catch(function (error) {
                        console.error(error.stack);
                    });

Mais en fait je pense qu'il vaut mieux éviter d'appeler la capture "self" parce que si on merde un copier-coller, 'self' devient le contexte global (window) et le message d'erreur est tout bizarre:

J'utilise parfois that , qui n'existe pas  dans le contexte global

_this pour mon objet, et si c'est un élément jquery c'est :  
$this = $(this);