Bugs jQuery - Horizontal Accordion sur Firefox

Version imprimable

02/04/2009, 11h16
tyler94

Bugs jQuery - Horizontal Accordion sur Firefox

Bonjour à toutes et tous,

J'aimerai avoir un petit coup de main ou une explication sur un probleme qui m'ennuie enormement , je vous explique :

J'ai télécharger ce script : http://www.portalzine.de/index?/Hori...cordion--print

Quand je l'upload sur un serveur (script original sans modifs), celui ci ne fonctionne pas sur Firefox, alors que sur tous les autres navigateurs celui-ci fonctionne (Chrome, IE, Opera) tres bien.

Ce que je ne comprend pas c'est quand offline celui-ci marche très bien sous Firefox et tous les autres , donc pas très logique ...

J'ai essayé mille et une choses et mille et un hébergeur mais rien ne fonctionne donc je demande votre aide si vous avez deux minutes a me consacré

En vous remerciant car la je suis dans un beau pétrin.

Cordialement.
02/04/2009, 16h35
tyler94

re moi, je me rend compte que quand je change l'encodage de caractère dans Firefox le script fonctionnais je comprend rien.

Je n'arrête pas de chercher mais je ne trouve pas la soluce , j'ai trouvé des site qui l'utilisais et je n'ai constaté aucuns problemes

Merci à vous
02/04/2009, 19h16
tyler94

Re moi,

Dans ce cas on peut juste m'expliquer pour le script fonctionne quand on le lance le index.html à partir du répertoire sur tous les navigateurs (donc offline) et des que je le met en ligne celui ci fonctionne plus ?

Le script en DL ici :
http://www.portalzine.de/fx/fxassets...00_beta.tar.gz
03/04/2009, 08h23
andry.aime

Salut

Citation:

Dans ce cas on peut juste m'expliquer pour le script fonctionne quand on le lance le index.html à partir du répertoire sur tous les navigateurs (donc offline) et des que je le met en ligne celui ci fonctionne plus ?

Je pense que c'est un problème de chemin.
On peut voir ton code.

Bonjour,

Merci à toi de m'avoir répondu :
J'ai héberger le script ici pour l'instant : http://oxome.free.fr/01/index.html

Concernant ta demande, voici le code (j'ai juste enlevé les deux exemples qui ne me sert pas sur la page rien d'autre):

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
<!--# jQuery - Horizontal Accordion
# Version 0.5
#
# dev.portalZINE - all about development
# http://dev.portalzine.de
#
# Alexander Graef
# portalzine@gmail.com
#
# Copyright 2007
 
# If you have any questions, please use the forums to post them.
# http://community.portalzine.de/forumdisplay.php?f=37 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/ifx.js"></script>
<script type="text/javascript" src="lib/easing.js"></script>
<script type="text/javascript" src="lib/jquery.hrzAccordion.js"></script>
<script type="text/javascript" src="lib/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
 
<title>Jquery - Horizontal Accordion</title>
</head>
<body>
 
<h4># This accordion uses a custom handle content images and handles are aligned to the right.</h4>
<ul class="test3">
  <li><div class="handle3"><img src='images/com_01.gif'></div>
    <h3>Content 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
      <br>
      Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
  </li>
  <li><div class="handle3"><img src='images/com_02.gif'></div>
    <h3>Content 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
      <br>
      Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
  </li>
  <li><div class="handle3"><img src='images/com_03.gif'></div>
    <h3>Content 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
      <br>
      Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
  </li>
  <li><div class="handle3"><img src='images/com_04.gif'></div>
    <h3>Content 4</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
      <br>
      Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
  </li>
  <li><div class="handle3"><img src='images/com_05.gif'></div>
    <h3>Content 5</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
      <br>
      Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
  </li>
</ul><div style="clear:both;"></div><br /><br /><br /><br />
</body>
</html>

Par contre si c'est le chemin pourquoi il fonctionne sur tous les navigateurs mais pas sur Firefox , et pourquoi quand on change l'encodage des caracteres cela fonctionne ??

Je comprend rien sur ce coup la

Merci à toi dans tous les cas :)

A bientôt

03/04/2009, 10h43
andry.aime

Il y a six fichier dans ton lib mais tu n'as inclue que 5.

Code:

<script type="text/javascript" src="lib/jquery.hrzAccordion.packed.js"></script>
03/04/2009, 11h12
tyler94

Merci à toi mais malheureusement cela ne resoud pas le probleme
03/04/2009, 11h36
tyler94

Apres moulte teste j'ai réussi a faire ce que je souhaitais avec cela :
http://designreviver.com/tutorials/j...tal-accordion/

Par contre il me manque un truc c'est l'ouverture du premier onglet, sur le site sur la demo cela fonctionne mais perso je n'y arrive pas

Merci a vous

Bonsoir.

Avec quelques petites retouches CSS, ça marche bien. Je ne vois pas de problème.

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
 
<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Menu Horizontal</title>
    <style type="text/css">
        body {
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            background-color:#999999;
        }
        #conteneur {
            width:800px;
            height:600px;
            border:1px solid red;
            margin:12px auto;
            padding:12px;
            background-color:#000000;
        }
        ul {
          list-style: none;
          margin: 0;
          padding: 0;
          color:#ffffff;
        }
        ul li {
          float: left;
          padding: 10px;
          display: block;
          margin-right: 10px;
          background-image: url(images/bg.gif);
        }
        ul li a {
          display: block;
          overflow: hidden;
          height: 75px;
          width: 75px;
        }
        #a1 {
          width: 210px;
        }
        ul li img {
          position: absolute;
          border: 3px solid #881212;
        }
        ul li p {
          margin: 0;
          padding: 0;
          width: 120px;
          display: block;
          margin-left: 85px;
        }
    </style>
    <script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            lastBlock = $("#a1");
            maxWidth = 210;
            minWidth = 75;    
 
            $("ul li a").hover(
                function(){
                    $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
                    $(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
                    lastBlock = this;
                  }
            );
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <ul>
          <li>
            <a id="a1">
                <img src="images/free_thumb.jpg" />
                  <p>
                    <b>Freebies</b><br />
                    Download free files to make your job easier.
                  </p>
            </a>
          </li>
          <li>
            <a>
               <img src="images/tut_thumb.jpg" />
               <p>
                 <b>Tutorials</b><br/>
                 Tips and tricks to help you
                 keep up with the latest technology.
               </p>
            </a>
          </li>
          <li>
            <a>
              <img src="images/inspire_thumb.jpg" />
              <p>
                <b>Inspiration</b><br/>
                Get inspired by what other designers are doing.
              </p>
            </a>
          </li>
        </ul>
    </div>
</body>
</html>

04/04/2009, 01h21
danielhagnoul

Bonsoir.

J'ai apporté plusieurs modifications « cosmétiques » pour que cela corresponde mieux à mes besoins en cas de réemploi, mais les modifications ne changent pas le fonctionnement du menu.

Merci à toi,

Mais cette nuit j'ai enfin trouvé mon bonheur rendre compatible avec tous les navigateurs (ce script : http://www.portalzine.de/index?/Hori...cordion--print

Il suffit d'ajouté ceci pour que tout fonctionne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script type="text/javascript"> <strong class="highlight">jQuery</strong>().ready(function(){ <strong class="highlight">jQuery</strong>('#list1a').accordion({ header: '.main', authoheight: true}); <strong class="highlight">jQuery</strong>('#list1b').accordion({ header: '.main', autoheight: false }); }); </script>
Dans tous les cas merci à toi :)