[JqueryUi- easing] Implémentation de easing

Version imprimable

25/09/2011, 12h39
Squalthor

[JqueryUi- easing] Implémentation de easing

Bonjour à vous !

J'ai eu la joie il y a peu de découvrir Jquery et ses incroyables possibilités.
J'apprends doucement mais surement à le dompter, ce qui entre nous n'est pas difficile et c'est pourquoi cette librairie est autant prisée d'ailleur.

Mais actuellement il y a une chose qui me pose problème: les effets d'easing :(

Je ne sais pas pourquoi mais ça ne fonctionne pas, j'ai beau travailler en me basant sur divers exemples pêchés sur la toile mais rien n'y fait...

J'avais integré easing directement mais voyant que ça ne fonctionnais pas je viens d'intégrer JqueryUI à la place mais toujours pas de résultats...

Il n'y a qu'à moi que ça fait ça ?
Vous serait-il possible de m'aider afin que je puisse y voir plus clair ?

Je vous remercie pour votre attention, en espérant que vous puissiez m'aider.
25/09/2011, 12h43
SpaceFrog

Citation:

J'avais integré easing directement mais voyant que ça ne fonctionnais pas je viens d'intégrer JqueryUI à la place mais toujours pas de résultats...

Va encore falloir tuer une paire de chatons pour lire ton code dans leurs entrailles ?
Ou alors je lance une annonce pour recruter un devin ?
25/09/2011, 12h54
Squalthor
Avant toute chose: Bonjour,

Citation:

Va encore falloir tuer une paire de chatons pour lire ton code dans leurs entrailles ?
Ou alors je lance une annonce pour recruter un devin ?

Il y a des manières plus agressives de le dire certes mais un simple "A l'avenir n'oublies pas de mettre le code s'il te plait" aurait suffit... (au réveil ça passe mieux aussi).

Je ferais aussi attention à l'avenir.
p.s: Ma femme est au chomage; elle demande si le poste de devin est toujours libre.

Concernant le code actuellement en place:
Code:

1 2 3 4 5 6 $('#bloc').stop().animate( {height: '150px'}, {queue: false, duration: 600, easing: 'easeOutBounce' });
La fonction est activée au chargement, bloc à une hauteur de 0px, l'animation l'agrandi de 150 px puis est censée utiliser l'animation, il s'agrandi bien mais ne joue pas l'animation.

Merci

Oulà !
Essaye l'autre pied pour le réveil demain ...

Pour ce qui est du poste de devin, il est toujours libre, mais cela reste du bénévolat, à priori le chômage est plus rentable de nos jours ...

Pour en revenir aux choses sérieuses, le code que tu nous montres est correct; l'erreur est ailleurs...
soit dans el html soit dans l'appel des librairies;
pour preuve, ce code fonctionne
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script type='text/javascript'> $(function(){ $('#bloc').stop().animate( {height: '150px'}, {queue: false, duration: 600, easing: 'easeOutBounce' }); }) </script> <title>Nouvelle page 1</title> </head> <body> <div id="bloc" style="background-color:red"></div> </body> </html>

25/09/2011, 15h49
Squalthor

Merci pour ton aide.

J'ai testé ton code tel quel, il fonctionne, donc de ce côté là je sais maintenant que tout est ok.

Les fichiers sont bien appelés et visibles, mais je passe par une classe php pour combiner tous les fichiers js en un, serait-il possible que ça vienne de là ?

Je vais continuer de plancher sur cette voie.
Merci de m'avoir aiguillé.

Edition après tests:
Alors j'ai tenté d'inclure les fichiers javascript avec les balises dans le header du code html mais sans plus de succès et je n'ai aucune erreur javascript,

Je tente d'utiliser easing dans un moteur php fait maison, ça a sûrement un rapport...
25/09/2011, 17h31
SpaceFrog

Vu d'ici, difficile de t'en dire plus.
Peux tu nous montrer le html/js généré ?
25/09/2011, 18h09
Squalthor

