[JqueryUi- easing] Implémentation de easing

**Squalthor** · 25/09/2011, 12h39

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.

**SpaceFrog** · 25/09/2011, 12h43

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 ?

**Squalthor** · 25/09/2011, 12h54

Avant toute chose: Bonjour,

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 25/09/2011, 14h59

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Squalthor** · 25/09/2011, 15h49

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...

**SpaceFrog** · 25/09/2011, 17h31

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

**Squalthor** · 25/09/2011, 18h09

Re,

Le code étant trop important je t'ai envoyé en mp un lien vers la page concernée.

**SpaceFrog** · 25/09/2011, 18h31

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

y'a rien dans le ready ???

**Squalthor** · 25/09/2011, 18h46

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...

**SpaceFrog** · 25/09/2011, 19h32

ffx.6.0.1
sous chrome page inacessible ...

**Squalthor** · 25/09/2011, 19h39

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.

**SpaceFrog** · 25/09/2011, 21h10

Je jetterais un oeil demain au boulot.
Bonne soirée

**danielhagnoul** · 25/09/2011, 21h33

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/

**Squalthor** · 25/09/2011, 22h20

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... :

$ 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.

**danielhagnoul** · 25/09/2011, 22h55

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Squalthor** · 25/09/2011, 23h00

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 ?

**danielhagnoul** · 25/09/2011, 23h09

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.

**Squalthor** · 25/09/2011, 23h16

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.

**danielhagnoul** · 25/09/2011, 23h28

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/.

**Squalthor** · 26/09/2011, 10h07

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.

[JqueryUi- easing] Implémentation de easing

jQuery

Discussions similaires

Partager

Partager