Compatibilité jquery et ui

Version imprimable

03/06/2009, 10h40
benlea

Compatibilité jquery et ui

Salut a tous,

Je suis debutante dans jquery, et la je craque !!!

Je refait ma page d'accueil
Sur ma page il y a 3 "animations" jquery
1. le menu (avec colapsor)
2. un diaporama de photo
3. des images qui deroules (slider comme dans le site d'apple)

Je me suis servit de tutoriels pour faire tout ca bien sûr
Mon problème est que le troisième est incompatible avec le 1 et le 2

Je sais que c'est un problème d'incompatibilité de version de jquery et de ui.

Mais j'arrive vraiment a le resoudre.
Si vous avez besoin de donnee plus techniques pour m'aider faites le moi savoir
Voici ma page test http://abelfranklin.com/accueilTest.php

Merci d'avance
03/06/2009, 12h02
danielhagnoul

Résultats de test :

F3, trop permissif tout s'affiche.

C2 (Chrome 2), seul le menu s'affiche.

IE8 (le moins permissif, le plus utile pour chercher un bug) : erreur ligne 143 caractère 13. Object doesn't support this property or method.

(linge 143) var itemsWidth = ul.innerWidth() - container.outerWidth();

var container = $('div.sliderGallery');

var ul = $('ul', container);

C'est ici !

je pense que vous cherchez à faire : trouve tous les ul qui existent dans div.sliderGallery

il faut donc écrire $('ul', div.sliderGallery) et non $('ul', $('div.sliderGallery'))

mais ceci retourne un tableau(array) d'élément !

S'il n'existe qu'un ul dans div.sliderGallery il faut écrire :

var ul = $("div.sliderGallery > ul");

Mais je n'ai pas réussi à trouvé la div qui a pour class sliderGallery ???

Je pense avoir modifié selon vos indication mais l'erreur persiste

voici le script modifié :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript" charset="utf-8">
        window.onload = function () {
            var container = $('div.sliderGallery');
 
            var ul = $("div.sliderGallery > ul");
            var itemsWidth = ul.innerWidth() - container.outerWidth();
 
            $('.slider', container).slider({
                min: 0,
                max: itemsWidth,
                handle: '.handle',
                stop: function (event, ui) {
                    ul.animate({'left' : ui.value * -1}, 500);
                },
                slide: function (event, ui) {
                    ul.css('left', ui.value * -1);
                }
            });
        };
    </script>

Le div class="sliderGallery est en ligne 400 ds code source d'explorer8
Pensez vous pouvoir m'aider ?

03/06/2009, 18h56
danielhagnoul

Bonsoir.

Je vous promets de regarder demain avant midi au pire et cette nuit au mieux, car je dois m'absenter toute la soirée, je suis invité :yaisse2: à festoyer à partir de 20 h. :dehors:

Bonjour.

J'ai essayé d'examiner le code (par copier-coller) dans mon outil de travail, il refuse d'afficher le code, il est bourré d'erreurs :

1. il y deux tags <title>

2. il faut déclarer les styles (link et <styyle>)avant les scripts et il faut déclarer les scripts dans un certain ordre, certains ayant besoin d'autres pour fonctionner. Pour l'instant c'est l'anarchie.

3. j'ai vu deux appels au script collapsor.

4. si vous utiliser jQuery UI, il devrait y avoir un appel <link> pour charger la feuille de style UI, je ne la vois pas.

5. il faudra remettre de l'ordre dans tout cela

6. il y un script étrange :
Code:

1 2 3 4 $((function(){ $('ul li a').collapsor(); }));
qui devrait s'écrire :
Code:

1 2 3 4 (function($){ $('ul li a').collapsor(); })(jQuery);
6. dans le <style> les tags s'écrivent en minuscules pas UL LI

7. pas

Code:

window.onload = function () {

mais du jQuery

Code:

$(document).ready(function(){

Mon attention a été retenue par tellement de choses que je n'ai pas encore traqué l'erreur.

8. dans votre page on fait appel à jQuery au chargement de la page dans plusieurs endroits, il faudrait regrouper.

9. l'appel à la bibliothèque jQuery 1.3.2 ???

10. après avoir réduit le code à la zone concernée :
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 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>accueil abel franklin : tout pour être bien</title> <style type="text/css" media="screen"> .sliderGallery { background-Color: #f7f2de; overflow: hidden; padding: 10px; height: 160px; width: 750px; position: relative; } .sliderGallery ul { position: absolute; list-style: none; overflow: none; white-space: nowrap; padding: 0; margin: 0; } .sliderGallery ul li { display: inline; } </style> <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var container = $('div.sliderGallery'); var ul = $("div.sliderGallery > ul"); var itemsWidth = ul.innerWidth() - container.outerWidth(); }); </script> </head> <body> <div class="sliderGallery"> <ul style="left: 0px;"> <li><img width="100" height="100" border="1" /></li> </ul> </div> </body> </html>
je ne vois plus le problème.