11496 sujets

JavaScript, DOM et API Web HTML5

Bonjours à tous

Je n'aime pas trop les effets visuels en javascript, mais une personne ayant particuliérement aimé l'effet accordeon de moo-fx m'a demandé de le mettre en place. C'est vrai que c'est asser joli mais le probleme c'est qu'avec la librairie prototype ça fait quand même 12k pour un accordeon. C'est pas énorme d'accord, mais bon si la machine est un peu vielle l'effet est vraiment raté. Je me suis donc dit qu'on pouvais faire plus léger même si l'effet est un peu moins bien, jai donc fait le code suivant:
function Accordion(id) {

show = document.getElementById(id);
size = show.firstChild.offsetHeight;
slide = 0;
timer = setInterval("slide()", 50);
}

function slide(){

if (slide < size){
slide += 30;
show.style.height = slid+'px';
}else clearInterval(timer);
}


ça donne shématiquement ça:
http://www.smart-com.com.mx/spip.php?page=accordion5&id_article=45
Le but n'est absolument pas de faire la même chose que moo-fx, qui est un effet incomparablement plus fin et qui de plus permet de faire d'autre effets avec le même script. L'idée c'est juste de faire un accordeon basique et surtout trés léger.

8 lignes pour 12k même si c'est un peu plus trash comme effet, j'était content, mais a ma grande surprise je me suis aperçu que ça rame quand même sur un veille machine (j'ai gardé un pc de 2000 pour faire des tests), déçu! Pourtant ça parait pas la mere a boire comme calcul, mais par exemple sur IE avec la vieille bécane, c'est vraiment nul, au lieu de mettre 50 milliseconde, il en met 500. A la limite sur l'exemple que j'ai mit ça passe a peu prés, mais dés que la page et un peu plus lourde, ça foire.

Je crois donc que j'ai vais virer tout effet accordeon et faire un truc ouvert/fermer sans fioritures. Mais avant je me suis dit qu'il y avait peut-être un génie du javascript dans le salon qui arrive a créer des effets qui demande encore moins de ressources. Ou si vous avez plutot tendance comme moi d'habitude à bannir se genre de raffinements.
Modifié par matmat (30 Nov 2006 - 20:39)
Salut,

Ce n'est qu'une suggestion, mais peut-être peux-tu enregistrer le moment où tu commences ton effet et faire évoluer slide en fonction du temps passé ? Ca peut permettre d'éviter les problèmes d'imprécision de setInterval.
function Accordion(id) {
   show = document.getElementById(id);
   size = show.firstChild.offsetHeight;
   timer = setInterval("slide()", 50);
   time = new Date().getTime();
}

function slide() {
   var slide = (new Date().getTime() - time) * 3/5;
   if (slide >= size) {
      slide = size;
      clearInterval(timer)
   }

   show.style.height = slide + 'px';
}
Effectivement, c'est beaucoup mieux! merci beaucoup, j'aurai jamais pensé a faire cette pirouette. ça donne ça:
http://www.smart-com.com.mx/spip.php?page=accordion6&id_article=45
Bien sur on ne voit la différence que sur un veille machine, avec une de 400Mhz et 128de Ram et IE c'est quasiment pareil que sur une machine récente. Si on met un peu plus de contenu ( dans mon cas un flash et 2 autre boites avec divers background) ça se dégrade un peu mais la grande différence c'est que le temps total de l'effet et conservé. Je m'explique : au lieu de faire un effet lent et sacadé, il saute quelques étapes, ce qui fait que si l'effet et asser rapide (de tout façon c'est mieux) ça passe trés bien.
Bref ça fait un chouette petit accordeon (qui marche même sur IE5).

Si vous avez des machines encore plus veilles et un petit moment, merci de me dire ce que ça donne, ceci dit je celle là même avec un display: block/none elle met un petit temps donc je crois qu'on peu considérer que si ça passe la dessus c'est bon.
Pour les aventuriers on peut aussi rajouter un effet d'opacitée progressive qui donne ça
http://www.smart-com.com.mx/spip.php?page=accordion7&id_article=45

