11496 sujets

JavaScript, DOM et API Web HTML5

Pages :
(reprise du message précédent)

koala64 a écrit :
(...) pourrait avoir l'exemple avec le code inséré (...) ERROR !

GAME OVER !

Insert coins to continue...

(Je veux bien faire un effort mais là, ça dépasse les bornes... Si tu veux qu'on continue, tu le fais... quitte à faire des erreurs...)

Je me suis mal exprimé désolé Smiley ohwell , c'est vraiment que j'aimerait qu'on me dise exactement quel code il faut mettre et ou, mais je veut bien essayer, comme tu dis quitte a faire des erreurs.
Modérateur
zut... pas de sous ! Smiley bawling Bon allez... Pour des prunes...

Une page test Smiley murf

Regarde comment est construite la page xhtml (le nom des conteneurs et comment ils sont imbriqués) puis comment le script est lié... (D'ailleurs, récupère le script de cette page test... c'est la mise à jour)

Dans mon intervention de tout à l'heure, je t'ai donné tous les éléments pour que tu l'adaptes à ta page... En gros, tu dois définir l'id du conteneur parent et l'id du conteneur que tu veux faire apparaître/disparaître au sein de cette ligne (fin du script) :
oO._FastLoadEvent(function() { oO._CtrlDisplay('page', 'discussions'); });
C'est elle qui contrôle tout et c'est tout ce qu'il y a à faire...

De là, tu tentes de l'adapter à ta page et si tu n'y arrives pas, tu redonnes l'url et on cherche les erreurs...

PS : Je suppose que tu cherchais le bout de script dans la partie xhtml mais il n'y en a pas ; c'est du JS non intrusif.

Pour comprendre comment ça marche, je te conseille de lire ce tutoriel.
Pas mal!
Il y a juste un truc que je trouve un peu bizarre c'est que quand ça disparait le div contenant ne s'adapte pas immediatement, un truc que j'avais fait pour éviter de définir un taille fixe, c'est d'imbriquer deux div, et de faire en sorte que la limite soit le offsetHeight de la div interieure qui contient l'élement caché. Je m'explique pas trés bien... en gros il y a la div qui grandit en overflow hidden, et a l'interieur l'autre div qui prend la taille de son contenu et du coup qui défini la limite.
Modérateur
euh... J'ai un peu de mal à tilter ton idée là... (C'est peut-être parce qu'il faut que je me couche Smiley langue )

Ma question, c'est comment ça réagissait lorsque la page était longue ? (en suivant ton idée)
Parce que si je ne laissais pas la hauteur du conteneur parent fixe le temps que le conteneur inclus disparaisse, ça sautillait dans tous les sens si la barre de défilement était tout en bas, ce qui était plutôt désagréable... Smiley confus
koala64 a écrit :
zut... pas de sous ! Smiley bawling Bon allez... Pour des prunes...

Une page test Smiley murf

Regarde comment est construite la page xhtml (le nom des conteneurs et comment ils sont imbriqués) puis comment le script est lié... (D'ailleurs, récupère le script de cette page test... c'est la mise à jour)

Dans mon intervention de tout à l'heure, je t'ai donné tous les éléments pour que tu l'adaptes à ta page... En gros, tu dois définir l'id du conteneur parent et l'id du conteneur que tu veux faire apparaître/disparaître au sein de cette ligne (fin du script) :
oO._FastLoadEvent(function() { oO._CtrlDisplay('page', 'discussions'); });
C'est elle qui contrôle tout et c'est tout ce qu'il y a à faire...

De là, tu tentes de l'adapter à ta page et si tu n'y arrives pas, tu redonnes l'url et on cherche les erreurs...

PS : Je suppose que tu cherchais le bout de script dans la partie xhtml mais il n'y en a pas ; c'est du JS non intrusif.

Pour comprendre comment ça marche, je te conseille de lire ce tutoriel.



Je vais tester ca de suite, par contre j'ai une question, est ce que dans le code que tu m'as donné le contenu sera caché des le debut ? Car en fait j'aimerait que quand on arrive sur les commentaires, le formulaire ne soit pas visible et qu'apres avoir ete rempli, il disparaisse de nouveau...

Edit : apparement oui..

PS : Je vais également lire l'article que tu m'as laissé ca pourrait m'apprendre des choses... Smiley cligne

Je récupere comment le script ?
Modifié par TGM (10 Jan 2007 - 01:46)
Modérateur
ouep... pas mal aussi Smiley cligne

Effectivement, c'est un peu plus fluide... Va falloir que je revois ça. Smiley smile

Ah, par contre, il y a un défaut majeur: A la désactivation de JS... Rien n'apparaît ! Smiley confus
Un autre : C'est que dans le cas du JS désactivé, tu as des liens cliquables qui n'ont pas lieu d'être...
Moins préjudiciable : Tu es passé par des événements type DOM-0 au lieu de DOM-2.

Je pense qu'il faut faire un mix des deux. Smiley ravi


@TGM : En tapant l'adresse du script peut-être... Smiley rolleyes
Modifié par koala64 (10 Jan 2007 - 08:41)
a écrit :
Ah, par contre, il y a un défaut majeur: A la désactivation de JS... Rien n'apparaît !

ça je ne l'est pas travaillé
a écrit :
Un autre : C'est que dans le cas du JS désactivé, tu as des liens cliquables qui n'ont pas lieu d'être.

L'idée c'est de mettre des liens vers la même page mais avec le div ouvert. Je ne sais pas si c'est mieux ça ou tout ouvert, je crois que ça dépent de la quantité de contenu. L'avantage dans un cas c'est que la présentation reste la même (au lieu dans certain cas d'une page de 2000 lignes), le désavantage c'est qu'on recharge exactement la même chose.
a écrit :
Moins préjudiciable : Tu es passé par des événements type DOM-0 au lieu de DOM-2.
Alors ça j'y connait rien...
a écrit :
Je pense qu'il faut faire un mix des deux.