Re,

Le code étant trop important je t'ai envoyé en mp un lien vers la page concernée.
25/09/2011, 18h31
SpaceFrog

le css ne s'applique pas ...
dans ton fichier js :

Code:

$(document).ready(function(){});

y'a rien dans le ready ???
25/09/2011, 18h46
Squalthor

Bizarre, pour moi le css s'applique bien, il n'y a que l'effet easing qui ne s'exécute pas, et la function ready n'est pas vide...

Avec quel navigateur as-tu ouvert le site stp ? Konqueror ?
Car sous chrome et iceweasel (firefox) je n'ai aucun problème, mais avec Konqueror le cadre qui contient le block de test doit avoir une largeur de 1 ou 2 pixel...
25/09/2011, 19h32
SpaceFrog

ffx.6.0.1
sous chrome page inacessible ...
25/09/2011, 19h39
Squalthor

Zut...

Ca ne m'est jamais arrivé, ni aux personnes qui sont venues voir le site à ma demande.

Je suis sur un serveur dédié configurer par mes soins, la première chose que je vois c'est que ton ip est enregistrée chez http://www.spamhaus.org/ et te bloquerais, autrement je ne vois pas pourquoi...

Je met un lien (lien supprimé) içi, au cas où quelqu'un serait d'accord de venir vérifier que ça ne se produise par pour lui...

En tout cas merci d'avoir prit autant de temps pour essayer de m'aider, dommage que ça déconne. :(

Edition
Suppression du lien.
25/09/2011, 21h10
SpaceFrog

Je jetterais un oeil demain au boulot.
Bonne soirée
25/09/2011, 21h33
danielhagnoul

Bonsoir

Je viens d'activer le lien et j'en suis resté tout étonné ! La seule chose que j'ai comprise c'est que vous charger 3 fois jQuery 1.6.4 (version non compressée).

Easing est un plugin jQuery : http://gsgd.co.uk/sandbox/jquery/easing/
25/09/2011, 22h20
Squalthor

Bonsoir Danielhagnoul,

Je vous remercie pour l'aide que vous m'apportez mais également pour confirmer que la page est bel et bien accessible.

Normalement voici les extensions installées :
jquery-1.6.4.js
jquery-ui-1.8.16.custom.min.js
jquery.elastic.source.js
swfobject.js
jquery.color.js
jQuery.jPlayer.2.0.0/jquery.jplayer.min.js
jquery.cookie.js

Ca dépend des pages.

Peut-être me suis-je mal renseigné mais logiquement les plugins ne doivent pas contenir JQuery, est-ce que je me trompe ?

De plus si j'ai bien compris easing est directement integré dans jqueryui ?

N'ayant pas remarqué ceci pourriez-vous m'indiquer comment vous avez pût voir que JQuery a été chargé 3 fois s'il vous plait ?

Serait-ce ces lignes... :

Citation:

$ function()
DP_jQuery_1316982202606 function()
jQuery function()

... visibles via Bugzilla ?
Merci.

Edition:
Ca venais bien de là, merci !
En fait j'utilisais un plugin où JQuery était déjà inclus... interface.

Pour le moment je ne met pas résolu, même si ça semble l'être, je préfère analyser plus en détail pour faire un retour digne de ce nom afin d'aider potentiellement les personnes dans mon cas.

Edition 2:
Je n'ai pas encore trouvé pourquoi JQuery était inclus 3 fois, je pensais que ça venais du plugin interface mais finalement non... Par contre il fait conflit avec JQuery...
Je continuerais mon cheminement au fûr et à mesure.

Dans le navigateur Chrome, il suffit de taper sur la touche F12 et de regarder l'onglet resources, il signale deux chargements de 1316982537.js (et plus 3 comme tout à l'heure, bizarre).

Mais dans l'onglet Network je ne voit qu'un chargement à l'ouverture de la page.