avec ce code:


function Accordion(id) {

show = document.getElementById(id);
size = show.firstChild.offsetHeight;
timer = setInterval("slide()", 50);
time = new Date().getTime();

}
function slide() {
var now = new Date().getTime();
f = size/100;
var slide = (now - time) * f/3;

show.style.height = slide + 'px';
show.style.filter = 'alpha(opacity = '+(slide/f)+')';
show.style.opacity = slide/size;

if (slide >= size) {
show.style.height = size + 'px';
clearInterval(timer);
}
}


Par contre là c'est un peu plus dur pour une veille machine, on peut pas tout avoir...
Modifié par matmat (27 Nov 2006 - 21:20)
J'ai une question bête mais bon Smiley ohwell
Cet effet m'interresse beaucoup le code n'est pas trop compliqué
mais je ne sais pas qoi mettre dans le html...
Smiley help
Bonjour DarkHerumor,
Avant d'installer ce script, je te conseil d'aller faire un tour sur ceux existants, tu as moo.fx et openrico qui proposent des accordeons, si cela ne te convienne pas tu peux tenter celui là, néamoins je te garantis rien car il n'y a que moi qui l'utilise...
Dans le html il faut tout d'abord que tu fasses le lien vers le js:

<script type="text/javascript" src="scripts/accordion.js"></script>

et voici le js a nommer accordion.js et a mettre dans ton dossier scripts:

http://www.smart-com.com.mx/scripts/accordion.js

Ensuite ton code html doit se presenter ainsi:


<h3><a href="lien_si_js_desactivé" class="show" id="+open1">Title1</a></h3>

<div class="magic" id="open1"><div>
Content1
</div></div>


<h3><a href="lien_si_js_desactivé" class="show" id="+open2">Title2</a></h3>

<div class="magic" id="open2"><div>
Content1
</div></div>



Comment ça marche?
Quand tu mets un lien avec un id '+open1' il vat ouvre la div avec l'id 'open1'
Il ne faut pas oublier de mettre un div completement collé a ta div qui vat s'ouvrir, sinon ça marche pas (firstChild sous firefox n'aime pas les espaces blanc).

Pour les css je te laisse copier les css de cet exemple:
http://www.smart-com.com.mx/spip.php?page=accordion8&id_article=45

Tu peux faire en sorte par exemple que quand tu cliques sur le lien il change de couleur. En résumé tu as deux classes pour chaque éléments (les liens et les div) qui on n'importe quelle nom, l'important est que tu as un classe "passive" et un classe "active" qui a le même nom mais avec "on" à la fin (facilite pour SPIP). quand tu clique le js passe la classe de passive a active (des liens et des div). Il y juste une régle a respecté il ne faut pas que le nom de ta classe contienne "on", par exemple 'botton" ça marche pas.

Dans le "href" de tes liens je te conseil de mettre un lien vers un page qui a la div ouverte, au cas ou le js ne marche pas tu es sur que ton contenu reste accessible.

Toute la partie du js aprés "// LoadEvents" sert à charger le script avant que tout le html se charge, c'est bien pratique, si tu as d'autre scrips je te conseil de les charger depuis cette fonction. Comme ça tu es sur qu'il marche même si tu as de grosse images sur ton site. Il reste un probléme a régler de ce coté là, le script est lu 2 fois (ce qui est pas trés grave il ne fait que 2k). C'est a cause d'IE trop long à expliquer...

Un grand merci à Koala et Eldebaran pour m'avoir aidé a développer se script. Grâce a eux la page reste completement accessible ce qui est un plus pour tout le monde (y compris Google), fonctionne sous IE5 et + et même sur des veilles machines et cerise sur le gateau démarre au quart de tour.
Modifié par matmat (16 Dec 2006 - 00:02)
Merci beaucoup je sais pas comment tu as fais mais j'ai tout compris! Smiley biggrin (je crois... ^^)
Merci encore je vais tester, en plus tes petites astuces pour charger le JS, mettre des liens en cas de JS non activé etc... me seront utiles Smiley smile

Merci encore à vous tous!