Tout à fait d'accord, j'avais une idée d'ailleur, est ce que tu pense qu'il y aurait moyen de tester la rapidité du script et en fonction de ça ouvrir plus rapidement, ce pourrait être un moyen d'eviter les tremblements ou les blocages en cas de machine lentes ou tout simplement ce qui arrive aussi de machine occupée à autre chose au moment de l'éxecution de script.
Modifié par matmat (10 Jan 2007 - 17:06)
Modérateur
matmat a écrit :
ça je ne l'est pas travaillé
Ben c'est la base, je trouve. Smiley cligne
a écrit :
L'idée c'est de mettre des liens vers la même page mais avec le div ouvert. Je ne sais pas si c'est mieux ça ou tout ouvert, je crois que ça dépent de la quantité de contenu. L'avantage dans un cas c'est que la présentation reste la même (au lieu dans certain cas d'une page de 2000 lignes), le désavantage c'est qu'on recharge exactement la même chose.
En effet, tu ne changes pas la structure mais quel intérêt de mettre des liens qui ne servent à rien ? Je ne comprends pas où tu veux en venir.

a écrit :
Tout à fait d'accord, j'avais une idée d'ailleur, est ce que tu pense qu'il y aurait moyen de tester la rapidité du script et en fonction de ça ouvrir plus rapidement, ce pourrait être un moyen d'eviter les tremblements ou les blocages en cas de machine lentes ou tout simplement ce qui arrive aussi de machine occupée à autre chose au moment de l'éxecution de script.
En JS, je n'ai jamais vu de méthode fiable pour tester la rapidité d'un script... J'avais fait un test mais les résultats restaient aléatoires... A la rigueur, ça donne un ordre de grandeur et permet de se rendre compte des différences entre chaque navigateur.

Je te laisse le test de l'époque :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Test de rapidité</title>

<script type="text/javascript">//<![CDATA[


function StringBuffer()
{
    this.__strings__ = [];
}
StringBuffer.prototype.append = function(str)
{
    this.__strings__.push(str);
};
StringBuffer.prototype.toString = function()
{
    return this.__strings__.join("");
};


var d1 = new Date(),
    str = "",
    i = 0;
for(; i < 10000; i++)
    str += "text";
var d2 = new Date();
document.write("Temps d'éxécution du script : " + (d2.getTime() - d1.getTime()) + "ms<br />");


var d1 = new Date(),
    oBuffer = new StringBuffer(),
    i = 0;
for(; i < 10000; i++)
    oBuffer.append("text");
var sResult = oBuffer.toString(),
    d2 = new Date();
document.write("Temps d'éxécution du script : " + (d2.getTime() - d1.getTime()) + "ms");


//]]></script></head><body></body></html>


