nyroBlog
Bannière NyroBlog, par
Image par - ?

Tag : Astuces


jQuery UI Position : Change the collision function

For a tooltip script quickly developed for a big current project I'm working on, I'm using the position plugin of jQuery UI.

This function allow you to positionnate an element exactly how you need relative to another element. The ultimate function when dealing with tooltip.

This plugin comes with a detection collision with the windows. In other words, if the positionnate element goes outside the window, then it's positionnate on the other side.

The only problem is that there is no possibility to detect when this collision is happening.

By reading the code I found a simple solution to detect it and a way to add a class to the positionnating element. In my case it is useful in order to change the arrow of the tooltip on the other side.

 

Here is the code:

var currentlyPositionning,
    initPos;
$.ui.position.custom = {
    left: function(position, data) {
        initPos = position.left;
        $.ui.position.flip.left(position, data);
        if (initPos != position.left) {
            currentlyPositionning.addClass('tooltipFlip');
        }
    },
    top: function(position, data) {
        initPos = position.top;
        $.ui.position.flip.top(position, data);
        if (initPos != position.top) {
            currentlyPositionning.addClass('tooltipFlip');
        }
    }
};

Actually we're simply adding a custom option to the plugin. For each top ou left properties, the code is checking if the value is changed by the original collision detection function. If it's the case, then we're adding a class to the element.

You probably notice the currentlyPositionning variable; It should correspond to the element that is currently positionned. Indeed there is no information on the data object to let us find it back.

 

Finally, to use this new functionnality you should call the position function as following::

currentlyPositionning = elem;
elem.position({
    of: me,
    my: 'left bottom',
    at: 'right top',
    offset: '15px',
    collision: 'custom'
});

Et voilà.

Version française de ce billet.

jQuery UI Position : Modifier la fonction de collision

Pour un script de tooltip développé rapidement sur un gros projet en cours, j'ai utilisé le plugin position de jQuery UI.

Cette fonction permet de positionner exactement comme on veut un élément par rapport à un autre. La fonction utlime pour une infobulle.

Et ce plugin vient même avec une détection de collision avec la fenêtre. Autrement dit, si l'élément positionné dépasse de la fenêtre, alors on le positionne de l'autre côté. Un must !

Le seul problème est qu'il n'existe actuellement aucune possibilité de détecter lorsque cela arrive.

En lisant le code de ce plugin, il existe en réalité un moyen très simple pour détecter cette collision et ajouter une classe à l'élément positionné. Dans mon cas, cela me permet de modifier l'affichage de l'infobulle de façon à avoir la flèche du bon côté.

 

Le code en question :

var currentlyPositionning,
    initPos;
$.ui.position.custom = {
    left: function(position, data) {
        initPos = position.left;
        $.ui.position.flip.left(position, data);
        if (initPos != position.left) {
            currentlyPositionning.addClass('tooltipFlip');
        }
    },
    top: function(position, data) {
        initPos = position.top;
        $.ui.position.flip.top(position, data);
        if (initPos != position.top) {
            currentlyPositionning.addClass('tooltipFlip');
        }
    }
};

En réalité, on ajoute simplement une option custom au plugin position. Pour chacune des propriétés top ou left pour lesquels le plugin détecte une collision, on vérifie si la propriété a été modifié par la fonction de détection originelle du plugin. Et si oui, dans mon cas, j'ajoute une classe à l'élément.

Vous avez sans doute remarqué la variable currentlyPositionning ; Elle doit correspondre à l'élément sur lequel on applique actuellement la position. En effet, aucune information dans l'objet data ne permet de remonter jusqu'à cet élément.

 

Enfin, pour utiliser cette nouvelle fonctionnalité, il suffit d'appeler le plugin position comme suit :

currentlyPositionning = elem;
elem.position({
    of: me,
    my: 'left bottom',
    at: 'right top',
    offset: '15px',
    collision: 'custom'
});

Et voilà, le tour est joué.

 

English version of this post.

nyroModal, FAQ and examples in progress

Because I have more and more requests for miscellaneous examples for nyroModal, I decided to implement some samples in a FAQ.

To prepare that, you could ask what you want here!

So let's comment!

nyroModal, FAQ et exemples en construction

Puisque j'ai de plus en plus de demandes d'exemples divers et variés pour nyroModal, j'ai décider de mettre en place des exemples sous forme de FAQ.