Si l'on regarde l'onglet Scripts on ne voit que jQuery 1.6.4, aucune trace des autres scripts que vous citez. Et aucune trace de code jQuery.

Voci le code de la page qui s'affiche dans le volet Elements

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head>
		<title>Iteractif  - Formulaire des tests</title>
                <base href="https://www.iteractif.com/">
                <meta name="description" content="Site en construction">
                <link rel="icon" type="image/png" href="/1_favicon.png">
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <script type="text/javascript" src="1316982537.js"></script>
                <link rel="stylesheet" media="screen" type="text/css" title="Design" href="1316982537.css">
                <script type="text/javascript">
        </script>
	</head>
	<body>
 
 
<div id="navbarre"></div><div id="connexion">
                    <form action="/test/" method="post">
                        <p>
                            <a href="/inscription/" title="Créer un compte">Inscription</a> - 
                            <span>Courriel: </span>
                            <input type="text" name="courriel">
                            <span>Mot de passe: </span>
                            <input type="password" name="mdp">
                            <input type="submit" name="connexion" value="Ok"></p></form></div><div id="logo"></div>
            <noscript>
                    &lt;div class="erreur"&gt;
                        Votre navigateur n'ayant pas le javascript activé le site risque de ne pas se comporter correctement...&lt;br /&gt;
                        Nous vous recommandons vivement de l'activer dans les options de votre navigateur.
                    &lt;/div&gt;
            </noscript>                
 
          <div id="navigation">
    <div id="onglet">
        <div id="haut"></div>
        <div id="milieu">
            N<br>
            A<br>
            V<br>
            I<br>
            G<br>
            A<br>
            T<br>
            I<br>
            O<br>
            N
        </div>
        <div id="bas"></div>
    </div>
    <div id="menu_navigation">
        <div class="menu_haut"><h3>Navigation</h3></div>
        <div class="menu_milieu">
        <ul>
            <li><a href="/">Accueil</a></li>
            <li><a href="/jeux/">Jeux »</a></li>
            <li><a href="/forum/">Forum</a></li>
            <li><a href="/tchat/">T'chat</a></li>
            <li><a href="/contact/">Contact</a></li>
            <li><a href="/faq/">Foire aux questions</a></li>
        </ul>
        </div>
        <div class="menu_bas"></div>
    </div>  
</div><div id="corps"><div class="block">
<div class="cadre_arrondi">
<div class="bloc">
 
<div class="bord_bas">
<div class="haut_droite"></div>
<div class="haut_gauche"></div>
<div class="bord_gauche">
<div class="bord_droit">
    <div class="contenu">
 
<table summary="Formulaire de saisie d'un test">
            <tbody><tr>
                <td id="conteneur_fg"><td><div id="fleche_gauche" class="controle" style="height: 350px; display: none; "></div></td></td>
                <td id="conteneur_td">
                    <h1>Création d'un test</h1>
                    <div id="fenetre_principale" style="width: 811px; overflow-x: hidden; overflow-y: hidden; ">
                        <div id="conteneur_fenetres" style="width: 4055px; ">
                            <div id="conteneur_fenetres"><div class="fenetre" style="float: left; width: 811px; ">
                                <h2>1) Titre du jeu</h2>
                                <div id="debug_page" class="test">taille #fenetre_principale:811<br></div>
                                <div class="bloc_test" style="background-color: red; height: 150px; display: block; overflow-x: visible; overflow-y: visible; ">test</div>
                                <div>Blablabla</div>
                            </div><div class="fenetre" style="float: left; width: 811px; ">
                                <h2>2) Spécificités du jeu</h2>
                                <div>Blablabla</div>
                            </div><div class="fenetre" style="float: left; width: 811px; ">
                                <h2>3) Test du jeu</h2>
                                <div>Blablabla<br></div>
                            </div><div class="fenetre" style="float: left; width: 811px; ">
                                <h2>4) Galerie du jeu</h2>
                                <div>Blablabla</div>
                            </div><div class="fenetre" style="float: left; width: 811px; ">
                                <h2>5) Notation du jeu</h2>
                                <div>Blablabla</div>
                            </div></div>
 
 
 
 
                        </div>
                    </div>
                </td>
                <td id="conteneur_fd"><td><div id="fleche_droite" class="controle" style="height: 350px; display: none; "></div></td></td>
            </tr>