Sincèrement, je pense que Javascript n'est pas un langage adapté pour faire des animations. Il est extrêmement lent comparé à d'autres langages ce qui fait qu'il est difficile, pour ne pas dire impossible de faire quelquechose d'ultra-fluide... Si tu veux du répondant, faut faire du C. Smiley ravi (sinon, faut se contenter du résultat en optimisant au mieux ton code JS.)
a écrit :
Sincèrement, je pense que Javascript n'est pas un langage adapté pour faire des animations.
C ne pourrat pas être executé de la même maniére que js via la navigateur non? Donc à part flash il n'y a pas vraiment d'alternative. Souvent d'ailleur, pour des slideshows ou des petites anims je prefere faire des modules flash, je trouve ça vraiment super. Mais il y des cas comme les menus, ou quand il y a des interactions completes avec la base de données ou on n'a pas vraiment le choix. Sinon je suis d'accord avec toi, mais je vais t'expliquer le fond de mon probléme: je fait essentiellement des sites avec des cms, et un de mes principaux problémes c'est que des projets me sont passés sous le nez parceque justement des personnes ne comprenne pas pourquoi certains font des animations et d'autres pas. J'ai beau expliquer que les sites tout en flash ça craint c'est cher, et super dur à actualiser, il y rien a faire. J'ai donc besoin de pouvoir aussi faires des animations, d'ou toute cette recherche.
Sinon je viens d'essayer l'exemple que j'ai posté sur un vielle machine et franchement c'est tout a fait viable. Même ce site http://www.gdbautomotive.com (je sais c'est pas encore accessible mais j'y travail) bourré d'animations js passe plus ou moins sur cette machine.
Voilà pourquoi il me semble que toute cette recherche n'est pas complétement inutile. Bien sur quand on a reflechi à la question on prefere les sites sans ces artifices, mais finalement le grand probléme de l'accessibilité et du developement web, c'est pas IE ni js c'est les clients Smiley lol qui pense pour la majorité qu'on fait des sites web comme on fait une plaquette avec illustrator. Je te remercie pour le script je fait des essais et je te tiens au courant.
Modifié par matmat (10 Jan 2007 - 23:41)
Je viens de faire une modif inspiré de ta methode qui marche trés bien, l'idée est la suivante:
A chaque execution de la fonction est executer un setTimeout qui prend la date avant et aprés. On soustrait ensuite la seconde date de la premiére puis on enleve a ce resultat la valeur du setTimeout ce qui nous donne normalement 0 mais sur une machine une peu lente ou occupée, cela vat nous donner une valeur superieur, cette valeur on l'ajoute ensuite a notre facteur d'ouverture, qui est le nombre de pixels ajouté a chaque execution.
Le resultat de notre operation est que si l'execution de la fonction est en retard la fonction vat ouvrir plus rapidement le conteneur! Ce qui améliore grandement la fluidité, et surtout fait que si le sistéme est momentanément trés occupé, le conteneur vat s'ouvrir quasiment d'un coup, au lieu de se trainer péniblement.
Modérateur
ouep ! ça me semble pas mal comme idée... Smiley smile parce que je serais parti sur quelquechose de plus complexe là... avec des calculs d'erreur et tout le tsouin tsouin Smiley langue
Sous le titre j'ai mis un petit compteur qui varie celon la différence entre le temps du setTimeout et les deux dates (son affichage ralenti un peu le script), quand il est à zero, c'est que tout est rapide sinon c'est que la machine est occupée. Du coup j'ai put faire quelque conclusions:
1. Il ne sert a rien de mettre en temps inferieur à 80 pour le setTimeout, de tout façon les navigateurs ne l'executerons pas moins vite dans la majorité des cas.
2. Il y a effectivement de grosses variations de ce compteur, essayez par exemple d'ouvrir un programme un peu lourd, et en même temps d'ouvrir le conteneur, le compteur peu monter jusqu'a plus de 200.
3. Si il ya d'autre scripts sur la même page ou des fichiers flash, cela fait aussi monter le compteur.
4. Comme il y un fonction (merci Koala) qui permet de charger le script avant le chargement total de la page, on s'aperçoit qu'a l'ouverture, si on clique avant la fin du chargement de la page, le compteur monte également.
5. On peut celon les cas modérer l'action de cette sécurité en divisant le resultat pas deux ou par quatre, ce qui eviteras la quasi anulation de l'effet dans certain cas.
6. Dans tout les cas il faut ajuster la valeur de ces paramétres pour obtenir un bon compromis, entre: les resultats sur differentes machines et navigateurs et les autres élement présents sur la pages.
7. Si la page contient beaucoup d'autres élements dinamique flash (par exmple un lecteur ou un diaporama flash/xml) ou js, evitez d'en rajouter et n'utilisez pas cet effet.
8. L'effet d'opacitée est plus difficile à calculer pour le navigateur, si vous voulez plus de reactivité vous pouvez donc sacrifier cet effet pour de meilleurs performance.
8. Si c'est bien ajusté dans la plupart des cas ça marche bien.
Modifié par matmat (11 Jan 2007 - 16:52)
Hello,
Bon je vois que ca discute pas mal effet JS, meme si je n'y comprend rien Smiley sweatdrop
Je voulait vous dire que je me suis résolu a enlever mon plugin Lighbox JS donc je vais choisir un de vos script et l'appliquer sur mon site. Par contre j'ai une question, le script, il faut l'enregister en JS avec le nom (Majax) et le mettre dans le template pour appeler l'effet c'est bien ca ?

Pas taper, je débute et j'y connait pas grand chose Smiley biggol
Modifié par TGM (12 Jan 2007 - 17:05)
J'ai mis un autre test en ligne si cela vous interresse:
Apparition disparition d'un contenu vertical
Sur un autre post Il y a une discution qui se croise un peu avec celle là. Rappelons que cette discution a commencé sur le probléme de TGM avec une librairie js (scriptaculos). Personnelement j'ai déja essayé ce même effet avec Prototype (qu'utilise scriptaculos) sans être convaincu et en préferant de loin ma solution maison, sur l'autre post est évoqué Jquery, peut-être que celle là correspond mieux, à suivre...
TGM sans taper, stp renseigne toi d'abord sur comment integrer un script js dans un document html, tu trouveras trés facilement l'info n'importe ou...
Ensuite tout est dans le nommage de tes balises par exemple dans le premier exemple que j'ai mis id="+open2" ouvre id="open2" etc.

Concernant la fluiditée des effets, d'aprés les test que j'ai fait c'est aussi fluide que du flash! Smiley edit Modifié par matmat (13 Jan 2007 - 18:25)[/edit]
Pages :