Afin de préparer tout ça, vous pouvez faire vos demandes ici !

Alors à vos commentaires !

Mes conseils pour progresser en anglais

Voilà bientôt 10 mois que je suis à Los Angeles. Comme je l'avais déjà dit 2 mois après mon arrivée ici, j'ai beaucoup progressé. Et encore plus maintenant.

Comme j'étais vraiment mauvais avant, je vais essayer de résumer toutes les étapes qui m'ont permis d'avoir le niveau que j'ai actuellement. Alors bien sûr, je suis très loin d'être bilingue -il faut 10 ans en immersion pour ça, et encore...-, mais je comprends les gens et je me fais comprendre : l'essentiel !

De plus, durant tout mon cursus scolaire, j'ai toujours eu des problèmes en langue. Des professeurs trop peu intéressant au collège, des textes et sujets barbants, rien qui m'a attiré dans cette langue. Les beaux discours des professeurs qui rabâchent -pas forcément à tort- que l'anglais est indispensable n'y faisait rien. Je n'ai jamais été bon pour apprendre par la théorie, mais j'ai toujours préféré la pratique : Learning by doing. Et pratiquer l'anglais en répondant à une cassette, ce n'est pas des plus sexy quand même...

Les bases

Avant toute chose, il est indispensable d'acquérir les bases de langue : comment conjuguer un verbe, quels sont les pronoms personnels, comment sont formées les phrases. Pour ça, l'école a quand même réussi à m'inculquer ça. Il faut dire que l'anglais n'est quand même pas très compliqué de ce côté là. les verbes au présent simple sont toujours pareil sauf pour la 3ème personne, la tournure des phrases ressemble beaucoup au français. Et si vous utilisez des questions ou du passé, l'utilisation du verbe do pour les verbes réguliers suffit.

Approfondir ces bases

Les bases s'acquièrent rapidement et simplement. Mais il va falloir rapidement emporter un certain bagage linguistique qui s'acquiert un peu plus difficilement. Là encore, il n'y a pas de secret, et si, comme moi, vous avez manqué le coche à l'école, je vous conseille ce livre : L'anglais correct pour les nuls. Derrière ce titre, se cache un livre qui commencera par vous raconter d'où vient la langue, comme elle s'est créée. Chose qu'on ne nous apprend pas à l'école. De plus, n'ayez pas peur, si vous n'y connaissez pratiquement rien en anglais. Comme je l'ai dit, on raconte l'anglais plus qu'on ne l'enseigne. C'est donc une approche beaucoup plus ludique. Dans les premiers chapitres, il y a très peu d'anglais. L'introduction de la langue n'intervient que plus tard, petit à petit, au fil des pages.

A la fin de ce livre, vous aurez en tête une très bonne idée de comment s'exprimer en anglais. Vous aurez acquis les bases, un bon paquet de vocabulaire et serez prêt à réellement pratiquer la langue.

Pratiquer la langue 

Une chose sur laquelle les enseignants ont toujours insisté, c'est que la pratique est indispensable. Autant pour progresser que pour conserver les acquis. Et encore une fois, ce n'est pas à l'école qu'on pratique la langue. Depuis que je suis ici, je me suis rendu compte qu'une langue se décompose en 4 parties : la lecture, l'écriture, la compréhension orale, l'expression orale. Il est évident qu'ils vont 2 par 2, et que progresser dans l'un fera automatiquement progresser dans son binôme, et toujours un peu aussi les 2 autres. Je vais donc décomposer ces 4 processus. Je les ai ordonnés dans l'ordre, du plus facile ou plus compliqué à acquérir. 

La lecture

Vous aurez déjà commencer cette étape en lisant le livre indiqué plus haut, mais cela n'est absolument pas suffisant. Le problème avec le livre, c'est qu'il mélange français et anglais. C'est beaucoup plus facile de le lire, mais le cerveau n'est pas complètement immergé dans un environnement anglophone. L'acquisition du vocabulaire est donc plus difficile, car elle va se faire par association avec des mots français. Il est beaucoup plus intéressant -du moins, pour moi, c'est comme ça que je le ressens- d'apprendre par association avec des images ou des idées. Bien sûr, ces images ou idées vont aussi avoir une transposition dans votre langue natale, mais l'association à une image est plus facile à retenir. J'en veux pour preuve ces génies qui font des calculs immenses en quelques secondes. A la question "Comment faites-vous ?", tous répondent à peu de choses près la même chose : "Je visualise les chiffres" ou "Je me raconte une histoire".

