1. Cibler un élément du DOM

Mootools étant intégré dans nos blogs, il est très facile de cibler un élément.

Pour un élément unique ayant une id, il suffit de le cibler comme ceci:

$("idelement")

Pour cibler les éléments d'une classe on procedera comme ceci:

$$("classeelement")

$$("classeelement")[0] ciblera le premier
$$("classeelement")[1] ciblera le second etc.

 On peut aussi cibler tout autre élément comme ci dessous les balises de lien a

$$("a")

 On peut aussi cibler de manière très précise. Par exemple les liens "a" qui ont la classe "maclasse" et qui se trouve dans l'élément d'id "monid"

$$("#monid a.maclasse")

2. Placer une balise non reconnue par l'éditeur

Nos blogs sont éditables à l'aide de TinyMCE. Seulement, ses limitations ou celles mises en place par le staff d'Eklablog ne permettent pas toujours de placer les balises que l'on souhaite.

Par exemple, si vous voulez mettre en place une balise SVG comme ci-dessous, vous n'y arriverez pas.

<svg><rect id="rect" width="25" height="25"" x="10%" y="10%" fill="gray" stroke="rgba(80, 80, 80, 1)" stroke-width="0px" /></svg>

Il va donc falloir le faire dynamiquement à l'aide du javascript. Pour cela, on va créer une balise (par exemple une div) qui va servir à recevoir la balise svg.

On va lui donner une id afin de pouvoir la cibler facilement et on va modifier son contenu à l'aide d'un petit script.

<div id="conteneur"> </div>
<script>
onJSFilesLoaded.push(function(){
$("conteneur").innerHTML='<svg><rect id="rect" width="25" height="25"" x="10%" y="10%" fill="gray" stroke="rgba(80, 80, 80, 1)" stroke-width="0px" /></svg>';
});
</script>

3. Ajouter un évènement sur un élément du DOM

Il est souvent intéressant de faire réagir un élément à un événement du visiteur comme par exemple un clic de souris. Le code ci-dessous va afficher un message à chaque fois que vous cliquerez sur un des titres de cette page.

<div id="conteneur"> </div>
<script>
onJSFilesLoaded.push(function(){
$$('h3').addEvent('click', function(){
    alert('Vous avez cliqué sur un élément h3');
});
});
</script>

4. window.onload ou onJSFilesLoaded

Peut-être ne le savez vous pas mais le javascript est exécuté dès que le navigateur le lit. Aussi il est tout à fait possible que le javascript agisse sur un élément du DOM qui n'a pas encore été chargé par le navigateur. Dans ce cas, une erreur apparaît et le script ne fonctionnera pas.

Il devient dans ce cas nécessaire d'obliger l'exécution du javascript une fois que toute la page est chargée.

La première possibilité est de placer le script avec window.onload. Cela fonctionne mais à condition qu'il n'y ait qu'un seul window.onload sur la page. Si ce n'est pas le cas, seul le code du dernier sera exécuté (me semble-t-il).

Exemple:

<script>
window.onload=function(){
  alert ('Bonjour');
};
</script>

Une autre solution consiste à utiliser une fonction d'Eklablog: onJSFilesLoaded. Dans ce cas, le script sera exécuté à la fin du chargement de la page mais présente l'intérêt d'être utilisé plusieurs fois

<script>
onJSFilesLoaded.push(function(){
 alert ('Bonjour');
});
</script>