</tbody></table>
</div>
</div>
</div>
<div class="bas_droit"></div>
<div class="bas_gauche"></div>
</div>
 
</div>
</div>
</div></div><div id="navbarre_bas"></div><div id="pied_de_page">
<p><a id="copyright" title=" Site déposé sur CopyrightFrance.com " href="http://www.copyrightfrance.com/phtml/p_logo1.php">
        <img src="1_logsc15.gif" alt=" CopyrightFrance.com ">
    </a>
</p>
</div>                  
 
 
 
 
</body></html>

Et maintenant que j'ai examiné le code, je vois que Chrome indique qu'il a chargé 3 fois le script jQuery. Très bizarre ! J'ai testé une de mes pages webs pour comparer il ne fait q'un chargement des scripts.

25/09/2011, 23h00
Squalthor

Effectivement... je n'avais jamais utilisé chrome pour débugger, je passais par iceweasel (firefox version libre sous Debian).

Si le nombre de chargement est le numéro à côté du nom du script alors... il a été chargé 8 fois lors du test que je viens de faire...

Les fichiers js sont condensés en un seul via une classe php, je me demande si ça ne viendrais pas de là, même si je ne vois pas pourquoi il aurait un tel comportement...

C'est étrange qu'il trouve Jquery 1.6.4 mais pas les autres, je sens qu'une longue journée de débuggage m'attend. :s

Edition:
De plus en plus étrange, cette fois il reconnait ce qui devrait être: un fichier *********.js mais comment arrive-t-il à trouver jquery.1.6.4.js alors qu'il ne devrait logiquement pas connaitre son nom ?
25/09/2011, 23h09
danielhagnoul

UI 1.8.16 intègre bien les effets easing : http://jqueryui.com/docs/effect/#easing

J'ai donc appris quelque chose ce soir.

Les outils de développement des navigateurs sont devenus très performants, on ne peut plus rien leur cacher.
25/09/2011, 23h16
Squalthor

Pareillement, on en apprend tous les jours ;)
On ne peut plus rien leur cacher, heureusement et malheureusement, dans le cas présent heureusement car je j'étais complètement perdu... Firefox risque de m'aider moins souvent que chrome.
25/09/2011, 23h28
danielhagnoul

J'utilise aussi Firebug qui offre les mêmes outils. En fait, j'utilise souvent les deux, car il ne donne pas toujours la même information, en tout cas pas toujours de la même manière. Et sous Firefox j'utilise aussi l'extension Web Developer : http://chrispederick.com/work/web-developer/.
26/09/2011, 10h07
Squalthor

Bonjour :)

Problème résolu, il m'a fallu enlever le plugin interface. Apparement il faisait conflit avec Easing...

Maintenant qu'il est enlevé tout roule !

@ SpaceFrog: Tu devrais vérifier si ton ip n'est pas bloquée par spamassassin en regardant sur Spamhaus.org, c'est ce qui aurait pût empêcher de te connecter sur mon serveur.

@ Danielhagnoul :
Si les standards du web te tiennent à coeur je te conseille très vivement l'addon firefox HTML Validator, pour ma part je le considères indispensable.

Bonne continuation à vous et encore merci pour m'avoir apporté votre aide. :ccool:
26/09/2011, 10h42
SpaceFrog

Pour eviter les conflits entre plugins tu devrais jeter un oeil sur noConflict() de jquery ...

Pour ce qui est de la connexion hier, chrome a réussi à s'y reconnecter
pour ffx je regarderais ce soir ...
26/09/2011, 11h40
Squalthor