Donc pour en revenir à l'anglais, il faut lire de l'anglais -étonnant, n'est-ce pas. Mais que lire ? La réponse qui viendra à tout le monde est un livre. Alors oui, lire des livres anglais fonctionnent très bien. Même s'il est difficile de tout comprendre, il est possible de jongler avec un dictionnaire si vraiment c'est indispensable. Mais il faut l'éviter au maximum je pense, encore une fois pour éviter ce processus d'association avec le français. Pour ma part, j'ai déjà lu 3 livres de Dan Brown -l'auteur du Da Vinci Code- sur les conseils de mon frère et j'ai adoré. C'était vraiment difficile au début, mais du moment qu'on comprend l'ensemble de l'histoire, ce n'est pas grave. Je n'ai pas absolument tout compris les phrases et les mots, mais j'ai beaucoup améliorer mon vocabulaire en lisant ces livres.

Mais lire un livre est souvent intimidant. Ou on peut ne pas trouver quelque chose qui nous intéresse. Alors pour ça, j'ai trouvé un remplaçant, et là, vous ne pourrez pas dire qu'il n'y a rien pour vous : internet. Vous avez surement une passion, un centre d'intérêt quelconque et qui peut se trouver sur internet. D'ailleurs, il est possible que vous lisiez déjà à ce propos sur internet, mais en français. Changer vos habitudes, et lisez donc en anglais ! Pour ce faire, direction google.com et commencez à chercher. Attention, il est fort probable qu'il soit encore en français. Pensez à cliquer sur Google.com in English. Pour rechercher en français, utiliser google.fr. Et là, libre à vous de faire preuve d'imagination pour trouver des sites qui vous intéresse. Une fois trouvé, ajouter le à vos marques-page ou mieux, utiliser les RSS s'il en dispose !

L'écriture

Maintenant que vous savez comment se compose une phrase anglaise, que vous avez acquis du vocabulaire, il faut penser à écrire. Là aussi, il va falloir se forcer à écrire, et ce n'est pas forcément facile au début. Une solution simple si vous rédiger un blog : traduisez simplement vos billets. Ainsi vous n'aurez pas d'horror vacui en commençant. C'est ce que j'ai commencé à faire il y a peu de temps. Si vous ne tenez pas de blog, pourquoi ne pas en commencer un ? Ou bien essayer de vous rendre sur des forums et de poser des questions sur les sujets qui vous intéressent, de répondre à d'autres. Dans le même temps, vous devrez lire aussi, donc c'est tout bénéfice. Attention par contre à ne pas aller sur des forums où le langage SMS et abrégé est de mise. Si c'est le cas, fermer le site et trouvez-en un autre.

Et si vous ne trouvez toujours pas votre bonheur, essayer de faire la connaissance d'un anglophone passionné par la même chose que vous et échanger par email. Et sinon, je suis un peu à cours d'idée là. Si vous en avez d'autres, n'hésiter pas à partager.

La compréhension orale

On passe maintenant au second couple d'apprentissage. Et là, ça devient du sérieux ! En effet, quand avec la lecture ou l'écriture, on a tout le loisir d'utiliser un dictionnaire ou de relire quand l'on est pas sûr de bien avoir compris, c'est impossible dans la vraie vie. Il existe des solutions multimédia qui permettent d'apprendre l'anglais. Je n'ai jamais testé, mais je pense que ma réaction serait la même qu'à l'école : boooooooring...

A la place, je vous propose plutôt de regarder des films, des séries ou n'importe quoi d'autre. Si besoin, vous pouvez vous aider des sous-titre. Attention, là encore, évitez à tout prix les sous-titre en français ! Avec le texte en français, vous vous focaliserez dessus et n'écouterez même pas les acteurs parler. Avec de l'anglais, vous entendrez en même temps ce que vous lirez, et donc vous apprendrez plus facilement : le texte correspond exactement au paroles ! Si cela vous fait peur, commencez par des films que vous avez déjà vu, que vous connaissez. Vous n'aurez donc pas de problème pour comprendre l'histoire.

Les séries ont l'avantage d'être pour la plupart du temps facile à comprendre et sont assez court. C'est donc un bon point pour commencer. Mais il est moins évident de trouvez les sous-titres. Si vous pouvez vous passer des sous-titre, un bon plan : les sites des chaînes US propose en ligne les derniers épisodes gratuitement : la Fox pour les Simpsons, Bones, Prison Break, ABC pour Lost, Ugly Betty, Desperate Housewife, Grey's Anatomy et NBC pour Urgences, Heroes, Scrubs (les listes ne sont pas exhaustives !)

Si vous avez des chaînes anglophones chez vous (via internet par exemple), vous pouvez aussi regarder des programmes qui vous intéresse ou les news. Les news sont par contre très difficile au début, car il parle la plupart du temps très vite. Ne vous inquiétez pas donc si vous ne comprenez pas tout au début, c'est normal.

Tous ces exercices vont vous aider à développer votre oreille qui vous permettra de différencier les mots lorsque quelqu'un vous parlera et de vous exprimer. En effet, comment parler si on ne sait pas comment prononcer les mots ?

L'expression orale

Stade ultime de l'apprentissage d'une langue, l'expression orale est le point le plus difficile à acquérir. Et là, j'avoue ne pas avoir vraiment d'autres solutions que de partir en immersion dans un pays anglophone, pour un minimum de 3 mois. Au début, les gens vous comprendront très mal, vous devrez sans doute écrire les choses pour vous faire comprendre, mais à force de pratiquer, vous progresser, c'est évident. Et puis les gens sont pour la plupart du temps très compréhensifs, et vous corrigerons même pour vous faire progresser. C'est d'ailleurs une chose qu'il faut demander aux gens. C'est en effet un très bon moyen pour apprendre, c'est bien connu.

De plus, la question se pose de partir tout seul ou à plusieurs. Là encore, il est beaucoup plus intéressant de partir seul, pour être complètement immergé dans le monde anglophone. Si, pendant mon stage, j'avais été avec des français les soirs et les week-end, j'aurai beaucoup moins progresser car nous aurions sans doute parler français. Depuis que je suis ici, je n'ai parlé français que très rarement : quelques coups de fils en France, des rencontres avec des francophones, et depuis quelques temps, un nouveau graphiste français.


Mon expérience

J'ai donc décris les moyens techniques que j'ai utilisé pour progresser en anglais, et j'espère qu'ils seront utiles à quelques uns. J'ai décris les étapes de l'acquisition dans l'ordre le plus simple et facile, mais cela n'a pas été du tout mon cas. J'ai commencer par le livre indiqué plus haut offert par mon petit frère -qui se moquait de moi d'ailleurs, mais qui veut quand même le lire-, puis je suis parti à Los Angeles, continuant de le lire dans l'avion. Puis j'ai donc du faire face à toutes les facettes de la langue en même temps. Cela a été difficile au début, mais je n'en suis pas mort. Si je ne serai pas parti, je n'aurai jamais atteint le niveau que j'ai actuellement. Encore une fois, le niveau que j'ai n'est pas celui d'un bilingue. Mon accent est terriblement français. Je fais encore des fautes ; beaucoup moins, mais ça m'arrive. Mais maintenant, je me rends compte, et me corrige tout seul. Au final, je comprends les gens : je ne comprends pas tout le temps absolument 100% des mots qu'ils disent, mais je comprends le sens général de la phrase.

C'est aussi un mécanisme important à comprendre. Il n'est absolument pas indispensable de comprendre tout pour comprendre l'idée d'une phrase. De plus, la compréhension de cette phrase permettra peut-être de comprendre le sens de ce que l'on a pas compris. Vous suivez l'idée ?

Enfin, pour revenir sur l'apprentissage visuel et non par association français, j'ai remarqué un phénomène intéressant. Il m'arrive des fois de lire un texte en le comprenant parfaitement, mais il m'est impossible de le traduire en français. Je l'ai compris dans le sens où je visualise ce qui y est dit, mais je ne peux pas le traduire directement en français car je n'ai pas les mots français pour cette image que j'ai. Même chose quand je parle. Je sais le dire en anglais, mais impossible en français... Bon, un petit paragraphe quelque peu bizarre, je vous l'accorde, mais je tenez à partager cette expérience. Cela vous est déjà arrivé ?


J'en ai donc terminer avec ce billet qui me tenait à coeur. Autant pour partager mon expérience et peut-être en aider certains que pour me forcer moi-même à continuer à pratiquer une fois que je rentrerai, pour ne pas tout perde.

Des choses à ajouter ? Des expériences à partager ? Les commentaires sont là pour ça.