Bonjour SpaceFrog,

Ok, merci pour le renseignement, je vais jeter un oeil à noConflict(), comme ça j'arrêterais de perdre du temps avec ce genre de bêtises.

Si tu as pût t'y connecter avec Chrome Spamassassin n'y est effectivement pour rien.

Mais le problème ne vient pas du serveur, il est sûrement dû aux script étant donné que lorsque j'ai réglé mon problème avec Jquery html validator m'a ressorti quelques erreurs qu'il ne voyait pas avant.

Bonne journée...
26/09/2011, 12h02
danielhagnoul

Bonjour

Merci pour le conseil, mais depuis le coup du "XHTML je t'aime moi non plus", je suis en froid avec le W3C et ses méthodes.

Mes sites anciens sont encore (pour l'instant) en pseudo XHTML, mais pour les nouveaux développements qui s'adressent aux gens de la profession j'utilise depuis plus d'un an les portions d'HTML5 disponibles et de plus en plus le CSS2.1 et le CSS3.

Je ne m'occupe plus que des navigateurs IE9 et beaucoup mieux. Lorsque IE 10 sera disponible, je ne m'occuperai même plus d'IE9 qui est un veau.

Si mes pages passent sur IE9 (souvent en mode dégradé) et sur Chrome et Firefox, pour moi elles sont valides !
26/09/2011, 12h26
Squalthor

Je respecte et comprend ton point de vue, même si le mien est sensiblement différent.

Je prend soin de ne faire que des pages valides, c'est ma petite récompense personnelle, de plus je peux me le permettre étant autodidacte,travaillant pour moi, et n'ayant pas de contraintes de temps.

Mais, les standards ne sont-ils pas les garants d'un web à peu près logique ?
C'est ce qui m'avait grandement déterminé à produire un code sémantiquement correcte.

Certes pour ma part je ne regarde même plus internet explorer, j'ai trop galeré à faire des styles qui avaient pour but de s'adapter à tous les navigateurs, Microsoft ne veut pas s'adapter alors pourquoi je m'adapterais à Microsoft ? De surcroit je suis sous Linux, ce n'est donc pas aisé de pouvoir regarder le rendu sous IE !

Je suis conscient que du coup je passe à côté de pas mal de possibilités mais m'étant interdit le javascript pendant longtemps je suis content des nouvelles fonctions d'interactivité qui sont maintenant à ma portée.

Jamais entendu parlé du coup "XHTML je t'aime moi non plus", pourrais-tu m'en dire plus s'il te plait ?

Merci.
26/09/2011, 12h42
danielhagnoul

Avec Google on trouve sur la toile beaucoup de titres du style "Le W3C abandonne XHTML 2", en fait on passe du HTML4 au HTML5 et tout l'effort investi sur le XHTML passe à la trappe. Certes il est (était ?) prévu un XHTML5, mais il arrivera forcément après l'adoption du HTML5.

La discussion sur DVP : http://www.developpez.net/forums/d77...ofit-html-5-a/

Et mon message "coup de sang" sur cette discussion : http://www.developpez.net/forums/d77...a/#post4461567

Je ne pardonnerai jamais le W3C pour cet abandon.

Après avoir pris soin de mon code XHTML, je me surprends maintenant à écrire <img > ou <input > sans le / final. Ce qui est tout à fait correct, mais pas forcément recommandable, en HTML5.
26/09/2011, 12h57
Squalthor

Merci, c'est très interressant mais néanmoins pas du tout étonnant.
Je comprends le raz le bol des programmeurs web, étant de nature colérique j'en ai eu pour moins que ça, mais bizarrement pas sur ce sujet...

Pour ma part je vais continuer ainsi, petite participation à un web plus logique, moins bordélique.

Et puis tant que j'arrive à faire ce que je veux...
Raisonnement simpliste certes... mais au moins je me détache de ce genre de problèmes pour lequel je ne puis rien. :roll: